[토이프로젝트] 유튜브 타임라인 메모 서비스

왜 만들었는가?

종종 보던 유튜브 영상을 나중에 다시 보고 싶어서 재생목록을 만들고 저장하곤 한다.

하지만 아쉬웠던 건 이제 내가 원하는 지점을 찾는게 다소 불편함이 있었다.

영상이 짧으면 다행이지만, 영상이 길거나 어느 지점이였는지 기억을 못하는 경우 찾는데 시간이 걸린다는 문제가 있었다.

그래서 그 문제를 해결해보고자 만들어 봤다.

 

유튜브 영상을 보면서 "내가 원하는 지점"에 "내가 원하는 내용"을 메모할 수 있는 서비스를 만들어보자! 해서 시작했다.

 

어떤 서비스 인가?

유튜브 영상의 특정 시점에 메모를 남기고, 메모를 클릭하면 해당 장면으로 즉시 이동하는 웹 서비스이다.

공부 중인 강의 영상에서 핵심 개념이 나오는 구간,
게임 공략 영상에서 보스 패턴이나 아이템 위치 같은 장면,
반복해서 돌아가고 싶은 모든 시점을 북마크처럼 저장할 수 있다.

 

주요 기능

  - 타임스탬프 메모 — 영상 재생 중 버튼 하나로 현재 시각이 자동으로 찍힌 메모 저장
  - 타임라인 점프 — 저장된 메모 클릭 시 해당 시점으로 즉시 이동
  - 메모 인라인 편집 — 더블클릭으로 바로 수정 (Enter 저장 / Esc 취소)
  - 컬렉션 — "React 강의", "발더스게이트 공략" 같이 영상을 주제별로 묶어 관리
  - 공유 링크 — 내 타임라인 메모를 링크 하나로 공유 (받는 사람은 로그인 불필요)
  - 게스트 모드 — 회원가입 없이 바로 체험, 나중에 Google 계정으로 연결 시 데이터 유지

 

기술 스택 선택

별도의 백엔드 없이 Next + Firebase 단일 스택으로 구성하는 것을 목표로 했다.

프론트는 버셀을 통해 쉽게 배포할 수 있는 반면, 백엔드의 경우 버셀 같은 서비스들을 몇개 찾아봤는데 사용법이 다소 껄끄러웠고 프로젝트 규모상 백엔드는 생각 없었다.

혼자 만드는 프로젝트인 만큼 인프라 관리 부담을 최소화하고 싶었다.

 

고민했던 것

게스트 모드에 대해서 처음에 생각을 하지 않았었다.

처음 만들고 도메인도 연결해서 몇몇 사이트에 홍보를 해봤으나

많은 사람들이 로그인 페이지에서 더이상 진행하지 않는 것을 확인했다.

아무래도 처음보는 사이트에 구글로그인 한다는 거에 대해 불편함이 있는 걸로 보였다.

그래서 게스트 모드를 추가하고, 게스트도 동일한 기능을 사용할 수 있으며 나중에 구글 연동시 데이터를 그대로 옮길 수 있는 방법이 좋을 것 같다는 생각에 추가했다.

 

처음에는 로컬스토리지에 UUID를 저장하는 방식으로 고려했다.

하지만 파이어베이스 보안 규칙이 request.auth.uid 기반이라 익명 유저에게는 별도 규칙을 추가해야 하고,

세션 쿠키 방식과 일관성이 깨졌다.

 

Firebase Anonymouse Auth를 사용하면 익명 유저도 실제 UID를 가지기 때문에 기존 보안 규칙을 그대로 사용할 수 있고,

세션 쿠키 발급 흐름도 구글 로그인과 동일해서 이 기능을 사용했다.

 

 

 

구현 화면

최초 접속 화면

구글 로그인 또는 게스트 모드를 선택 할 수 있다.

로그인 후 보여지는 대시보드 화면으로 추가한 영상과 컬렉션을 볼 수 있다.

영상을 추가하고 클릭하면 타임라인에 메모할 수 있는 페이지로 이동된다.

추가한 영상은 컬렉션으로 따로 모아서 볼 수 있다.

내가 만든 타임라인을 타인에게 공유할 수 있다.

공유된 링크로 보는 화면이고, 로그인 없이 볼 수 있다.

사이트 링크

https://www.yttm.kr/

YouTube Timeline Memo