개인 프로젝트로 스트리밍 사이트 제작 — 예상보다 훨씬 오래 걸림 lol

한동안 이 프로젝트를 작업해 왔는데, 주로 개인적인 용도로 만든 멀티 페이지 스트리밍 사이트입니다. 시청 기록을 기반으로 한 개인 맞춤형 추천 행(랜덤이 아님), 장르 필터가 있는 탐색 페이지, 전체 상세 페이지, 진행 상황 추적이 포함된 에피소드 목록, 즐겨찾기, 시청 기록 등 모든 기능을 갖추고 있습니다.

제가 좀 자랑스럽게 생각하는 부분들:

• 추천 엔진은 실제로 시청 내용을 분석하고 최근 시청 기록과 방문 횟수를 가중치로 계산합니다.

• Firebase를 통해 기기 간 진행 상황이 동기화되어 보던 곳부터 바로 이어서 볼 수 있습니다.

• 상세 페이지의 배경 효과를 구현하는 데 시간이 너무 오래 걸렸지만, 그만한 가치가 있었다고 생각합니다.

• AMOLED 테마가 아주 끝내줍니다.

제작 방식:

프레임워크 없이 순수 HTML, CSS, JavaScript로 만들었습니다. 개발 내내 Claude를 주 코딩 도구로 사용했습니다. 주로 제가 원하는 것을 설명하면 Claude가 코드를 작성하거나 수정해 주었고, 뭔가 느낌이 이상할 때는 제가 다시 수정 요청을 했습니다.

사용된 API 및 도구:

• TMDB API: 모든 메타데이터, 포스터, 예고편용

• Firebase: 인증 및 기기 간 동기화용

• Supabase Edge Function: 백엔드 프록시용

• VS Code: 편집용

가장 크게 배운 점은 바이브 코딩(vibe coding)이라고 해서 뇌를 빼놓고 할 수 있는 건 아니라는 겁니다 😭 작업의 절반은 생성된 코드를 이해하고, 잘못된 부분을 잡아내고, 내가 실제로 무엇을 원하는지 파악하는 것이었습니다. CSS만 5000줄이 넘었는데 정말 저를 괴롭혔습니다.

아직 작업 중인 프로젝트이고, CSS는 한동안 엉망이었습니다(사실 지금도 정리 중입니다). 피드백 환영합니다. 부드럽게 대해주세요 😭