타임핀 - 유튜브 타임라인 기반 메모 서비스

1. 서비스를 만들게 된 이유

저는 평소에 유튜브를 보면서 제가 얻은 인사이트를 Notion에 정리하곤 합니다.

평소에는 Notion이 필기 앱 중 가장 편리하다고 생각하는데
유튜브 영상을 보면서 필기를 하다 보면 항상 아쉽다는 생각이 들었어요

- 화면의 그래프와 같이 설명이 나오는 경우 일일이 직접 스크린샷을 떠야 하는 것도 불편했고 
- 무엇보다 내가 지금 메모하고 있는 내용이 어느 시간대에 나왔던 내용인지 다시 찾아보려고 하면 또 상당한 시간을 소모해야 했죠

그래서 이 서비스를 만들기 전에 내가 가진 문제를 해결할 수 있는 서비스가 없을까 찾아보기도 했고 ChatGPT에 Deep Research(심층 리서치)에서 소개해 준 서비스를 하나씩 들어가 보고 사용해 봤지만 내 마음에 쏘옥 드는 서비스는 발견하지 못했습니다

서비스 개발을 할까 말까에 대한 고민

여태까지 서비스 개발을 해오면서 느낀 점이 비타민(필요하지만 없어도 되는 서비스) 같은 서비스 보다 진통제(없으면 곤란한 서비스) 같은 서비스를 만들고 싶다고 생각했어요
그래서 이번 서비스가 비타민 서비스가 되지 않을까 망설여지기도 했습니다.
그래도 제가 서비스 개발을 진행하기로 한 이유는
저와 같은 사람이 많을 것이라는 확신과 이런 사람들이 문제를 반복적으로 겪고 있다면 이 문제 또한 진통제가 될 수 있을 것이라고 생각이 들었어요

 2. 왜 기한을 1주일로 잡았을까?
 

제가 1주일 만에 서비스 개발을 해보겠다고 한 이유는 3가지예요

1. 바이브 코딩(Replit)으로 프론트엔드(React)의 많은 부분 활용 가능
2. 외부 BaaS로 공통 기능 구현 시간 단축(Clerk, Resend 등)
3. TaskMaster MCP 등 AI 활용을 통해 서비스 개발 시간 단축

많은 개발자들이 AI 때문에 일자리를 뺏길까 걱정하지만 저는 오히려 AI의 발전 및 바이브 코딩이 생산성 향상 및 1인 사업을 하기에 최적화된 환경을 제공해준다고 생각해요

불과 2~3년 전만 해도 같은 분량의 프론트엔드 구현에만 1~2개월을 족히 걸렸을 사이즈인데 지금은 기획만 조금 가다듬어서 '딸깍'하면 70~80%까지는 AI가 구현해 주니 개발 코스트가 말도 안 되게 낮아졌다고 생각해요

3. 서비스 개발 Flow

이번 프로젝트에서는 가장 먼저 ChatGPT한테 1주일짜리 개발 일정을 만들어 달라고 요청했어요
GPT가 만들어준 일정을 기반으로 작업하되 저만의 workflow를 결합시킬 예정이에요

- 프론트엔드는 React로 구현하고 많은 부분을 바이브 코딩(레플릿)으로 위임
- 백엔드 개발을 Nest.js + PostgreSQL로 작업하고 많은 부분을 TaskMaster MCP를 통해 개발(with Windsurf)

아래는 GPT가 만들어준 1주일 일정표입니다.

🗓️ 1주일 일정표

Day 1 - 설계 및 초기 셋업

- [ ]  기능 정리 (기획 + 우선순위 확정)
- [ ]  Clerk 대시보드 프로젝트 생성
- [ ]  React 프로젝트 생성 (Vite + Tailwind + TypeScript)
- [ ]  ClerkProvider 설정 및 `useUser()`로 로그인 상태 확인
- [ ]  NestJS 프로젝트 생성 + PostgreSQL 연결 (TypeORM/Prisma)
- [ ]  DB 설계: `users`, `videos`, `notes` 테이블 스키마 정의

---

Day 2 - 유튜브 영상 등록 및 재생

- [ ]  유튜브 링크 등록 → `videoId` 추출
- [ ]  영상 메타데이터와 함께 백엔드 저장 (POST `/videos`)
- [ ]  YouTube Iframe API 연동 → `playerRef.current.getCurrentTime()` 추적

---

Day 3 - 시점 기반 메모 저장 기능

- [ ]  메모 입력 UI 구성
- [ ]  메모 저장 시 `timestamp` + `videoId` + `userId(Clerk ID)` 포함
- [ ]  NestJS API: POST `/notes`
- [ ]  DB에 메모 저장 확인

---

Day 4 - 메모 목록 + 점프 기능

- [ ]  해당 영상의 메모 리스트 표시 (GET `/videos/:id/notes`)
- [ ]  메모 클릭 → 영상 해당 시점으로 점프 (`seekTo`)
- [ ]  하이라이트 및 간단한 태그 UI 추가

---

Day 5 - 노트/노트 상세/홈 페이지

- [ ]  홈: 최근 노트 요약 리스트
- [ ]  노트 목록: `/notes` (전체 영상 노트 리스트)
- [ ]  노트 상세: 영상 + 해당 메모 전체 조회

---

Day 6 - UI/UX 다듬기 + 배포 준비

- [ ]  반응형/간단한 스타일링 정리
- [ ]  로그인 상태별 메뉴 표시 분기
- [ ]  에러 핸들링 및 API 리팩토링
- [ ]  Vercel 프론트엔드 배포
- [ ]  Render 또는 Railway로 Nest.js/DB 배포

---

Day 7 - 테스트 + 피드백 수집

- [ ]  테스트 계정으로 로그인 및 시나리오 테스트
- [ ]  클로즈드 베타 신청 폼 (Tally or Google Form)
- [ ]  친구/지인에게 공유 → 피드백 수집
- [ ]  작은 개선 반영

---

4. 마무리

아마 위 일정과 완전히 똑같이 가지는 않을 것 같지만 일정을 잡아놓는 것만으로도 어느 정도 방향이 정리되는 것 같아요
앞으로의 서비스 개발이 궁금하시면 제 계정을 팔로우하시고 뒤에 이야기도 지켜봐 주세요!