Claude Code로 YouTube형 앱을 만들 때 어려운 부분은 재생 화면 하나를 그리는 일이 아닙니다. 회원 가입부터 영상 업로드, 썸네일 선택, 재생, 제작자용 분석 화면까지 기능을 정하고 서로 연결해야 합니다. 이번 예제 앱을 만드는 과정에서는 먼저 구현 범위를 계획하고 외부 서비스를 연결한 뒤, 작동하는 기능과 모의 데이터로 채운 화면을 구분해 확인했습니다.
코드를 쓰기 전에 기능의 경계를 정합니다
첫 단계는 Claude Code의 Plan Mode(코드를 바로 수정하지 않고 구현 계획을 세우는 기능)에서 요구사항을 정리하는 것입니다. 시청자용 화면과 제작자용 관리 화면이 필요하다는 큰 목표만으로는 충분하지 않습니다. 어떤 페이지가 있어야 하는지, 로그인은 어디에 필요한지, 영상은 어떻게 올리고 재생할지까지 지정해야 합니다. 불명확한 요구사항은 Claude Code가 먼저 질문하도록 요청해 임의의 결정을 줄입니다.
초기 MVP(핵심 기능만 담은 첫 버전) 계획에는 댓글, 좋아요, 검색, 구독 기능을 넣지 않는다는 제외 조건도 있었습니다. 동시에 홈 피드, 시청 페이지, 업로드 흐름, 제작자용 화면을 포함한 구현 계획이 마련됐습니다. 생성된 계획에는 데이터 구조, 페이지 경로, 접근 정책, 외부 서비스 연동과 8개 구현 단계가 담겼습니다. 이 문서는 곧바로 실행할 명령 목록이 아니라, 개발자가 기능 범위와 연결 관계를 검토할 기준입니다. 실제 진행 중에는 처음 제외했던 댓글·좋아요·검색도 추가됐으므로, 처음 정한 범위와 나중에 확장한 범위를 구분해야 합니다.
기술 선택도 계획에 고정했습니다. 화면과 경로에는 Next.js, 스타일에는 Tailwind CSS, 인증과 데이터에는 Supabase, 영상 저장과 전송에는 ImageKit을 사용합니다. 영상 처리까지 앱 내부에서 모두 만들기보다 미디어 전용 서비스에 맡기는 구성입니다.
▲ 구현 전 설계
외부 서비스를 연결한 뒤 화면을 만듭니다
계획 다음에는 Claude Code가 필요한 도구와 자료에 접근할 수 있도록 준비했습니다. 디자인 작업용 skill(특정 작업에 쓰는 지침을 제공하는 확장 기능)을 추가하고, MCP(외부 도구와 AI를 연결하는 표준)를 통해 Supabase에 연결했습니다. ImageKit의 도구와 재생기 문서도 제공한 뒤, Claude Code가 구현 계획을 PLAN.md에 정리하도록 했습니다. 외부 서비스의 사용법을 추측하게 두기보다 해당 서비스의 문서를 구현 맥락에 넣은 셈입니다.
이후 Next.js와 TypeScript를 이용한 앱의 기본 구조를 만들고 ImageKit 연결값을 설정했습니다. 이 과정에서 비공개 키까지 Claude Code에 전달해 설정 파일을 채운 사례가 있었지만, 이를 일반적인 작업 방식으로 삼아서는 안 됩니다. 실제 프로젝트에서는 비밀값을 대화에 붙여 넣지 않고 개발자가 환경 설정 파일에 직접 넣어 관리하는 편이 적절합니다.
화면도 한 번에 모든 페이지에 적용하지 않았습니다. 별도의 /design 경로에 색상, 글꼴, 버튼, 영상 카드 등을 모은 미리보기 페이지를 만든 뒤 디자인을 확인했습니다. 그 결과를 전체 화면에 적용하는 순서였습니다. 앱이 실행된다는 사실과 여러 페이지의 화면 구성이 일관적인지는 다른 문제이기 때문입니다.
업로드부터 재생까지, 기능별로 확인합니다
회원 가입을 시험할 때는 가입 안내가 나왔지만 로그인은 실패했습니다. Supabase의 이메일 확인 설정이 확인되지 않은 계정의 로그인을 막고 있었고, 이 설정과 계정 생성 처리를 수정했습니다. 개발 중 문제를 해결한 방식과 서비스에 적용할 인증 정책은 별도로 판단해야 합니다. 오류가 나면 단순히 ‘로그인이 안 된다’고 전달하기보다, 기대한 결과와 실제 메시지를 함께 적어야 원인을 좁힐 수 있습니다.
영상 기능은 각 단계에서 확인했습니다.
- 업로드: 영상 파일과 관련 정보가 ImageKit에 저장됐는지 확인했습니다.
- 썸네일: 영상의 특정 장면을 골라 이미지로 만들거나 별도 이미지를 올리는 방식을 시험했습니다. 장면 선택 시험에는 78.6MB 파일을 사용했습니다.
- 재생과 반응: 시청 페이지에서 영상 재생, 좋아요·싫어요 전환, 댓글 등록을 확인했습니다.
- 자막: 자동 생성 자막을 시험했으며, 업로드 직후에는 음성 변환 처리에 몇 분이 걸릴 수 있었습니다.
작동한 기능과 남은 문제도 함께 봐야 합니다. 조회수가 즉시 갱신되지 않는 문제와 세로 영상의 화면 비율 조정 문제가 남아 있었습니다. 재생이 된다는 결과만으로 시청 페이지 전체가 완성됐다고 판단하기 어려운 이유입니다.
▲ 업로드 기능 검증
분석 화면은 실제 성과와 분리해 봅니다
제작자용 관리 화면에는 조회수, 시청 시간, 구독자, 반응 수와 일별 그래프가 배치됐습니다. 예를 들어 최근 28일 조회수 1.2천 회와 시청 시간 8분이 표시됐지만, 이 화면에는 시험용 채널·영상과 모의 지표가 사용됐습니다. 수치가 보인다는 사실은 분석 화면의 구성과 표시 흐름을 확인한 결과이지, 실제 이용자의 활동이 그만큼 집계됐다는 뜻은 아닙니다. 검색 결과와 시청 기록 기능도 별도로 시험했습니다.
다음 작업의 기준은 ‘보이는가’보다 ‘이어지는가’입니다
비슷한 앱을 만든다면 먼저 시청자와 제작자가 각각 해야 할 일을 적고, 첫 버전에서 제외할 기능까지 명시하는 것이 좋습니다. 그다음 계획의 데이터 구조·페이지·접근 조건을 검토하고, 필요한 서비스 문서를 제공한 뒤 구현을 시작합니다. 화면 디자인은 별도 페이지에서 먼저 확인할 수 있습니다.
마지막 확인은 기능별로 나눠야 합니다. 가입한 계정으로 로그인되는지, 올린 영상이 저장되고 재생되는지, 선택한 썸네일과 자막이 반영되는지 직접 시험합니다. 분석 화면의 모의 수치는 실제 집계와 구분하고, 조회수 갱신이나 세로 영상 배치처럼 남은 문제는 별도 수정 항목으로 기록합니다.
Claude Code가 구현 속도를 높일 수는 있지만, 앱의 완료 기준을 정하고 충족 여부를 확인하는 일은 개발자의 몫입니다.