소개
유튜브에서 키워드로 원하는 영상을 찾고, 관련 데이터를 분석하고 싶었어요.
하지만 기존 유튜브 검색은 원하는 정보(예: 구독자 수, 영상 길이 등)를 한눈에 보기 어려웠죠.
그래서 직접 검색/분석/보관 도구를 만들어보기로 했습니다!
진행 방법
ChatGPT와 PRD 작성
→ 기능 아이디어와 구조를 ChatGPT와 대화하며 PRD로 정리이 문서에 기재된 내용을 기반으로 실행 시점의 최신 기능·최신 모델·최신 API·최신 매뉴얼을 자동으로 확인하여 최적의 앱을 구성합니다. 구체적인 UI/DB 구조/모델 설정은 자동으로 설계해주세요. ⸻ [0] 기본 정보 앱 이름: TubeInsight - 유튜브 데이터 검색 및 아카이빙 도구 앱의 주요 목적 (한 문장): 사용자가 자신의 YouTube Data API Key를 사용하여 영상을 상세 검색하고, 결과를 로컬에 보관하거나 엑셀로 내보내는 클라이언트 기반 분석 도구입니다. ⸻ [1] 앱의 주요 기능 앱에서 제공하고 싶은 핵심 기능을 자유롭게 작성하세요. Build는 아래 내용을 참고하되, 최신 기능을 우선 적용하여 최적화된 구조로 자동 구성합니다. 핵심 기능: 1. **API Key 관리 (필수)**: 사용자가 자신의 YouTube Data API Key를 입력하고 브라우저 로컬 스토리지에 안전하게 저장하여 사용하는 설정 기능. 2. **고급 검색 대시보드**: 키워드 및 채널 ID 기반 검색 지원. 필터 패널(날짜, 길이, 국가, 정렬, 조회수 등)을 통한 정밀 검색. 3. **결과 리스트 및 일괄 작업**: 검색 결과(썸네일, 제목, 채널명, 주요 지표)를 테이블 형태로 조회하고, 체크박스로 다중 선택하여 일괄 보관/내보내기 수행. 4. **로컬 보관함(Library)**: 관심 있는 영상 및 채널을 '영상 보관함'과 '채널 보관함'에 영구 저장(Local Storage). 태그 및 간단한 메모 기능 지원. 5. **데이터 내보내기**: 선택한 항목의 메타데이터를 Excel/CSV로 다운로드하거나 썸네일 이미지를 다운로드하는 기능. ⸻ [2] 사용자 흐름 사용자가 앱을 어떻게 사용할지 대표적인 흐름을 간단히 적어주세요. 상세 동작 방식과 화면 구성은 Build가 최신 매뉴얼 기준으로 자동 설계합니다. 사용자 흐름: 1. 앱 최초 접속 시, 설정 화면에서 YouTube API Key를 입력하고 유효성을 확인합니다. 2. 검색 페이지로 이동하여 검색어(예: 'AI 트렌드')를 입력하고 필터(이번 주, 조회수 순)를 적용합니다. 3. 결과 테이블에서 원하는 영상들을 체크한 후 '보관함에 저장' 버튼을 클릭합니다. 4. 보관함 페이지에서 저장된 영상 목록을 확인하고, 필요한 항목을 선택하여 'Excel 내보내기'를 수행합니다. ⸻ [3] 데이터 활용 여부 필요 시 저장 또는 조회 기능이 포함되는지 작성하세요. 구체 스키마·DB 구조는 작성하지 마세요. Build가 실행 시점의 최신 API와 권장 방식을 확인하여 자동 구성합니다. 데이터 저장/조회 기능 필요 여부: 필요 (Local Storage 및 YouTube Data API 활용) 데이터 관련 요구사항: - 외부 데이터베이스나 서버 없이 **브라우저 Local Storage**만을 사용하여 API Key, 검색 기록, 보관함 데이터(Saved Items)를 저장해야 합니다. - YouTube Data API를 호출하여 실시간 데이터를 조회합니다. ⸻ [4] 화면 구성 의도 (선언적 표현) 원하는 화면 유형을 간단히 적어주세요. UI/레이아웃/컴포넌트 배치는 Build가 최신 방식으로 구성합니다. 원하는 화면 유형: 1. **검색 화면 (3단 레이아웃)**: - 좌측/상단: 필터 패널 (검색 조건 설정) - 중앙: 결과 테이블 (썸네일, 지표 데이터) - 상단 고정: 액션 바 (선택 항목에 대한 보관/다운로드 버튼) 2. **대시보드(홈)**: 최근 검색 기록, 현재 보관된 항목 수 요약 카드 표시. 3. **보관함 화면**: 검색 결과와 유사한 테이블 구조이나, '메모' 및 '태그' 수정 컬럼이 추가됨. 4. **설정 화면**: API Key 입력 필드 및 로컬 데이터 초기화 버튼. ⸻ [5] 기타 요구사항 필요한 경우 추가 요구사항을 작성하세요. 작성된 요구사항은 Build가 최신 기능과 매뉴얼을 기반으로 자동 최적화하여 구현합니다. 기타 요구사항: - **클라이언트 사이드 전용**: 별도의 백엔드 서버 없이 프론트엔드 기술만으로 동작하도록 구성해주세요. - **URL 라우팅**: `/search`, `/library`, `/settings` 등 논리적인 주소 체계를 가져야 합니다 (SPA 형태). - **반응형 디자인**: 데스크탑 위주의 데이터 테이블이 중심이지만, 모바일에서도 조회가 가능해야 합니다. ⸻ [6] 보조 옵션 Build가 앱을 구성할 때 참고할 수 있는 옵션입니다. 작성하지 않으면 Build가 판단하여 자동 구성합니다. - 세련된 폰트의 한국어 인터페이스로 작성. ⸻ [7] 확장 가능성 향후 확장하고 싶은 아이디어가 있다면 적어주세요. Build는 “현재 작성된 PRD 범위에서 구현 가능한 수준”으로만 확장안을 반영하고, 구체 구현은 최신 기능 기준으로 자동 설계합니다. 확장 아이디어: - 보관된 영상들의 조회수 추이를 시각화하는 차트 기능 추가. - 검색 결과를 CSV 외에 PDF 리포트 형태로 내보내기. ⸻ Build 적용 지침 (중요) 아래 문장은 사용자가 수정하지 않고 그대로 Build에 들어가야 하는 고정 문장입니다: “위 PRD 내용은 실행 시점의 antigravity가 제공하는 최신 기능, 최신 모델, 최신 API, 최신 매뉴얼을 기준으로 해석하고 구현합니다. 필요한 경우 Build는 최신 버전 권장 설정을 우선 적용하여 UI·기능·데이터 구조를 자동으로 최적 설계합니다.”Antigravity에 PRD 입력
→ 자동으로 UI와 기능이 구성된 초안 앱 생성--> 검색 결과에 내용이 누락되어 아래와 같이 고도화 과정 진행
기능 고도화 요청
→ 검색 결과 테이블에 다음 feature 추가 요청:'검색', '보관함'에 검색 결과 영상의 정보 feature를 추가해줘. --- current : 썸네일, 영상/메모, 태그, 저장일 수정 후 : 넘버, 썸네일, 채널명, 제목, 업로드 날짜, 구독자수, 조회수, 채널 기여도, 성과도 배율, 영상 길이, 좋아요 수 --- 채널 기여도는 네가 구할 수 있는 계산식으로 만들어메인 페이지
검색 결과 페이지
결과와 배운 점
YouTube API가 제공하는 지표가 다양해 UI에 어떤 feature를 노출할 지가 핵심
ChatGPT + Antigravity 조합으로 계획 → 설계 → 앱 구성까지 혼자서도 순식간에 가능하다는 걸 경험
PRD가 결과물의 퀄리티를 크게 좌우해요
이후 계획.
경쟁력 있는 키워드 발굴
해당 키워드로 롱폼 시나리오 제안. 3가지 유형
