본문으로 건너뛰기
← 따라 만들기

따라 만들기 · 어려움 · 반나절 이상

두 앱 캐릭터 콜라보 시리즈 만들기

서로 다른 두 앱의 캐릭터가 함께 나오는 모션그래픽 시리즈를 만든 과정이에요. 기능 소개가 아니라 '써 보고 싶어지는 이야기'로 만드는 게 핵심이에요.

Claude CodeChromeffmpegiOS 시뮬레이터

완성본 — 챙김이와 초코의 하루

준비물

  • 코드를 직접 만들고 실행해 주는 AI 도구 (예: Claude Code)
  • 두 앱의 소개 페이지, 실제 앱 화면 (시뮬레이터 화면도 괜찮아요)
  • 캐릭터 이미지, 로고, 앱에서 쓰는 글꼴

1. 소개 페이지를 보여 주며 시작하기

이 랜딩 페이지 보고 모션그래픽 만들어 보자.

2. 두 앱이 “연결되는” 이야기 만들기

따로따로 소개하면 광고 두 개가 될 뿐이에요. 한 앱의 기록이 다른 앱에 나타나는 장면처럼, 두 앱이 만나는 지점을 이야기의 중심에 두세요. 실제 앱 화면을 쓰면 믿음이 생겨요.

3. 스타일 시안을 여러 개 받아 고르기

첫 결과가 밋밋하면 고치기보다 다른 스타일 시안을 몇 개 달라고 해서 고르는 게 빨라요.

모션그래픽 치고는 너무 단순해. 다른 스타일로 몇 개만 예를 보여 주면 고를게.

4. 브랜드 디테일 맞추기

AI는 예전 로고나 비슷한 글꼴을 가져오기 쉬워요. 실제 로고와 앱 글꼴을 쓰라고 분명히 요청하고, 결과에서 섞인 글꼴이 없는지 확인하세요.

5. 기능 나열 대신 흐름으로

기능만 보여 주는 것보다 그 기능들이 연결되는 느낌의 모션그래픽이 되어야 하지 않을까?

6. 첫 장면에 가장 좋은 장면 두기

엔딩에 쓰는 완성 장면을 가공해서 맨 앞에 두면 처음 1초에 시선을 잡을 수 있어요.

7. AI에게 솔직한 평가 받기

네가 봤을 때 이 영상 보면 쓰고 싶어? 진심으로 반박해 봐.

칭찬 말고 반박을 요청하면 부족한 점이 구체적으로 나와요. 그 답을 바탕으로 “쓰고 싶어지는 장면”(점수, 추천, 캐릭터)을 더했어요.

8. 한 편을 완성하고 같은 방식으로 나머지 만들기

한 편을 끝까지 다듬은 뒤 “같은 방식으로” 나머지 편을 요청하면 톤이 흔들리지 않아요. 마지막에 세 편을 합본으로 이어요.

팁

  • 음악과 효과음을 AI가 직접 합성하게 하면 외부 음원 저작권 걱정이 없어요.
  • 화면 속 점수나 기록은 실제 개인 기록 대신 연출용 예시를 쓰세요.

제작 프롬프트

이 작품을 만들 때 AI에게 준 프롬프트예요. 복사해서 직접 만들어 보세요.

단계별로 실제로 쓴 요청Claude Code

제작 과정에서 보낸 요청 중 방향을 바꾼 것만 순서대로 골라 정리했어요.

[1] 시작 — 랜딩 페이지를 보여 주며
이 랜딩 페이지 보고 모션그래픽 만들어 보자.

[2] 두 앱이 연결되는 이야기
같이 연동된다는 내용이 있었으면 좋겠어. 데이런미에서 달리거나 대회를 등록하면 일정이 보이거든. 실제 앱 화면을 써도 좋을 것 같아.

[3] 스타일 시안 받기
모션그래픽 치고는 너무 단순해. 다른 스타일로 몇 개만 예를 보여 주면 고를게.

[4] 브랜드 디테일
감정일기, 편지, 감정일지 그리고 폰트와 실제 로고를 썼으면 좋겠어.
로고가 현재 것이 아닌데 다시 찾아봐. 폰트도 섞여 있어서 이상해.

[5] 기능 나열 대신 연결
기능만 보여 주는 것보다 그 기능들이 연결되는 느낌의 모션그래픽이 되어야 하지 않을까?

[6] 첫 장면 임팩트
처음 화면이 좀 별로인 것 같아. 마지막 엔딩 화면을 가공해서 처음에 딱 임팩트가 있어야 할 것 같아.

[7] 솔직한 평가 받기
네가 봤을 때 이 영상 보면 쓰고 싶어? 진심으로 반박해 봐.

[8] 쓰고 싶어지는 장면 더하기
감정일지 점수, 책 추천 같은 것도 중간에 넣으면 좋지 않을까? 딱 보고 '아~ 쓰고 싶다' 이런 느낌으로. 그리고 캐릭터도 만들어 뒀으니 폴더에서 찾아서 써 줘.

[9] 한 편씩 다듬고 시리즈로
같은 방식으로 밤 테마 편과 초코 러닝 편도 다듬어 줘.
이거 괜찮다! 그럼 이제 합친 걸 만들어 보자. 시리즈처럼.

가져가기

완성본을 무료로 받아 참고하거나 그대로 써도 돼요 · CC BY 4.0 · 출처: ChronoCode (chronocode-hub.pages.dev)