로고 애니메이션 생성하기
이 스킬은 로고 이미지를 5초짜리 애니메이션 인트로로 변환합니다. 각 스타일은 헤드리스 Chrome이 프레임 단위로 렌더링하는 캔버스 씬입니다. ffmpeg가 프레임을 인코딩하고, 씬이 보고하는 이벤트(착지, 터짐, 깜빡임)로부터 사운드가 합성됩니다. AI 이미지 서비스, 스톡 푸티지 또는 샘플은 사용되지 않습니다. 모든 스타일의 마지막 프레임은 로고 파일 자체의 픽셀이므로, 애니메이션은 절대 브랜드를 "다시 그리지" 않습니다.
필요 사항: Node 22+, ffmpeg(libx264, libvpx-vp9, prores_ks) 및 Chrome 또는 Chromium. Chrome이 표준 위치에 없으면 CHROME_PATH를 설정하세요.
워크플로우
1. 로고를 찾고 살펴보기
사용자가 의미하는 파일을 찾습니다: 작업 디렉토리, ~/Downloads, ~/Desktop을 확인하거나 질문하세요. 렌더링 전에 이미지를 읽으세요. 배경이 투명한지 평평한지, 분리된 모양이 몇 개인지, 이미 워드마크가 포함되어 있는지, 색상이 무엇인지 기록하세요. 이 정보는 어떤 스타일이 빛을 발할지 결정합니다. 미리보기를 확인할 때 이 정보를 염두에 두세요.
2. 질문보다는 기본값을 사용하여 요구사항 확정하기
기본값은 다섯 가지 스타일 모두, 1920×1080 60fps, 자동 배경, MP4 및 투명 WebM입니다. 출력 결과가 변경되고 추론할 수 없는 경우에만 질문하세요. 예를 들어, 사용자가 이름을 추가하려 하지만 정확한 철자나 색상 분할 위치를 모르는 경우에만 질문하세요.
| 사용자가 원하는 것 | 옵션 |
|---|---|
| 특정 스타일 | --styles liquid,neon |
| Instagram / 정사각형, TikTok / Reels / 세로형 | --size square, --size vertical (또는 --size 1280x720) |
| 마크 옆에 브랜드 이름 | `--text "Pharm |
| 어둡거나 밝은 페이지 | --bg dark, --bg light, --bg "#0b1e2d" (네온은 항상 어둡습니다) |
| Premiere / Final Cut용 파일 | --prores (알파 채널이 포함된 대용량 ProRes 4444 .mov 추가) |
3. 먼저 미리보기 (몇 분이 아닌 몇 초)
<skill>/scripts/animate.sh "<logo>" --preview --out "<out-dir>" [옵션]
이 명령은 스타일당 <name>-5s-<style>-preview.png (스타일당 10개의 스틸 이미지)를 생성하고, 스타일이 두 개 이상인 경우 <name>-5s-overview.png와 스타일당 -info.json을 생성합니다. 개요를 읽고 다음을 확인하세요:
- 컷아웃: 깨끗한 가장자리, 로고 내부에 배경색이나 얼룩이 없음. info.json의
keyedBackground는 파일에 투명도가 없어 배경이 키잉(keyed)되었을 때 설정됩니다. - 그룹화:
parts는 분리된 모양의 개수이고textParts는 감지된 글자 수입니다. 네온 깜빡임, 리퀴드 비드, 바운스 드롭이 단어로 처리하려면 글자가 텍스트로 감지되어야 합니다. - 프레이밍: 잘리는 부분이 없고 크기가 적절해야 합니다.
문제가 있다면 아래 "분석 문제 수정"을 참조하세요. 사용자가 전체 렌더링 전에 의견을 원한다면 개요를 보여주세요.
4. 렌더링
<skill>/scripts/animate.sh "<logo>" --styles <목록> --out "<out-dir>" [옵션]
각 스타일은 약 60~70초(불투명 및 투명 패스와 인코딩)가 소요됩니다. 스타일이 4개 이상이면 백그라운드에서 실행하세요. 출력 폴더에는 스타일별로 다음 파일이 생성됩니다:
<name>-5s-<style>.mp4 (사운드 포함), -alpha.webm, -alpha.mov (--prores 사용 시), -sfx.wav, -keyframes.png 및 -info.json.
5. 전달 전 확인하기
- 각
-keyframes.png를 읽으세요. 마지막 스틸 이미지는 깨끗하고 완전한 로고여야 합니다. ffprobe를 사용하여 5.000초 지속 시간과 크기를 확인하세요. 사운드 피크는 -3dB로 정규화됩니다.- MP4와 개요를 사용자에게 보내고(SendUserFile 사용 가능 시) 모든 파일을 링크로 나열하세요. 투명 버전과 각 스타일이 하는 일을 한 줄씩 언급하세요.
6. 반복
타이밍은 각 스타일의 scripts/styles/<style>.mjs에 있는 T 객체에 있습니다. 다른 모든 타이밍은 이것에 의존하며 사운드도 자동으로 따라오므로, 거기서 변경하세요. 다섯 가지 스타일로 얻을 수 없는 모양이나 로고의 모양이 특정 동작을 해야 하는 경우 새 스타일을 작성하세요. references/custom-style.md를 참조하세요.
스타일
전체 내용은 references/styles.md에 있습니다. 사용자를 위해 선택하거나 각 스타일을 설명할 때 읽어보세요.
- liquid: 로고의 주요 색상 한 방울이 페이지에 떨어져 가장 큰 모양으로 퍼집니다. 다른 모양과 글자는 비드처럼 짜내집니다. 둥글고 유기적인 로고에 가장 좋습니다.
- neon: 어두운 페이지에서 빛나는 튜브가 각 모양을 따라 그려지고, 로고가 번쩍이며 켜지고, 글자가 간판처럼 깜빡이며 켜집니다. 매우 어두운 모양은 흰색이 됩니다.
- bounce: 큰 모양이 구르거나 굴러떨어져 플라스틱처럼 튀고, 이어서 색종이가 터지고, 그 다음 글자가 떨어집니다. 장난기 넘칩니다.
- lens: 돋보기가 빈 페이지 위를 미끄러지듯 이동하고, 로고는 유리를 통해서만 보입니다. 그런 다음 주요 모양에서 줌아웃됩니다. 검색, 건강 또는 통찰력 브랜드에 적합합니다.
- rise: 브랜드 색상의 가는 선이 열려 밴드가 되고 모양이 그 안으로 올라옵니다. 차분하고 전문적이며 어떤 로고에도 잘 어울립니다.
분석 문제 수정
- JPG 로고 주변에 헤일로 또는 배경이 남은 경우: 배경은 테두리 색상으로 키잉됩니다. 로고가 이미지 가장자리에 닿거나 그라데이션 또는 사진 위에 있는 경우 먼저 잘라내고(투명 PNG로 내보내기) 다시 실행하세요.
- 흰색 디테일이 사라지는 경우(흰색 배경의 흰색 모양): 올바른 키잉입니다. 흰색 부분이 보여야 한다면 투명 PNG를 사용하세요.
- 글자가 텍스트로 감지되지 않는 경우: 주요 모양 옆이나 아래에 한 줄로 비슷한 높이의 개별 글자가 3개 이상 있어야 합니다. 연결된 필기체나 단일 모양 워드마크는 하나의 부품으로 처리되지만 rise와 lens에서는 여전히 잘 애니메이션됩니다.
- 워드마크가 잘못된 글꼴인 경우:
--font는 시스템에 설치되어 있어야 합니다.fc-list를 확인하거나 macOS의 경우/System/Library/Fonts를 살펴보세요.
맞춤 스타일 제작
사용자가 "알약이 제자리에 떨어져야 함" 또는 "돋보기가 스캔해야 함"과 같이 특정한 것을 원할 경우 references/custom-style.md를 읽으세요. 이 문서는 스타일 API, 엔진 헬퍼, 사운드 이벤트 목록 및 이전 맞춤 로고 애니메이션을 잘 작동하게 만든 기술을 다룹니다. 여기에는 마크를 벡터 모양으로 재구성하고, 해당 재구성을 PNG와 비교 확인하며, 마지막에 실제 픽셀로 전환하는 작업이 포함됩니다.