[Claude Code] 쇼츠 40개 분석한 크리에이터의 AI 코딩기
한줄 요약
쇼츠 분석을 머릿속에만 담아두다가, Claude Code로 5시간 만에 쇼츠 분석 전용 웹앱을 만들었습니다. "다음" 한 마디로 40개 버전까지 진화시킨 이야기.
바쁘시면 이것만 읽어도 돼요:
쇼츠 레퍼런스 분석과 내 영상 피드백을 기록하는 전용 웹앱을 하루 만에 완성
코드 요청 대신 "다음"만 입력하면 AI가 맥락에 맞는 다음 기능을 알아서 구현
프로세스 설계(전략 문서 + SOP) → 앱 구현 → 품질 분석까지 한 세션에서 진행
품질 분석을 돌렸더니 숨은 버그 5개를 AI가 자동으로 찾아서 수정까지 완료
핵심 팁: 코드부터 짜지 말고, 업무 프로세스를 먼저 설계하면 AI가 더 좋은 결과물을 만들어준다
이런 분들께 도움돼요
쇼츠/릴스 만드는 크리에이터인데, 분석을 체계적으로 해보고 싶은 분
AI 코딩 도구로 뭔가 만들어보고 싶은데 뭘 만들지 모르겠는 분
"다음"만 치면 앱이 만들어진다는 게 정말인지 궁금한 분
문제 상황 (Before)
쇼츠를 만들면서 레퍼런스 영상도 보고, 내 영상에 대한 피드백도 머릿속에 정리는 하고 있었습니다. 근데 문제는 — 다 기억에만 의존하고 있었다는 거예요.
"저번에 잘 됐던 훅이 뭐였지?" "실험해 봤던 BGM 장르가 뭐였더라?" 이런 걸 매번 기억해내려고 하니까, 같은 실수를 반복하고, 잘 됐던 패턴도 날아가고. 분석의 필요성은 느끼는데, 엑셀이나 노션에 정리하자니 귀찮고, 정리해도 패턴이 눈에 안 들어오고.
결국 "나만의 쇼츠 분석 도구가 있으면 좋겠다"는 생각이 들었습니다.
사용한 도구
도구: Claude Code (CLI)
모델: Claude Opus 4.6
기술: HTML, CSS, JavaScript (프레임워크 없이 순수 코드)
작업 과정
코드부터 안 짰습니다 — 프로세스 설계가 먼저
보통 "앱 만들어줘"부터 시작하기 쉬운데, 저는 다르게 접근했습니다. 쇼츠 제작의 전체 흐름을 먼저 정리했어요.
쇼츠 자동화 프로세스 만들어줘. 잘되는 영상, 뜨는 영상,
사람들이 좋아할만한 영상 찾는 과정이 중요해
AI가 10단계짜리 자동화 프로세스 초안을 만들어줬는데, 너무 복잡했어요. 그래서 비판적 리뷰를 요청했더니 5단계로 깔끔하게 줄여줬습니다. 여기서 끝이 아니라 제작 SOP(표준 작업 절차서)도 별도로 만들고, 전략 문서와 SOP를 연계하는 구조까지 잡았어요.
이렇게 프로세스를 먼저 설계하니까, 나중에 "어떤 기능이 필요한지"가 명확해졌습니다. AI한테 "알아서 만들어줘"가 아니라, 제가 실제로 쓸 도구의 청사진이 생긴 거죠.
첫 번째 빌드 — v0.1이 나오다
프로세스 설계가 끝나고, 앱 구현을 시작했습니다.
/pdca plan shorts-lab
PDCA(계획→설계→실행→검증) 방식으로 계획서를 먼저 작성하고, 그걸 바탕으로 첫 버전을 빌드했어요. HTML 파일 1개, CSS 1개, JavaScript 2개 — 총 4개 파일로 기본 구조가 완성됐습니다.
레퍼런스 분석 카드와 내 영상 피드백 카드를 만들 수 있고, 다크/라이트 모드 전환, 검색, 태그 필터링까지 기본 기능이 한 번에 들어갔습니다.
"다음" — 이 한 마디의 마법
여기서부터가 진짜 재미있었습니다. 기본 기능이 갖춰지니까, 하나씩 기능을 추가하고 싶어졌어요. 근데 매번 "이런 기능 만들어줘"라고 설명하기 귀찮았거든요.
그래서 그냥 이렇게 입력했습니다:
다음
AI가 현재 앱의 상태를 파악하고, 맥락에 맞는 다음 기능을 알아서 구현해줬습니다. 한 번 더 "다음"을 치면 또 다음 기능. 이걸 반복했더니...
버전
기능
v0.25
상세보기에서 이전/다음 카드 넘기기
v0.26
태그 입력 시 자동완성 추천
v0.27
2개 카드 나란히 비교
v0.28
카드에 조회수/완주율 배지 표시
v0.29
태그 관리 패널 (이름 변경, 삭제)
v0.30
주간 카드 생성 추이 차트
v0.31
URL 중복 감지
v0.32
최근 검색어 드롭다운
v0.33
주간 리포트 자동 생성
v0.34
작성 중 폼 자동저장
v0.35
CSV 내보내기
v0.36
필터/정렬 상태 유지
v0.37
통계 요약 바
v0.38
일괄 태그 추가/제거
v0.39
카드별 노트 타임라인
v0.40
"3일 전" 같은 상대 시간 표시
"다음" 한 마디를 반복한 것만으로 16개 기능이 추가됐습니다. AI가 "이 앱에 지금 없는 것 중 가장 유용한 다음 기능"을 스스로 판단해서 구현해준 거예요.
버그도 AI가 찾아준다 — 품질 분석
40개 버전까지 빠르게 만들다 보면 버그가 숨어있기 마련이죠. 여기서 PDCA의 Check 단계를 실행했습니다.
/pdca analyze shorts-lab
AI가 코드 전체를 분석해서 품질 점수 62점과 함께 치명적 버그 5개를 찾아냈어요:
실험 결과값 불일치 — 입력 폼은 한국어('맞음'/'틀림')를 저장하는데, 코드 8곳에서 영어('success'/'fail')로 비교하고 있었음. 대시보드 실험 성공률이 항상 0%로 표시되는 원인
CSS 변수 5개 미정의 — 통계 바, 태그 모달, 노트 영역의 배경이 투명하게 보이는 원인
태그 XSS 취약점 — 태그에 악성 코드를 넣으면 실행될 수 있는 보안 문제
"수정해줘"라고 한 마디 했더니, 8곳의 값 불일치, CSS 변수 추가, 보안 취약점까지 한 번에 다 고쳐줬습니다. 만들기만 하고 끝내지 않고 검증까지 돌린 덕분에, 실제로 쓸 때 "왜 이게 안 되지?" 하는 상황을 미리 방지할 수 있었어요.
결과 (After)
Before vs After
항목
Before
After
쇼츠 분석 방식
기억에 의존
카드 형태로 기록 + 태그 분류
패턴 파악
불가능
조회수, 완주율, 실험 결과 추적
피드백 회고
안 함
주간 리포트 자동 생성
소요 시간
해당 없음 (안 하고 있었음)
5시간 만에 도구 완성
결과물
쇼츠 레퍼런스 분석 + 내 영상 피드백을 카드로 관리하는 웹앱
다크/라이트 모드, 검색, 태그 필터, 정렬, 비교, 주간 리포트, 통계 대시보드까지 포함
인터넷 없이도 작동 (로컬 저장)
백업/복원, CSV 내보내기 지원
이 과정에서 배운 AI 활용 팁
효과적이었던 것
프로세스부터 설계하기: 코드를 바로 짜달라고 하지 않고, 업무 프로세스(전략→SOP→로드맵)를 먼저 만들었더니 AI가 "뭘 만들어야 하는지"를 정확히 이해했습니다
"다음"으로 연속 개발하기: 기능을 일일이 설명하지 않아도, "다음"만 입력하면 AI가 맥락을 파악해서 필요한 기능을 알아서 추가해줍니다
품질 분석 돌리기: 만들고 끝내지 말고, 분석 명령어를 돌리면 사람 눈으로는 발견하기 어려운 버그를 AI가 찾아줍니다
이렇게 하면 안 돼요
"알아서 만들어줘"로 시작하기: 요구사항이 모호하면 AI도 모호한 결과물을 만듭니다. 최소한 "어떤 문제를 해결하고 싶은지"는 명확히 해야 해요
만들고 검증 안 하기: 빠르게 만든 만큼 버그도 빠르게 쌓입니다. 중간중간 품질 체크가 중요해요
다른 업무에 적용한다면?
이 방식은 쇼츠 분석뿐 아니라 어떤 "기록 + 분석" 업무에도 적용할 수 있어요:
영업팀: 미팅 피드백 카드 → 성사율 패턴 분석
강사: 수업 회고 카드 → 어떤 콘텐츠가 반응 좋았는지 추적
마케터: 광고 소재 분석 카드 → 성과 비교 대시보드
핵심은 "반복적으로 기록하고, 패턴을 찾고 싶은 업무"에 이 접근법을 쓰면 됩니다.
앞으로의 계획
실제 쇼츠 분석에 활용: 직접 쓰면서 부족한 기능을 계속 추가할 예정
패턴 발견: 카드가 50~100개 쌓이면 어떤 콘텐츠가 잘 되는지 패턴을 분석할 수 있을 것 같아요
강의 콘텐츠로 활용: AI 코딩 강의에서 "비개발자가 실제 업무 도구를 만드는 실습 예제"로 사용할 예정
재사용 가능한 프롬프트
프롬프트 1: 업무 프로세스 설계
[내 업무 분야]의 자동화 프로세스를 만들어줘. [가장 중요한 과정]이 핵심이야. 현재는 [현재 방식]으로 하고 있는데, [불편한 점]이 있어.
프롬프트 2: 연속 기능 개발
(첫 버전 완성 후) 다음
프롬프트 3: 품질 분석
(기능 개발 완료 후) /pdca analyze [프로젝트명] (버그 발견 시) 수정해줘
