6블록 템플릿으로 모션그래픽 설계하기 — UI 모션·런칭 영상·내 브랜드 영상 프롬프트

클로드에게 "멋진 모션그래픽 만들어 줘" 한 줄만 던져도 꽤 그럴듯한 영상이 나옵니다. 배경음악까지 알아서 붙여 줍니다. 그런데 돌릴 때마다 결과가 다르고, 무엇보다 내가 원하던 영상이 아닙니다. 디자인 방향을 따로 주지 않으면 AI는 늘 쓰던 무난한 스타일로 돌아가기 쉽기 때문입니다.

이번에는 해외에서 무료로 공개된 모션그래픽 프롬프트 템플릿의 6블록 구조(입력 · 방향 · 구성 · 제작 · 주의 · 시작)를 풀어서 설명하고, 이 구조를 그대로 써서 UI 모션 영상, 런칭 영상, 내 채널·기관 브랜드 영상을 만드는 한국어 템플릿을 알려드리겠습니다.

실습 정보

대상	홍보·브랜드 영상을 직접 만들고 싶은 직장인, 기관 홍보 담당자, 크리에이터
준비물	클로드 Opus 5.5 (노력은 가능하면 '최대') · 상업적 이용이 자유로운 음악 · 내 사진 몇 장
핵심	한 줄은 "알아서 해 봐", 템플릿은 "정확히 이걸 원해"
프롬프트	한 줄 1개 + 6블록 템플릿 3개 + 다듬기 1개

카드뉴스로 먼저 보기

카드를 좌우로 밀거나 ← → 키, 아래 점으로 넘길 수 있어요

1. 한 줄 프롬프트로 시작해 보기

먼저 감을 잡아 봅니다. 클로드 Opus 5.5에서 노력(사고 수준)을 최대로 올리고 한 문장만 넣어 보세요. 영어로 넣어도, 한국어로 넣어도 됩니다. 시간이 꽤 걸립니다.

한 줄 프롬프트

프롬프트

15초짜리 모션그래픽을 만들어 줘. 네가 얼마나 뛰어난 모션 디자이너인지 보여 주는 포트폴리오 쇼릴처럼, 할 수 있는 건 다 쏟아부어.

결과는 멋지지만, 다시 돌리면 다른 영상이 나오고 내 이야기를 담기 어렵습니다. 그래서 다음 단계가 필요합니다.

2. 6블록 구조 — 무엇을, 어디에 적나

해외 X(트위터)에서 무료로 공개되어 크게 퍼진 모션그래픽 프롬프트 템플릿들은 모두 같은 여섯 블록으로 이루어져 있습니다. 각 블록을 <입력> </입력>처럼 꺾쇠 태그로 감싸서 구분합니다.

블록	무엇을 적나	핵심
① 입력	시작 전에 나에게 물어볼 재료 (장면 목록, 색, 음악, 사진)	AI가 먼저 묻게 한다
② 방향	영상의 느낌, 장면이 이어지는 방식, 바탕·글꼴, 금지 목록	"템플릿처럼 보이는 것 금지"
③ 구성	BPM, 마디 수, 박자마다 일어날 일, 장면 순서	박자표가 곧 대본
④ 제작	파일 형식, 화면 크기, 움직임 계산 방식, 렌더링·점검 방법	AI가 읽을 부분 (몰라도 됨)
⑤ 주의	자주 생기는 실수와 피하는 법	글자 흐림, 반복 끊김 등
⑥ 시작	"입력부터 묻고, 코드 전에 계획부터 보여 줘"	바로 만들지 않게

정리하면, 한 줄 프롬프트는 "알아서 해 봐"이고 6블록 템플릿은 "정확히 이걸 원해"입니다. 제작 블록처럼 어려운 부분은 사람이 이해할 필요 없이 AI가 읽고 따르는 부분이니 그대로 두고, 입력·방향·구성만 내 입맛에 맞게 고치면 됩니다.

🔗원본 템플릿 ① UI 모핑 영상 (X, 영문)도형 하나가 버튼·로딩·플레이어·슬라이더·차트로 계속 모양을 바꾸는 UI 모션 템플릿. 작성자가 무료로 공개했습니다.https://x.com/twoclipping/status/2103273003555402193바로가기 ↗ 🔗원본 템플릿 ② 애플 키노트 스타일 런칭 영상 (X, 영문)한 번도 끊기지 않고 장면이 이어지는 2D 런칭 필름 템플릿.https://x.com/twoclipping/status/2103835273813496100바로가기 ↗ 🔗한 줄 프롬프트 원본 (X, 영문)쇼릴 한 줄 프롬프트가 처음 화제가 된 게시물.https://x.com/himanshutwtxs/status/2103495232637882858바로가기 ↗

3. 템플릿 ① UI 모션 영상 (한국어판)

원본 구조를 바탕으로 한국어로 다시 쓴 템플릿입니다. 넣으면 클로드가 바로 만들지 않고 입력값부터 물어보고, 이어서 박자표 위의 계획을 보여 줍니다. 여기서 순서를 바꾸거나 빼고 싶은 장면을 고친 뒤 진행하면 됩니다.

6블록 템플릿 — UI 모션

프롬프트

<입력>
시작 전에 나에게 물어볼 것:
- 도형이 차례로 바뀔 화면 상태 8~12개 (예: 버튼, 로딩, 체크 표시, 음악 플레이어, 음량 슬라이더, 토글, 탭, 차트, 검색창, 알림)
- 색: 흑백만 쓸지, 강조색 하나를 더할지
- 배경음악: 상업적 이용이 자유로운 120BPM 안팎의 곡
</입력>

<방향>
- 컷 없이 도형 하나가 계속 모양을 바꾸는 UI 모션. 크기·모서리·색이 변하고, 안의 내용은 짧게 흐려졌다가 바뀐다
- 마우스 커서가 실제로 클릭하고 끌면서 모든 변화를 일으킨다
- 따뜻한 밝은 회색 바탕, 흑백 UI, 깔끔한 글꼴 하나
- 움직임은 부드러운 스프링, 튕김은 아주 살짝만
- 카메라가 확대해서 지금 상태가 화면을 꽉 채우게
- 마지막 장면이 첫 장면과 같아서 무한 반복되게
- 금지: 통통 튀는 움직임, 파티클, 빛 번짐, UI에 그라데이션, 굵기가 제각각인 아이콘, 아무 일도 없는 시간, 템플릿 같은 느낌
</방향>

<구성>
120BPM, 7마디, 박자마다 무언가 일어난다.
내가 고른 상태들을 화살표 순서대로 잇고, 끝은 다시 첫 상태로.
</구성>

<제작>
1. HTML 파일 하나, 정사각형 1440×1440
2. 모든 모양과 위치는 시간 t만 넣으면 계산되게 (CSS 전환·타이머 금지) — 어느 프레임이든 똑같이 다시 그릴 수 있게
3. 끌기는 커서 위치로 값을 직접 계산하고, 놓으면 그 자리에서 스프링으로 돌아가게
4. 음악 박자를 분석해 강박에서 시작하고, UI 효과음은 소리 정점에 맞춰 배치
5. 60fps MP4로 렌더링(모션 블러 포함)
6. 전체 렌더링 전에 박자마다 한 장씩 뽑아 보고, 박자에서 어긋나거나 답답하거나 읽기 힘든 곳을 고친다
</제작>

<주의>
- 카메라가 확대하는 요소의 글자가 흐려지지 않게
- 모양이 바뀌는 상자 안에서 글자가 바뀔 땐 들어오고 나가는 타이밍을 따로
- 마지막 프레임은 커서 위치·속도까지 첫 프레임과 똑같게
</주의>

<시작>
입력값을 먼저 물어보고, 코드를 쓰기 전에 박자표 위에 상태 목록부터 보여 줘.
</시작>

질문에는 이렇게 답하면 됩니다: "화면은 예시 그대로, 색은 최소한으로 흑백, 음악은 알아서 골라 줘." 계획이 나오면 마음에 안 드는 부분만 고칩니다.

계획 단계에서 고치기

프롬프트

계획에서 세 가지만 바꿔 줘.
1) 4번(음악 플레이어)과 5번(슬라이더) 순서를 바꿔
2) 차트 상태는 빼고, 대신 '할 일 체크리스트'를 넣어
3) 강조색 하나를 주황색으로 추가해서 체크 표시와 토글에만 써
나머지는 그대로 진행해.

4. 템플릿 ② 애플 키노트 스타일 런칭 영상

같은 구조에 요구 사항을 더 얹으면 제품 발표회 같은 런칭 영상이 됩니다. 핵심은 장면이 끊기지 않고 이전 장면에서 다음 장면이 만들어진다는 방향 설정입니다. 페이드·블러·컷을 금지하고, 대신 도형이 모양을 바꾸며 다음 장면이 되게 합니다.

6블록 템플릿 — 런칭 영상

프롬프트

<입력>
시작 전에 나에게 물어볼 것:
- 브랜드 이름 (한 단어, 동사형이면 좋음)
- 고화질 사진 9~12장
- 드롭(고조)과 조용한 구간이 있는 120BPM 안팎의 무료 음악
- 식물 그림자가 움직이는 벽 같은 무료 배경 영상 하나
</입력>

<방향>
- 애플 키노트 같은 2D 런칭 필름, 한 번도 끊기지 않는 원테이크
- 모든 장면은 이전 장면에서 만들어진다: 글자는 마스크 선에서 솟아오르고, 아이콘은 스프링으로 튀어나오고, 검은 도형이 화면을 덮었다가 줄어들며 다음 장면이 된다
- 따뜻한 오프화이트 바탕, 검은 UI, 사진 위에는 유리 질감 패널
- 커서가 클릭·끌기·길게 누르기로 모든 변화를 일으키고, 카메라는 그 순간을 확대
- 금지: 크로스페이드, 흐려지며 나타나기, 3D 회전, 파티클, 빛 번짐, 1초 넘게 멈춤, 템플릿 같은 느낌
</방향>

<구성>
120BPM, 약 54박. 다섯 막으로:
1막 오프닝 — 브랜드 이름이 점 하나로 접혔다가 검은 알약 모양으로 커짐
2막 사진 — 조리개가 열리며 사진, 사진이 격자로 펼쳐졌다가 한 장으로 확대 (음악 드롭에 맞춤)
3막 유리 UI — 유리 질감 도구 막대, 슬라이더로 사진의 낮→노을 바꾸기
4막 기기 — 휴대폰 → 노트북 창 → 웹페이지 → 주문까지 한 도형이 계속 변신
5막 마무리 — 화면을 덮은 검은 도형이 다시 점 → 브랜드 이름으로 돌아옴 (첫 장면과 같게)
</구성>

<제작>
UI 모션 템플릿과 같은 원칙(시간 t로 계산, 박자 분석, 60fps 렌더링, 박자마다 점검). 효과음은 내려받은 실제 효과음을 쓰고 직접 합성하지 않는다. 전체 음량은 일정한 기준으로 맞춘다.
</제작>

<주의>
- 화면을 덮는 장면은 모서리 밖까지 크게, 약 0.3초에 걸쳐 (한 프레임에 반쪽만 바뀌지 않게)
- 모양이 바뀌는 도형 안의 글자는 따로 가리개를 둔다
</주의>

<시작>
입력값을 먼저 물어보고, 전체 영상을 만들기 전에 박자표와 대표 장면 4컷(오프닝·유리·기기·마무리)을 먼저 보여 줘.
</시작>

🎵Mixkit상업적 이용이 자유로운 무료 음악·효과음 모음. 템플릿의 배경음악과 효과음을 여기서 고르세요.https://mixkit.co바로가기 ↗ 🎞️Pexels무료 사진·영상 모음. 런칭 영상의 배경 영상(벽 그림자 등)을 찾을 때.https://www.pexels.com바로가기 ↗

5. 템플릿 ③ 내 채널·기관 브랜드 영상

좋은 구조가 하나 생기면 재료와 내용만 바꿔 나만의 영상을 얼마든지 만들 수 있습니다. 이름은 내 채널·학교·기관 이름으로, 사진은 내 작업 모습과 대표 장면으로 채웁니다.

런칭 템플릿을 내 브랜드로

프롬프트

방금 쓴 런칭 영상 템플릿의 구조(방향·구성·제작·주의·시작)는 그대로 두고, 입력만 내 것으로 바꿀게.
- 이름: [내 채널 / 학교 / 기관 이름]
- 사진: 첨부한 10장 (강의하는 모습, 작업 화면, 학생 활동, 결과물)
- 음악: 알아서 골라 줘 (상업적 이용 가능한 곡)
- 4막 '기기' 대신: 우리 홈페이지 → 강의 목록 → 신청 버튼으로 이어지게
- 마지막에 홈페이지 주소를 2초간 보여 줘
계획과 대표 장면 4컷부터 보여 줘.

6. 마무리 — AI가 모션 디자이너를 대신할까?

프롬프트를 붙여 넣어 만들긴 했지만, 어떤 장면을 넣을지, 박자마다 무엇이 일어나야 하는지, 어떤 효과를 금지할지 — 이런 판단은 모션 디자인을 알아야 내릴 수 있습니다. 클로드는 그 판단을 화면으로 옮겨 줄 뿐입니다. 그래서 이건 모션 디자이너를 대신한다기보다 도구를 다루는 문턱이 낮아진 것에 가깝습니다. 예전엔 머릿속에 좋은 그림이 있어도 만들 줄 몰라 포기했다면, 이제는 그 그림을 하나씩 설명할 수만 있으면 됩니다.

만들기 전에 확인할 것

시간: 노력 '최대'로 긴 영상을 만들면 한 편에 오래 걸립니다. 계획 단계에서 충분히 고친 뒤 진행하세요.
음악·영상 권리: "상업적 이용 가능" 표시를 확인하고, 사이트마다 이용 조건을 지키세요.
브랜드·로고: 다른 회사 로고·제품 이미지는 허락 없이 쓰지 마세요. 애플 '스타일'은 연출 방식만 참고하는 것입니다.
원본 존중: 공개 템플릿을 쓸 때는 원작자 게시물 링크를 함께 남기는 게 예의입니다.

함께 보면 좋은 글

작성 2026.10 · AI오토마타. 한국어 템플릿은 공개된 원본 템플릿의 구조를 참고해 새로 쓴 것이며, 원본은 위 링크에서 볼 수 있습니다.

AI 오토마타