Apple 스타일 런칭 필름, 코드로 제작하기
Mac의 모든 픽셀은 코드로 그려집니다: 메뉴 바, 노치, 위젯, 배경화면. window.seek(seconds)가 포함된 단일 HTML 파일을 MP4로 내보냅니다.
시작하기 전에: brand.md와 MOTION.md 파일이 있다면 먼저 읽으세요. 없다면 먼저 brand-intake를 실행하거나, 16진수 색상 코드, 폰트, 로고 파일을 요청하세요. 이 단계 없이 결과물을 '브랜드에 부합한다'고 하지 마세요.
무료 스킬(본인의 것이 아님)과 함께 사용하면 Apple 디자인 가이드라인을 Claude가 따르는 규칙으로 전환할 수 있습니다. 한 번 설치하세요:
npx skills add emilkowalski/skills --skill apple-design
1단계: 다섯 가지 항목을 요청하고 기다리세요
- 제품명과 그 제품의 한 줄 설명(단어 그대로).
- 사실 목록. 영상에 등장할 수 있는 모든 기능, 숫자, 요구 사항. 화면에 표시되는 것은 이것들뿐입니다.
- 장면들. 6~8개, 각각 하나의 기능과 짧은 캡션. 예: "당신의 목소리가 여기에 있습니다."
- 참고 자료(선택 사항): 실제 Mac 런칭 필름 또는 그 프레임이 들어있는
ref폴더. 룩(look)만 설정합니다. - 크기와 길이. 기본값 1920 x 1080, 30fps, 장면당 약 2.5초.
2단계: 브리프 작성 (Claude Code에 붙여넣기)
apple-design 스킬을 사용하세요. [ref/ 폴더가 있으면: ref/에 있는 참고 자료의 LOOK과 일치시키세요. 먼저 모든 프레임을 읽으세요. 그 단어나 제품명은 복사하지 마세요.]
이것은 [PRODUCT]의 런칭 필름입니다: 상단 중앙의 검은 MacBook 노치가 한 장면씩 Apple 스타일 위젯으로 성장합니다. 각 장면은 전체 화면 색상 그라데이션 배경화면과 노치 아래 중앙에 배치된 하나의 캡션을 가지며, 마지막 한두 단어는 배경화면 색상보다 더 밝은 색조로 표시됩니다. 필름은 노치가 확장된 상태로 시작되며, Mac hello 화면처럼 흰색 필기체로 "hello"가 쓰여집니다.
다음 사실만 사용하고 다른 것은 추가하지 마세요:
[사실 목록]
장면들, 각각 약 2.5초:
[1. 검은 배경에 노치 확장, "hello" 필기체.]
[2..n. 배경화면 색상, 노치가 열리면서 나타나는 내용, 캡션.]
[마지막. 검정: 노치가 원래 형태로 닫힘. 캡션: PRODUCT와 한 줄 설명.]
크기 [너비] x [높이], 30fps. 프레임은 Mac 화면입니다: 상단에 얇은 macOS 메뉴 바가 있고 중간에 노치가 있습니다. 시스템 폰트(-apple-system, Helvetica Neue 대체 폰트).
window.seek(seconds) 함수가 포함된 단일 HTML 파일로 제작하여 언제든지 정확한 프레임을 그릴 수 있게 하세요. 각 장면에서 한 프레임을 캡처하여 [대응하는 참조 프레임과 나란히 비교하세요]. 차이점을 수정하고, 애니메이션 동작을 apple-design 스킬과 비교하여 확인하세요.
직접 겪어보고 알게 된 점
- 노치를 단어로 명확히 지정하세요. 같은 브리프를 주었을 때, 어떤 모델은 노트북 전체를 그렸습니다. "화면 상단 중앙의 노치"가 기준점입니다.
- 트윈(tween) 대신 스프링(spring)을 사용하세요. 노치는 너비와 높이가 각각의 곡선으로 스프링처럼 움직일 때 올바르게 보입니다. 부드럽게 열리고 오버슈트 없이 닫힙니다.
- 필름 시작부터 동작을 설계하세요. 노치가 완전히 닫히기 전에 다시 열리면, 닫힌 위치에서 이어서 열립니다. 장면별 트윈은 점프합니다.
- 참조와 장면별로 비교하세요. 프레임을 나란히 비교하면 중앙에서 벗어나고 너무 큰 "hello", 굵은 진행 바(얇은 틱(tick)이어야 함), 메뉴 바에 끼어든 프롬프트 같은 문제를 발견했습니다.
- 메뉴 바를 짧게 유지하세요. 단어로 가득한 전체 메뉴는 넓은 위젯에 의해 반으로 잘립니다. 다섯 개 항목이면 충분합니다.
- 위젯에는 주장하는 내용을 추가하지 마세요. 플레이스홀더 텍스트는 회색 선입니다. 사실 목록에 없는 UI 단어(버튼 라벨, 시계 시간)는 승인을 위해 다시 나열됩니다.
3단계: 확인 및 내보내기
처음 1초 동안 낯선 사람이 실제 Mac이라고 믿을까요? 화면의 모든 단어가 사실 목록에 있나요? 스프링을 빠른 페이드로 대체하는 축소 모션(reduced-motion) 설정을 추가하세요.
HyperFrames(무료 오픈 소스)로 내보내기: npx skills add heygen-com/hyperframes, 그 다음 npx hyperframes render. 세로 버전이 필요하면 MP4를 reel-export에 전달하세요.