최근 Claude Code와 함께 작은 로컬 서비스 앱을 하나 만들었습니다. 사진이나 짧은 영상을 업로드하면 9:16 세로 비율의 MP4를 생성해 주는 '쇼츠/릴스 생성기'입니다.
아직 누구나 접속해서 사용할 수 있는 웹서비스는 아닙니다. 제 로컬 환경에서 실행되는 MVP(최소 기능 제품) 1단계 수준이죠. 하지만 이번 작업은 저에게 꽤 큰 의미가 있었습니다. 아이디어를 실제로 작동하는 앱으로 구현해 냈고, 기능을 하나씩 추가하면서 오류를 확인하고, 어느 지점까지를 1단계 완료로 볼지 스스로 판단했기 때문입니다.
왜 만들게 되었나: 반복 작업의 병목
쇼츠나 릴스를 만들 때마다 반복되는 지루한 과정들이 있습니다. 사진을 세로 비율로 맞추고, 영상을 자르고, 배경음악을 넣고, 텍스트를 얹어 다시 MP4로 내보내야 합니다.
처음에는 그냥 편집 프로그램으로 직접 하면 된다고 생각했습니다. 하지만 계속 만들다 보니 편집 자체보다 이 '반복 작업' 자체가 가장 큰 병목이 되었습니다. 그래서 생각했습니다. "사진이나 짧은 영상을 넣으면 기본적인 쇼츠/릴스용 MP4를 자동으로 뚝딱 만들어 주는 로컬 도구가 있으면 어떨까?" 이번 MVP는 이 단순한 아이디어에서 출발했습니다.
![]() |
| 드래그 앤 드롭으로 사진과 영상을 업로드하는 쇼츠 생성기 로컬 MVP 메인 화면 |
기술 구조: 초보자도 이해할 수 있는 구성
웹 화면과 백엔드 서버를 나누어 구성했습니다. 복잡한 서비스를 만들려는 게 아니었기에, "파일 업로드 후 9:16 세로 MP4 생성"이라는 핵심 기능에 집중했습니다.
- Next.js: 눈에 보이는 웹 화면을 담당하는 프론트엔드
- FastAPI: 업로드와 요청을 처리하는 백엔드 서버
- FFmpeg: 영상 변환과 합성을 담당하는 도구
- Pillow: 텍스트 카드 이미지를 만드는 이미지 처리 도구
AI 시대, 개발의 역할 분담
이번 작업에서 가장 중요한 포인트는 '내가 직접 코드를 짜지 않았다'는 것입니다. 실제 구현은 Claude Code가 담당했습니다. 하지만 그렇다고 해서 사람이 아무것도 안 해도 되는 것은 결코 아니었습니다.
- 나의 역할: 방향 설정, 기능 정의, 결과물 테스트, 다음 단계로 미룰 기능 판단.
- AI의 역할: 요구사항에 맞춘 실제 코드 구현.
AI와 함께 앱을 만든다는 것은 "알아서 다 해줘"가 아닙니다. 오히려 "무엇을 만들 것인가?", "어디까지 만들면 1단계 완료인가?", "이 결과물이 실제 사용에 맞는가?"를 끊임없이 판단하는 기획자이자 테스터의 역할이 훨씬 더 중요해졌습니다.
단계적 확장: v0.1.0에서 v0.1.4까지
한 번에 완벽한 앱을 완성하려고 하지 않았습니다. 아주 작은 버전 단위로 기능을 나누어 진행하며 검증했습니다.
v0.1.0: 핵심 뼈대 완성
사진이나 짧은 영상을 업로드하고, 9:16 세로 MP4를 생성하는 가장 기본적인 흐름을 확인했습니다.
v0.1.1: 청각 및 텍스트 보완
배경음악(BGM) 기능을 추가하고, 텍스트 오버레이 기능과 긴 문장의 자막 줄바꿈 문제를 개선했습니다.
v0.1.2: 시각적 디테일과 구조화
정적인 사진에 생동감을 주는 Ken Burns 모션과 장면 전환 효과를 넣고, 인트로/아웃트로 카드 적용 및 템플릿 구조를 잡았습니다.
v0.1.3: 데이터 입력과 편의성
![]() |
| 스마트워치의 운동 기록(거리, 시간, 칼로리)과 장면별 캡션을 템플릿에 입력하는 기능 |
다운로드 파일명 지정, 텍스트 모드 도입, 걷기/조깅 같은 운동 기록 입력 기능 추가, 그리고 BGM 볼륨 조정 기능을 구현했습니다.
v0.1.4: 최종 튜닝 및 미리보기
![]() |
| 텍스트 색상 및 위치 튜닝, BGM 설정 후 MP4 자동 생성을 테스트하는 과정 |
문서화의 중요성: 기억을 믿지 마라
기능만 만들고 끝내지 않았습니다. AI와 빠르게 개발하다 보면 며칠만 지나도 "이걸 어떻게 실행했더라?", "무슨 문제가 남아 있었지?" 헷갈리기 쉽습니다. 그래서 다음 문서들을 함께 정리했습니다.
README.md/CHANGELOG.mddocs/LOCAL_RUN.md(로컬 실행 방법)docs/FEATURES.md(기능 목록)docs/KNOWN_ISSUES.md(알려진 문제)docs/ROADMAP.md(앞으로의 로드맵)
위 영상은 Claude Code와 함께 제작한 로컬 웹에서 자동 생성된 실제 결과물입니다.
1단계 완료, 그리고 배운 점
AI와 함께하는 개발은 여러 영역(프론트엔드, 백엔드, 영상 처리)의 작업을 혼자 처음부터 공부하는 것보다 훨씬 빠르게 진행할 수 있게 해 주었습니다. 하지만 AI가 만든 기능이 항상 기대한 대로 작동하는 것은 아니었습니다. 화면에서는 되는 것처럼 보여도 생성물에서는 다르게 나오기도 했고, 서버를 다시 시작해야 반영되는 문제들도 있었습니다. "대충 만들어줘"가 아니라 구체적으로 피드백을 전달하는 것이 중요했습니다.
현재 드래그 장면 순서 변경, AI 장면 분석 등 2단계 아이디어는 많지만, 아이디어가 실제로 작동하는지 확인하려는 1단계의 목적은 충분히 달성했기에 여기서 멈추기로 했습니다.
💡 [실행 체크리스트] AI와 함께 작은 앱 만들기
- 만들고 싶은 결과물 정의: 무엇을, 왜 만드는가?
- 1단계 완료 기준 설정: 어디까지 작동하면 1단계를 성공으로 볼 것인가?
- AI에게 미션 전달: 코드를 지시하지 말고 '기대하는 결과'를 구체적으로 전달하기
- 결과물 테스트: 직접 실행하며 오류와 예외 상황 확인하기
- 오류와 개선점 기록: 어떤 상황에서 에러가 났는지 정확히 메모하고 피드백하기
- 문서화: 로컬 실행 방법과 향후 로드맵 정리해 두기
이번 작업은 단순히 쇼츠 생성기를 만든 기록이 아닙니다. 코드는 AI가 짰지만, 프로젝트의 방향을 쥐고 멈출 곳을 판단한 것은 결국 사람의 역할이었습니다. 블로그 역시 마찬가지입니다. 단편적인 글쓰기를 넘어, 독창성과 경험성이 드러나는 방향으로 저만의 기록을 계속 쌓아 나가려 합니다.



댓글
댓글 쓰기