원문 노션
Guide 23 · 프롬프트 100

클로드 모션그래픽 한글 프롬프트 100

코드 블록 101 이미지 1 표 0 출처 노션 원문
담PD 쇼츠 "클로드가 모션그래픽 업계를 집어삼키고 있어요"에서 약속드린 한글 모션 프롬프트 100개예요. 담PD가 직접 만들었고, 클로드(클로드 코드 또는 클로드 앱)에 복사해서 [대괄호]만 내 것으로 바꾸면 돼요.

실제로 돌려 본 결과

아래는 이 라이브러리의 프롬프트를 클로드 코드에 그대로 넣어서 나온 결과예요. 공통 블록까지 붙여 클로드 코드(Opus, effort 최대)로 돌렸고, 왼쪽부터 #11 버튼이 차트가 되는 대시보드 데모, 앱 출시 필름, 도형 하나로 만드는 추상 모션이에요.

이 라이브러리 프롬프트로 클로드가 만든 실제 결과
이 라이브러리 프롬프트로 클로드가 만든 실제 결과

모든 프롬프트 뒤에 붙이는 공통 블록

text
<제작>
1. HTML 파일 하나, [세로 1080x1920 / 가로 1920x1080]. 모든 스타일은 window.seek(t) 안에서 시간만으로 계산한다: CSS 애니메이션·타이머·프레임 사이에 남는 상태 금지.
2. 스프링은 닫힌 형태(시간의 함수)로 쓰고, 목표가 여러 번 바뀌면 바뀔 때마다 스프링을 하나씩 더해서 계속 시간의 순수 함수로 유지한다. 오버슈트는 아주 살짝만.
3. 빠르게 움직이는 것에는 속도 방향으로 모션 블러.
4. Playwright로 60fps 렌더, 프레임마다 서브프레임 3장을 ffmpeg tmix로 섞어 모션 블러를 만들고 output.mp4로 저장한다. 소리가 필요하면 Web Audio(OfflineAudioContext)로 박자마다 킥, 장면 전환마다 효과음을 코드로 만들어 합친다.
5. 전체 렌더 전에 박자마다 한 프레임씩 뽑아 직접 보고, 복잡하거나·박자에서 벗어나거나·겹치거나·읽기 어려운 곳을 고친 뒤 렌더한다.
6. Math.random 금지(매번 같은 결과).
</제작>
<금지>
파티클 폭발, 글로우, 렌즈 플레어, 카메라 흔들림, RGB 분리, 크로스페이드·블러 인, 흔한 그라데이션, 통통 튀는 이징, 0.5초 넘게 멈춘 화면, 화면 구석의 작은 라벨·숫자, 템플릿처럼 보이는 모든 것.
</금지>
<시작>
콘셉트를 한 줄로 정하고 박자별 스토리보드를 먼저 보여 준 다음, 나한테 더 묻지 말고 끝까지 만들어서 output.mp4 를 줘.
</시작>

쓰는 법

  1. 아래 100개 중에서 프롬프트 하나를 복사해요.
  2. [대괄호] 안을 내 제품 이름·브랜드 색·문구로 바꿔요. 색을 모르면 적혀 있는 기본 색을 그대로 둬도 돼요.
  3. 공통 블록을 그 뒤에 붙여서 클로드 코드(Opus, effort 최대)에 넣어요.

클로드 앱에서는 HTML 미리보기로 재생해 보고, 화면 녹화로 저장하면 돼요.


1. 출시·런칭 영상 (10)

1. 선 하나로 그리는 출시 영상

text
<방향>
15초 출시 영상. 제품 이름은 "[제품 이름]". 거의 검정 #0B0B0C 캔버스, 오프화이트 #F2EFE8 선과 글자, [포인트 색 · 기본 #FF5A1F] 하나. 글꼴 Pretendard. 선 하나가 처음부터 끝까지 끊기지 않는다: 화면 왼쪽에서 들어온 선이 로고를 한 획으로 그리고 → 로고 획이 풀려 첫 기능 아이콘이 되고 → 아이콘이 접혀 둘째·셋째 기능 아이콘이 되고 → 다시 곧게 펴져 "[출시일] 공개"의 밑줄이 된다. 기능 이름은 그 선 위 마스크에서 올라온다. 자르거나 페이드하지 않는다. 마지막 프레임 = 첫 프레임(빈 검정에 선 끝 하나).
</방향>
<구성>
120 BPM, 8마디, 박자마다 무언가 일어난다. 1마디: 선 진입 → 로고 한 획 그리기. 2마디: 로고 완성, 박자마다 획이 한 단계씩 굵어짐. 3마디: [기능 1]. 4마디: [기능 2]. 5마디: [기능 3], 카메라가 아이콘으로 줌. 6~7마디: "[출시일] 공개"가 박자마다 한 글자씩 올라옴, 마지막 글자에서 밑줄만 [포인트 색]. 8마디: 글자가 밑줄 속으로 내려가고 선이 화면 오른쪽으로 빠짐.
</구성>

2. 키노트식 제품 소개와 숫자 세 개

text
<방향>
20초 키노트식 제품 소개. 제품 이름은 "[제품 이름]", 한 줄 카피는 "[카피]". 순검정 #000000 무대, 흰 글자, [포인트 색 · 기본 #2F6BFF] 하나. 글꼴 Pretendard(숫자는 Geist 가능). 모든 장면은 앞 장면으로 만든다: 화면보다 큰 제품 이름이 천천히 물러나며 한 줄 카피가 그 아래 마스크에서 올라오고 → 카피의 마지막 글자 폭이 늘어나 숫자판이 되고 → 숫자 [숫자 1 · 예: 속도] [숫자 2 · 예: 가격] [숫자 3 · 예: 용량]이 자릿수마다 세로 롤러처럼 굴러 멈춘다. 숫자가 바뀔 때 카메라가 오른쪽으로 미끄러지며 다음 숫자가 앞 숫자의 단위 글자에서 자라난다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 10마디. 1~2마디: 큰 제품 이름이 박자마다 조금씩 물러남. 3마디: 카피가 단어 단위로 올라옴. 4~5마디: 숫자 1 롤링, 멈추는 박자에 단위가 붙음. 6~7마디: 숫자 2. 8~9마디: 숫자 3, 숫자만 [포인트 색]. 10마디: 숫자 세 개가 하나로 겹쳐 제품 이름으로 돌아감.
</구성>

3. 타일 퍼즐로 맞춰지는 슬로건 티저

text
<방향>
10초 런칭 티저. 서비스 이름은 "[서비스 이름]", 슬로건은 "[슬로건]". 오프화이트 #EEEAE2 캔버스, 먹색 #141414 글자 타일, [브랜드 색 · 기본 #19C37D] 하나. 글꼴 Pretendard Black. 화면 가득 정사각 타일 격자가 깔려 있고 각 타일에 슬로건 글자가 하나씩 섞여 있다. 슬라이드 퍼즐처럼 타일이 박자마다 한 칸씩 미끄러져 자리를 찾으며 슬로건이 맞춰진다. 다 맞춰지면 빈 타일들이 접혀 사라지고 슬로건 줄만 남았다가, 줄이 수축해 서비스 이름 하나가 된다. 페이드 없이 모두 미끄러짐과 접힘으로만. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 5마디. 1마디: 섞인 격자, 박자마다 줄 하나씩 흔들림 없이 미끄러짐. 2~3마디: 박자마다 글자 한 개씩 제자리, 제자리에 오면 타일이 [브랜드 색]으로 뒤집힘. 4마디: 빈 타일 접힘 → 슬로건 한 줄. 5마디: 슬로건이 서비스 이름으로 수축 → 다시 섞인 격자로 펼쳐짐.
</구성>

4. 한 장의 카드가 네 번 뒤집히는 업데이트 소식

text
<방향>
업데이트 소식 영상. 앱 이름은 "[앱 이름]", 기능은 [기능 1] [기능 2] [기능 3] [기능 4]. 따뜻한 라이트그레이 #ECEBE7 캔버스, 흰 카드, 검정 UI, [포인트 색 · 기본 #FF5A1F] 하나. 글꼴 Pretendard. "새로워진 것 4가지" 제목의 숫자 "4"가 늘어나 카드 한 장이 된다. 그 카드가 박자에 맞춰 3D로 뒤집힐 때마다 뒷면에 기능의 실제 미니 UI가 있고, 커서가 그 안에서 한 번 클릭해 기능이 동작하는 걸 보여 준다. 카메라는 카드가 화면을 채우도록 줌. 네 번째 뒤집힘 뒤 카드가 다시 "4"로 수축한다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 10마디. 1마디: 제목 → "4"가 카드로 늘어남. 2~3마디: 뒤집기 → [기능 1], 커서 클릭 → 결과. 4~5마디: [기능 2]. 6~7마디: [기능 3]. 8~9마디: [기능 4]. 10마디: 카드가 "4"로 수축, 제목 복귀.
</구성>

5. 숫자가 띠로 갈라지는 카운트다운

text
<방향>
신제품 카운트다운. 브랜드는 "[브랜드]", 제품 이름은 "[제품 이름]". 거의 검정 #0D0D0D, 오프화이트 #F5F2EC 숫자, [브랜드 색 · 기본 #FF3B30] 하나. 글꼴 Pretendard Black, 숫자는 화면 높이의 80%. 숫자는 부서지지 않고 가로 띠 8개로 썰린다: "3"의 띠들이 박자마다 엇갈려 좌우로 미끄러지며 "2"로 다시 맞춰지고, "2"가 같은 방식으로 "1"이 되고, "1"의 띠가 둥글게 휘어 "0"이 된다. "0"의 안쪽이 [브랜드 색]으로 원형 와이프되며 채워지고, 원이 화면 밖까지 커졌다가 수축하며 그 안에서 제품 이름이 마스크 선 위로 올라온다. 마지막 프레임 = 첫 프레임("3").
</방향>
<구성>
120 BPM, 8마디. 1~2마디: "3", 박자마다 띠 하나씩 살짝 밀림. 3마디: "3" → "2". 4마디: "2" → "1". 5마디: "1" → "0". 6마디: 원형 와이프, 화면 덮기. 7마디: 수축, 제품 이름 등장. 8마디: 제품 이름이 띠로 썰려 "3"으로 돌아감.
</구성>

6. 엉킨 선이 직선으로 풀리는 B2B 출시

text
<방향>
B2B 소프트웨어 출시 영상. 제품 이름은 "[제품 이름]". 화이트 #FAFAF8 캔버스, 차콜 #1C1C1E 선, [브랜드 색 · 기본 #2F6BFF] 하나. 글꼴 Pretendard. 은유 하나에 집중한다: 선 7가닥이 화면 왼쪽에서 서로 엉켜 들어오고(문제) → 가운데 [제품 이름] 로고 링을 통과하는 순간 평행한 직선으로 정렬되고(해결) → 그 직선들이 그대로 대시보드의 표 행이 되어 각 행에 실제 데이터가 채워진다. 엉킨 쪽 선은 차콜, 정리된 쪽 선은 [브랜드 색]. 카메라가 선을 따라 오른쪽으로 계속 이동하고 끊지 않는다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1~2마디: 엉킨 선 진입, 박자마다 매듭이 하나씩 더 꼬임. 3마디: 로고 링 등장. 4마디: 박자마다 선 두 가닥씩 링 통과 → 직선. 5~6마디: 직선이 표 행이 되고 박자마다 행 하나씩 값이 채워짐. 7마디: "[한 줄 카피]"가 표 위로 올라옴. 8마디: 표가 다시 선으로 풀려 왼쪽으로 감김.
</구성>

7. 스위스 그리드 행사 오프닝

text
<방향>
15초 행사 오프닝. 행사 이름은 "[행사 이름]", 날짜 "[날짜]", 장소 "[장소]", 연사 [연사 1] [연사 2] [연사 3], 링크 "[등록 링크]". 스위스 포스터 스타일: 오프화이트 #F3F0E8, 검정 #111111, 빨강 #E63A1F 하나. 글꼴 Pretendard, 영문은 Archivo 가능. 12열 그리드 선이 먼저 박자마다 한 줄씩 그어지고, 정보 블록은 그 선을 레일 삼아 미끄러져 들어와 칸에 정확히 맞물린다. 정보가 바뀔 때는 앞 블록이 칸을 따라 밀려 나가며 다음 블록을 밀어 넣는다. 빨강 사각형 하나가 계속 칸을 옮겨 다니며 지금 읽어야 할 정보를 가리킨다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 그리드 선 그어짐. 2마디: 행사 이름. 3마디: 날짜·장소. 4~6마디: 연사 한 명씩, 박자마다 이름 → 소속. 7마디: 등록 링크, 빨강 사각형이 링크 밑줄로 늘어남. 8마디: 블록이 모두 칸 밖으로 밀려 나가고 그리드 선만 남음.
</구성>

8. 하나의 긴 캔버스로 가는 런칭 데이 영상

text
<방향>
30초 프로덕트 헌트 런칭 영상. 제품 이름은 "[제품 이름]", 문제는 "[문제 한 줄]", 해결은 "[해결 한 줄]". 웜그레이 #EFEDE8 캔버스, 흑백 UI, [포인트 색 · 기본 #DA552F] 하나. 글꼴 Pretendard. 모든 장면이 옆으로 길게 이어진 캔버스 하나 위에 있고 카메라가 그 위를 이동한다(컷 없음): 문제 문장 → 문장의 핵심 단어가 버튼으로 변함 → 커서가 버튼을 클릭하면 실제 제품 화면이 열림 → 데모 3장면(커서가 클릭·드래그·입력) → 마지막 결과 카드가 "오늘 런칭" 배지로 접힘. 카메라는 장면마다 그 요소가 화면을 채우도록 줌. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 15마디. 1~2마디: 문제 문장, 박자마다 단어 하나씩. 3마디: 단어 → 버튼, 클릭. 4~6마디: 데모 1 [기능 1]. 7~9마디: 데모 2 [기능 2]. 10~12마디: 데모 3 [기능 3]. 13~14마디: 결과 카드 → "오늘 런칭" 배지, 배지만 [포인트 색]. 15마디: 카메라가 처음 문제 문장으로 되돌아감.
</구성>

9. 옛 로고가 새 로고로 재조립되는 리브랜딩

text
<입력>
먼저 나에게 물어볼 것: 옛 로고와 새 로고 SVG(또는 PNG), 새 브랜드 색 3개.
</입력>
<방향>
리브랜딩 공개 영상. 브랜드는 "[브랜드]". 중립 오프화이트 #F2F1ED 캔버스와 검정 #121212, 색은 새 브랜드 색 [색 1] [색 2] [색 3]만. 글꼴 Pretendard. 옛 로고가 보이지 않는 격자를 따라 정사각 조각 수십 개로 나뉜다(흩날림 없이 칸 단위로). 조각들이 박자마다 회전하고 미끄러지며 새 로고의 자리를 찾아 조립된다. 조립이 끝나면 새 로고에서 조각 세 개가 빠져나와 커지며 브랜드 색 칩 세 장이 되고, 각 칩 위에 색 이름과 hex 코드가 마스크에서 올라온다. 칩이 다시 로고로 돌아가 끼워진다. 마지막 프레임 = 첫 프레임(옛 로고).
</방향>
<구성>
120 BPM, 10마디. 1마디: 옛 로고. 2마디: 격자 선이 로고 위로 지나가며 조각으로 나뉨. 3~5마디: 박자마다 조각 무리가 이동 → 새 로고. 6마디: 새 로고 완성, 한 번 스프링. 7~8마디: 색 칩 세 장 펼쳐짐, 박자마다 hex 하나씩. 9마디: 칩이 로고로 복귀. 10마디: 새 로고가 다시 조각나 옛 로고로 되감김.
</구성>

10. 토글 하나로 움직이는 가격 공개

text
<방향>
가격 공개 영상. 제품 이름은 "[제품 이름]", 요금제는 [요금제 1 · 가격] [요금제 2 · 가격] [요금제 3 · 가격], 가장 인기 있는 건 [인기 요금제]. 화이트 #FFFFFF 캔버스, 검정 UI, [포인트 색 · 기본 #6C4CF5] 하나. 글꼴 Pretendard, 숫자는 Geist 가능. 가운데 알약 모양 하나가 가로로 늘어나다가 세로로 갈라져 요금제 카드 세 장이 된다. 커서가 위쪽 "월간 / 연간" 토글을 클릭하면 가격 숫자가 자릿수마다 세로로 굴러 바뀌고, 할인 배지가 스프링으로 붙는다. 커서가 인기 요금제 카드에 올라가면 그 카드가 앞으로 나오며 테두리만 [포인트 색]이 되고 카메라가 그 카드로 줌. 마지막 프레임 = 첫 프레임(알약).
</방향>
<구성>
120 BPM, 8마디. 1마디: 알약 → 카드 세 장. 2마디: 카드마다 박자 하나씩 요금제 이름. 3마디: 가격 숫자. 4마디: 커서가 토글 클릭 → 가격 롤링. 5마디: 할인 배지. 6~7마디: 인기 요금제 강조, 줌, "[혜택 한 줄]". 8마디: 카드 세 장이 다시 알약으로 합쳐짐.
</구성>

2. 제품 화면·데모 (15)

11. 버튼이 차트가 되는 대시보드 데모

text
<방향>
드리블 수준의 제품 UI 모션. 제품 이름은 "[제품 이름]". 도형 하나가 끊기지 않고 계속 모양을 바꾼다: 버튼 → 로딩 → 체크 → 매출 카드(숫자가 카운트업) → 선 차트(스스로 그려지고 커서를 올리면 툴팁) → 알림 토스트 → 다시 버튼. 커서가 실제로 클릭하고 드래그하며 모든 변화를 이끈다. 밝은 웜그레이 #EDEBE6 캔버스, 흑백 UI에 [포인트 색 · 기본 #FF5A1F] 하나, UI 글꼴은 Pretendard. 카메라가 상태마다 그 요소가 화면을 채우도록 줌한다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디, 박자마다 무언가 일어난다. 1마디: 커서 진입 → 버튼 클릭. 2마디: 로딩 → 체크. 3마디: 체크가 늘어나 매출 카드, 숫자 카운트업. 4~5마디: 카드 아랫변이 선 차트로 그려짐, 커서 호버 → 툴팁. 6마디: 툴팁이 떨어져 나와 알림 토스트. 7마디: 커서가 토스트를 밀어서 닫음. 8마디: 토스트가 수축해 처음 버튼.
</구성>

12. 앱 셸 안에서 줌으로 따라가는 기능 3개

text
<방향>
SaaS 핵심 기능 소개. 제품 이름은 "[SaaS 이름]", 기능은 [기능 1] [기능 2] [기능 3]. 실제 앱처럼 사이드바·헤더·카드가 있는 화면 하나가 전부다. 라이트 #F7F7F5 UI, 검정 글자, [브랜드 색 · 기본 #2F6BFF] 하나. 글꼴 Pretendard. 커서가 사이드바 메뉴를 클릭할 때마다 카메라가 해당 영역으로 날아가 그 영역이 화면을 채운다. 각 기능에서 커서가 실제로 한 가지 일을 끝낸다(필터 걸기, 카드 끌어 옮기기, 버튼 눌러 생성). 설명 문구는 영역 바로 옆에 큰 글자로 마스크에서 올라오고, 다음 클릭 때 아래로 내려간다. 마지막에 카메라가 빠져 전체 앱이 보이고, 처음 위치로 돌아간다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 12마디. 1~2마디: 전체 앱, 커서 진입. 3~5마디: [기능 1] 줌 → 동작 → 설명. 6~8마디: [기능 2]. 9~11마디: [기능 3]. 12마디: 줌 아웃 → 전체 앱.
</구성>

13. 한 글자씩 치면 쏟아지는 검색 결과

text
<방향>
검색 제품 데모. 제품 이름은 "[제품 이름]", 검색어는 "[검색어]". 오프화이트 #F5F3EE 캔버스, 흰 카드, 검정 글자, [포인트 색 · 기본 #19C37D] 하나. 글꼴 Pretendard. 화면 가운데 검색창 하나에서 시작한다. 검색어가 박자마다 한 글자씩 입력되고, 글자가 들어올 때마다 아래로 결과 카드가 한 장씩 위에서 미끄러져 내려와 쌓인다(점점 정확해지는 순서). 입력이 끝나면 커서가 세 번째 카드를 클릭하고, 그 카드가 화면을 채우도록 늘어나 상세 페이지가 된다. 상세 페이지의 검색 아이콘을 클릭하면 페이지가 수축해 다시 검색창이 된다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 빈 검색창, 커서 클릭, 깜빡이는 캐럿. 2~4마디: 박자마다 한 글자 + 카드 한 장. 5마디: 일치하는 단어만 [포인트 색] 하이라이트. 6마디: 커서 클릭 → 카드 확장. 7마디: 상세 페이지 스크롤 한 번. 8마디: 검색 아이콘 클릭 → 검색창으로 수축.
</구성>

14. 체크할 때마다 차오르는 할 일 목록

text
<방향>
할 일 관리 앱 데모. 앱 이름은 "[앱 이름]", 할 일은 [할 일 1] [할 일 2] [할 일 3] [할 일 4] [할 일 5]. 화이트 #FFFFFF 카드, 웜그레이 #ECEAE5 배경, 검정 글자, [포인트 색 · 기본 #FF7A00] 하나. 글꼴 Pretendard. 커서가 박자에 맞춰 체크박스를 하나씩 클릭한다: 체크 표시가 선으로 그려지고 → 글자에 취소선이 그어지고 → 그 항목이 아코디언처럼 접혀 목록 맨 아래 "완료" 묶음으로 미끄러진다. 위쪽 진행률 바가 클릭마다 한 칸씩 차오른다. 마지막 항목이 체크되면 진행률 바가 말려 원이 되고 그 안에 큰 체크가 그려진다. 원이 펴져 다시 진행률 바가 된다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 목록 등장, 항목이 박자마다 한 줄씩. 2~6마디: 마디마다 항목 하나 체크 → 취소선 → 접혀 이동, 진행률 20%씩. 7마디: 100% → 원 → 큰 체크. 8마디: 원이 바로 펴지고 완료 묶음이 펼쳐져 처음 목록으로.
</구성>

15. 진행 점이 카드로 늘어나는 온보딩 3단계

text
<방향>
온보딩 3단계 영상. 제품 이름은 "[제품 이름]", 단계는 [단계 1] [단계 2] [단계 3]. 크림 #F4EFE6 배경, 먹색 #161616, [브랜드 색 · 기본 #3B5BFF] 하나. 글꼴 Pretendard. 화면 위쪽 진행 점 세 개가 주인공이다: 첫 점이 아래로 늘어나 단계 1 화면 카드가 되고, 커서가 카드 안에서 입력하고 "다음"을 누르면 카드가 오른쪽 점으로 빨려 들어가며 그 점이 [브랜드 색]으로 채워지고, 다음 점이 늘어나 단계 2 카드가 된다. 카메라는 카드가 화면을 채우도록 따라간다. 세 점이 다 채워지면 하나로 합쳐져 "시작하기" 버튼이 된다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 점 세 개. 2~3마디: 단계 1, 커서 입력 → 다음. 4~5마디: 단계 2, 선택지 클릭. 6~7마디: 단계 3, 토글 켜기. 8마디: 점 합쳐짐 → "시작하기" → 다시 점 세 개로 나뉨.
</구성>

16. 블록을 끌어 조립하는 노코드 빌더

text
<방향>
노코드 빌더 UI 데모. 제품 이름은 "[제품 이름]", 만드는 페이지는 "[페이지 주제]". 라이트 #F6F6F4 에디터, 왼쪽 블록 패널, 가운데 빈 캔버스. 흑백에 [포인트 색 · 기본 #FF4F8B] 하나. 글꼴 Pretendard. 커서가 박자마다 블록(헤더, 히어로, 이미지, 버튼, 가격표)을 하나씩 끌어 캔버스에 놓는다. 놓는 순간 블록이 스프링으로 자리에 맞물리고, 아래 블록들은 밀려 내려간다. 끌 때만 놓일 자리에 [포인트 색] 가이드 선이 보인다. 다 조립되면 캔버스가 수축하며 휴대폰 화면 안으로 들어가고, 휴대폰 안에서 페이지가 한 번 스크롤된다. 휴대폰이 다시 펴지며 빈 캔버스로 돌아간다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 10마디. 1마디: 빈 에디터. 2~6마디: 마디마다 블록 하나 드래그 → 맞물림. 7마디: 커서가 버튼 글자를 "[버튼 문구]"로 고침. 8마디: 캔버스 → 휴대폰으로 수축. 9마디: 휴대폰 안 스크롤. 10마디: 휴대폰이 펴져 빈 에디터.
</구성>

17. 답변 안에서 표와 차트가 펼쳐지는 채팅 AI

text
<방향>
채팅형 AI 제품 데모. 제품 이름은 "[제품 이름]", 질문은 "[질문]". 웜 오프화이트 #F5F2EB 배경, 흰 말풍선, 검정 글자, [포인트 색 · 기본 #D97757] 하나. 글꼴 Pretendard. 아래 입력창에 질문이 한 글자씩 쳐지고 커서가 전송 버튼을 클릭한다. 입력창 글자가 위로 올라가 사용자 말풍선이 된다. 답변이 단어 단위로 흘러나오다가 문장 중간에서 표가 아코디언처럼 아래로 펼쳐지고, 표의 한 열이 들려 올라가 막대 차트로 바뀐다. 커서가 막대 하나에 올라가면 툴팁. 카메라는 표·차트가 나올 때 그 부분이 화면을 채우도록 줌. 마지막에 대화가 위로 감기며 빈 입력창. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 10마디. 1~2마디: 질문 타이핑 → 전송. 3~4마디: 답변 스트리밍, 박자마다 몇 단어씩. 5~6마디: 표 펼침, 박자마다 행 하나. 7~8마디: 열 → 막대 차트, 호버 툴팁. 9마디: 답변 마지막 한 줄. 10마디: 대화 감김 → 빈 입력창.
</구성>

18. 버튼 하나로 끝나는 결제 흐름

text
<방향>
15초 결제 흐름 데모. 제품 이름은 "[제품 이름]", 상품은 "[상품 이름 · 가격]". 화이트 #FFFFFF, 연회색 #EFEFEC, 검정, [포인트 색 · 기본 #0064FF] 하나. 글꼴 Pretendard. 화면 아래쪽 결제 버튼 하나가 모든 장면을 잇는다: 장바구니에서 커서가 수량을 +1 하고 → 버튼 클릭 → 버튼이 위로 늘어나 카드 입력 폼이 되고, 카드 번호가 네 자리씩 박자에 맞춰 입력된다 → 다시 버튼으로 줄어들어 클릭 → 버튼이 원으로 수축해 로딩 링 → 링이 닫히며 체크 → 체크가 늘어나 영수증 카드. 영수증이 접혀 다시 장바구니. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 장바구니, 수량 +1, 합계 숫자 굴러감. 2마디: 버튼 클릭 → 폼으로 늘어남. 3~4마디: 카드 번호·유효기간 입력. 5마디: 결제 클릭 → 로딩 링. 6마디: 체크. 7마디: 영수증. 8마디: 영수증 접힘 → 장바구니.
</구성>

19. 슬라이더로 가르는 전과 후

text
<방향>
전/후 비교 영상. 제품 이름은 "[제품 이름]". 한 화면을 세로 슬라이더가 가른다: 왼쪽은 칸이 빽빽한 엑셀(회색 #D9D9D6 선, 작은 글자), 오른쪽은 같은 데이터를 담은 깔끔한 [제품 이름] 화면(흰 바탕, [브랜드 색 · 기본 #19C37D] 하나). 글꼴 Pretendard. 커서가 슬라이더 손잡이를 잡고 박자에 맞춰 좌우로 끈다. 슬라이더가 지나가는 자리에서 엑셀 셀이 오른쪽 화면의 카드로 실제 변형된다(셀이 모여 카드가 됨). 끝까지 끌면 오른쪽 화면만 남고, 카메라가 핵심 카드 하나로 줌해 "[줄어든 시간 · 예: 3시간 → 5분]"을 보여 준다. 다시 슬라이더가 가운데로 돌아온다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 반반 화면, 커서가 손잡이 잡음. 2~3마디: 왼쪽으로 끌기, 박자마다 셀 무리가 카드로. 4마디: 오른쪽으로 되돌리며 엑셀 다시 보여 주기. 5~6마디: 끝까지 끌기 → 제품 화면 전체. 7마디: 카드 줌, 숫자 강조. 8마디: 슬라이더 가운데 복귀.
</구성>

20. 쌓인 알림을 한 장으로 접는 요약

text
<방향>
알림 요약 기능 데모. 제품 이름은 "[제품 이름]". 다크 #121214 배경, 흰 반투명 카드(리퀴드 글래스), [포인트 색 · 기본 #FFB020] 하나. 글꼴 Pretendard. 여러 앱 알림 카드가 박자마다 한 장씩 위에서 떨어져 쌓이며 점점 어지러워진다(각 카드 문구는 실제처럼: 회의 변경, 결제 완료, 댓글 3개 등). 커서가 "[제품 이름]으로 요약" 버튼을 누르면 카드들이 아코디언처럼 접히며 하나의 요약 카드로 압축되고, 요약 카드 안에 핵심 세 줄이 마스크에서 올라온다. 커서가 요약 카드를 펼치면 다시 원래 카드들로 풀린다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1~3마디: 박자마다 알림 한 장씩 쌓임, 화면이 점점 가득. 4마디: 커서가 요약 버튼 클릭. 5마디: 카드들이 접혀 한 장으로. 6~7마디: 요약 세 줄, 중요한 줄만 [포인트 색]. 8마디: 펼치기 → 카드 흩어져 처음 상태로.
</구성>

21. 빈 주간 캘린더가 스스로 채워지는 장면

text
<방향>
캘린더 앱 데모. 앱 이름은 "[앱 이름]". 오프화이트 #F6F4EF 배경, 얇은 회색 #DCDAD4 격자, 일정 블록은 검정·회색·[포인트 색 · 기본 #4C6FFF] 세 가지만. 글꼴 Pretendard. 빈 일주일 캘린더에서 커서가 "자동 배치" 버튼을 클릭하면 일정 블록이 박자마다 하나씩 시간 칸에 떨어져 스프링으로 늘어나며 자리를 잡는다. 겹치는 일정이 생기면 기존 블록이 옆으로 밀려 반씩 나눠 갖는다. 커서가 블록 하나를 끌어 다른 요일로 옮기면 주변 블록이 비켜 준다. 카메라는 블록이 떨어지는 칸을 따라 살짝 줌. 마지막에 블록들이 버튼 속으로 빨려 들어가 빈 캘린더. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 빈 캘린더, 버튼 클릭. 2~5마디: 박자마다 블록 하나, 4마디에 겹침 처리. 6마디: 커서 드래그로 블록 이동. 7마디: "이번 주 [시간]시간 확보"가 위에 올라옴. 8마디: 블록 회수 → 빈 캘린더.
</구성>

22. 코드를 치면 바뀌는 오른쪽 미리보기

text
<방향>
코드 에디터 + 실시간 미리보기 데모. 제품 이름은 "[제품 이름]", 만드는 것은 "[만들 것 · 예: 가격 카드]". 왼쪽 다크 에디터 #16161A(코드 색은 흰색·회색·[포인트 색 · 기본 #7CFFB2] 세 가지만), 오른쪽 라이트 미리보기 #FAFAF8. 코드 글꼴은 Geist Mono, UI 글꼴은 Pretendard. 코드가 박자마다 한 줄씩 타이핑되고, 그 줄이 끝나는 순간 오른쪽 미리보기에서 해당 요소가 생긴다(줄 하나 = 변화 하나). 방금 친 줄과 방금 바뀐 요소에만 [포인트 색] 테두리. 카메라는 코드 줄과 결과 사이를 오가며 둘 다 화면을 채우도록 줌. 마지막에 코드가 위로 지워지며 미리보기도 비어진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 10마디. 1마디: 빈 에디터와 빈 미리보기. 2~8마디: 마디마다 코드 2줄 → 요소 2개(배경, 제목, 가격, 목록, 버튼, 그림자, 호버 상태). 9마디: 커서가 미리보기 버튼을 클릭해 동작 확인. 10마디: 코드 되감기 → 빈 화면.
</구성>

23. 3x2 그리드에서 차례로 열리는 기능 카드 6장

text
<방향>
기능 소개 영상. 제품 이름은 "[제품 이름]", 기능 6개는 [기능 1]~[기능 6]. 라이트 #F2F1EE 배경, 흰 카드, 검정 아이콘, [브랜드 색 · 기본 #FF5A1F] 하나. 글꼴 Pretendard. 정사각형 하나가 박자마다 반으로 갈라지며 3x2 그리드가 된다. 그리드의 카드 하나씩 커서가 클릭하면 그 카드가 화면을 채우도록 커지고(나머지 카드는 밀려나 테두리 밖으로), 안에서 아이콘이 실제 동작을 한 번 하고 설명 한 줄이 올라온다. 카드가 다시 제자리로 줄어들면 다음 카드. 여섯 번째 카드 뒤에 그리드가 다시 정사각형 하나로 합쳐진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 14마디. 1마디: 정사각형 → 그리드 분할. 2~13마디: 기능마다 2마디(클릭·확대·동작 → 설명·축소). 14마디: 그리드 합쳐짐 → 정사각형.
</구성>

24. 클릭한 자리에서 퍼지는 다크·라이트 전환

text
<방향>
다크 모드 ↔ 라이트 모드 전환 데모. 제품 이름은 "[제품 이름]". 라이트는 #FAFAF7 바탕에 #141414 글자, 다크는 #111113 바탕에 #F0EEE9 글자, 공통 [포인트 색 · 기본 #FFC53D] 하나. 글꼴 Pretendard. 실제 앱 화면(헤더, 카드 두 장, 차트 하나)이 있고 커서가 헤더의 해·달 토글을 클릭하면 클릭한 지점에서 원형 마스크가 퍼지며 그 안쪽만 다크 테마가 된다. 원이 지나가는 경계에서 카드 그림자, 차트 선 색이 실제로 바뀌어 보인다. 토글 아이콘은 해가 달로 모양이 변한다. 다시 클릭하면 반대로 퍼진다. 카메라는 첫 전환 때 토글로 줌했다가 원이 퍼지는 동안 빠진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 6마디. 1마디: 라이트 화면, 커서 진입. 2마디: 토글 줌 → 클릭. 3마디: 원 퍼짐 → 다크. 4마디: 다크 상태에서 커서가 카드 하나 호버. 5마디: 다시 토글 클릭 → 라이트 원 퍼짐. 6마디: 카메라 원위치.
</구성>

25. 끌어다 놓으면 링이 도는 업로드

text
<방향>
드래그 앤 드롭 업로드 데모. 제품 이름은 "[제품 이름]", 파일은 [파일 1] [파일 2] [파일 3]. 오프화이트 #F4F2ED, 점선 드롭 영역, 검정, [포인트 색 · 기본 #2F6BFF] 하나. 글꼴 Pretendard. 커서가 화면 밖에서 파일 아이콘 세 개를 끌고 들어온다. 드롭 영역 위에 오면 점선이 실선으로 바뀌며 영역이 살짝 부푼다. 놓는 순간 파일 아이콘이 각각 원으로 수축해 업로드 진행 링이 되고, 링이 박자에 맞춰 차오르며 가운데 퍼센트 숫자가 굴러간다. 링이 닫히면 체크로 변하고, 체크가 가로로 늘어나 파일 카드(이름·크기·미리보기)가 되어 목록으로 정리된다. 카드들이 다시 아이콘으로 접혀 화면 밖으로. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 빈 드롭 영역. 2마디: 파일 끌고 들어옴, 영역 반응. 3마디: 드롭 → 링 세 개. 4~5마디: 링 차오름(속도 다르게). 6마디: 체크 → 파일 카드. 7마디: 카드 정렬, 커서가 하나를 호버해 미리보기. 8마디: 카드 접힘 → 빈 영역.
</구성>

3. 모바일 앱 소개 (10)

26. 손가락 터치로 넘어가는 아이폰 소개

text
<방향>
15초 앱 소개 영상. 앱 이름은 "[앱 이름]", 보여 줄 화면은 [화면 1] [화면 2] [화면 3]. 크림 #F3EEE5 배경 위 아이폰 하나(얇은 검정 테두리, 그림자는 바닥에 아주 옅게). 앱 UI는 흑백에 [브랜드 색 · 기본 #FF6A3D] 하나, 글꼴 Pretendard. 손가락 대신 회색 반투명 원이 터치를 표시한다: 누를 때 원이 작아지고 뗄 때 고리로 퍼진다. 탭할 때마다 누른 버튼이 늘어나 다음 화면이 되고, 스크롤은 손가락이 실제로 끄는 속도대로 관성이 남는다. 카메라는 탭하는 순간 그 버튼 쪽으로 살짝 줌했다가 돌아온다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 홈 화면, 앱 아이콘 탭 → 앱 열림. 2~3마디: [화면 1] 스크롤 두 번. 4~5마디: 카드 탭 → [화면 2], 버튼 하나 토글. 6~7마디: 탭 → [화면 3], 결과 숫자 굴러감. 8마디: 위로 쓸어 올려 홈 화면 복귀.
</구성>

27. 한 대에서 세 대로 갈라지는 앱스토어 홍보

text
<방향>
앱스토어 홍보 영상. 앱 이름은 "[앱 이름]", 기능은 [기능 1] [기능 2] [기능 3]. 연한 세이지 #E4E8E1 배경, 검정 휴대폰, [브랜드 색 · 기본 #2F6BFF] 하나. 글꼴 Pretendard. 정면의 휴대폰 한 대가 박자에 맞춰 세 겹으로 갈라지며 비스듬히 기운 세 대로 펼쳐진다(겹친 카드가 부채처럼 퍼지듯). 각 화면은 다른 기능이 실제로 동작 중이다. 한 번에 한 대만 앞으로 나와 화면을 채우고, 그때 그 기능 이름이 휴대폰 옆에 큰 글자로 마스크에서 올라온다. 나머지 두 대는 뒤로 물러나 계속 움직인다. 마지막에 세 대가 다시 한 대로 겹쳐진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 10마디. 1마디: 한 대. 2마디: 세 대로 펼쳐짐. 3~4마디: 왼쪽 폰 앞으로, [기능 1]. 5~6마디: 가운데, [기능 2]. 7~8마디: 오른쪽, [기능 3]. 9마디: 세 대가 나란히, "[앱 이름]" 큰 글자. 10마디: 한 대로 겹침.
</구성>

28. 10초 만에 끝나는 가입 온보딩

text
<방향>
빠른 온보딩 영상 10초. 앱 이름은 "[앱 이름]". 화이트 #FFFFFF 앱 화면, 웜그레이 #EAE8E3 바깥 배경, 검정, [브랜드 색 · 기본 #00B37E] 하나. 글꼴 Pretendard. 휴대폰 화면 하나 안에서 모든 것이 이어진다: "시작하기" 버튼 → 탭 → 버튼이 위로 늘어나 이메일 입력창 → 글자가 박자마다 빠르게 입력 → 인증번호 칸 6개가 박자마다 하나씩 채워짐 → 관심사 칩 3개 탭 → 칩들이 모여 첫 화면의 추천 카드가 됨. 휴대폰 바깥에 지금 걸린 시간이 큰 숫자로 "00:01 → 00:10" 굴러간다(화면 구석이 아니라 휴대폰 옆에 크게). 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 5마디. 1마디: 시작하기 탭 → 이메일. 2마디: 인증번호 6칸. 3마디: 관심사 칩 3개. 4마디: 칩 → 추천 카드, 카드가 스크롤. 5마디: 카드가 버튼으로 수축.
</구성>

29. 화면 밖으로 튀어나오는 3D 카드

text
<방향>
앱 소개 연출. 앱 이름은 "[앱 이름]", 카드 내용은 [카드 1] [카드 2] [카드 3]. 짙은 남색 #0F1A2B 배경, 흰 휴대폰, 카드는 흰색, [브랜드 색 · 기본 #FFB547] 하나. 글꼴 Pretendard. 정면 휴대폰 안 카드 목록에서 시작한다. 카메라가 비스듬히 돌며 휴대폰이 기울어지면, 카드 세 장이 화면 유리를 지나 층층이 앞으로 떠오른다(각 카드마다 깊이 다르게, 그림자는 휴대폰 화면 위에 떨어짐). 떠오른 카드 하나씩 앞으로 와서 화면을 채우고 안의 내용이 동작한다. 다 보여 주면 카드가 순서대로 화면 안으로 다시 눌려 들어가고 카메라가 정면으로 돌아온다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 정면 휴대폰. 2마디: 카메라 회전, 기울어짐. 3마디: 카드 세 장 떠오름, 박자마다 한 장. 4~6마디: 카드마다 한 마디씩 앞으로 → 내용 동작. 7마디: 카드가 눌려 들어감. 8마디: 정면 복귀.
</구성>

30. 잠금 화면 알림이 앱 화면으로 늘어나기

text
<방향>
푸시 알림 장면. 앱 이름은 "[앱 이름]", 알림 문구는 "[알림 문구]". 잠금 화면 배경은 단색 깊은 버건디 #3A1420, 시계 글자는 흰색, 알림 배너는 리퀴드 글래스, [브랜드 색 · 기본 #FF5A5F] 하나. 글꼴 Pretendard. 잠금 화면 시계가 박자에 맞춰 1분 넘어가고, 알림 배너가 위에서 스프링으로 내려온다. 터치 원이 배너를 탭하면 배너가 그대로 늘어나 화면 전체를 채우며 앱 화면이 되고, 배너 속 문구가 앱 안 제목 자리로 이동한다. 앱 안에서 커서가 한 가지 행동(예: "확인" 버튼)을 끝내면 앱이 위로 접혀 다시 배너 크기로 줄어들고 잠금 화면으로 돌아간다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 6마디. 1마디: 잠금 화면, 시계 분 넘어감. 2마디: 배너 내려옴. 3마디: 탭 → 배너가 앱으로 늘어남. 4~5마디: 앱 안 행동 두 번. 6마디: 앱 → 배너 → 잠금 화면.
</구성>

31. 링이 차고 배지가 찍히는 운동 앱

text
<방향>
운동 앱 데모. 앱 이름은 "[앱 이름]", 목표는 "[목표 · 예: 500kcal]". 순검정 #000000 앱 화면, 흰 글자, 링 색은 [포인트 색 · 기본 #C6FF3D] 하나와 회색 #2A2A2A 트랙. 글꼴 Pretendard, 숫자는 Geist 가능. 원형 진행 링 하나가 주인공: 박자마다 링이 한 칸씩 차오르고 가운데 칼로리 숫자가 자릿수별로 굴러간다. 링이 한 바퀴를 채우는 순간 링이 안으로 수축해 육각 배지 모양으로 접히고, 배지에 "[배지 이름]"이 각인되듯 찍힌다. 배지가 아래 주간 막대 차트의 오늘 막대로 내려앉아 막대가 솟는다. 막대가 다시 링으로 말린다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 빈 링. 2~4마디: 박자마다 링 차오름 + 숫자. 5마디: 한 바퀴 완성 → 배지로 접힘. 6마디: 배지 각인. 7마디: 주간 막대, 오늘 막대 솟음. 8마디: 막대 → 링으로 말림.
</구성>

32. 지출을 넣을 때마다 바뀌는 도넛

text
<방향>
가계부 앱 데모. 앱 이름은 "[앱 이름]", 지출은 [항목 1 · 금액] [항목 2 · 금액] [항목 3 · 금액] [항목 4 · 금액]. 화이트 #FFFFFF 화면, 웜그레이 #ECEAE4 배경, 카테고리 색은 검정·회색 #9A9A96·[포인트 색 · 기본 #FF7A45] 세 가지만(나머지는 명도 차이). 글꼴 Pretendard. 터치 원이 "+" 버튼을 누르면 버튼이 늘어나 입력 시트가 되고, 금액이 박자마다 입력된다. "저장"을 누르면 입력 시트가 수축해 작은 원이 되어 도넛 차트로 날아가 해당 조각이 늘어나고, 다른 조각들은 비율에 맞게 줄어든다. 가운데 합계 숫자가 굴러간다. 네 번째 지출에서 예산 넘은 조각만 [포인트 색]으로 바뀐다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 9마디. 1마디: 도넛과 합계. 2~3마디: 지출 1 입력 → 저장 → 조각 변화. 4~5마디: 지출 2. 6~7마디: 지출 3. 8마디: 지출 4, 예산 초과 강조. 9마디: 조각들이 원래 비율로 되감김.
</구성>

33. 경로를 따라 줄어드는 도착 시간

text
<방향>
배달 앱 주문 추적 화면. 앱 이름은 "[앱 이름]", 가게는 "[가게 이름]". 지도는 오프화이트 #F1EEE7 바탕에 연회색 길, 경로 선은 검정, [포인트 색 · 기본 #2AC1BC] 하나. 글꼴 Pretendard. 지도 위 경로가 가게에서 집까지 한 획으로 그려지고, 배달 아이콘이 그 선을 따라 박자마다 한 구간씩 이동한다. 아이콘이 지나간 선은 [포인트 색]으로 바뀐다. 아래 시트의 도착 시간 "[분]분"이 구간마다 1씩 줄며 굴러가고, 상태 단계(접수 → 조리 → 출발 → 도착)가 진행 점으로 채워진다. 도착하면 카메라가 집 아이콘으로 줌, 아이콘이 체크로 변한다. 카메라가 빠지며 경로가 되감긴다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 지도, 경로 그려짐. 2마디: 접수 → 조리. 3~6마디: 박자마다 한 구간 이동, 시간 감소. 7마디: 도착 → 줌 → 체크. 8마디: 줌 아웃, 경로 되감김.
</구성>

34. 홈 화면에 하나씩 끼워지는 위젯

text
<방향>
홈 화면 위젯 소개. 앱 이름은 "[앱 이름]", 위젯은 [작은 위젯] [중간 위젯] [큰 위젯]. 휴대폰 배경은 단색 올리브 #3D4A2F, 위젯은 흰색, 글자 검정, [브랜드 색 · 기본 #FFCF33] 하나. 글꼴 Pretendard. 홈 화면 앱 아이콘 격자 위에서 터치 원이 길게 누르면 아이콘들이 살짝 떨리지 않고 한 단계 작아지며 편집 모드가 된다. 위젯이 아래에서 끌려 올라와 격자 위에 놓이면 아이콘들이 칸을 비켜 밀려나고 위젯이 스프링으로 맞물린다. 위젯마다 놓인 직후 안의 데이터가 한 번 갱신된다(숫자 굴러감, 진행 바). 세 개가 다 놓이면 카메라가 큰 위젯으로 줌. 마지막에 위젯들이 아이콘 하나로 접혀 들어간다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 홈 화면, 길게 누르기. 2~3마디: 작은 위젯. 4~5마디: 중간 위젯. 6마디: 큰 위젯. 7마디: 큰 위젯 줌, 데이터 갱신. 8마디: 위젯이 앱 아이콘으로 접힘.
</구성>

35. 앱 아이콘이 화면이 되는 오프닝

text
<방향>
앱 소개 오프닝. 앱 이름은 "[앱 이름]", 한 줄 소개는 "[한 줄 소개]". 홈 화면 배경은 단색 #E9E5DC, 앱 아이콘은 [브랜드 색 · 기본 #5B5BF7] 바탕에 흰 로고, 그 외 검정. 글꼴 Pretendard. 홈 화면의 여러 아이콘 중 하나를 터치 원이 탭하면, 그 아이콘의 둥근 사각형이 그대로 커지며 화면을 넘어 채우고(다른 아이콘은 바깥으로 밀려남) 아이콘 속 로고가 화면 가운데 남는다. 로고의 획이 풀려 한 줄 소개의 글자 밑줄이 되고 소개 문장이 마스크에서 올라온다. 문장이 위로 밀려나며 앱 첫 화면이 아래에서 올라온다. 첫 화면이 다시 아이콘 크기로 줄어들어 홈 화면 격자로 돌아간다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 6마디. 1마디: 홈 화면, 탭. 2마디: 아이콘 확대 → 로고. 3마디: 로고 획 → 밑줄 → 한 줄 소개. 4~5마디: 앱 첫 화면, 스크롤 한 번. 6마디: 아이콘으로 수축.
</구성>

4. 차트·데이터 (15)

36. 마지막 막대가 화면을 차지하는 성장 차트

text
<방향>
성장 막대 차트. 지표는 "[지표]", 연도와 값은 [연도 1 · 값] ~ [연도 5 · 값]. 오프화이트 #F4F1EA 배경, 막대는 먹색 #1A1A1A, 마지막 막대만 [포인트 색 · 기본 #FF5A1F]. 글꼴 Pretendard, 숫자는 Geist 가능. 가로 기준선 하나가 먼저 그어지고, 박자마다 막대가 하나씩 스프링으로 솟는다. 막대가 솟을 때 그 위 값이 같은 속도로 굴러 올라간다. 마지막 막대는 솟다가 멈추지 않고 계속 자라 화면 위를 뚫고, 카메라가 그 막대를 따라 올라가 막대 안쪽이 화면 전체 배경이 된다. 그 위에 "[값]"이 거대하게 박히고 "[한 줄 설명]"이 아래에서 올라온다. 카메라가 내려오며 막대가 다시 기준선으로 줄어든다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 기준선. 2~3마디: 막대 1~4, 박자마다 하나. 4마디: 마지막 막대가 계속 자람. 5마디: 카메라 상승, 화면이 [포인트 색]. 6~7마디: 큰 숫자, 설명. 8마디: 막대 수축 → 기준선.
</구성>

37. 선 끝이 숫자로 변하는 성장 그래프

text
<방향>
"[숫자]% 성장" 한 문장을 위한 데이터 영상. 다크 #0F0F11 배경, 흰 선, [포인트 색 · 기본 #3DFF8F] 하나. 글꼴 Pretendard, 숫자는 Geist. 선 하나가 왼쪽에서 출발해 박자마다 다음 데이터 점까지 그려진다(점은 작은 원, 지나가면 원이 선에 흡수됨). 마지막 구간에서 선이 가파르게 올라가며 [포인트 색]으로 바뀌고, 끝점의 원이 커지면서 그 안에서 "[숫자]%"가 0부터 굴러 올라간다. 숫자가 다 오르면 원이 숫자를 품은 채 화면 가운데로 이동하고, 그래프 선은 숫자의 밑줄로 접혀 들어간다. "[기간] 동안"이 그 밑줄 위로 올라온다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 6마디. 1~2마디: 선이 박자마다 한 점씩. 3마디: 급상승 구간, 색 바뀜. 4마디: 끝점 원 → 숫자 롤링. 5마디: 가운데 이동, 선이 밑줄로. 6마디: 문장 완성 → 밑줄이 다시 선 시작점으로.
</구성>

38. 순위가 바뀔 때마다 자리를 바꾸는 바 차트 레이스

text
<방향>
국가별 바 차트 레이스. 데이터는 "[데이터 · 예: GDP]", 기간은 [시작 연도]~[끝 연도], 국가 8개. 오프화이트 #F5F3EE 배경, 막대는 회색 계열 명도 차이로만, 1위 막대만 [포인트 색 · 기본 #2F6BFF]. 글꼴 Pretendard, 숫자는 Geist. 막대 길이는 시간에 따라 연속으로 보간되고, 순위가 바뀌면 막대가 위아래로 스프링으로 자리를 바꾼다(겹치지 않게 지나침). 연도 숫자는 구석이 아니라 차트 오른쪽 아래에 크게, 박자마다 1년씩 넘어간다. 1위가 바뀌는 순간 [포인트 색]이 새 1위로 옮겨 가고 카메라가 살짝 그 막대로 줌. 마지막 연도에서 1위 막대가 늘어나 화면을 가로지르고 국가 이름이 커진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 12마디. 1마디: 빈 축, 막대가 박자마다 두 개씩 자람. 2~10마디: 박자마다 1년, 순위 변동. 11마디: 마지막 연도, 1위 막대 확장. 12마디: 막대들이 첫 연도 상태로 되감김.
</구성>

39. 조각마다 선이 뻗어 나가는 도넛 차트

text
<방향>
도넛 차트 비율 영상. 주제는 "[항목]", 조각은 [조각 1 · %] [조각 2 · %] [조각 3 · %] [조각 4 · %]. 크림 #F3EEE4 배경, 조각 색은 먹색 #1B1B1B, 회색 #8E8C86, 연회색 #CFCBC2, 가장 큰 조각만 [포인트 색 · 기본 #E8552D]. 글꼴 Pretendard. 점 하나가 원 궤도를 따라 돌며 지나간 자리에 조각을 칠한다. 조각 하나가 끝날 때마다 그 조각 가운데에서 가는 선이 바깥으로 꺾이며 뻗고, 선 끝에 라벨과 퍼센트가 마스크에서 올라온다. 마지막에 가장 큰 조각이 바깥으로 살짝 빠져나와 커지고, 그 퍼센트가 도넛 가운데로 이동해 크게 박힌다. 조각들이 다시 점으로 감겨 들어간다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 점 등장, 궤도. 2~5마디: 마디마다 조각 하나 + 라벨 선. 6마디: 큰 조각 강조. 7마디: 가운데 큰 숫자. 8마디: 조각이 역순으로 감김 → 점.
</구성>

40. 숫자 세 개가 이어 달리는 KPI 보고

text
<방향>
성과 보고 KPI 영상. 지표는 [매출 · 값] [사용자 수 · 값] [재구매율 · 값]. 화이트 #FFFFFF 배경, 검정 숫자, [포인트 색 · 기본 #00A86B] 하나. 글꼴 Pretendard, 숫자는 Geist. 카드 셋을 나란히 두지 않는다: 숫자 하나가 화면을 채우도록 크게 카운트업되고, 다 오르면 그 숫자가 작아지며 왼쪽 위로 밀려나 다음 숫자의 "앞 숫자" 기록이 된다. 다음 숫자는 앞 숫자의 마지막 자릿수에서 자라나 시작한다. 각 숫자 아래에 지난 기간 대비 변화 "[변화]"가 화살표와 함께 [포인트 색]으로 올라온다. 세 숫자가 끝나면 세 기록이 한 줄로 정렬돼 요약이 되고, 다시 첫 숫자로 접힌다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 9마디. 1~2마디: 매출 카운트업 → 변화. 3마디: 기록으로 밀림. 4~5마디: 사용자 수. 6마디: 기록. 7~8마디: 재구매율. 9마디: 세 기록 정렬 → 첫 숫자로.
</구성>

41. 아래로 갈수록 좁아지는 퍼널과 새는 단계

text
<방향>
퍼널 차트. 단계는 방문 [값] → 가입 [값] → 결제 [값], 가장 많이 이탈하는 단계는 [이탈 단계]. 오프화이트 #F4F2EC 배경, 퍼널은 먹색 #1C1C1C, 이탈 강조만 빨강 #E5372B. 글꼴 Pretendard. 가로 띠 하나가 위에서 그어지고, 박자마다 아래로 한 칸씩 내려가며 폭이 좁아진 다음 띠를 만든다(띠가 늘어났다 줄며 떨어지듯). 각 띠 오른쪽에 값과 전환율이 굴러간다. 이탈 단계에서는 줄어든 폭만큼의 조각이 옆으로 떨어져 나가 빨강으로 쌓이고, 카메라가 그 조각 더미로 줌해 "[이탈 수]명이 여기서 떠나요"를 보여 준다. 다시 빠지면서 조각이 띠로 돌아가 붙는다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 방문 띠. 2마디: 가입 띠. 3마디: 결제 띠. 4마디: 전환율 표시. 5~6마디: 이탈 조각 떨어짐 → 줌 → 문장. 7마디: 줌 아웃. 8마디: 띠들이 위로 말려 첫 띠로.
</구성>

42. 지도 위에서 숨 쉬듯 커지는 도시 점

text
<방향>
지도 데이터 영상. 지역은 "[지역 · 예: 대한민국]", 데이터는 "[데이터]", 도시 [도시 1 · 값] ~ [도시 6 · 값]. 지도는 연회색 #DEDBD3 윤곽선만, 배경 오프화이트 #F6F4EF, 점은 먹색 #191919, 가장 큰 도시만 [포인트 색 · 기본 #FF6B2C]. 글꼴 Pretendard. 지도 윤곽선이 한 획으로 그려진 뒤 박자마다 도시 점 하나가 작은 점에서 값 크기의 원으로 스프링으로 커진다. 원이 커질 때 도시 이름과 값이 원 옆에 마스크로 올라온다. 마지막에 카메라가 가장 큰 도시로 날아가 그 원이 화면을 채우고, 원 안에 값이 거대하게 나온다. 다시 빠지며 모든 원이 점으로 줄어든다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 지도 윤곽 그리기. 2~4마디: 박자마다 도시 하나씩 원 커짐. 5마디: 원들이 크기 순으로 한 번씩 살짝 강조. 6~7마디: 가장 큰 도시 줌, 큰 숫자. 8마디: 줌 아웃, 점으로 수축.
</구성>

43. 가운데 선을 두고 맞붙는 좌우 대결

text
<방향>
비교 대결 차트. 비교 대상은 "[A]" vs "[B]", 항목은 [항목 1] [항목 2] [항목 3] [항목 4]. 배경은 화면 반으로 나눠 왼쪽 #F2EFE8, 오른쪽 #1A1A1A, A는 검정 막대, B는 흰 막대, 이긴 쪽 체크만 [포인트 색 · 기본 #FFD23F]. 글꼴 Pretendard Bold. 가운데 세로선 하나가 박자에 맞춰 위에서 아래로 그어지고, 항목마다 막대가 가운데 선에서 양쪽으로 동시에 자란다. 다 자라면 긴 쪽 끝에 체크가 선으로 그려지고, 이긴 쪽 배경이 그 행만큼 상대 쪽으로 살짝 밀고 들어간다. 네 항목이 끝나면 더 많이 이긴 쪽 배경이 화면 전체를 덮었다가 다시 반으로 돌아온다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 10마디. 1마디: 가운데 선, A·B 이름. 2~9마디: 항목마다 2마디(막대 자람 → 체크·밀기). 10마디: 승자가 화면 덮기 → 반반 복귀.
</구성>

44. 카메라가 따라가는 연도 타임라인

text
<방향>
타임라인 영상. 기간은 [시작 연도]~[끝 연도], 사건은 [연도 · 사건] 6개. 오프화이트 #F3F0E9 배경, 먹색 #151515 선과 글자, [포인트 색 · 기본 #2F6BFF] 하나. 글꼴 Pretendard, 연도는 Geist 가능. 가로선 하나가 왼쪽에서 오른쪽으로 계속 그어지고 카메라가 선의 끝을 따라 이동한다. 사건 지점에 오면 선에서 세로 눈금이 솟고, 연도는 위쪽 마스크에서 크게 내려오고, 사건 설명은 아래 마스크에서 올라온다. 지나간 사건은 화면 밖으로 흘러가며 작은 점만 남는다. 가장 중요한 사건 하나는 눈금이 [포인트 색] 사각형으로 커져 화면을 채웠다가 다시 눈금으로 줄어든다. 끝에 카메라가 빠져 전체 타임라인을 보여 준다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 14마디. 1마디: 선 출발. 2~13마디: 사건마다 2마디(눈금 → 연도·설명), 중요한 사건 하나는 화면 채우기. 14마디: 줌 아웃 → 선이 시작점으로 감김.
</구성>

45. 링 네 개가 박자를 나눠 갖는 설문 결과

text
<방향>
설문 결과 영상. 설문 주제는 "[주제]", 문항과 결과는 [문항 1 · %] [문항 2 · %] [문항 3 · %] [문항 4 · %]. 크림 #F2EDE3 배경, 링 트랙은 연회색 #D9D4C9, 채움은 먹색 #1A1A1A, 가장 높은 결과만 [포인트 색 · 기본 #FF5A1F]. 글꼴 Pretendard. 원 하나가 박자마다 반씩 갈라져 2x2 링 네 개가 된다. 네 링이 동시에 차오르지만 박자마다 한 링씩 가운데 퍼센트 숫자가 커지며 강조된다. 문항 글은 링 아래에서 한 줄씩 올라온다. 다 차면 가장 높은 링이 앞으로 나와 화면을 채우고 숫자가 거대해진다. 링 네 개가 다시 하나로 합쳐진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 원 → 링 네 개. 2~5마디: 동시 채움, 마디마다 한 링 강조 + 문항. 6~7마디: 최고 결과 확대. 8마디: 링 합쳐짐 → 원.
</구성>

46. 지층처럼 흐르는 구성 변화

text
<방향>
스택 영역 차트. 주제는 "[카테고리] 구성 변화", 카테고리 4개 [이름 1]~[이름 4], 기간 [시작]~[끝]. 오프화이트 #F5F2EB 배경, 층 색은 먹색·진회색·연회색, 늘어나는 카테고리만 [포인트 색 · 기본 #1F9E89]. 글꼴 Pretendard. 세로선 하나가 왼쪽에서 오른쪽으로 쓸고 지나가며 그 뒤로 층이 채워진다(지층이 쌓이듯). 쓸고 가는 세로선 위에 현재 시점의 비율이 층마다 숫자로 따라다닌다. 비중이 커지는 카테고리 층은 지나가며 점점 두꺼워지고, 그 이름이 층 안에 크게 써진다. 끝에서 카메라가 그 층으로 줌해 "[시작 %] → [끝 %]"를 보여 준다. 세로선이 되돌아가며 층을 거둬들인다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 축, 세로선 출발. 2~5마디: 박자마다 한 시점씩 층 채움, 숫자 갱신. 6마디: 커지는 층 이름. 7마디: 줌, 변화 숫자. 8마디: 세로선 되감기.
</구성>

47. 화면을 꽉 채우는 숫자 하나

text
<방향>
큰 숫자 하나 영상. 숫자는 "[숫자]", 설명 문장은 "[설명 문장]". 순검정 #000000 배경, 흰 숫자, [포인트 색 · 기본 #FF3D2E] 하나. 글꼴 Pretendard Black, 숫자는 화면 폭을 꽉 채운다. 숫자는 자릿수마다 세로 롤러로 굴러가되 앞자리부터 하나씩 멈춘다(멈출 때마다 박자). 롤러가 멈추면 숫자 전체가 위로 밀려 올라가며 화면의 위쪽 3분의 2를 차지하고, 아래에서 설명 문장이 단어 단위로 마스크에서 올라온다. 문장 속 핵심 단어 하나만 [포인트 색]. 마지막에 숫자 롤러가 다시 0으로 되감기며 문장이 아래로 내려간다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 6마디. 1마디: 0으로 꽉 찬 화면. 2~3마디: 롤링, 박자마다 한 자릿수 멈춤. 4마디: 숫자 상승. 5마디: 설명 문장. 6마디: 되감기.
</구성>

48. 흩어진 점이 추세선으로 정리되는 산점도

text
<방향>
산점도 데이터 스토리. 축은 "[X축]"과 "[Y축]", 결론은 "[결론 한 줄]". 오프화이트 #F4F2ED 배경, 점은 먹색 #1B1B1B, 추세선은 [포인트 색 · 기본 #2F6BFF]. 글꼴 Pretendard. 점 60개가 축 없이 화면에 흩어져 있다(고정 시드로 배치, 무작위 아님). 박자마다 축이 하나씩 그어지면 점들이 각자 실제 좌표로 미끄러져 자리를 잡는다. 추세선이 왼쪽 아래에서 오른쪽 위로 한 획에 그려지고, 선에서 먼 점들은 회색으로 물러나며 가까운 점들만 남는다. 카메라가 추세선 끝으로 줌하고 그 자리에 결론이 마스크로 올라온다. 마지막에 점들이 다시 흩어진 자리로 돌아간다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 흩어진 점. 2마디: X축 → 가로 정렬. 3마디: Y축 → 세로 정렬. 4~5마디: 추세선 그리기, 먼 점 물러남. 6~7마디: 줌, 결론. 8마디: 점 흩어짐 복귀.
</구성>

49. 행을 따라가다 셀 하나로 들어가는 표

text
<방향>
표 데이터 영상. 표 제목은 "[표 제목]", 열 4개 [열 이름], 행 6개, 핵심 셀은 [행 · 열 · 값]. 화이트 #FFFFFF 표, 연회색 #E6E4DF 선, 검정 글자, [포인트 색 · 기본 #FFD84D] 하이라이트 하나. 글꼴 Pretendard, 숫자는 Geist. 표가 위에서 한 행씩 아코디언처럼 펼쳐진다. 하이라이트 띠가 박자마다 한 행씩 내려가며 그 행의 숫자를 살짝 키운다. 핵심 행에 오면 띠가 멈추지 않고 가로로 좁아져 핵심 셀 하나를 감싸고, 카메라가 그 셀로 날아가 셀이 화면을 채운다. 셀 안에서 값이 크게 굴러가고 "[이 값의 의미]"가 아래에서 올라온다. 카메라가 빠지며 표가 위로 접힌다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1~2마디: 표 펼침, 박자마다 한 행. 3~4마디: 하이라이트 띠 내려감. 5마디: 핵심 셀로 좁아짐. 6~7마디: 셀 줌, 값, 의미. 8마디: 줌 아웃, 표 접힘.
</구성>

50. 한 화면에 차례로 그려지는 분기 요약 대시보드

text
<방향>
"이번 분기 요약" 보고서 영상. 회사 또는 팀 이름은 "[이름]", 차트 4개는 [매출 선 차트] [채널별 막대] [비율 도넛] [핵심 숫자]. 웜그레이 #EDEBE6 배경, 흰 패널, 먹색 데이터, [포인트 색 · 기본 #FF5A1F] 하나. 글꼴 Pretendard. 빈 화면에 가로선 하나가 그어지고 그 선이 접히고 갈라지며 2x2 패널 격자가 된다. 패널마다 카메라가 날아가 그 패널이 화면을 채운 상태에서 차트가 그려지고(선은 스스로 그려지고, 막대는 솟고, 도넛은 돌고, 숫자는 굴러감), 다 그려지면 카메라가 빠지며 다음 패널로 이동한다. 마지막에 전체 대시보드가 보이고 가장 중요한 수치 하나만 [포인트 색]. 패널이 다시 선 하나로 접힌다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 12마디. 1마디: 선 → 2x2 격자. 2~3마디: 매출 선 차트. 4~5마디: 채널별 막대. 6~7마디: 비율 도넛. 8~9마디: 핵심 숫자. 10~11마디: 전체 보기, 강조. 12마디: 격자 → 선.
</구성>

5. 다이어그램·설명 영상 (10)

51. 박스가 다음 박스를 낳는 3단계 설명

text
<방향>
30초 설명 영상. 개념은 "[개념]", 단계는 [단계 1 · 한 줄] [단계 2 · 한 줄] [단계 3 · 한 줄]. 오프화이트 #F4F1EA 배경, 먹색 #161616 선, [포인트 색 · 기본 #2F6BFF] 하나. 글꼴 Pretendard. 화살표와 박스를 따로 그리지 않는다: 첫 박스의 오른쪽 변이 늘어나 화살표가 되고, 화살표 끝이 접히며 다음 박스가 된다. 지금 설명 중인 박스만 [포인트 색]으로 채워지고, 카메라가 그 박스가 화면 가운데에 크게 오도록 따라간다. 박스 안에는 단계 이름, 박스 아래에는 설명 한 줄이 마스크에서 올라오고, 각 단계 안에서 작은 아이콘이 실제 동작(데이터가 들어가고 나옴)을 한다. 끝에 카메라가 빠져 세 단계 전체를 보여 주고, 마지막 박스가 화살표로 첫 박스와 이어져 고리가 된다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 15마디. 1~2마디: 개념 제목 → 밑줄이 첫 박스로. 3~6마디: 단계 1. 7~10마디: 단계 2. 11~13마디: 단계 3. 14마디: 줌 아웃, 전체. 15마디: 고리 완성 → 첫 박스로 줌.
</구성>

52. 점 하나가 왕복하는 API 요청 흐름

text
<방향>
API 요청 흐름 다이어그램. 노드는 사용자 → 서버 → 데이터베이스, 요청 예시는 "[요청 · 예: GET /orders]". 다크 #111114 배경, 흰 선, 요청 점은 흰색, 응답 점은 [포인트 색 · 기본 #3DDC97]. 코드 글꼴 Geist Mono, 설명 글꼴 Pretendard. 노드 세 개가 선으로 이어져 그려진 뒤, 요청 점 하나가 사용자에서 출발해 박자에 맞춰 선을 달린다. 점이 노드에 닿으면 노드가 살짝 부풀고 노드 아래에 처리 내용(인증 확인, 쿼리 실행)이 한 줄씩 타이핑된다. 데이터베이스에서 점이 [포인트 색] 응답 점으로 바뀌어 같은 길을 되돌아가고, 사용자 노드에 닿으면 응답 JSON이 아코디언처럼 펼쳐진다. 걸린 시간 "[ms]ms"가 선 위에 크게 표시된다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 노드·선 그려짐. 2마디: 요청 출발 → 서버. 3마디: 서버 처리 두 줄. 4마디: → 데이터베이스, 쿼리. 5마디: 응답 점으로 변환. 6마디: 되돌아감. 7마디: JSON 펼침, ms 숫자. 8마디: JSON 접힘 → 점 사라지고 노드만.
</구성>

53. 위에서부터 가지를 치는 구조도

text
<방향>
구조도 영상. 주제는 "[주제]", 맨 위는 "[최상위]", 그 아래 [2단계 3개], 각 아래 [3단계 항목들]. 크림 #F3EEE5 배경, 먹색 #181818 선과 글자, [포인트 색 · 기본 #E85D2A] 하나. 글꼴 Pretendard. 맨 위 박스에서 선 하나가 아래로 내려오다 박자에 맞춰 세 갈래로 갈라지고, 갈래 끝이 접히며 박스가 된다. 같은 방식으로 다음 단계가 자라난다. 카메라는 새로 자라나는 가지를 따라 내려가며, 한 단계씩 화면을 채우도록 확대·축소한다. 마지막에 가장 중요한 가지 하나의 선이 [포인트 색]으로 위에서 아래까지 다시 그어지며 경로를 강조한다. 가지가 아래부터 거꾸로 접혀 올라가 맨 위 박스만 남는다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 10마디. 1마디: 맨 위 박스. 2~3마디: 2단계 세 갈래. 4~7마디: 3단계 가지들, 박자마다 하나. 8마디: 줌 아웃, 전체. 9마디: 중요 경로 강조. 10마디: 가지 접혀 올라감.
</구성>

54. 원을 따라 도는 4단계 순환

text
<방향>
순환 다이어그램. 가운데 핵심 단어는 "[핵심 단어]", 단계는 [단계 1]~[단계 4]. 오프화이트 #F5F3EE 배경, 먹색 원, [포인트 색 · 기본 #2F6BFF] 하나. 글꼴 Pretendard. 점 하나가 원 궤도를 그리며 돌고, 궤도의 4분의 1마다 단계 노드가 생긴다. 이후 [포인트 색] 호 하나가 원을 따라 박자에 맞춰 이동하며 지금 단계를 감싸고, 그 단계 노드가 커지며 설명 한 줄이 원 바깥쪽에서 마스크로 올라온다. 가운데 핵심 단어는 단계가 바뀔 때마다 글자 폭이 늘었다 줄며 박자를 받는다. 한 바퀴를 돌면 호가 원 전체로 늘어나 닫히고 가운데 단어가 한 번 커진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 10마디. 1마디: 점이 원을 그림. 2마디: 노드 네 개 생김, 가운데 단어. 3~8마디: 단계마다 1.5마디(호 이동 → 노드 확대 → 설명). 9마디: 호가 원 전체로. 10마디: 다시 점 하나로 수축.
</구성>

55. 두 원이 겹쳐 생기는 교집합

text
<방향>
벤 다이어그램 영상. 왼쪽 원은 "[A]", 오른쪽 원은 "[B]", 교집합은 "[핵심]". 화이트 #FAFAF8 배경, 왼쪽 원 테두리는 먹색 #1A1A1A, 오른쪽은 회색 #8F8D87, 교집합만 [포인트 색 · 기본 #FF5A1F] 채움. 글꼴 Pretendard. 화면 양쪽 끝에서 원 두 개가 테두리로 그려지고, 각 원 안에 이름과 특징 세 단어가 박자마다 하나씩 올라온다. 두 원이 서로를 향해 미끄러지다 겹치는 순간 겹친 렌즈 모양만 [포인트 색]으로 채워지고, 그 안에서 "[핵심]"이 마스크로 올라온다. 카메라가 렌즈로 줌해 렌즈가 화면을 채우고, 설명 한 줄이 붙는다. 다시 빠지며 두 원이 양쪽으로 갈라진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 두 원 그려짐. 2~3마디: 원마다 특징 세 단어. 4마디: 원이 다가가 겹침. 5마디: 교집합 채움 + 핵심 단어. 6~7마디: 줌, 설명. 8마디: 원이 갈라짐.
</구성>

56. 7단계가 2단계로 접히는 자동화

text
<방향>
"before → after" 프로세스 비교. 수작업 단계 7개 [단계 1]~[단계 7], 자동화 후 단계 2개 [자동 1] [자동 2], 제품 이름은 "[제품 이름]". 웜그레이 #ECEAE5 배경, 먹색 박스, 회색 #A3A19B 화살표, 자동화 박스만 [포인트 색 · 기본 #19C37D]. 글꼴 Pretendard. 수작업 단계 박스 7개가 박자마다 하나씩 오른쪽으로 이어지며 화면 밖까지 길어지고, 카메라가 따라가며 점점 멀어져야 전체가 보일 만큼 길어진다. 아래에 걸린 시간 "[시간]"이 쌓인다. 커서가 "[제품 이름]" 버튼을 누르면 박스 7개가 아코디언처럼 접혀 들어가며 2개로 합쳐지고, 시간 숫자가 "[줄어든 시간]"으로 굴러 내려간다. 다시 펼쳐져 7개로 돌아간다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 10마디. 1~4마디: 박스 7개, 박자마다 하나, 카메라 후퇴. 5마디: 걸린 시간. 6마디: 커서 클릭. 7~8마디: 아코디언 접힘 → 2개, 시간 감소. 9마디: "[한 줄 카피]". 10마디: 다시 7개로 펼침.
</구성>

57. 중심 단어에서 뻗어 나가는 마인드맵

text
<방향>
마인드맵 영상. 중심 단어는 "[주제]", 가지는 [가지 1]~[가지 5], 가지마다 잔가지 두 개. 짙은 녹색 #13241D 배경, 크림 #EFE9DC 선과 글자, [포인트 색 · 기본 #F2C14E] 하나. 글꼴 Pretendard. 가운데 단어에서 가지가 박자마다 하나씩 뻗어 나가는데, 직선이 아니라 부드러운 곡선으로 그려지고 끝에서 단어가 마스크로 올라온다. 가지가 생길 때마다 카메라가 그쪽으로 조금씩 기울어 따라간다. 잔가지는 두 박자에 두 개씩 빠르게. 마지막 가지가 끝나면 가장 중요한 가지 하나만 [포인트 색]으로 바뀌며 그 가지로 줌. 가지들이 거꾸로 감겨 중심 단어로 돌아간다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 10마디. 1마디: 중심 단어. 2~6마디: 마디마다 가지 하나 + 잔가지 둘. 7~8마디: 줌 아웃, 중요한 가지 강조. 9마디: 그 가지로 줌. 10마디: 가지 감김.
</구성>

58. 노드에 불이 들어오는 AI 에이전트 작업 과정

text
<방향>
AI 에이전트 작업 과정 다이어그램. 질문은 "[질문]", 쓰는 도구는 [도구 1] [도구 2]. 다크 #0F1012 배경, 꺼진 노드는 회색 #3A3A3E 테두리, 켜진 노드는 흰 채움, 지금 실행 중인 노드만 [포인트 색 · 기본 #D97757]. 노드 글꼴 Pretendard, 도구 호출 줄은 Geist Mono. 노드 순서는 질문 → 계획 → 도구 호출 1 → 결과 → 도구 호출 2 → 결과 → 답변. 노드들이 꺼진 채 선으로 이어져 있고, 신호가 선을 따라 흐르며 노드에 닿을 때마다 노드가 켜진다. 실행 중인 노드는 커져서 안에 실제 내용(도구 호출 코드 한 줄, 결과 숫자)이 타이핑된다. 카메라가 실행 중인 노드를 따라 이동하며 그 노드가 화면을 채우도록 줌. 답변 노드가 켜지면 답변 문장이 펼쳐진 뒤 모든 노드가 거꾸로 꺼진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 14마디. 1마디: 꺼진 노드들. 2마디: 질문. 3마디: 계획. 4~5마디: 도구 1. 6마디: 결과. 7~8마디: 도구 2. 9마디: 결과. 10~12마디: 답변 펼침. 13~14마디: 거꾸로 꺼짐.
</구성>

59. 3D로 벌어지는 층 구조

text
<방향>
레이어 구조 설명. 주제는 "[주제]", 층은 아래부터 [층 1]~[층 4]. 오프화이트 #F2F0EA 배경, 층은 흰 판에 먹색 #1A1A1A 테두리, 지금 설명하는 층만 [포인트 색 · 기본 #4C6FFF]. 글꼴 Pretendard. 정면에서 보이는 사각형 하나가 카메라 회전과 함께 비스듬한 판으로 눕고, 그 판이 박자마다 한 장씩 위로 분리되며 4층이 된다(층 사이 간격이 스프링으로 벌어짐). 층마다 옆으로 가는 선이 뻗어 이름과 설명이 마스크에서 올라온다. 설명 중인 층은 살짝 앞으로 빠져나와 [포인트 색]이 되고, 그 층 위에 작은 요소들이 실제로 움직인다. 마지막에 층이 다시 포개지고 카메라가 정면으로 돌아와 사각형 하나가 된다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 12마디. 1마디: 정면 사각형 → 눕기. 2마디: 4층 분리. 3~10마디: 층마다 2마디(빠져나옴 → 설명 → 복귀). 11마디: 전체 보기. 12마디: 포개짐 → 정면.
</구성>

60. 원인과 결과가 도미노처럼 이어지는 체인

text
<방향>
"왜 [문제]가 생기는가" 설명 영상. 원인 체인은 [원인 1] → [원인 2] → [원인 3] → [결과]. 크림 #F4EEE3 배경, 먹색 #171717 글자, 화살표는 회색 #9C9890, 마지막 결과만 빨강 #E0402A. 글꼴 Pretendard Bold. 원인 문장이 카드에 담겨 세로로 서 있고, 박자에 맞춰 첫 카드가 쓰러지며 다음 카드를 밀어 넘어뜨린다. 카드가 쓰러지는 자리에서 화살표가 늘어나 다음 카드로 이어진다. 카메라는 쓰러지는 카드를 따라 옆으로 이동한다. 마지막 결과 카드가 쓰러지는 순간 빨강으로 바뀌며 화면을 덮었다가 수축해 "[해결 한 줄]"이 남는다. 카드들이 거꾸로 일어서며 처음 상태로. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 10마디. 1마디: 제목 질문. 2~3마디: 원인 1 쓰러짐. 4~5마디: 원인 2. 6~7마디: 원인 3. 8마디: 결과, 빨강이 화면 덮음. 9마디: 수축 → 해결 문장. 10마디: 카드들 되감겨 일어섬.
</구성>

6. 글자 애니메이션(키네틱 타이포) (15)

61. 점 하나가 잇는 키네틱 타이포 필름

text
<방향>
15초 키네틱 타이포 필름. 문장은 "[문장]". 따뜻한 오프화이트 #F3EFE7 캔버스, 거의 검정 #121212 글자, [포인트 색 · 기본 #FF5A1F] 하나. 글꼴 Pretendard. 점 하나가 모든 장면을 잇는다: 점이 늘어나 단어의 밑줄이 되고, 글자가 마스크 선에서 올라오고, 강조 단어에서 검은 도형이 화면 전체를 삼켰다가 다음 단어로 수축한다. 강조 단어는 크게, 나머지는 작게. 자르거나 페이드하지 않는다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 6마디. 1마디: 점 등장 → 첫 단어. 2마디: 둘째 단어(글자 폭이 늘었다 줄며 리듬). 3~4마디: 강조 단어(검은 도형이 화면을 덮고 수축). 5마디: 마지막 단어. 6마디: 점으로 돌아감.
</구성>

62. 화면보다 큰 단어가 박자마다 박히는 슬로건

text
<방향>
브랜드 슬로건 영상. 슬로건은 "[슬로건]"(3~5단어). 배경은 단어마다 검정 #0E0E0E와 [브랜드 색 · 기본 #FFE14D]이 번갈아, 글자는 그 반대 색. 글꼴 Pretendard Black, 단어 하나가 화면 폭을 넘칠 만큼 크다. 단어는 위에서 떨어지지 않는다: 앞 단어의 마지막 글자가 세로로 늘어나 화면을 반으로 가르는 판이 되고, 그 판이 옆으로 밀리며 뒤에서 다음 단어가 드러난다. 박자에 정확히 맞춰 단어가 바뀌고 그 순간에만 글자가 1프레임 살짝 커졌다 돌아온다(튀지 않게). 마지막 단어 뒤 슬로건 전체가 한 줄로 작아지며 모인다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 4마디. 1~3마디: 박자 둘에 단어 하나씩, 배경 색 교대. 4마디: 전체 슬로건 한 줄 → 첫 단어로 다시 확대.
</구성>

63. 마스크에서 밀려 올라오는 고급 브랜드 인트로

text
<방향>
고급 브랜드 인트로. 브랜드는 "[브랜드]", 문구는 "[문구]". 깊은 먹색 #141311 배경, 상아색 #EDE6D8 글자, [포인트 색 · 기본 #B89B6A] 하나(얇은 선에만). 글꼴 Pretendard Light, 넓은 자간. 가는 가로선 하나가 화면 가운데를 천천히 가로지르고, 그 선이 마스크의 윗변이 된다: 문구의 글자들이 선 아래에서 한 글자씩 위로 밀려 올라온다(올라올 때 살짝 기울었다 바로 섬). 다 올라오면 선이 아래로 내려가며 글자 아랫부분부터 다시 가려지고, 대신 브랜드 이름이 선 위로 올라온다. 마지막에 선만 남아 짧아진다. 모든 움직임은 느리고 무겁게 감속한다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
96 BPM, 6마디. 1마디: 선 가로지름. 2~3마디: 문구 한 글자씩 상승. 4마디: 선 하강, 문구 가려짐. 5마디: 브랜드 이름 상승. 6마디: 이름 가려지고 선만 짧아짐.
</구성>

64. 타자기로 쳐지는 인용문

text
<방향>
인용문 영상. 인용문은 "[인용문]", 말한 사람은 "[이름]". 종이 같은 크림 #F1EBDD 배경, 잉크색 #1D1B18 글자, [포인트 색 · 기본 #C2412D] 하나. 글꼴은 고정폭 느낌을 위해 Pretendard에 tabular 숫자, 문장은 크게. 글자가 박자의 8분음표에 맞춰 한 글자씩 찍히고, 찍힐 때마다 아주 짧게 위로 눌렸다 돌아온다. 캐럿이 글자 끝을 따라다닌다. 쉼표·마침표에서는 한 박 쉰다. 핵심 구절에 오면 캐럿이 되돌아가며 그 구절 아래 [포인트 색] 밑줄을 손으로 긋듯 그린다. 문장이 끝나면 캐럿이 아래로 내려가 "— [이름]"이 같은 방식으로 쳐진다(페이드인 대신 타이핑). 마지막에 모든 글자가 뒤에서부터 지워진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 10마디. 1마디: 캐럿만 깜빡. 2~6마디: 인용문 타이핑. 7마디: 핵심 구절 밑줄. 8마디: 이름 타이핑. 9~10마디: 뒤에서부터 지우기 → 캐럿.
</구성>

65. 숫자와 글자가 맞물리는 타이포 포스터

text
<방향>
움직이는 타이포 포스터. 문구는 "[숫자] [단어]"(예: "24 시간"). 순백 #FFFFFF 배경, 검정 #0A0A0A, [포인트 색 · 기본 #FF3B1F] 하나. 숫자는 Geist Black, 단어는 Pretendard Black. 숫자가 화면 높이만큼 거대하게 서 있고, 단어는 숫자의 빈 공간(0의 안쪽, 4의 삼각형) 사이로 끼워져 들어간다. 박자마다 포스터 그리드가 바뀐다: 숫자가 세로로 늘었다가, 가로로 눌렸다가, 반으로 잘려 위아래가 엇갈렸다가 다시 맞물린다. 단어는 그때마다 남는 공간을 찾아 이동하며 크기를 바꾼다. [포인트 색]은 박자마다 한 글자에만 옮겨 다닌다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 기본 포스터. 2~7마디: 마디마다 레이아웃 하나(늘이기, 누르기, 엇갈리기, 회전 90도, 겹치기, 분할). 8마디: 기본 포스터로 맞물림.
</구성>

66. 녹았다 다시 굳는 단어 세 개

text
<방향>
단어 전환 영상. 단어는 [단어 1] → [단어 2] → [단어 3]. 다크 #101012 배경, 크림 #F2EDE2 글자, [포인트 색 · 기본 #FF8A3D] 하나. 글꼴 Pretendard Black. 단어의 아랫부분부터 녹아내린다: 글자 획 끝이 아래로 늘어지며 굵은 방울처럼 흘러내리고(메타볼 방식, 형태는 선명하게), 바닥에 고인 덩어리가 다시 위로 솟으며 다음 단어의 획으로 굳는다. 굳는 순간 글자 가장자리가 날카롭게 정리된다. 두 번째 단어만 [포인트 색]. 세 번째 단어가 녹으면 바닥 덩어리가 첫 단어로 다시 굳는다. 블러로 뭉개지 말고 테두리가 선명한 덩어리로. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 6마디. 1마디: 단어 1. 2마디: 녹음 → 단어 2로 굳음. 3마디: 단어 2 유지, 박자마다 글자 폭 흔들림. 4마디: 녹음 → 단어 3. 5마디: 단어 3 유지. 6마디: 녹음 → 단어 1.
</구성>

67. 말하는 속도에 붙는 세로 큰 자막

text
<방향>
세로 영상용 큰 자막 스타일. 대사는 "[대사]", 핵심 단어는 [핵심 단어들]. 단색 배경 #1A1A1A(실제 쓸 때는 영상 위에 올림), 흰 글자, 핵심 단어만 노랑 #FFD400. 글꼴 Pretendard ExtraBold, 화면 가운데 아래 3분의 1. 단어가 말하는 박자에 맞춰 한 단어씩 붙는다: 새 단어는 마스크 선 아래에서 올라오고, 한 줄이 차면 줄 전체가 위로 밀려나며 다음 줄이 시작된다(최대 2줄만). 핵심 단어는 올라올 때 다른 단어보다 1.3배 크고, 뒤에 노랑 띠가 왼쪽에서 오른쪽으로 그어진다. 자막은 페이드 없이 밀림으로만 사라진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디, 박자 하나에 단어 하나(쉼표는 한 박 쉼). 대사 길이에 맞춰 마디 수를 늘려도 된다. 마지막 마디: 마지막 줄이 위로 밀려나 빈 화면.
</구성>

68. 그림자가 겹겹이 늘어나는 3D 타이포

text
<방향>
3D처럼 보이는 타이포 인트로. 문구는 "[문구]". 크림 #F2E9D8 배경, 글자 앞면은 [포인트 색 · 기본 #FF5A36], 뒤로 늘어나는 그림자 층은 먹색 #1A1A1A 단색. 글꼴 Pretendard Black. 평평한 글자에서 시작해 박자마다 그림자 층이 한 겹씩 대각선 아래로 쌓여 글자가 두꺼운 블록이 된다(그라데이션 없이 단색 층으로만). 블록이 된 글자가 카메라 쪽으로 기울며 그림자 방향이 왼쪽에서 오른쪽으로 쓸려 바뀌고, 그때 그림자 길이가 늘었다 줄었다 한다. 마지막에 그림자 층이 한 겹씩 앞면으로 빨려 들어가 다시 평평해진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 6마디. 1마디: 평평한 글자. 2마디: 그림자 층 쌓임. 3~4마디: 기울며 그림자 방향 회전. 5마디: 길이 늘었다 줄기. 6마디: 층 흡수 → 평평.
</구성>

69. 반대로 흐르는 거대한 글자 띠

text
<방향>
글자 띠 배경 + 가운데 핵심 문구. 띠 문구는 "[띠 문구]", 핵심 문구는 "[핵심 문구]". 띠 3줄: 위·아래 띠는 먹색 #141414 바탕에 크림 글자, 가운데 띠는 [브랜드 색 · 기본 #C8F03C] 바탕에 먹색 글자. 글꼴 Pretendard Black, 띠 글자는 화면 높이의 4분의 1. 세 줄이 서로 반대 방향으로 흐르되 박자마다 속도가 한 번씩 빨라졌다 원래 속도로 돌아온다. 띠는 살짝 기울어 교차한다. 4마디째 가운데 띠가 멈추며 세로로 두꺼워져 화면을 덮고, 그 안에 핵심 문구가 크게 박힌다. 다시 띠가 얇아지며 흐름 재개. 마지막 프레임 = 첫 프레임(띠 위치가 정확히 한 바퀴).
</방향>
<구성>
120 BPM, 8마디. 1~3마디: 세 줄 흐름, 박자마다 가속. 4마디: 가운데 띠 정지 → 확장. 5~6마디: 핵심 문구. 7마디: 띠 수축, 흐름 재개. 8마디: 루프 위치 맞춤.
</구성>

70. 한 획으로 써지는 손글씨 문구

text
<방향>
손글씨 영상. 문구는 "[문구]". 따뜻한 종이색 #F4EEE2 배경, 잉크 #1C1A17, 마지막 장식 선만 [포인트 색 · 기본 #D1462F]. 손글씨 느낌의 SVG 경로로 문구를 만들고(필요하면 글꼴 윤곽을 획 중심선으로 변환), 펜 끝 하나가 경로를 따라가며 선을 그린다. 획 굵기는 속도에 따라 달라진다(빠르면 얇게, 꺾이면 굵게). 획과 획 사이에는 펜이 들려 다음 시작점으로 이동하는 짧은 공백. 다 쓰면 펜이 문구 아래에 [포인트 색] 밑줄을 휙 긋고 화면 밖으로 빠진다. 그다음 선이 쓰인 순서의 반대로 지워진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 펜 진입. 2~6마디: 박자마다 한 글자(획 수에 맞춰 조절). 7마디: 밑줄, 펜 퇴장. 8마디: 역순 지우기.
</구성>

71. 픽셀 블록으로 나뉘었다 모이는 인트로

text
<방향>
픽셀 블록 인트로. 문구는 "[문구]". 순검정 #000000 배경, 흰 블록, [포인트 색 · 기본 #00E5A0] 하나. 글꼴 Pretendard Black을 16px 격자로 래스터화해 정사각 블록으로 만든다. 글리치처럼 색을 나누지 않는다: 문구가 격자 블록으로 바뀌고, 블록들이 박자마다 행 단위로 좌우로 밀려 문구가 계단처럼 어긋났다가 맞춰진다. 그다음 블록들이 열 단위로 아래로 떨어져 바닥에 쌓이고, 쌓인 블록이 다시 위로 솟으며 문구를 재조립한다. 재조립되는 순간 블록 경계가 사라지고 매끈한 글자로 바뀐다. 어긋난 행 하나만 [포인트 색]. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 6마디. 1마디: 매끈한 문구 → 블록화. 2마디: 행 밀림 → 맞춤. 3마디: 열 단위 낙하. 4마디: 바닥에 쌓임. 5마디: 솟아 재조립. 6마디: 매끈한 글자.
</구성>

72. 물음표가 느낌표로 휘는 질문 타이포

text
<방향>
질문형 타이포. 질문은 "[질문]?", 답은 "[답 문장]". 오프화이트 #F4F2EC 배경, 먹색 #121212 글자, [포인트 색 · 기본 #2F6BFF] 하나. 글꼴 Pretendard Black. 질문이 단어 단위로 마스크에서 올라오고, 마지막에 물음표가 화면 높이만큼 크게 따로 선다. 물음표의 곡선이 박자에 맞춰 펴지면서 세로 막대가 되고 점은 그대로 남아 느낌표가 된다. 느낌표의 막대가 옆으로 쓰러지며 가로선이 되고, 그 선이 답 문장의 밑줄이 되어 답이 그 위로 올라온다. 답의 핵심 단어만 [포인트 색]. 마지막에 밑줄이 다시 일어서 물음표로 휘어진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 6마디. 1마디: 질문 단어들. 2마디: 큰 물음표. 3마디: 물음표 → 느낌표. 4마디: 느낌표 쓰러짐 → 밑줄. 5마디: 답 문장. 6마디: 밑줄이 물음표로.
</구성>

73. 박자마다 옷을 갈아입는 한 단어

text
<방향>
플래시 타이포. 단어는 "[단어]". 배경은 오프화이트 #F3F1EB, 글자 먹색 #111111, 4박마다 한 번 반전(먹색 배경에 오프화이트 글자), [포인트 색 · 기본 #FF4D2E]는 마지막 마디에만. 글꼴은 Pretendard 굵기 9단계(Thin~Black)와 자간·폭 변화로만 다양하게 만든다(외부 글꼴 여러 개 대신 한 글꼴의 변주). 박자마다 단어의 굵기·폭·자간·크기가 한 가지씩 바뀌되, 바뀔 때 글자가 중심에서 스프링으로 늘어나거나 눌린다. 8분음표 구간에서는 두 배 속도로 바뀐다. 마지막 마디에 단어가 화면 폭을 꽉 채운 Black이 되고 [포인트 색]으로 뒤집힌다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 6마디. 1~2마디: 박자마다 변화 하나. 3마디: 반전 배경. 4~5마디: 8분음표로 두 배 속도. 6마디: 꽉 찬 Black → 첫 상태로.
</구성>

74. 위로 흐르며 하나씩 선택되는 리스트

text
<방향>
리스트 타이포. 항목은 "[항목 1] / [항목 2] / [항목 3] / [항목 4] / [항목 5]". 먹색 #121212 배경, 회색 #5C5C5C 글자, 선택된 항목만 흰색 #FFFFFF이고 왼쪽에 [포인트 색 · 기본 #FF5A1F] 막대. 글꼴 Pretendard Bold, 항목은 화면 폭의 70% 크기. 리스트가 세로로 끝없이 이어지는 롤러처럼 위로 흐르고, 박자마다 한 칸씩 스냅되며 가운데 오는 항목이 선택된다. 선택된 항목은 회색에서 흰색으로 바뀌는 대신 글자가 위로 한 번 밀리며 흰 글자가 아래에서 올라와 교체되고, 굵기가 한 단계 굵어진다. 위아래 항목은 원통 표면처럼 원근으로 눌린다. 다섯 항목 뒤 첫 항목으로 끊김 없이 이어진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 5마디, 마디마다 항목 하나(박자 1: 스냅, 박자 2~3: 선택 교체, 박자 4: 다음 준비). 마지막 마디 끝이 첫 마디 시작과 같은 위치.
</구성>

75. 이름이 올라가고 로고로 닫히는 엔딩 크레딧

text
<방향>
엔딩 크레딧. 이름과 역할은 [역할 · 이름] 목록, 마지막 로고는 "[로고 또는 브랜드 이름]". 순검정 #000000 배경, 흰 글자, 역할은 회색 #8A8A8A, [포인트 색 · 기본 #E8C26A]는 로고에만. 글꼴 Pretendard, 역할은 작게 오른쪽 정렬, 이름은 왼쪽 정렬로 가운데 세로축을 두고 마주 본다. 크레딧이 일정한 속도로 위로 흐르되 박자마다 한 줄이 가운데 축을 지날 때 이름이 살짝 굵어진다. 마지막 이름이 지나가면 가운데 세로축이 짧아지며 점이 되고, 점이 늘어나 로고 윤곽을 그리고 로고가 채워진다. 로고가 다시 점으로 줄어든다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 12마디. 1~9마디: 크레딧 흐름(인원에 맞춰 늘려도 됨). 10마디: 축 → 점. 11마디: 점 → 로고. 12마디: 로고 → 점.
</구성>

7. 도형·추상 모션 (10)

76. 원·사각형·삼각형이 박자로 바뀌는 추상 필름

text
<방향>
15초 추상 도형 필름. 색은 [색 1 · 기본 #FF5A1F] [색 2 · 기본 #2F6BFF] [색 3 · 기본 #FFD23F]와 오프화이트 #F3F0E8 배경, 먹색 #111111. 도형은 원·사각형·삼각형 세 개뿐이고 새 도형을 만들지 않는다: 원의 지름이 늘어나 사각형의 한 변이 되고, 사각형 모서리 하나가 접혀 삼각형이 되고, 삼각형 꼭짓점이 둥글어져 다시 원이 된다. 박자마다 한 번 변형하고, 변형이 끝나는 순간 색이 다음 색으로 넘어간다. 4마디마다 도형 하나가 화면을 덮을 만큼 커졌다가 그 안에서 다음 도형이 작게 시작된다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디, 박자마다 변형 하나. 1~3마디: 원 → 사각형 → 삼각형 순환. 4마디: 화면 덮기 → 안에서 재시작. 5~7마디: 순환이 두 배 속도(8분음표). 8마디: 원 하나로 돌아옴.
</구성>

77. 끊기지 않는 선 하나가 그리는 로고

text
<방향>
원라인 애니메이션. 그릴 모양은 "[로고 모양]". 크림 #F2ECE0 배경, 먹색 #161616 선 하나, 끝점에 [포인트 색 · 기본 #FF5A1F] 원 하나. 선 굵기는 일정하게 6px. 선이 화면 왼쪽 밖에서 들어와 한 번도 끊기지 않고 고리·꺾임·나선을 지나며 박자마다 하나씩 작은 모양(원, 계단, 물결)을 그렸다가 그 모양을 따라 다시 빠져나와 다음으로 간다. 카메라는 선의 끝점을 따라간다. 마지막 4마디에서 카메라가 빠지며 지금까지의 선이 사실은 [로고 모양]의 윤곽 위를 지나고 있었다는 게 보이고, 남은 구간을 그려 로고가 닫힌다. 선이 끝점부터 거꾸로 감겨 사라진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 10마디. 1~5마디: 박자마다 작은 모양 하나, 카메라 추적. 6~7마디: 줌 아웃, 로고 윤곽 드러남. 8마디: 로고 닫힘, 끝점 원 [포인트 색]. 9~10마디: 거꾸로 감김.
</구성>

78. 출렁이던 점 격자가 로고로 모이기

text
<방향>
점 격자 모션. 모일 모양은 "[로고/글자]". 짙은 남색 #0E1626 배경, 크림 #EDE7DA 점, 로고가 된 점만 [포인트 색 · 기본 #FFB547]. 32x18 점 격자가 화면을 고르게 채우고, 박자마다 왼쪽에서 오른쪽으로 파도가 지나가며 점이 위아래로 출렁이고 크기가 커졌다 작아진다(사인 함수, 무작위 없음). 4마디째 파도가 가운데로 모이는 동심원 파도로 바뀌고, 로고 모양에 해당하는 점들만 가운데로 미끄러져 로고를 이루며 [포인트 색]으로 바뀐다. 나머지 점은 작아져 배경 질감으로 남는다. 로고가 다시 격자로 풀리며 파도가 재개된다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1~3마디: 가로 파도, 박자마다 한 번. 4마디: 동심원 파도로 전환. 5마디: 점 이동 → 로고. 6마디: 로고 유지, 박자마다 로고 점 크기 맥동. 7마디: 격자로 풀림. 8마디: 가로 파도 재개.
</구성>

79. 합쳐졌다 나뉘는 메타볼 배경

text
<방향>
메타볼 배경 애니메이션. 오프화이트 #F4F1EA 배경, 덩어리는 먹색 #161616 하나와 [포인트 색 · 기본 #FF5A1F] 하나 두 가지만. 테두리가 선명한 둥근 덩어리 다섯 개(먹색 넷, 포인트 하나)가 정해진 궤도를 돈다. 가까워지면 끈적하게 다리가 생기며 합쳐지고, 멀어지면 다리가 가늘어지다 끊긴다. 박자마다 두 덩어리가 합쳐지거나 나뉜다. 4마디마다 모든 덩어리가 가운데 하나로 합쳐져 큰 원이 됐다가 다섯 방향으로 늘어나며 다시 갈라진다(덩어리 다섯 개로만). [포인트 색] 덩어리는 다른 덩어리와 합쳐질 때 그 부분만 색이 섞이지 않고 경계가 유지된다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1~3마디: 박자마다 합침/나눔 하나. 4마디: 하나로 합쳐짐 → 갈라짐. 5~7마디: 궤도가 반대 방향. 8마디: 하나로 → 처음 배치.
</구성>

80. 도미노처럼 뒤집히는 타일 전환

text
<방향>
타일 뒤집기 전환. 앞 화면 색은 먹색 #121212, 뒷면 색은 [브랜드 색 · 기본 #FFD23F], 세 번째 면은 오프화이트 #F3F0E8. 화면이 12x21(세로) 정사각 타일로 나뉘어 있다. 왼쪽 위 타일 하나가 3D로 뒤집히면 이웃 타일이 시간차를 두고 뒤집히며 대각선 물결이 화면 전체로 번진다. 뒤집히는 타일은 축을 중심으로 실제 원근이 보이고, 넘어가는 중간에 옆면 두께가 살짝 보인다. 다음 전환은 가운데에서 바깥으로, 그다음은 아래에서 위로 방향을 바꾼다. 마지막 전환이 끝나면 첫 색으로 돌아온다. 전환 사이에 한 박 동안 타일이 숨 쉬듯 살짝 작아졌다 커진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 6마디. 1~2마디: 대각선 물결 → 노랑. 3~4마디: 가운데에서 바깥으로 → 오프화이트. 5~6마디: 아래에서 위로 → 먹색(처음).
</구성>

81. 동심원이 퍼지며 나타나는 아이콘

text
<방향>
로딩·인트로 모션. 가운데 아이콘은 "[아이콘 또는 로고]". 순백 #FFFFFF 배경, 먹색 #141414 고리, 아이콘은 [포인트 색 · 기본 #2F6BFF]. 박자마다 가운데에서 얇은 고리 하나가 생겨 바깥으로 퍼지고, 퍼질수록 굵기가 얇아진다(투명도로 사라지지 않고 굵기 0이 되며 사라짐). 고리들이 쌓이다가 4박째 고리 하나가 반대로 안쪽으로 수축하며 가운데에서 아이콘을 찍어 내듯 나타나게 한다. 아이콘이 나타난 뒤 고리 퍼짐이 아이콘 테두리에서 시작한다. 마지막에 아이콘이 고리 하나로 풀려 가운데 점이 된다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 4마디. 1마디: 박자마다 고리 하나 퍼짐. 2마디: 안쪽으로 수축 → 아이콘. 3마디: 아이콘 테두리에서 고리 퍼짐. 4마디: 아이콘 → 고리 → 점.
</구성>

82. 버튼에서 체크까지 도형 하나로

text
<방향>
UI 상태 전환 마이크로 모션. 버튼 문구는 "[버튼 문구]". 웜그레이 #ECEAE5 배경, 먹색 #151515 버튼, 흰 글자, 완료 상태만 [포인트 색 · 기본 #19C37D]. 글꼴 Pretendard. 도형 하나로만: 알약 모양 버튼 → 커서 클릭(버튼이 살짝 눌림) → 글자가 위로 빠지고 알약이 양옆에서 줄어들어 원 → 원 테두리 일부가 호가 되어 도는 로딩 → 호가 원을 닫는 순간 [포인트 색]으로 채워지며 체크 선이 그려짐 → 체크가 짧게 머문 뒤 원이 다시 양옆으로 늘어나 알약이 되고 글자가 아래에서 올라온다. 카메라는 버튼이 화면의 절반을 차지하도록 가깝게. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 4마디. 1마디: 버튼, 커서 진입 → 클릭. 2마디: 알약 → 원 → 로딩. 3마디: 로딩 닫힘 → 체크. 4마디: 원 → 알약, 글자 복귀.
</구성>

83. 별자리처럼 이어지는 단어

text
<방향>
별자리 모션. 단어는 "[단어]". 깊은 남색 #0B1020 배경, 점과 선은 상아색 #EDE6D6, 마지막 연결선만 [포인트 색 · 기본 #F2C14E]. 글꼴 윤곽을 따라 단어 글자의 꼭짓점 위치에 점을 놓되, 처음에는 그 점들이 화면 곳곳에 별처럼 흩어져 있다(고정 시드). 박자마다 점 두세 개가 제자리로 미끄러지고, 자리에 온 점끼리 가는 선이 한 획으로 이어진다. 선이 늘어날수록 단어 윤곽이 드러난다. 마지막 선 하나가 [포인트 색]으로 그어지며 단어가 완성되고, 카메라가 살짝 다가간다. 그다음 선이 역순으로 지워지고 점은 다시 흩어진다. 글로우 없이 선명한 점과 선만. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 흩어진 점. 2~5마디: 박자마다 점 이동 + 선 연결. 6마디: 마지막 선, 단어 완성. 7마디: 카메라 다가감. 8마디: 선 지움, 점 흩어짐.
</구성>

84. 박자마다 하나씩 쌓이는 블록 탑

text
<방향>
블록 쌓기 모션. 마지막 블록에는 "[브랜드 이름]". 크림 #F2EDE2 배경, 블록은 먹색 #171717·회색 #8D8A83·연회색 #D4CFC4, 마지막 블록만 [브랜드 색 · 기본 #FF5A1F]. 글꼴 Pretendard Black. 블록이 위에서 떨어지지 않고 옆에서 미끄러져 들어와 아래 블록 위에 정확히 멈춘다(멈출 때 아래 블록들이 한 번 살짝 눌렸다 펴짐). 블록마다 폭과 높이가 조금씩 다르고, 탑이 높아질수록 카메라가 위로 올라간다. 마지막 블록은 화면 가운데에 크게 들어와 브랜드 이름이 블록 표면에 각인되듯 찍힌다. 카메라가 빠져 탑 전체가 보이고, 블록들이 위에서부터 하나씩 옆으로 빠져나가 바닥만 남는다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1~5마디: 박자마다 블록 하나, 카메라 상승. 6마디: 마지막 블록 + 브랜드 이름. 7마디: 줌 아웃, 전체 탑. 8마디: 블록이 위에서부터 빠짐.
</구성>

85. 궤도를 돌다 로고로 빨려 드는 아이콘

text
<방향>
궤도 모션. 가운데 로고는 "[로고]", 주변 아이콘은 [아이콘 6개 · 예: 연동하는 서비스들]. 오프화이트 #F5F3EE 배경, 궤도선은 연회색 #D6D3CC, 아이콘은 흰 원에 먹색 그림, 로고는 [브랜드 색 · 기본 #2F6BFF]. 궤도 두 개(안쪽 시계 방향, 바깥 반시계 방향)가 한 획으로 그려지고, 아이콘이 박자마다 하나씩 궤도 위에 스프링으로 놓인다. 다 놓이면 궤도가 점점 빨리 돌다가, 박자마다 아이콘 하나씩 나선을 그리며 가운데 로고로 빨려 들어가고, 들어갈 때마다 로고가 한 단계 커진다. 마지막 아이콘이 들어가면 로고가 화면 가득 커졌다가 원래 크기로 수축하고 궤도가 다시 그려진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 로고, 궤도 그리기. 2~3마디: 아이콘 여섯 개 배치. 4마디: 회전 가속. 5~6마디: 박자마다 아이콘 하나 흡수. 7마디: 로고 확대 → 수축. 8마디: 궤도 다시 그림.
</구성>

8. 파티클·빛 (5)

86. 점 수백 개가 줄을 맞춰 로고가 되기

text
<방향>
점이 형태를 이루는 절제된 모션. 모일 모양은 "[로고/글자]". 순검정 #0A0A0A 배경, 흰 점, 마지막 박자에 로고 점만 [포인트 색 · 기본 #FF5A1F]. 점 600개가 처음에는 화면 전체에 균일한 격자로 정렬되어 있다(흩날리지 않음). 점마다 로고 안의 목표 자리가 정해져 있고, 박자마다 화면 바깥쪽 고리에 있는 점 무리부터 차례로 직선 경로를 따라 목표로 미끄러진다(가속 후 감속, 무작위 없음). 이동 중인 점에만 진행 방향으로 짧은 모션 블러. 로고가 완성되면 점들이 한 박 동안 동시에 한 단계 커졌다가 돌아오고 [포인트 색]으로 바뀐다. 그다음 같은 경로를 거꾸로 따라 격자로 돌아간다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 균일 격자. 2~5마디: 박자마다 고리 하나씩 이동. 6마디: 로고 완성, 크기 맥동, 색 변경. 7~8마디: 역경로로 격자 복귀.
</구성>

87. 바깥으로 그어지는 선이 축하 문구가 되기

text
<방향>
축하 영상. 축하 문구는 "[축하 문구]". 짙은 버건디 #2A0F18 배경, 크림 #F3E7D3 선, [포인트 색 · 기본 #FFC845] 하나. 폭죽 대신 절제된 방사선: 화면 세 곳에서 박자마다 작은 점이 생기고, 그 점에서 12가닥의 가는 선이 바깥으로 그어졌다가 끝에서부터 걷혀 들어간다(터지지 않고 그어지고 걷힘). 선의 길이와 각도는 정해진 규칙(무작위 없음). 4마디째 마지막 방사선의 가닥들이 걷히지 않고 휘어지며 축하 문구의 획이 되고, 문구가 완성되면 그 안이 [포인트 색]으로 채워진다. 문구 획이 다시 방사선으로 풀려 걷힌다. 글로우·반짝임 없이 선만. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1~3마디: 박자마다 방사선 하나(위치 순환). 4~5마디: 가닥이 휘어 문구 획. 6마디: 문구 채움. 7마디: 문구 유지, 밑에 "[날짜 또는 이름]". 8마디: 방사선으로 풀려 걷힘.
</구성>

88. 슬릿 스캔으로 드러나는 제품 실루엣

text
<방향>
프리미엄 제품 인트로. 제품 이름은 "[제품 이름]". 순검정 #000000 배경, 제품은 흰색 선명한 실루엣, 글자 상아색 #EDE6D8, [포인트 색 · 기본 #C9A86A] 얇은 선에만. 빛줄기와 글로우 대신 단단한 경계의 밝은 띠(슬릿)를 쓴다: 세로 띠 하나가 화면을 가로질러 훑고, 그 띠 안에서만 제품의 실루엣과 표면 디테일이 드러난다. 박자마다 띠가 방향을 바꾸거나 폭이 넓어진다(가로 → 세로 → 대각선). 마지막 훑기에서 띠가 넓어져 제품 전체가 드러나고, 띠의 가장자리가 가는 [포인트 색] 선이 되어 제품 아래 제품 이름 밑줄로 정착한다. 제품 이름이 그 선 위로 올라온다. 띠가 다시 좁아져 화면 밖으로 빠진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
96 BPM, 8마디. 1~2마디: 세로 띠 훑기 두 번. 3~4마디: 가로 띠. 5마디: 대각선 띠. 6마디: 띠 확장, 제품 전체. 7마디: 제품 이름. 8마디: 띠 수축, 퇴장.
</구성>

89. 다가오는 점들이 제목 글자로 서기

text
<방향>
우주 속을 날아가는 오프닝. 제목은 "[제목]". 깊은 남색 #070B16 배경, 흰 점, 제목 글자는 상아색 #F1EBDD, [포인트 색 · 기본 #6FA8FF] 하나. 점 400개가 3D 공간에 고정 시드로 배치되어 있고 카메라가 일정 속도로 앞으로 나아간다. 점은 가까워질수록 커지고 옆으로 벌어질 뿐, 빛나지 않는다(글로우·잔상 없음, 빠른 점에만 진행 방향 모션 블러). 박자마다 카메라 속도가 한 번 올라갔다 내려온다. 5마디째 앞쪽 점들이 제목 글자의 윤곽 위치로 모여 깊이를 가진 글자를 이루고, 카메라가 감속하며 그 글자 앞에 멈춘다. 글자 하나만 [포인트 색]. 다시 출발하면 글자가 점으로 흩어져 지나간다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1~4마디: 전진, 박자마다 속도 맥동. 5마디: 점이 글자로 모임. 6~7마디: 감속, 제목 앞 정지. 8마디: 재출발, 글자 통과.
</구성>

90. 흐르는 가는 선 위의 미니멀 문구

text
<방향>
흐르는 선 배경 위 미니멀 문구. 문구는 "[문구]". 오프화이트 #F2EFE8 배경, 먹색 #1A1A1A 가는 선, 문구 먹색, [포인트 색 · 기본 #3A6B5B] 하나. 연기 대신 결정적 흐름장(사인 합성 노이즈)을 따라 흐르는 가는 선 80가닥을 쓴다. 선은 화면 왼쪽에서 오른쪽으로 천천히 흐르며 박자마다 흐름 방향이 살짝 휘었다 돌아온다. 문구 자리에서는 선들이 글자를 피해 돌아 흐르며 글자 모양의 빈 공간을 만든다. 문구는 그 빈 공간이 점점 선명해지면서 드러나고(페이드 아님), 다 드러나면 선 한 가닥만 [포인트 색]으로 문구 밑을 지난다. 마지막에 선들이 빈 공간을 다시 메운다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
96 BPM, 8마디. 1~2마디: 선 흐름, 박자마다 휨. 3~4마디: 글자 빈 공간 형성. 5~6마디: 문구 선명, 포인트 선 통과. 7~8마디: 빈 공간 메움.
</구성>

9. 캐릭터·일러스트 (5)

91. 블롭이 버튼을 하나씩 눌러 주는 설명 영상

text
<방향>
캐릭터 설명 영상. 기능 3개는 [기능 1] [기능 2] [기능 3], 제품 이름은 "[제품 이름]". 크림 #F3EEE4 배경, 블롭 캐릭터는 [포인트 색 · 기본 #FF7A45] 단색에 먹색 #161616 점 눈 두 개, 버튼은 흰 알약에 먹색 글자. 글꼴 Pretendard. 블롭은 스쿼시·스트레치로 움직인다: 점프하기 전 눌리고, 공중에서 세로로 늘어나고, 착지하며 납작해진다(통통 튀는 반복 바운스 없이 한 번씩). 블롭이 박자에 맞춰 버튼 위로 뛰어올라 몸으로 눌러 주면, 버튼이 늘어나 그 기능의 작은 UI 장면이 되고 블롭이 그 안을 지나가며 동작을 보여 준다. 세 번째 기능 뒤 블롭이 제품 로고 위에 앉아 로고의 점이 된다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 12마디. 1마디: 블롭 등장. 2~4마디: 버튼 1 누름 → 기능 장면. 5~7마디: 버튼 2. 8~10마디: 버튼 3. 11마디: 로고 위 착지. 12마디: 블롭이 내려와 처음 자리.
</구성>

92. 작은 로봇의 단계별 작업

text
<방향>
15초 로봇 캐릭터 애니메이션. 로봇이 하는 일은 "[작업]", 단계는 [단계 1] [단계 2] [단계 3]. 연회색 #E7E5E0 배경, 로봇은 둥근 사각형 몸통에 먹색 #1A1A1A 화면 얼굴, 얼굴 표정과 표시등만 [포인트 색 · 기본 #2F6BFF]. 선 굵기는 일정한 플랫 일러스트. 로봇은 컨베이어 벨트 하나를 따라 옆으로 이동하고 카메라도 함께 이동한다. 단계마다 로봇 팔이 늘어나 물건을 집거나 조립하고, 얼굴 화면에 그 단계의 아이콘과 진행 막대가 뜬다. 단계가 끝날 때 결과물이 벨트 위에서 다음 단계 재료로 모양을 바꾼다. 마지막에 완성품을 들어 보이고 얼굴에 체크가 뜬 뒤, 완성품을 벨트 처음에 내려놓는다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 로봇 대기, 얼굴 깜빡. 2~3마디: 단계 1. 4~5마디: 단계 2. 6마디: 단계 3. 7마디: 완성품 들기, 체크. 8마디: 벨트 처음으로.
</구성>

93. 막대 인간이 벽을 넘는 짧은 이야기

text
<방향>
막대 인간 스토리. 문제는 "[문제]", 해결 제품은 "[제품 이름]". 오프화이트 #F5F2EB 배경, 먹색 #141414 선으로만 그린 막대 인간과 사물, 제품만 [브랜드 색 · 기본 #19C37D]. 선 굵기 일정, 관절은 둥글게. 바닥 선 하나가 처음부터 끝까지 이어지고 카메라가 막대 인간을 따라 오른쪽으로 이동한다. 막대 인간이 걷다가 "[문제]"라고 쓰인 벽에 부딪혀 뒤로 넘어진다(두 박에 걸쳐, 과장 없이). 일어나 주변을 보다가 바닥 선의 일부가 들려 [제품 이름] 모양으로 변하고, 그 제품이 계단(또는 다리)으로 펼쳐진다. 막대 인간이 박자에 맞춰 계단을 올라 벽을 넘고, 벽은 접혀 바닥 선으로 돌아간다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 10마디. 1~2마디: 걷기. 3마디: 벽 등장. 4마디: 부딪힘, 넘어짐. 5마디: 일어나 두리번. 6~7마디: 제품 등장 → 계단. 8~9마디: 계단 오르기, 벽 넘기. 10마디: 벽 접힘, 다시 걷기.
</구성>

94. 손 흔드는 마스코트가 로고가 되는 인트로

text
<입력>
먼저 나에게 물어볼 것: 마스코트 이미지나 설명, 로고 SVG.
</입력>
<방향>
마스코트 인트로. 마스코트는 "[마스코트]", 인사말은 "[인사말]", 브랜드는 "[브랜드]". 따뜻한 크림 #F4ECDD 배경, 먹색 #1B1B1B 윤곽선, 마스코트와 로고는 [브랜드 색 · 기본 #FF6B3D] 하나. 마스코트는 단순한 도형 조합으로 다시 그려서 팔·눈·몸통이 따로 움직이게 한다. 마스코트가 바닥 선 아래 마스크에서 쑥 올라와 한 손을 박자에 맞춰 두 번 흔든다. 입 옆에서 말풍선이 작은 점에서 늘어나 생기고, 인사말이 한 글자씩 쳐진다. 말풍선이 마스코트 쪽으로 다시 빨려 들어가면, 마스코트의 몸통·팔·눈 도형이 각자 회전하고 미끄러져 로고의 조각으로 재배치된다. 로고가 다시 마스코트로 풀린다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 마스코트 상승. 2마디: 손 흔들기 두 번. 3~4마디: 말풍선, 인사말. 5마디: 말풍선 흡수. 6마디: 도형 재배치 → 로고. 7마디: 로고 아래 브랜드 이름. 8마디: 로고 → 마스코트 → 마스크 아래로.
</구성>

95. 줄 서서 자기소개하는 아이콘 팀

text
<방향>
팀 소개 영상. 팀원은 [이름 · 역할] 5명, 팀 이름은 "[팀 이름]". 오프화이트 #F3F1EC 배경, 캐릭터는 각자 다른 기본 도형(원, 사각형, 삼각형, 알약, 육각형)에 먹색 #161616 점 눈, 몸 색은 회색 계열 명도 차이로, 말하는 사람만 [포인트 색 · 기본 #2F6BFF]. 글꼴 Pretendard. 캐릭터 다섯이 바닥 선 위에 한 줄로 서 있고, 박자에 맞춰 한 명씩 앞으로 한 걸음 나오며 몸 색이 [포인트 색]으로 바뀐다. 그 캐릭터 머리 위에서 이름 카드가 아코디언처럼 펼쳐져 이름과 역할이 올라오고, 캐릭터가 역할에 맞는 짧은 동작(타이핑, 그리기, 말하기)을 한 번 한다. 카메라는 나온 캐릭터가 화면을 채우도록 줌. 마지막에 다섯이 모여 팀 이름 글자를 몸으로 받친다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 12마디. 1마디: 한 줄 정렬. 2~11마디: 팀원마다 2마디(나옴 → 카드 → 동작 → 복귀). 12마디: 모여서 팀 이름 → 다시 한 줄.
</구성>

10. 사진·포트폴리오·음악·코드 (5)

96. 떨어져 쌓이는 폴라로이드 포트폴리오

text
<입력>
먼저 나에게 물어볼 것: 사진 파일들(6~12장)과 각 사진의 한 줄 설명, 이름.
</입력>
<방향>
사진 포트폴리오 영상. 이름은 "[이름]". 단색 웜그레이 #E6E1D8 책상면, 흰 폴라로이드 테두리, 먹색 #1A1A1A 손글씨풍 설명, [포인트 색 · 기본 #D4483B] 마스킹 테이프 하나. 글꼴 Pretendard. 폴라로이드가 위에서 떨어지며 살짝 회전하고, 책상에 닿는 순간 아래 사진들이 한 번 살짝 밀린다. 박자마다 한 장, 각 사진은 정해진 각도(고정 값)로 겹쳐 쌓인다. 새 사진이 떨어질 때 카메라가 그 사진으로 살짝 줌하고 아래 여백에 설명이 쳐진다. 4장마다 카메라가 맨 위 사진 안으로 들어가 사진이 화면을 채우고, 사진 안에서 천천히 패닝한 뒤 빠져나온다. 마지막 사진 위에 테이프가 붙고 이름이 써진다. 사진이 역순으로 들려 올라간다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 사진 수에 맞춰 마디 수 결정(사진 한 장 = 1마디, 4장마다 1마디 추가로 사진 속 들어가기). 마지막 2마디: 테이프·이름 → 역순으로 들려 올라감.
</구성>

97. 박자에 맞춰 숨 쉬는 뮤직 비주얼라이저

text
<입력>
먼저 나에게 물어볼 것: 음악 파일(mp3/wav), 곡 제목과 아티스트 이름. BPM은 파일에서 직접 분석한다.
</입력>
<방향>
뮤직 비주얼라이저. 곡은 "[곡 제목] — [아티스트]", BPM은 [BPM]. 먹색 #111111 배경, 크림 #EFE9DC 막대와 글자, [포인트 색 · 기본 #FF5A1F] 하나. 글꼴 Pretendard Black. 음악 파일을 미리 분석해 프레임마다 주파수 대역 32개의 값을 JSON으로 만들고, 화면은 그 값만으로 그린다(재생 중 분석 금지, seek(t)로 같은 결과). 막대 이퀄라이저 32개가 화면 아래에서 솟고, 곡 제목이 화면 가운데 크게 있다. 킥이 들어올 때마다 제목 글자 폭이 늘었다 줄고, 막대 중 가장 높은 하나만 [포인트 색]. 4마디마다 막대들이 원으로 말려 원형 이퀄라이저가 되고 제목이 그 가운데로 들어갔다가 다시 일자로 펴진다. 오디오는 원본 음악을 그대로 합친다(킥 효과음 추가 금지). 마지막 프레임 = 첫 프레임.
</방향>
<구성>
곡의 BPM 그대로, 16마디 구간(하이라이트 구간을 직접 골라 줘). 1~4마디: 일자 막대. 5~8마디: 원형. 9~12마디: 일자, 킥마다 화면 반전 한 번. 13~16마디: 원형 → 일자로 끝.
</구성>

98. 코드 한 줄에 화면 하나가 바뀌는 튜토리얼 인트로

text
<방향>
"코드로 만드는 영상" 튜토리얼 인트로. 시리즈 이름은 "[시리즈 이름]". 화면 왼쪽 절반은 다크 에디터 #141417(코드 색은 흰색·회색·[포인트 색 · 기본 #FFB547] 세 가지), 오른쪽 절반은 결과 캔버스 오프화이트 #F3F0E8. 코드 글꼴 Geist Mono, 제목 글꼴 Pretendard Black. 코드가 박자마다 한 줄씩 쳐지고 그 줄의 결과가 즉시 오른쪽에 나타난다: 원 하나 → 원이 움직임 → 원이 사각형으로 변형 → 사각형 여러 개 복제 → 사각형들이 정렬돼 시리즈 이름의 글자가 됨. 줄마다 방금 바뀐 값만 [포인트 색]. 마지막 줄을 실행하면 가운데 경계가 오른쪽으로 밀려 결과 캔버스가 화면 전체가 되고 시리즈 이름이 크게 남는다. 다시 경계가 돌아오며 코드가 지워진다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 빈 에디터·빈 캔버스. 2~6마디: 마디마다 코드 한 줄 → 변화 하나. 7마디: 경계 밀림, 시리즈 이름 전체 화면. 8마디: 경계 복귀, 코드 지움.
</구성>

99. 이름부터 연락처까지 15초 쇼릴

text
<입력>
먼저 나에게 물어볼 것: 이름, 하는 일 3가지, 대표 숫자(예: 프로젝트 수), 연락처, 대표 작업 이미지 3장(없으면 도형으로 대체).
</입력>
<방향>
15초 자기소개 쇼릴. 이름은 "[이름]", 하는 일은 [일 1] [일 2] [일 3], 대표 숫자는 "[숫자 · 설명]", 연락처는 "[연락처]". 순검정 #0B0B0B와 오프화이트 #F2EFE8를 번갈아 쓰고, [포인트 색 · 기본 #FF4D2E] 하나. 글꼴 Pretendard Black, 영문은 Archivo 가능. 모든 장면은 앞 장면으로 만든다: 이름의 첫 글자가 커져 화면을 덮는 판이 되고 → 판이 세 칸으로 갈라지며 하는 일 세 가지가 칸마다 마스크에서 올라오고 → 칸 하나가 커지며 대표 작업 이미지가 그 안에서 패닝되고 → 이미지가 숫자 모양 마스크로 줄어들어 대표 숫자가 굴러가고 → 숫자의 마지막 자리가 늘어나 연락처 밑줄이 된다. 박자마다 배경색이 반전되는 순간을 장면 전환에만 쓴다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 8마디. 1마디: 이름. 2마디: 첫 글자 → 판 → 세 칸. 3마디: 하는 일 세 가지. 4~5마디: 작업 이미지 세 장, 박자 둘에 하나. 6마디: 숫자 마스크, 카운트업. 7마디: 연락처. 8마디: 연락처가 이름으로 수축.
</구성>

100. 구독 버튼까지 5초 채널 인트로

text
<입력>
먼저 나에게 물어볼 것: 채널 로고(SVG/PNG)와 채널 대표 색.
</입력>
<방향>
5초 유튜브 채널 인트로. 채널 이름은 "[채널 이름]". 오프화이트 #F4F1EA 배경, 먹색 #121212 글자, [채널 색 · 기본 #FF0033] 하나. 글꼴 Pretendard Black. 짧으니 장면 셋만 끊김 없이: 화면 가운데 점 하나가 늘어나 로고 윤곽을 한 획으로 그리고 로고가 채워진다 → 로고가 왼쪽으로 미끄러지며 그 자리에서 채널 이름이 마스크 선 위로 올라온다 → 채널 이름 밑줄이 늘어나 알약 모양 "구독" 버튼이 되고, 커서가 들어와 클릭하면 버튼이 눌렸다가 회색 "구독중"으로 바뀌며 옆의 종 아이콘이 한 번 흔들린다. 버튼이 다시 점으로 수축한다. 마지막 프레임 = 첫 프레임.
</방향>
<구성>
120 BPM, 2.5마디(10박). 1~3박: 점 → 로고. 4~5박: 채널 이름. 6~7박: 밑줄 → 구독 버튼, 커서 진입. 8박: 클릭 → 구독중, 종. 9~10박: 점으로 수축.
</구성>

잘 나오게 하는 팁


담PD가 노션에 공개한 자료를 이미지·글 그대로 옮겨 온 아카이브입니다. 최신 내용과 업데이트는 원문에서 확인하세요.

노션 원문에서 보기 →