saas-motion-kit으로 차별화된 SaaS 홍보 영상 제작하기

saas-motion-kit란 무엇인가요?

saas-motion-kit는 HyperFrames와 Claude Code를 사용해 소프트웨어 제품의 프로모션 영상과 모션 영상을 제작하는 크리에이티브 프로덕션 시스템입니다. 하나의 저장소에서 기획 가이드, 시각적 레퍼런스, 스토리보드 템플릿, 자동화 도구, 검토 게이트를 제공합니다.

이 프로젝트는 하나의 원칙을 중심으로 구축되었습니다. 어떤 두 영상도 같은 영상처럼 느껴져서는 안 됩니다. 익숙한 등장 방식, 전환, 레이아웃을 반복 적용하는 대신 먼저 메시지와 톤을 정의한 다음, 해당 영상에 맞는 시각 언어를 개발합니다.

이 키트에는 10개 시각적 계열에 걸친 100가지 테마, 24가지 전환 아틀라스, 7단계 플레이북, 컴포넌트 전략, 완성된 예시, 제작 시작 전에 반복을 감지하는 다양성 감사 도구가 포함되어 있습니다.

주요 기능

• 7단계 제작 플레이북: 브리프, 컴포넌트, 테마, 스토리보드, 빌드, 사운드, 딜리버리 단계를 순서대로 진행하며, 각 단계 후에 사람의 검토 게이트를 거칩니다.
• 100가지 시각 테마: 제품 UI, 타이포그래피, 3D 소재, 광학, 은유, 데이터 스토리텔링, 캐릭터, 예술 사조, 카메라 문법을 기반으로 한 방향을 탐색합니다.
• 전환 아틀라스: 매치 컷, 캐리, 카메라 이동, 마스크, 소재 전환, 시간 기반 기법을 포함한 24가지 내러티브 전환을 검토합니다.
• 다양성 감사: 반복되는 전환, 등장 방식, 이징 곡선, 움직임 방향, 균일한 숏 길이, 액센트의 과도한 사용, 부족한 의외성, 톤 불일치, 독창적인 컴포넌트의 부재를 스토리보드에서 점검합니다.
• 테마 선택기: 최근 사용한 테마를 제외하고, 시청자와 톤에 맞는 테마를 추립니다.
• 모션 기록: 영상 전반의 크리에이티브 결정을 기록하고, 과도하게 사용된 기법과 아직 탐색하지 않은 기법을 보여 주는 보고서를 생성합니다.
• 컴포넌트 전략: 깔끔한 제품 UI를 HTML로 재구성하거나, 실제 인터페이스를 사용하기 어려울 때 단순화된 가상 컴포넌트를 제작합니다.
• Claude Code 스킬: /saas-motion-video 명령어를 사용해 전체 프로세스를 대화형으로 진행합니다.
• GitHub Action: 푸시와 풀 리퀘스트가 발생할 때마다 모든 STORYBOARD.md 파일을 감사 합니다.
• 제작 유틸리티: 딜리버리 렌더링 크기 축소, 루프 이음새 검사, 따뜻한 느낌의 UI 효과음 합성, 갤러리 제작을 지원합니다.

7단계 워크플로 이해하기

이 워크플로는 제작 작업과 크리에이티브 승인을 분리합니다.

1 Brief → 2 Components → 3 Theme → 4 Storyboard → 5 Build → 6 Sound → 7 Deliver
   gate       gate          gate         gate           gate      gate       gate

에이전트는 제작 작업의 상당 부분을 수행할 수 있지만, 각 단계는 사람의 결정으로 마무리됩니다. 이 게이트에서 메시지를 확인하고, 시각적 방향이 적합한지 판단하며, 진부하거나 반복적인 선택을 거부합니다.

1. 브리프: 시청자, 메시지, 플랫폼, 길이, 톤, 딜리버리 요구 사항을 정의합니다.
2. 컴포넌트: 깔끔한 제품 UI를 애니메이션화할지, 사실에 기반한 가상 컴포넌트를 설계할지 결정합니다.
3. 테마: 원하는 톤을 뒷받침하는 시각 언어를 선택합니다.
4. 스토리보드: 각 숏을 계획하고, 크리에이티브 원장을 완성하며, 다양성 감사를 실행합니다.
5. 빌드: 결정론적이고 탐색에 안전한 애니메이션으로 영상을 구현합니다.
6. 사운드: 필요한 경우 적절한 음악과 사운드 디자인을 추가합니다.
7. 딜리버리: 고해상도로 렌더링하고, 최종 출력 크기를 만들며, 루프 이음새와 같은 기술적 세부 사항을 확인합니다.

설치 및 설정

요구 사항

키트를 설치하기 전에 환경에 다음 항목이 포함되어 있는지 확인하세요.

• Node.js 22 이상
• ffmpeg
• Claude Code

HyperFrames는 자체 헤드리스 Chrome을 다운로드하므로 렌더링을 위해 해당 브라우저를 별도로 설치할 필요가 없습니다.

옵션 1: 저장소 템플릿 사용

saas-motion-kit 저장소를 열고 Use this template을 선택하세요. 그러면 크리에이티브 규칙, 도구, 템플릿, 사전 설정된 다양성 감사 GitHub Action이 포함된 영상 저장소가 생성됩니다.

옵션 2: 저장소 클론

git clone https://github.com/tugrawork-creator/saas-motion-kit
cd saas-motion-kit

Claude Code용 HyperFrames 스킬을 설치하세요. 이 스킬은 키트 안에 포함되어 있지 않습니다.

npx skills add heygen-com/hyperframes

포함된 예시 미리 보기

저장소에는 무음으로 끊김 없이 재생되는 40초 길이의 3D 부스 루프를 위한 완성된 HyperFrames 프로젝트가 포함되어 있습니다. 해당 디렉터리를 열고 Studio 미리 보기를 실행하세요.

cd examples/acme-suite-loop
npx hyperframes preview

딜리버리 품질의 4K 가로 버전으로 렌더링하려면 다음을 실행하세요.

npx hyperframes render --quality delivery --resolution landscape-4k --output renders/loop-2160.mp4

첫 소프트웨어 프로모션 영상 만들기

1단계: 명확한 브리프 작성

templates/BRIEF.md의 템플릿으로 시작하세요. 시청자가 무엇을 이해해야 하는지, 영상의 대상이 누구인지, 어디에 게시될지, 어떤 느낌이어야 하는지 정합니다.

유용한 크리에이티브 문장은 다음 형식을 따릅니다.

나는 [메시지]를 [톤]의 분위기로 전달하고 싶다.

이 결정은 효과나 트랜지션보다 먼저 내려야 합니다. creative/tone-matrix.md의 톤 매트릭스는 톤을 속도, 이징, 카메라 동작, 색상, 타이포그래피, 트랜지션, 사운드에 매핑합니다.

2단계: 컴포넌트 전략 선택

소프트웨어 영상은 신뢰할 수 있는 UI에 의존합니다. 키트의 clean-or-imaginary 규칙을 사용하세요.

1. 제품에 일관되고 깔끔하며 최신 상태인 UI가 있다면 이를 참고 자료로 캡처하고, 제품의 디자인 토큰을 사용해 필요한 카드, 표, 차트, 알림을 HTML로 다시 만드세요.
2. 인터페이스가 오래되었거나 지나치게 복잡하거나 아직 설계되지 않았다면 브랜드의 시각적 언어에 맞춘 단순화된 가상 컴포넌트를 만드세요.
3. 모든 컴포넌트를 사실에 맞게 유지하세요. 실제 기능을 단순화할 수는 있지만, 존재하지 않는 기능, 고객, 성능 수치를 만들어서는 안 됩니다.

이 프로젝트는 또한 모든 영상에 하나 이상의 독창적인 컴포넌트를 포함하도록 요구합니다. creative/component-forge.md의 컴포넌트 제작 프로세스를 사용하면 이를 빠르게 개발할 수 있습니다.

3단계: 시각적 테마 선택

100개 테마 갤러리를 살펴보고 브리프에 맞는 두세 가지 옵션을 추리세요. 각 테마 시트에는 Hook, Reveal, Proof, CTA라는 네 가지 핵심 순간과 함께 권장 컴포넌트, 타이밍이 지정된 모션 기법, 위험 요소, 적용 지침, 참고 자료가 포함되어 있습니다.

명령줄에서도 테마를 추릴 수 있습니다. 예를 들어 다음 명령은 개발자를 대상으로 하는 playful 테마를 검색하고 최근 기록에 포함된 테마는 제외합니다.

python tools/pick_themes.py --tone playful --audience "developers" --history ~/.motion-ledger.json

테마는 다음 10개 패밀리로 구성됩니다.

• 무대가 된 제품 UI
• 타이포그래피 및 그래픽 시스템
• 소재 및 3D
• 빛, 광학, 텍스처
• 메타포 콘셉트
• 시그니처 방향
• 데이터 스토리텔링
• 캐릭터 및 마스코트
• 예술 사조 및 시대
• 카메라 및 편집 문법

4단계: 스토리보드 작성 및 감사

제공된 템플릿으로 STORYBOARD.md를 만드세요. 메시지와 톤을 담은 문장으로 시작한 다음, 샷마다 한 행씩 작성하는 크리에이티브 원장을 완성하세요. 트랜지션, 등장 방식, 이징, 모션 방향, 타이밍, 강조 요소, 반전, 독창적인 컴포넌트 등의 선택을 기록하세요.

제작 전에 필수 크리에이티브 감사를 실행하세요.

python tools/variety_audit.py STORYBOARD.md

감사에서 표시된 반복 선택을 수정하세요. 반복이 의도적이고 서사적으로 의미가 있다면 설명 없이 남겨 두지 말고, 이를 의도적인 motif:로 명시하세요.

감사는 모션 기록과 함께 사용할 수도 있어 최근 영상에서 사용한 기법을 피하는 데 도움이 됩니다. 결과를 추가할 때 --theme NNN 옵션을 사용하면 선택한 테마가 해당 기록의 일부로 저장됩니다.

5단계: Claude Code로 제작 시작

저장소 루트에서 Claude Code를 열고 구체적인 요청과 함께 포함된 스킬을 호출하세요. 예를 들면 다음과 같습니다.

/saas-motion-video  Make a 45 s LinkedIn promo for https://your-product.com — theme 055 (Bento Grid), music-driven, no voiceover.

이 스킬은 7개 단계 전체를 안내하며 각 검토 게이트에서 일시 정지합니다. 이러한 정지를 형식적인 절차로 여기지 마세요. 작업이 브리프를 전달하는지, 시각적 선택이 일반적이지 않고 구체적으로 느껴지는지 평가하는 데 활용하세요.

6단계: 미리보기 및 렌더링

제작 중에는 HyperFrames Studio를 사용하세요.

npx hyperframes preview

최종 납품본은 목표 해상도가 1080p나 2K인 경우에도 4K로 렌더링하세요.

npx hyperframes render --quality delivery --resolution landscape-4k --output renders/final-2160.mp4

그런 다음 tools/deliver.sh를 사용해 Lanczos 방식으로 다운스케일하세요. 프로젝트 지침에 따르면 이렇게 하면 1080p로 직접 렌더링하는 것보다 텍스트, 가장자리, 3D 이미지가 더 선명해집니다.

여러 영상에 버라이어티 시스템 적용

크리에이티브 기록 추적

한 영상 안에서 반복을 피하더라도 이전 작업과 비슷하게 보일 수 있습니다. 기록 도구는 프로젝트 전반에 걸쳐 테마와 모션 선택을 기록하여 이러한 더 넓은 패턴을 다룹니다.

tools/history_report.py로 한 페이지 보고서를 생성하세요. 이 보고서에는 자주 사용하는 트랜지션, 등장 방식, 이징 스타일과 함께 아직 탐색하지 않은 아틀라스 트랜지션과 테마가 표시됩니다.

지속적 통합에서 스토리보드 감사

저장소에는 .github/workflows/variety-audit.yml이 포함되어 있습니다. 푸시와 풀 리퀘스트가 발생할 때마다 이 워크플로가 각 STORYBOARD.md를 감사합니다. 스스로 반복하는 스토리보드는 검사를 통과하지 못하므로 제작 프로세스에서 크리에이티브 검토가 더 앞 단계로 이동합니다.

GitHub 템플릿에서 시작하는 것이 이 워크플로를 상속하는 가장 쉬운 방법입니다. 키트를 기존 프로젝트에 복제했다면 워크플로를 유지하고 스토리보드가 예상되는 원장 구조를 따르는지 확인하세요.

6개 영상 비교에서 배우기

examples/six-films 디렉터리는 하나의 12초 스크립트를 6개 테마에 적용합니다. 각 버전은 같은 이야기를 유지하면서 시각적 언어를 바꾸고 고유한 컴포넌트를 추가합니다. 이 디렉터리에는 공유 브리프도 포함되어 있으므로, 에이전트에 동일한 제약 조건을 제공하고 7번째 해석을 시도할 수 있습니다.

examples/acme-suite-loop 프로젝트도 유용한 교훈을 제공합니다. 첫 번째 스토리보드는 같은 회전, 제목 등장, 이징, 샷 지속 시간을 반복했습니다. 수정된 버전은 등장 방식, 회전, 페이싱, 카메라 동작을 다양화하고 의도적인 시각적 반전을 추가합니다.

고급 제작 팁

모든 프레임을 탐색 안전하게 만들기

HyperFrames는 요청된 모든 프레임을 일관되게 렌더링할 수 있어야 합니다. 각 프레임을 시간의 순수 함수로 다루세요. README에서는 일시 정지된 GSAP 타임라인 하나를 사용하고 hf-seek에서 Three.js를 구동할 것을 권장합니다.

Date.now()와 시드가 지정되지 않은 무작위성을 피하세요. 렌더러가 프레임으로 직접 이동할 때 이러한 입력으로 인해 결과가 달라질 수 있습니다.

루프를 수학적으로 매끄럽게 설계하기

반복되는 영상에서는 각 앰비언트 움직임이 루프 지속 시간 동안 정수 회수만큼 반복되도록 하세요. 프로젝트에서는 이 원칙을 다음과 같이 표현합니다.

sin(2π·n·t/LOOP)

렌더링한 후에는 시각적 확인에만 의존하지 말고 tools/loop_check.py로 이음매를 확인하세요.

다국어 타이포그래피를 신중하게 처리하기

영상에 라틴 문자가 아닌 문자가 포함될 때는 로컬 latin-ext 글꼴 서브셋을 패키징하세요. 내장 대체 글꼴은 ş, ğ, İ 같은 글리프를 조용히 누락할 수 있습니다.

CSS 대문자 변환이 모든 언어에서 일관되게 동작한다고 가정하지 마세요. 예를 들어 터키어에서는 소문자 i를 변환하면 İ가 됩니다. 표시용 문구는 의도한 대문자 형태로 입력하고 단어별로 적절한 lang 값을 설정하세요.

따뜻하고 의도적인 사운드 유지하기

순수 사인파로 만든 인터페이스 사운드는 얇거나 불안하게 느껴질 수 있습니다. 키트에는 짧은 룸 리버브가 적용된 마림바나 우드 블록처럼 더 따뜻하게 조율된 음색을 만들 수 있는 tools/warm_sfx.py가 포함되어 있습니다.

Meta의 MusicGen으로 음악을 생성한다면 가중치가 CC-BY-NC 4.0 라이선스로 제공되며 상업적 용도로 사용할 수 없다는 점을 기억하세요. 상업용 영상에는 적절한 라이선스가 부여된 음악을 선택하세요.

화면 텍스트 줄이기

움직임과 구성이 이야기를 전달하도록 하세요. 텍스트는 라벨과 비트당 대략 한 줄로 제한하세요. 시청자가 영상을 이해하기 위해 문단을 읽어야 한다면 시각 요소가 서사적 역할을 충분히 수행하지 못하고 있는 것입니다.

하단에 진행률 표시줄을 추가하지 마세요. 프로젝트에서는 이러한 처리가 브랜드 영상을 화면 녹화처럼 보이게 만든다고 경고합니다.

전환을 서사적으로 사용하기

전환을 장식처럼 선택하지 말고 전환 아틀라스를 참고하세요. 24개 항목 각각은 뒷받침하는 분위기와 피해야 할 조합을 설명합니다. 아이디어 간의 관계를 명확히 하거나, 장면 사이에서 오브젝트를 이어 주거나, 영상의 재질감과 카메라 언어를 강화하는 전환을 선택하세요.

첫 프로젝트 권장 체크리스트

1. Node.js 22 이상, ffmpeg, Claude Code, HyperFrames 스킬을 설치합니다.
2. Acme 예제를 미리 확인하여 렌더링 환경을 검증합니다.
3. 명확한 메시지와 분위기를 한 문장으로 담은 브리프를 작성합니다.
4. 실제 UI를 재현할지, 사실에 부합하는 가상의 컴포넌트를 만들지 결정합니다.
5. 갤러리 테마를 2~3개로 추린 다음 테마 게이트에서 하나를 승인합니다.
6. 스토리보드를 작성하고 크리에이티브 원장을 완성합니다.
7. tools/variety_audit.py를 실행하고 반복되는 선택을 해결합니다.
8. 결정론적이며 탐색에 안전한 애니메이션으로 제작합니다.
9. 절제되고 적절한 라이선스를 갖춘 사운드를 추가합니다.
10. 4K로 렌더링하고 납품용으로 축소한 뒤, 해당하는 경우 루프 이음매를 확인합니다.
11. 영상의 선택 사항을 모션 기록에 추가하여 다음 프로젝트가 다른 아이디어에서 시작하도록 합니다.

결론

saas-motion-kit는 효과를 기계적으로 적용하는 모음이 아닙니다. 명확하게 소통하면서도 시각적으로 차별화된 소프트웨어 영상을 만들기 위한 구조화된 방법입니다. 기법보다 먼저 분위기를 정의하고, 프로젝트에 맞는 컴포넌트를 고안하며, 각 게이트에서 결정을 검토하고, 제작 전에 반복을 점검하면 반복적인 작업을 만들지 않고도 반복 가능한 워크플로를 구축할 수 있습니다.