사용 시기
사용자가 다음을 만들고자 할 때 이 스킬을 사용하세요:
-
교육용 튜토리얼 비디오 - 주제를 조사하고 애니메이션 설명 영상 제작
- 예시: "3학년 학생들을 위한 나비의 생애주기 튜토리얼을 만들어 줘"
-
SaaS 워크스루 데모 - 애니메이션 UI로 소프트웨어 기능 시연
- 예시: "Notion의 데이터베이스 기능을 사용하는 방법을 보여주는 데모 영상을 만들어 줘"
-
제품 출시 발표 - 모션 그래픽이 포함된 마케팅 비디오
- 예시: "새로운 AI 기반 검색 기능을 발표하는 런칭 영상을 만들어 줘"
-
튜토리얼 / 워크스루 비디오 - 커서 애니메이션이 포함된 단계별 가이드
- 예시: "우리 앱에서 프로젝트를 설정하는 방법을 보여주는 튜토리얼을 만들어 줘"
-
소셜 미디어 프로모션 비디오 - 광고용 짧고 강렬한 키네틱 텍스트 비디오
- 예시: "피트니스 앱을 위한 15초 인스타그램 광고를 만들어 줘"
-
앱/제품 쇼케이스 비디오 - 키네틱 텍스트와 플로팅 UI 목업의 결합
- 예시: "암호화폐 거래소 인터페이스를 홍보하는 영상을 만들어 줘"
-
랜딩 페이지 리빌 비디오 - 웹페이지 애니메이션이 포함된 디자인 도구 미학
- 예시: "새로운 SaaS 랜딩 페이지 디자인을 소개하는 영상을 만들어 줘"
비디오 제작 워크플로우
모든 비디오 유형에 대해 다음 파이프라인을 따르세요:
1. 이해 → 2. 조사 → 3. 스크립트 → 4. 장면 → 5. 오디오 → 6. 애니메이션
1단계: 요청 이해하기
다음을 식별하세요:
- 비디오 유형: 교육용 튜토리얼, SaaS 데모, 제품 런칭, 튜토리얼/워크스루, 소셜 프로모션, 앱 쇼케이스, 랜딩 페이지 리빌, 또는 AI 설명 영상?
- 타겟 시청자: 연령, 전문성 수준, 맥락
- 톤: 교육적, 전문적, 에너제틱, 장난기, 드라마틱, 미니멀
- 길이: 초단편(5-15초), 단편(30-60초), 중편(1-3분), 장편(3-5분)
- 포맷: 와이드스크린 16:9 (1920x1080), 정사각형 1:1 (1080x1080), 또는 세로 9:16 (1080x1920)
- 시각적 스타일: 다크 드라마틱, 소프트 그라디언트, 깔끔한 미니멀, 또는 디자인 도구 미학
2단계: 조사 (튜토리얼 및 데모용)
교육용 콘텐츠의 경우:
- 정확하고 최신의 정보를 검색하세요
- 신뢰할 수 있는 출처(공식 문서, 교육 사이트)를 사용하세요
- 설명할 핵심 사실, 통계 또는 단계를 수집하세요
SaaS 데모의 경우:
- 기능을 이해하기 위해 제품을 살펴보세요
- 스크린샷을 캡처하거나 UI 패턴을 기록하세요
- 시연할 주요 워크플로우를 식별하세요
3단계: 스크립트 작성
오디오를 생성하기 전에 완전한 나레이션 스크립트를 작성하세요. 구조는 비디오 유형에 따라 다릅니다(아래 참조).
4단계: 장면 계획
스크립트를 시각적 세그먼트로 나누세요:
- 각 장면 = 하나의 핵심 아이디어 또는 단계
- 각 대사에 어떤 시각 자료가 어울리는지 기록하세요
- 장면 간 전환을 계획하세요
5단계: 오디오 생성
Resemble.ai를 사용하여 나레이션을 생성하세요(아래 설정 참조).
6단계: 애니메이션 생성
오디오와 동기화된 애니메이션으로 Remotion 컴포지션을 빌드하세요.
비디오 유형: 교육용 튜토리얼
목표: 특정 청중 수준에 맞춰 개념을 명확하게 설명합니다.
스크립트 구조
후크 (5-10초)
"애벌레가 어떻게 나비가 되는지 궁금한 적 있나요?"
소개 (10-15초)
맥락을 설정하고 배울 내용을 미리 보여줍니다.
본문 (핵심 내용, 3-5개의 핵심 포인트로 나눔)
- 포인트 1: 시각적 은유로 설명
- 포인트 2: 이전 포인트를 기반으로 설명
- 포인트 3: 세부 사항 또는 예시 추가
- ...
요약 (10-15초)
핵심 takeaways를 요약합니다.
아웃트로 (5초)
행동 유도 또는 마무리 생각.
청중별 적응
| 청중 | 언어 스타일 | 시각 자료 |
|---|---|---|
| 유치원-초2 | 매우 간단하고 장난기 많으며 5단어 문장 | 밝은 색상, 귀여운 캐릭터, 큰 도형 |
| 초3-5 | 간단하지만 유익하고 비유 사용 | 명확한 다이어그램, 단계별, 적당한 속도 |
| 초6-8 | 더 많은 어휘, 인과관계 | 차트, 레이블이 있는 다이어그램, 빠른 속도 |
| 고등학생+ | 기술 용어 허용, 미묘한 차이 | 데이터 시각화, 상세 그래픽 |
| 성인 | 전문적이고 간결함 | 깔끔한 디자인, 인포그래픽 |
튜토리얼용 애니메이션 패턴
- 리빌: 나레이터가 언급할 때 요소가 페이드 인
- 변환: 변화를 보여주기 위해 도형 변형(애벌레 → 나비)
- 다이어그램: 애니메이션 레이블, 부위를 가리키는 화살표
- 타임라인: 진행률 표시줄, 단계 표시기
- 비교: 강조 표시와 함께 나란히 배치
예시 장면 계획
스크립트: "먼저, 나비가 잎사귀에 작은 알을 낳습니다."
장면 1:
- 시각 자료: 잎사귀 등장 (아래에서 슬라이드 인, 스프링 애니메이션)
- 시각 자료: 잎사귀 위에 작은 알들이 페이드 인
- 타이밍: "알"이라는 단어와 알이 나타나는 것을 동기화
- 길이: 4초
비디오 유형: SaaS 워크스루 데모
목표: 사용자에게 소프트웨어에서 작업을 수행하는 방법을 보여줍니다.
스크립트 구조
후크 (5-10초)
"[제품]에서 [목표 달성] 방법을 알려드리겠습니다."
맥락 (10초)
이 기능이 중요한 이유, 해결하는 문제.
워크스루 (핵심 내용)
- 1단계: X로 이동
- 2단계: Y를 클릭
- 3단계: Z 구성
- ...
결과 (10초)
결과물, 완료된 상태를 보여줍니다.
아웃트로 (5-10초)
이점 요약, 다음 단계 제안.
시각적 요소
- UI 목업: 인터페이스의 양식화된 표현
- 커서 애니메이션: 클릭 대상으로 이동하는 애니메이션 포인터
- 하이라이트: 논의 중인 버튼/필드 주변의 빛나는 테두리
- 확대 효과: UI의 특정 영역에 초점
- 콜아웃: UI 요소를 가리키는 텍스트 레이블
데모용 애니메이션 패턴
- 커서 이동: 부드러운 베지어 곡선, 클릭 전 약간의 멈춤
- 클릭 효과: 클릭 시 잔물결 또는 펄스
- 필드 포커스: 테두리 강조, 약간 확대
- 타이핑 애니메이션: 입력 필드에 문자 나타나기
- 전환: 화면 간 슬라이드 또는 페이드
- 콜아웃 화살표: 애니메이션으로 들어와 요소를 가리키고 페이드 아웃
예시 장면 계획
스크립트: "사이드바에 있는 파란색 '새 데이터베이스' 버튼을 클릭하세요."
장면:
- 시각 자료: 사이드바 UI 목업
- 애니메이션: 커서가 버튼으로 이동 (0.8초 이즈-아웃)
- 애니메이션: 버튼이 빛나며 강조
- 애니메이션: 클릭 잔물결 효과
- 애니메이션: 새로운 패널이 오른쪽에서 슬라이드 인
- 길이: 3초
비디오 유형: 제품 출시 발표
목표: 신제품이나 기능에 대한 기대감을 불러일으킵니다.
스크립트 구조
후크 (5-10초)
주의를 끄는 대담한 진술이나 질문.
문제 (10-15초)
이것이 해결하는 문제점은 무엇인가?
솔루션 공개 (10-15초)
제품/기능을 극적으로 소개합니다.
핵심 기능 (20-40초)
시각 자료와 함께 3-5개의 간결한 기능 하이라이트.
사회적 증거 (선택 사항, 10초)
통계, 사용후기 또는 신뢰도 지표.
행동 유도 (5-10초)
시청자는 다음에 무엇을 해야 할까요?
시각적 스타일
- 대담한 타이포그래피: 큰 글씨, 키네틱 타입 애니메이션
- 브랜드 색상: 제품의 색상 팔레트를 일관되게 사용
- 아이콘 및 그래픽: 추상적인 도형, 기능 아이콘
- 하이 에너지: 빠른 컷, 역동적인 움직임
- 로고 리빌: 마지막에 애니메이션 로고
런칭용 애니메이션 패턴
- 텍스트 슬램: 단어가 임팩트 있게 등장
- 키네틱 타이포그래피: 움직이고, 크기가 변하고, 회전하는 단어
- 카운터 애니메이션: 숫자가 올라가는 애니메이션(사용자, 수익 등)
- 아이콘 시퀀스: 바운스/스프링으로 나타나는 기능
- 그라디언트 배경: 천천히 변하는 색상 그라디언트
- 파티클 효과: 미묘한 반짝임, 떠다니는 도형
- 로고 리빌: 확대, 페이드 인, 또는 조각에서 조립
예시 장면 계획
스크립트: "Smart Search를 소개합니다 — 밀리초 만에 원하는 것을 찾아보세요."
장면:
- 시각 자료: 그라디언트가 있는 어두운 배경
- 애니메이션: "Introducing" 페이드 인 (0.5초)
- 애니메이션: "Smart Search"가 크고 굵게 등장 (0.3초, 흔들림 포함)
- 애니메이션: 아래에 태그라인이 타이핑되어 나타남 (타자기 스타일, 1.5초)
- 애니메이션: 검색 아이콘이 펄스
- 길이: 4초
비디오 유형: 튜토리얼 / 워크스루
목표: 명확한 단계별 시각적 안내를 통해 사용자에게 작업 수행 방법을 가르칩니다.
스크립트 구조
인트로 (3-5초)
"[제품]에서 [목표 달성]하는 방법은 다음과 같습니다."
1단계 (10-20초)
명확한 시각적 시연이 포함된 첫 번째 작업.
2단계 (10-20초)
이전 단계를 기반으로 하는 두 번째 작업.
3단계+ (각 10-20초)
워크플로우를 계속 진행...
성공 상태 (5-10초)
완료 표시, 결과 강조.
요약 (선택 사항, 5초)
수행한 작업에 대한 간략한 요약.
시각적 스타일
- 밝고 깔끔한 배경: 오프 화이트 (#fafafa), 크림색 또는 밝은 회색
- 전체 UI 컨텍스트: 조각이 아닌 전체 인터페이스 표시
- 진행 표시기: 단계별 이동 경로, 번호가 매겨진 단계 (1 → 2 → 3)
- 안내자로서의 커서: 부드러운 커서 움직임이 시청자의 시선을 안내
- 성공 축하: 녹색 체크 표시, 색종이 또는 브랜드 성공 화면
- 최소한의 방해 요소: 작업에 집중, 장식 요소 피하기
튜토리얼용 애니메이션 패턴
- 커서 코레오그래피: 클릭 전 약간의 멈춤이 있는 부드러운 베지어 경로
- 클릭 피드백: 클릭 시 미묘한 잔물결 또는 강조
- 양식 필드 포커스: 필드가 활성화될 때 테두리 발광
- 타이핑 시뮬레이션: 입력 필드에 텍스트가 문자별로 나타남
- 단계 전환: 화면 간 부드러운 크로스페이드 또는 슬라이드
- 진행률 업데이트: 이동 경로/단계 표시기가 앞으로 애니메이션
- 성공 버스트: 체크 표시가 바운스와 함께 확대, 선택적 색종이
- 패널 리빌: 사이드바 또는 드롭다운이 부드럽게 슬라이드 인
시각적 요소
- 이동 경로 탐색: "← 1. 의도 → 2. 시드 아이디어 → 3. 스케치패드"
- 양식 입력: 플레이스홀더 텍스트, 레이블, 유효성 검사 상태
- 버튼: 명확한 CTA와 함께 호버/활성 상태 표시
- 사이드바/패널: AI 제안, 설정 또는 도구 팔레트
- 성공 화면: 아이콘 + 메시지가 있는 전체 색상 배경
예시 장면 계획
스크립트: "먼저, 수업 내용이 무엇인지 입력하세요."
장면 1 - 설정 (2초):
- 시각 자료: 전체 앱 인터페이스, 밝은 배경
- 시각 자료: 이동 경로에 "2. 시드 아이디어"가 활성화됨
- 애니메이션: 화면 페이드 인
장면 2 - 상호 작용 (4초):
- 시각 자료: "개념 또는 테마 입력:" 레이블이 있는 양식
- 애니메이션: 커서가 입력 필드로 이동 (0.6초 이즈-아웃)
- 애니메이션: 필드 테두리가 파란색으로 강조
- 애니메이션: "버섯의 비밀스러운 삶"이 타이핑되어 나타남 (2초)
- 애니메이션: 커서가 "계속" 버튼으로 이동
장면 3 - 전환 (2초):
- 애니메이션: 버튼이 호버 시 강조
- 애니메이션: 클릭 잔물결 효과
- 애니메이션: 화면이 왼쪽으로 슬라이드, 새 패널이 슬라이드 인
장면 4 - 결과 (3초):
- 시각 자료: AI 제안 패널이 있는 스케치패드 보기
- 애니메이션: 제안 카드가 순차적으로 나타남 (각 0.15초 지연)
- 애니메이션: "수업 흐름" 섹션 채워짐
장면 5 - 성공 (3초):
- 시각 자료: 녹색 전체 화면 배경
- 애니메이션: 흰색 원이 확대되어 나타남 (스프링)
- 애니메이션: 원 안에 체크 표시가 그려짐
- 애니메이션: "수업이 게시되었습니다!"가 아래에 페이드 인
- 애니메이션: 부제목 "호기심과 발견을 불러일으킬 준비 완료" 페이드 인
튜토리얼 속도 가이드라인
| 단계 복잡성 | 길이 | 비고 |
|---|---|---|
| 단순 클릭 | 2-3초 | 클릭 및 즉시 결과 |
| 양식 입력 | 4-6초 | 입력 + 제출 |
| 다중 필드 양식 | 8-12초 | 여러 입력 |
| 복잡한 워크플로우 | 15-20초 | 여러 하위 단계 |
| 성공 상태 | 3-5초 | 여유를 두고 보여주기 |
효과적인 튜토리얼을 위한 팁
- 장면당 하나의 작업 — 여러 클릭을 함께 서두르지 마세요
- 결과에서 멈춤 — 시청자가 넘어가기 전에 결과를 볼 수 있도록 하세요
- 변경된 부분 강조 — 새 요소에 미묘한 광택 또는 확대 사용
- 내레이션과 작업 일치 — 나레이터가 "클릭"이라고 말할 때 클릭 발생
- 전체 UI 표시 — 맥락이 사용자 방향 설정에 도움
- 축하로 마무리 — 성공 상태는 완료감을 강화
비디오 유형: 소셜 미디어 프로모션
목표: 광고 및 소셜 콘텐츠를 위해 대담한 키네틱 텍스트로 빠르게 주목을 끕니다.
스크립트 구조
후크 (1-3초)
스크롤을 멈추게 하는 강력한 한 단어 또는 구문.
가치 제안 (3-5초)
그들에게 무엇이 좋은가? 간결한 한 문장.
기능 플래시 (5-10초)
2-3가지 핵심 이점, 빠르게 제시.
CTA (2-3초)
명확한 행동: "지금 다운로드", "무료 체험", URL
시각적 스타일
- 미니멀 배경: 단색 또는 단순한 그라디언트
- 최대 대비: 어두운 배경 + 흰색 텍스트 또는 색상 배경 + 흰색 텍스트
- 단어별 리빌: 각 단어가 고유한 순간을 가짐
- 색상 전환: 장면 사이에 배경색 변경
- 정사각형 포맷: Instagram/소셜 피드용 1080x1080
소셜 프로모션용 애니메이션 패턴
- 워드 슬램: 단일 단어가 임팩트 있게 나타남 (크기 1.2→1 + 약간의 흔들림)
- 배경 플래시: 단어/구문 사이의 즉각적인 색상 변경
- 텍스트 크기 조절: 단어가 커졌다가 다음 단어를 위해 공간을 만듦
- 최소한의 움직임: 대담한 타이포그래피가 작업을 수행하도록 함
- 빠른 컷: 단어/구문당 최대 0.5-1초
예시 장면 계획
스크립트: "We are ready."
장면 시퀀스 (총 4초):
- 프레임 1: 검은 배경, "WE"가 흰색으로 등장 (0.8초)
- 프레임 2: 흰색 배경, "A"가 검은색으로 중앙에 나타남 (0.8초)
- 프레임 3: 빨간 배경, "R"이 타이핑되어 "READY"가 됨 (1.6초)
- 프레임 4: 최종 프레임 유지 (0.8초)
길이 가이드라인
| 플랫폼 | 이상적인 길이 | 최대 길이 |
|---|---|---|
| Instagram Reels | 15-30초 | 90초 |
| TikTok | 15-60초 | 3분 |
| Twitter/X | 15-45초 | 2분 20초 |
| 30초-1분 | 10분 | |
| YouTube Shorts | 15-60초 | 60초 |
비디오 유형: 앱/제품 쇼케이스
목표: 텍스트와 UI를 결합하여 영화 같은 감각으로 제품의 인터페이스를 선보입니다.
스크립트 구조
후크 (3-5초)
문제 설명 또는 흥미로운 질문.
제품 소개 (5-10초)
제품 이름/로고 표시, 브랜드 구축.
기능 투어 (20-40초)
UI 시연과 함께 3-5가지 핵심 기능 살펴보기.
이점 요약 (5-10초)
특별한 점 요약.
CTA (5초)
URL, 앱 스토어 배지 또는 다음 단계.
시각적 스타일
- 어두운 그라디언트 배경: 기술 제품용 검정에서 보라색/파란색
- 소프트 그라디언트 배경: 친근한 앱용 파스텔 (분홍, 라벤더, 민트)
- 플로팅 UI 목업: 약간 기울어지고 그림자가 있는 앱 화면
- UI와 함께하는 키네틱 텍스트: 인터페이스 옆이나 위에 텍스트 표시
- 커서 상호 작용: UI 내에서 클릭, 스크롤, 타이핑 보여주기
앱 쇼케이스용 애니메이션 패턴
...