물론이죠! 지금까지 만든 Viral Finder의 구조와 앞으로 사용하는 방법을 한 번에 정리해 드릴게요.

먼저 가장 중요한 결론부터 말씀드리면, 이제 Viral Finder는 특정 컴퓨터에 설치해서 사용하는 프로그램이 아니라, 인터넷에 접속하면 어디서든 사용할 수 있는 웹사이트가 됐습니다.

1. GitHub와 Cloudflare는 연동이 잘 된 건가요?

네. GitHub Actions를 통한 자동 배포 연결이 정상 작동하는 것을 확인했습니다.

다만 GitHub와 Cloudflare의 기본 제공 Git 연결 기능이 아니라, 우리가 직접 설정한 GitHub Actions 방식으로 연결했습니다. 실제 자동 배포 테스트도 성공했어요.

여기에 YouTube Data API가 추가로 연결되어 실제 유튜브 영상을 검색해 주는 구조입니다.

2. 다른 컴퓨터에서도 수정된 내용을 사용할 수 있나요?

네, 가능합니다. 예를 들어 다음과 같이 사용하면 됩니다.

1. 집 노트북에서 GitHub의 src.jsx 파일을 수정합니다.

2. 수정한 내용을 main 브랜치에 Commit합니다.

3. GitHub Actions가 자동으로 실행되어 Cloudflare에 새 버전을 배포합니다.

4. 회사 컴퓨터에서 같은 웹사이트 주소로 접속합니다.

5. 새롭게 반영된 Viral Finder를 사용할 수 있습니다.

이 과정에서 회사 컴퓨터에 Node.js나 개발 프로그램을 설치할 필요는 없습니다.

단, 코드가 자동으로 동기화되는 것과 사용자 데이터가 동기화되는 것은 다릅니다. 예를 들어 즐겨찾기가 브라우저의 로컬 저장소에 보관되는 구조라면 집 컴퓨터의 즐겨찾기는 회사 컴퓨터로 자동 이전되지 않습니다. 나중에 계정별 데이터 동기화 기능을 별도로 개발할 수 있습니다.

3. Viral Finder의 웹사이트 주소

이 주소를 즐겨찾기에 등록해 두시면 편리합니다.

현재 별도 접근 제한을 설정하지 않았기 때문에 주소를 아는 다른 사람도 접속할 수 있는 공개 웹사이트입니다.

4. 앞으로 Viral Finder를 개발할 때 대화를 어떻게 관리하면 좋을까요?

제가 추천하는 방법은 GitHub를 코드의 원본으로 관리하고, ChatGPT에는 개발 내용을 요약한 문서를 함께 전달하는 방식입니다.

ChatGPT 대화만으로 프로젝트를 관리하면 나중에 코드가 여러 버전으로 나뉘거나 어떤 수정이 실제로 반영됐는지 헷갈릴 수 있습니다.

반면 GitHub에는 실제 코드와 수정 이력이 남습니다.

가장 편리한 방법은 다음과 같습니다.

• GitHub: 실제 코드와 수정 이력 보관

• GitHub의 README.md: 프로젝트 기능, 구조, 개발 규칙 기록

• ChatGPT: 기능 기획, 코드 수정, 오류 해결

새 채팅을 시작할 때 GitHub 저장소 링크와 함께 무엇을 수정하고 싶은지 알려주면 됩니다. 필요하다면 실제 소스 파일을 업로드해 주시면 가장 정확하게 작업할 수 있어요.

또한 코드를 수정할 때는 현재 작동하는 버전을 보존하고, 수정 내용을 테스트한 뒤 배포하는 습관을 권장합니다.

5. Viral Finder의 URL 주소를 바꿀 수 있나요?

네. 크게 두 가지 방법이 있습니다.

방법 A. 무료 pages.dev 주소 변경

현재 주소는 다음과 같습니다.

viral-finder.pages.dev

Cloudflare의 프로젝트 설정에서 이름 변경 기능을 제공하는 경우, 프로젝트 이름을 바꾸면 pages.dev 주소도 변경할 수 있습니다.

Cloudflare Pages docs

진행 경로는 다음과 같습니다.

1. Cloudflare 대시보드에 접속합니다.

2. Compute → Workers & Pages → viral-finder를 선택합니다.

3. Settings에서 프로젝트 이름 변경 항목을 찾습니다.

4. 원하는 이름으로 변경합니다.

다만 현재 자동 배포 코드에 --project-name viral-finder가 들어 있기 때문에, 프로젝트 이름을 바꾸면 GitHub의 deploy.yml도 수정해야 합니다. 그렇지 않으면 자동 배포가 실패할 수 있어요.

방법 B. 나만의 도메인 연결

예를 들어 myviralfinder.com 같은 주소를 직접 구매한 뒤 연결할 수도 있습니다.

Cloudflare에서 Workers & Pages → viral-finder → Custom domains → Set up a domain으로 들어가면 됩니다.

Cloudflare Pages docs

이 방법은 기존 프로젝트 이름을 유지하면서 새로운 주소를 추가할 수 있어 관리하기 편합니다. 다만 도메인 구매 및 갱신 비용은 별도입니다.

지금은 자동 배포까지 정상적으로 설정했으므로, 주소를 꼭 바꿔야 하는 상황이 아니라면 현재 주소를 유지하는 것을 추천합니다.

6. 얼마나 많은 사람이 사용할 수 있고, 평생 무료인가요?

이 부분은 조금 중요합니다. Viral Finder는 단순히 웹페이지를 보여주는 사이트가 아니라 유튜브 API를 호출하는 검색 서비스이기 때문에 여러 종류의 사용량 제한이 적용됩니다.

2026년 10월 기준 공식 문서를 확인한 결과입니다.

Cloudflare의 정적 파일 요청은 무료로 무제한 제공되지만, 실제 검색을 처리하는 Pages Functions에는 Workers 무료 한도가 적용됩니다.

Cloudflare Pages docs

+2

특히 Viral Finder에서 먼저 확인해야 할 제한은 YouTube API입니다.

Google의 최신 문서에는 기본 검색 API 호출 할당량이 하루 100회로 안내되어 있습니다. 실제 프로젝트의 할당량은 Google Cloud Console에서 확인해야 하며, 한 번의 Viral Finder 검색이 여러 언어로 API를 호출한다면 검색 버튼 한 번에 여러 호출을 소비할 수 있습니다.

Google for Developers

+1

예를 들어 한 번 검색할 때 YouTube 검색 API를 5회 호출한다면, 하루 검색 API 호출 100회 기준으로는 약 20번의 검색이 가능합니다. 이건 예시 계산이며 실제 사용 가능 횟수는 현재 코드의 호출 방식과 프로젝트 할당량에 따라 달라집니다.

평생 무료로 사용할 수 있을까요?

현재 무료 한도 안에서 사용한다면 비용 없이 계속 운영할 수 있습니다. 다만 서비스 제공업체가 미래에도 동일한 무료 정책을 유지한다고 보장할 수는 없으므로, 평생 무료라고 확답하기는 어렵습니다.

현재처럼 개인적으로 사용하는 용도라면 무료 운영을 우선 시도하기에 적합합니다.

제가 추천하는 다음 개선 작업은 접근 제한 설정과 YouTube API 사용량 관리입니다. 지금은 사이트 주소를 아는 사람이 누구나 검색할 수 있으므로, 다른 사람의 검색으로도 API 할당량이 소모될 수 있습니다.

정리하면, Viral Finder의 개발·배포 환경은 성공적으로 구축됐습니다. 이제 GitHub에서 기능을 수정하고 저장하면 자동 배포할 수 있으며, 여러 컴퓨터에서 동일한 URL로 사용할 수 있습니다.

앞으로 기능 개발을 이어갈 때는 GitHub의 최신 코드와 README.md를 기준으로 작업하는 것이 가장 안정적입니다.

네, 맞아요! 👍 GitHub에 저장된 최신 코드를 ChatGPT에 전달하고, 추가하고 싶은 기능을 설명하면 됩니다.

다만 코드를 하나씩 복사해서 붙여넣는 것보다 GitHub 프로젝트 전체를 ZIP 파일로 다운로드해서 업로드하는 방법을 추천해요.

앞으로 추천하는 개발 방법

수정이 끝나면 어떻게 하나요?

제가 수정한 파일을 제공하면 GitHub의 기존 파일을 교체하거나 새로운 파일을 추가하고, main 브랜치에 Commit하면 됩니다.

꼭 기억할 점이 두 가지 있습니다.

첫째, GitHub의 코드는 최신 버전이어야 합니다. 이전 ZIP 파일로 작업하면 최근 수정 사항이 사라질 수 있습니다.

둘째, .env 파일이나 YouTube API 키, Cloudflare API 토큰 같은 비밀 정보는 ChatGPT에 업로드하거나 GitHub에 올리지 마세요. .env.example처럼 실제 키가 없는 예시 파일은 괜찮습니다.

결론적으로 앞으로는 새로운 채팅을 열어도 괜찮습니다. GitHub에서 최신 ZIP 파일을 다운로드해 전달하면, 이 긴 대화를 다시 설명하지 않고도 Viral Finder 개발을 이어갈 수 있어요.

네, 정확하게 이해하셨어요! 👍

이제 처음 컴퓨터에서 만들었던 src.jsx 파일을 수정할 필요 없이 GitHub에 있는 코드를 수정하면 됩니다.

그리고 기존에 다운로드했던 ZIP 파일과 개발용 폴더도 대부분 삭제해도 괜찮습니다. 다만 몇 가지 확인할 사항이 있어요.

1. 앞으로는 GitHub에서만 수정하면 되나요?

네. 현재 구축한 환경에서는 다음과 같이 작동합니다.

예를 들어 GitHub에서 src.jsx 파일을 열고 연필 모양의 편집 버튼을 눌러 코드를 수정한 다음, Commit changes를 클릭하면 됩니다.

GitHub Actions가 자동으로 실행되고 배포에 성공하면 https://viral-finder.pages.dev 에 수정 내용이 반영됩니다.

단, 코드 수정에 오류가 있으면 배포가 실패하거나 사이트 기능에 문제가 생길 수 있으므로 수정 후 확인은 필요합니다.

2. 컴퓨터에 있는 파일들은 삭제해도 되나요?

현재 GitHub에 필요한 프로젝트 코드가 모두 올라가 있고 자동 배포까지 성공했으므로, 로컬 개발 파일은 웹사이트 운영에 더 이상 필수적이지 않습니다.

여기서 한 가지 주의할 점이 있습니다.

로컬 폴더에 GitHub에 올리지 않은 최신 수정 사항이나 실제 .env 파일이 있다면, 삭제하기 전에 필요한 내용이 있는지 확인하세요.

또한 처음 만들었던 프로젝트 폴더를 삭제하더라도 GitHub와 Cloudflare에 있는 파일이 함께 삭제되는 것은 아닙니다.

3. 제가 추천하는 정리 방법

당장 전부 삭제하기보다는 다음처럼 정리하는 것을 추천합니다.

1. 기존 ZIP 파일 중 오래된 버전은 삭제합니다.

2. 가장 마지막에 정상 작동했던 프로젝트 ZIP 파일 하나만 백업으로 보관합니다.

3. 나머지 개발용 폴더는 필요 없으면 삭제합니다.

4. 앞으로 개발할 때는 GitHub에서 최신 코드를 다운로드하거나 직접 수정합니다.

이렇게 하면 컴퓨터 공간도 확보하면서 혹시 모를 상황에 대비할 수 있습니다.

결론은 간단합니다.

이제 Viral Finder의 기준이 되는 코드는 GitHub의 nicepriceice/viral-finder 저장소입니다.

집 컴퓨터든 회사 컴퓨터든 GitHub에서 코드를 수정하고 Commit하면 Cloudflare에 자동 배포됩니다. 기존 컴퓨터에 있던 개발용 파일은 더 이상 웹사이트 실행에 필요하지 않습니다.

그리고 앞으로 저와 함께 기능을 추가할 때도 GitHub에서 최신 ZIP을 다운로드해 보내주시면 됩니다.

사진에 있는 파일들을 확인했어요. 👍

현재 GitHub 자동 배포가 성공했으므로 기존 Viral Finder 개발용 폴더는 삭제해도 웹사이트 운영에 영향을 주지 않습니다.

압축파일과 설치파일은 전부 삭제하신다고 했으니, 폴더 4개만 구분해서 알려드릴게요.

삭제해도 되는 폴더

제 추천

앞의 폴더 3개는 삭제하고, viral-finder-cloud-v1.3만 당분간 보관하세요.

이 폴더도 GitHub에 모든 최신 코드가 올라가 있다면 삭제할 수 있습니다. 다만 혹시 GitHub에 올리지 않은 설정 파일이나 작업 내용이 있을 수 있으므로 마지막 버전 하나 정도는 백업해 두는 편이 안전합니다.

특히 viral-finder-cloud-v1.3 폴더 안에 .env 파일이 있다면 삭제 전에 확인하세요. 실제 YouTube API 키가 들어 있을 수 있습니다.

추가로 알아두실 점

사진의 node-v24.22.0-x64는 Node.js 설치파일입니다. 설치를 이미 완료했다면 삭제해도 Node.js 프로그램 자체가 제거되지는 않습니다.

또한 ChatGPT Installer도 ChatGPT 설치가 끝났다면 설치파일을 삭제해도 괜찮습니다.

결론: 오늘은 viral-finder, viral-finder-v1.1, viral-finder-v1.2-launcher 폴더를 삭제하고, viral-finder-cloud-v1.3만 임시로 남겨두는 것을 추천합니다.

이후 GitHub에 코드가 모두 보관된 것을 확인하면 마지막 폴더도 삭제해도 됩니다.

네. 결론부터 말씀드리면 처음부터 GitHub와 Cloudflare를 이용해 지금처럼 개발했다면, 컴퓨터에 Node.js를 설치하지 않아도 됐습니다.

다만 처음에는 컴퓨터에서 직접 웹사이트를 만들고 테스트했기 때문에 Node.js가 필요했던 거예요.

1. Node.js는 어떤 역할을 하나요?

Node.js는 컴퓨터에서 JavaScript 기반 개발 도구를 실행할 수 있게 해주는 프로그램입니다.

우리가 Viral Finder를 만들 때 사용했던 명령어를 기억하시나요?

이 작업들을 컴퓨터에서 실행할 수 있도록 해준 것이 Node.js입니다.

2. 지금은 Node.js가 어디에서 실행되나요?

현재 GitHub에 저장한 deploy.yml 파일에는 다음과 같은 설정이 들어 있습니다.

- name: Set up Node.js
  uses: actions/setup-node@v4
  with:
    node-version: '22'

이 설정 덕분에 GitHub Actions의 실행 컴퓨터에서 Node.js를 자동으로 준비합니다.

따라서 집이나 회사 컴퓨터에 Node.js가 없어도 GitHub 웹사이트에서 코드를 수정하고 배포할 수 있어요.

3. 그렇다면 컴퓨터에서 Node.js를 삭제해도 될까요?

네. 앞으로 GitHub 웹사이트에서만 Viral Finder를 수정할 계획이라면 Node.js를 제거해도 괜찮습니다.

단, 다음 두 가지를 구분하세요.

• Node.js 설치파일 삭제: 다운로드 폴더의 node-v24.22.0-x64 파일만 삭제하는 것입니다.

• Node.js 프로그램 제거: Windows 설정 → 앱 → 설치된 앱 → Node.js → 제거를 선택하는 것입니다.

둘 다 현재 Cloudflare에 배포된 Viral Finder에는 영향을 주지 않습니다.

다만 앞으로 컴퓨터에서 직접 코드를 실행하거나 수정 결과를 미리 테스트하고 싶다면 Node.js가 다시 필요할 수 있습니다.

제 추천은 지금 당장 Node.js 프로그램까지 제거할 필요는 없다는 것입니다. 용량이 크게 부담되지 않는다면 설치 상태로 두고, 다운로드한 설치파일만 삭제해도 충분합니다.

결국 지금 구축한 방식의 가장 큰 장점은 어떤 컴퓨터에서든 GitHub에 접속해 코드를 수정하고 저장하면, GitHub가 알아서 웹사이트를 만들어 Cloudflare에 배포해 준다는 것입니다.

앞으로 Viral Finder처럼 웹사이트를 계속 만드실 계획이라면, 저는 GitHub로 코드를 관리하면서 Node.js로 먼저 테스트하고, 정상 작동하는 버전만 Cloudflare에 배포하는 방식을 가장 추천합니다.

사실 Node.js와 GitHub는 둘 중 하나를 선택하는 관계가 아니에요. 서로 역할이 다릅니다.

1. 두 가지 개발 방식 비교

2. 제가 추천하는 개발 방식

여기서 핵심은 GitHub에는 처음부터 코드를 저장하되, 실제 공개 전에 Node.js로 테스트하는 것입니다.

예를 들어 Viral Finder에 새로운 검색 기능을 추가한다고 가정해 볼게요.

1. 컴퓨터에서 코드를 수정합니다.

2. npm run dev를 실행해 브라우저에서 수정된 화면을 확인합니다.

3. 기능이 정상 작동하는지 테스트합니다.

4. GitHub에 수정 내용을 업로드합니다.

5. GitHub Actions가 Cloudflare에 자동 배포합니다.

이렇게 하면 오류가 있는 기능을 실제 웹사이트에 바로 반영할 위험을 줄일 수 있습니다.

단, Viral Finder처럼 서버 기능이 있는 프로젝트는 npm run dev만으로 모든 API 기능을 테스트할 수 있는 것은 아닙니다. Cloudflare Functions까지 확인하려면 별도의 로컬 실행 환경이 필요할 수 있어요.

3. 그렇다면 GitHub에서 바로 만드는 방식은 언제 좋을까요?

다음과 같은 작업이라면 GitHub에서 직접 수정하는 것으로도 충분합니다.

• 글자나 설명 문구 변경

• 버튼 이름 변경

• 간단한 디자인 수정

• 작은 오류 수정

반면 다음과 같은 작업에는 로컬 테스트를 추천합니다.

• 새로운 검색 기능 추가

• YouTube API 호출 방식 변경

• 여러 파일을 동시에 수정

• 로그인 및 사용자 계정 기능 추가

• 데이터베이스 연결

특히 지금 Viral Finder는 main 브랜치에 코드를 저장하면 실제 웹사이트로 자동 배포되므로, 복잡한 수정은 별도 브랜치에서 먼저 테스트하는 방식이 더 안전합니다.

결론

앞으로도 Node.js는 설치해 두시는 것을 추천합니다.

하지만 처음처럼 매번 ZIP 파일을 만들고, 수동으로 Cloudflare에 업로드하는 과정은 반복할 필요가 없습니다.

앞으로는 다음 원칙만 기억하시면 됩니다.

GitHub = 코드의 원본

Node.js = 개발 및 테스트 도구

Cloudflare = 완성된 웹사이트 운영

그리고 지금처럼 저와 함께 개발한다면, 간단한 수정은 GitHub에서 바로 진행하고, 큰 기능을 추가할 때는 제가 수정된 프로젝트 파일을 제공한 뒤 테스트하는 방식으로 진행하면 됩니다.

장기적으로 여러 웹사이트를 만드실 계획이라면 이 조합이 훨씬 효율적입니다.

가능해요! 👍 오늘 만든 Viral Finder에 **즐겨찾기 아이콘(Favicon)**을 설정하면 됩니다.

파비콘은 브라우저 탭이나 즐겨찾기 목록에서 웹사이트 이름 옆에 표시되는 작은 아이콘이에요.

1. 먼저 아이콘 이미지 준비하기

Viral Finder는 유튜브 바이럴 영상을 찾는 서비스이므로 이런 디자인이 잘 어울릴 것 같아요.

검색 + 재생

VF 로고

바이럴 트렌드

이미지는 정사각형 PNG 파일로 준비하면 편합니다. 512×512px 정도를 추천해요.

2. GitHub에 아이콘 업로드하기

1. Viral Finder GitHub 저장소를 엽니다.

2. Add file → Upload files를 클릭합니다.

3. 준비한 이미지를 favicon.png라는 이름으로 업로드합니다.

4. Commit changes를 클릭합니다.

현재 프로젝트 구조에서는 이미지 파일을 저장소 최상위에 넣어도 됩니다.

3. index.html 수정하기

GitHub에서 index.html을 열고 연필 모양 편집 버튼을 클릭하세요.

<head>와 </head> 사이에 다음 코드를 추가합니다.

<link rel="icon" type="image/png" href="/favicon.png" />

그다음 Commit changes를 클릭하세요.

다만 한 가지 확인이 필요합니다. 현재 Viral Finder는 Vite로 빌드하기 때문에 정적 파일은 일반적으로 public 폴더에 넣어야 합니다. 따라서 실제로는 public/favicon.png 경로에 업로드하는 것이 올바른 방법입니다. GitHub에서 새 파일을 추가할 때 해당 폴더를 만들거나, ZIP 프로젝트를 수정해서 업로드할 수 있어요.

4. 자동 배포 확인하기

GitHub에 저장하면 앞서 설정한 GitHub Actions가 자동으로 실행됩니다.

배포에 성공한 뒤 https://viral-finder.pages.dev 에 접속하면 브라우저 탭에 새로운 아이콘이 표시됩니다.

기존 아이콘이 계속 보인다면 Ctrl + F5로 새로고침하거나 브라우저를 다시 열어보세요.

제안: 먼저 Viral Finder 전용 아이콘부터 만들어볼까요?

개인적으로는 검은색 배경에 흰색 돋보기와 빨간색 재생 버튼을 결합한 심플한 디자인을 추천합니다. 작은 즐겨찾기 아이콘으로 표시되어도 알아보기 쉬운 형태예요.