개인 개발 앱의 TikTok 숏폼 영상을 Claude Code로 만들어 보았습니다. 영상 편집 소프트웨어는 사용하지 않고, Remotion + ElevenLabs + Kling 3.0을 Claude Code가 셸(Shell)에서 연결하여 하나의 영상으로 만들었습니다.

이 기사에서는 첫 번째 영상을 완성하기까지의 기술 선정과 시행착오를 기록합니다. 양산은 이제부터 시작이지만, 대본 JSON을 교체하면 다른 페르소나와 장면의 영상을 만들 수 있는 구조로 되어 있습니다.

KUU — 「말하는」 앱의 소개 영상을 어떻게 만들 것인가

KUU는 「말하고, 머릿속에 여백을.」이 컨셉인 사고 퇴피(思考退避) 앱입니다. 목소리로 말하면 AI가 「지금 보기 / 나중에 생각하기 / 묵혀두기 / 내려놓기」의 4가지로 분류해 줍니다.

TikTok에서 앱을 소개하고 싶지만, 개인 개발자에게는 영상 제작 리소스가 없습니다. 외주를 맡기면 영상 한 편당 수만 엔이 듭니다. 그렇다고 스크린샷을 나열한 영상은 「금방 스와이프된다」는 것을 알고 있습니다.

원했던 것은 「대본을 쓰면 영상이 나오는」 메커니즘입니다. Claude Code라면 시뮬레이터 조작도 ffmpeg도 API 호출도 전부 터미널에서 돌릴 수 있으므로, 오케스트레이터(Orchestrator)로서 시도해 보았습니다.

완성된 영상의 구성

25초·6장면 구성으로, AI 생성 일상 장면과 앱 조작 녹화가 결합된 하이브리드 형태입니다.

#	장면	초	영상	나레이션
1	hook	5s	AI 생성: 아침 주방에서 분주한 어머니	아침, 머릿속에 할 일이 너무 많지 않아?
...

사용한 도구와 선정 이유

전체 구성

대본 JSON ──→ Claude Code (오케스트레이터)
│
├── ElevenLabs API → 나레이션 mp3
...

Claude Code가 모든 공정을 연결합니다. 각 도구는 독립적이지만, Claude Code가 셸에서 순차적으로 호출하여 하나의 영상으로 합칩니다. 영상 편집 GUI를 만지는 공정이 제로입니다.

ffmpeg는 영상·음성 변환 및 편집을 수행하는 CLI 도구입니다. 속도 변경, 무음 제거, 영상 자르기, 음성 결합 등 영상 편집 소프트웨어에서 하는 것과 같은 조작을 커맨드 라인에서 실행할 수 있습니다. xcrun simctl은 Xcode에 부속된 iOS 시뮬레이터 조작 명령어로, 화면 녹화나 앱 실행에 사용합니다.

Remotion — React로 영상을 합성하기

Remotion은 React 컴포넌트로 영상을 만드는 오픈 소스 프레임워크입니다. 일반적인 영상 편집 소프트웨어(Premiere, CapCut 등) 대신 코드로 영상의 구성·텍스트·애니메이션을 기술하고, CLI를 통해 mp4를 추출합니다.

선택한 이유는 props 구동(props-driven) 방식이기 때문입니다. 대본 JSON을 --props로 전달하는 것만으로 영상이 출력되므로, 대본을 교체하면 다른 영상을 만들 수 있는 구조가 됩니다.

ffmpeg만으로도 가능하지만, 텍스트 오버레이나 애니메이션이 들어가면 힘들어집니다. Remotion이라면 브랜드 컬러의 CTA 화면도 React 컴포넌트로 작성할 수 있습니다.

export const RemotionRoot: React.FC = () => (
<Composition
id="KuuDemo"
...

calculateMetadata로 대본의 총 초 수로부터 프레임 수를 자동 계산하므로, 대본을 바꿀 때마다 하드코딩을 수정할 필요가 없습니다.

ElevenLabs — TTS 선정 과정의 시행착오

ElevenLabs는 AI 음성 합성 (TTS) SaaS입니다. 텍스트를 전달하면 나레이션 음성을 생성해 줍니다. 다국어 대응이 되어 일본어도 자연스럽게 읽어줍니다. API로 호출할 수 있어 Claude Code의 워크플로우에 포함할 수 있습니다.

처음에는 Microsoft의 무료 TTS (edge-tts)를 사용했습니다. 작동도 하고 일본어도 읽을 수 있습니다. 하지만 완성된 영상을 들어보니 기계적인 느낌이 너무 강했습니다. TikTok의 다른 영상들과 나란히 두면 명백히 이질감이 느껴집니다.

ElevenLabs의 v3 모델로 전환하자 품질이 극적으로 변했습니다. 특히 [sighing]이나 [softly]와 같은 감정 태그가 효과적입니다. 「한숨 섞인 목소리로 말하기 시작하는」 나레이션은 페인 포인트(Pain point)에 대한 공감을 형성하는 데 강력합니다.

curl -s -X POST "https://api.elevenlabs.io/v1/text-to-speech/$VOICE_ID" \
-H "xi-api-key: $ELEVENLABS_API_KEY" \
-H "Content-Type: application/json" \
...

목소리는 Sakura(일본어 여성)를 사용하고 있습니다. Starter 플랜은 월 $6입니다.

Kling 3.0 — 도입부에서 "광고가 아니네"라고 느끼게 만들기

Kling은 중국 Kuaishou사의 AI 영상 생성 서비스입니다. 텍스트 프롬프트(Text Prompt)나 이미지로부터 짧은 영상(5~10초)을 생성할 수 있습니다. 9:16 비율의 세로형 영상도 지원하므로, TikTok 소재 생성에 사용할 수 있습니다.

페르소나의 일상 장면을 AI로 생성하면, 도입부에서 "광고가 아니네"라는 인상을 줄 수 있습니다.

Kling 3.0 Playground($6.99/월)로 생성하고 있습니다. 프롬프트는 영어로 작성했을 때 품질이 더 안정적이었습니다.

여기까지 오기까지의 시행착오

최종 형태에 도달하기까지 수차례 수정을 거듭했습니다. 완성된 영상만 보면 "처음부터 이렇게 설계했구나"라고 보일지 모르지만, 실제로는 고된 시행착오의 연속입니다.

스크린샷과 검은 배경 텍스트의 시대

처음에는 앱의 스크린샷을 나열하고, 검은 배경에 텍스트를 얹은 영상을 만들었습니다. Remotion으로 합성하는 단계까지는 작동했지만, 완성된 영상을 보고 "이건 1초 만에 스와이프(Swipe) 당하겠다"라고 확신했습니다.

스크린샷을 쓰는 것은 태만입니다. 시뮬레이터로 실제로 조작하는 영상을 찍을 수 있는데 정지 화면을 사용할 이유가 없습니다. 검은 배경의 텍스트는 광고 느낌이 강합니다. TikTok 사용자들은 광고를 1초 만에 간파합니다.

AI 영상의 "다른 사람 문제"

일상 장면을 AI로 생성하는 방향으로 전환했습니다. Kling 3.0으로 "아침에 주방에서 분주하게 움직이는 어머니"를 생성하자, 도입부의 인상이 극적으로 좋아졌습니다.

하지만 장면 2를 별도로 생성하면 전혀 다른 인물이 등장합니다. 장면 1과 2에서 다른 사람이 등장하면 시청자는 혼란을 느낍니다.

여기서 Kling의 "Create Omni" 기능을 발견했습니다. 장면 1의 영상을 베이스로 추가 샷을 생성하면, 동일 인물로 일관된 스토리를 만들 수 있습니다.

AI 영상 생성 서비스 비교

AI 영상 생성에는 Kling 외에도 선택지가 있습니다. 이번에 조사한 범위 내에서의 비교입니다.

서비스	캐릭터 일관성	API/MCP 연동	비용	적합한 용도
Kling 3.0	Omni Elements로 고품질	API는 별도 종량제	$6.99/월 (Playground)	전문 영상·움직임이 많은 장면
Higgsfield	Soul Character로 유지	MCP 대응 (Claude Code에서 직접 조작 가능)	$15/월 (Starter)	SNS용·대량 생산

둘 다 API를 제공하며, MCP 서버를 통해 Claude Code에서 직접 영상을 생성할 수 있습니다. Kling은 커뮤니티 제작 MCP 서버가 있고, Higgsfield는 공식 MCP 서버를 제공합니다.

비용 측면에서 Kling은 Playground 월 $6.99와 API 종량제($0.08~0.17/초)가 별도 체계로 되어 있어 이중 과금이 됩니다. Higgsfield MCP는 월 $15에 API 이용이 포함(200 크레딧, 약 28개 분량)되어 있어 비용을 일원화할 수 있습니다. 이번에는 Kling Playground로 첫 번째 영상을 만들었지만, 양산 단계에서는 Higgsfield MCP로의 전환도 검토할 예정입니다.

일본어 억양과의 싸움

ElevenLabs의 일본어는 "대체로 맞지만" 특정 단어에서 무너집니다.

• 「渋滞(정체)」 → 「しぶいそ(시부이소)」라고 읽음
• 「勝手に(멋대로)」 → 「か(카)」「って(떼)」「に(니)」로 끊겨 읽음
• 「30秒(30초)」 → 억양이 부자연스러움
• 「保育園の持ち物(어린이집 준비물)」 → 이상한 위치에서 끊김

대책은 꾸준한 작업이었습니다. 히라가나화, 한자 숫자로 변환, 공백 삭제, 감정 태그 조정. 하나를 고치면 다른 부분이 무너지는 과정을 반복했습니다.

최종적으로 정착한 규칙은 다음과 같습니다:

문제	대책	예시
읽기 오류	히라가나화	「保育園の持ち物」 → 「ほいくえんのもちもの」
...	[sighing] [softly]
느림	ffmpeg로 후처리	atempo 1.3-1.5x

「나레이션이 끊기는」 최대의 버그

장면(Scene)을 고정된 초(예: 2.5초)로 설정하면, 나레이션이 그보다 길 경우 중간에 끊기게 됩니다. 이것이 최대의 버그 원인이었습니다.

수정 방법은 간단합니다. 나레이션 mp3 파일의 길이를 ffprobe로 측정하여 장면 길이를 그에 맞추는 것입니다. 당연한 이야기지만, 대본을 먼저 쓰고 나서 소재를 만들다 보면 무심코 고정된 초 단위로 설계하게 됩니다.

반대로 소재 영상은 5초인데 장면을 6초로 설정하면, 마지막 1초는 정지 프레임이 됩니다. Remotion의 <OffthreadVideo>는 소재의 끝을 넘어가면 마지막 프레임에서 멈추기 때문입니다. 장면 길이는 소재의 길이와 나레이션 길이 모두에 의해 제약받는다는 것을 몸소 배웠습니다.

CTA 디자인

첫 번째 CTA는 Remotion의 기본값 같은 디자인이라 앱의 세계관과 전혀 어울리지 않았습니다. KUU의 랜딩 페이지(LP)를 보고 배경색, 로고 색상, 폰트, 메인 카피를 완전히 재현했습니다.

스마트폰으로 보기 때문에 글자는 크게 만들어야 합니다. 최종적으로 태그라인은 54px, 앱 이름은 96px로 결정했습니다. 처음 설정했던 32px는 너무 작아서 읽을 수 없었습니다.

구성의 최종 조정

마지막은 미세 조정의 연속이었습니다:

• 프로모션 나레이션 분할: 처음에는 결과 화면에 9초 분량의 나레이션(감상+프로모션)을 몰아넣었는데, 너무 길어서 지루해졌습니다. 결국 결과 화면 3초(감상만) + 홈 화면 4초(프로모션 전반부) + CTA 3초(프로모션 후반부)로 3등분했습니다.
• 음량 밸런스: [softly]로 생성된 부분이 다른 부분보다 1~2dB 낮게 나옵니다. ffmpeg로 부분적으로 부스트하여 맞췄습니다.
• 대사 사이의 "간격": 감정적으로 중요한 대사 직후에 바로 다음 장면으로 넘어가면 재촉하는 듯한 인상을 줍니다. 1초의 간격을 두어 해결했습니다.
• 영상 선택: 결과 화면을 단순히 "분류 결과가 표시되는 것"에서 "드래그 앤 드롭으로 정리하는 장면"으로 교체했습니다. 움직임이 있는 편이 시선을 더 끕니다.

대본 JSON → 영상의 흐름

최종적으로 정착된 프로세스입니다.

1. 대본 JSON 작성

{
"id": "kuu-morning-rush-ja",
"app": "kuu",
...

2. 나레이션 생성 및 후처리

ElevenLabs API로 mp3를 생성하고, ffmpeg로 속도 조절과 무음 제거를 적용합니다.

# 속도 조절 + 앞부분 무음 제거
ffmpeg -y -i raw.mp3 \
-af "silenceremove=start_periods=1:start_silence=0.05:start_threshold=-40dB,atempo=1.3" \
...

3. 시뮬레이터에서 조작을 녹화하여 추출

# 시뮬레이터에서 녹화
xcrun simctl io $UDID recordVideo --codec=h264 --force output.mov
# 장면별로 추출
...

4. Remotion으로 렌더링

Claude Code가 나레이션 길이를 바탕으로 장면 길이를 계산하고, props를 구성하여 Remotion에 전달합니다.

npx remotion render KuuDemo out/video.mp4 --props="$PROPS" --codec=h264

비용

이번 영상 1개를 제작하며 소비한 리소스 실적입니다.

도구	요금 체계	이번 소비량	월 상한선
Remotion	무료	-	-
...

월 합계 $12.99. 이번 소비량을 기준으로 계산하면, ElevenLabs는 월 100개, Kling은 월 30개 이상 만들 수 있는 계산이 나옵니다. 고정비만으로 영상을 양산할 수 있는 구조가 되었습니다.

다음에 할 일

첫 번째 영상은 완성했지만, 아직 "파이프라인"이라고 부르기에는 수동 공정이 많은 상태입니다.

• AI 영상 생성 자동화: 현재는 Kling Playground에서 수동으로 생성하고 있으므로, MCP를 통해 Claude Code에서 직접 영상을 생성할 수 있도록 하고 싶습니다.
• 다른 페르소나의 영상 제작: 대본 JSON을 교체하여 다른 관점으로 영상을 만듭니다.
• 타 앱으로의 수평 전개: Remotion 프로젝트를 remotion-<app>/

로 나누어져 있으므로, 다른 앱에도 동일한 구조를 적용할 수 있을 것입니다.

• 시뮬레이터 녹화의 자연화: 현재는 시뮬레이터 화면을 그대로 녹화하고 있어 "화면 녹화 느낌"이 납니다. 스마트폰 화면을 통해 촬영한 것 같은 표현을 사용하여, 일상적인 장면과의 이질감을 없애고 싶습니다.

대본 JSON을 교체함으로써 양산할 수 있는 구조로 만들어 두었으므로, 실제로 여러 편을 제작해 본 결과는 별도의 기사에서 작성할 예정입니다.

이 기사는 사고 퇴피 앱 KUU의 마케팅에서 얻은 지식을 바탕으로 작성되었습니다. "말해서, 머릿속에 여백을."을 컨셉으로, 목소리로 말하면 AI가 4가지로 분류해 주는 앱입니다.

Discussion