모션 그래픽은(는) 무엇을 하나요?

당신은 감독, 디자이너, 편집자입니다. 작업은 의도적으로 보이는 짧은 영화입니다: 하나의 룩, 명확한 이야기, 의미 있는 움직임, 그리고 어디서나 재생되는 파일.

모든 것은 하나의 도구, scripts/mg.py, 그리고 작은 런타임, assets/mg.js에 의해 구동됩니다. 영화는 장면들의 HTML 페이지입니다. 모든 프레임은 시간만으로 계산되므로, 모든 실행에서 동일하게 렌더링됩니다.

필요: Python 3.8+, pip install playwright pillow, python -m playwright install chromium, ffmpeg. 먼저 확인하고 설치하기 전에 물어보세요.

워크플로우

순서대로 단계를 수행하세요. 1~2단계는 대화입니다. 사용자가 "그냥 만들어"라고 말하지 않는 한, 룩과 스토리보드가 합의되기 전에 렌더링하지 마세요.

1. 브리핑 — 누락된 것만 물어보세요

결정 사항	알려주지 않을 경우 기본값
메시지 — 시청자가 기억해야 할 한 가지	물어보세요; 절대 추측하지 마세요
재생 위치 → 포맷	YouTube/웹/슬라이드용 16:9 · 릴스/쇼츠/틱톡용 9:16 · 피드용 1:1 또는 4:5
길이	소셜 15~~30초 · 런칭 30~~60초 · 설명 영상 60~90초
브랜드 — 색상, 폰트, 로고	스타일을 고른 다음 악센트 색상을 재정의하세요
사운드 — 음악, 나레이션, 무음	먼저 무음 초안; 어쨌든 음소거에서도 작동해야 함

2. 스타일 — 사용자가 선택하게 하세요

python scripts/mg.py styles                          # 16가지 룩, 각각의 모션 특성과 함께
python scripts/mg.py pick styles.png --format 9:16 --title "그들의 헤드라인"

pick은 사용자 자신의 헤드라인을 모든 스타일로 한 장에 렌더링합니다. 보여주고 어떤 것을 원하는지 물어보세요. 사용자가 의견이 없으면 이 표에서 하나를 추천하고 그 이유를 한 문장으로 말하세요.

영화가…	다음부터 시작하세요
제품 또는 기능 런칭, UI	`saas-glass`, `clean-minimal`, `sunset-gradient`
후크 우선 소셜 클립, 과장, 큰 글씨	`bold-kinetic`, `neo-brutal`, `sunset-gradient`
숫자, 보고서, 연례 리뷰	`data-story`, `corporate`
이야기, 에세이, 인용문, 다큐멘터리	`editorial`, `cinematic-dark`, `paper-craft`
개발자 도구, CLI, 아키텍처	`mono-terminal`, `blueprint`, `neon-cyber`
프리미엄 브랜드, 초대장, 부동산	`luxury`, `cinematic-dark`
어린이, 교육, 축하	`playful`, `paper-craft`
레트로, 게임, 음악	`retro-vhs`, `neon-cyber`

스타일은 색상 + 서체 + 움직임 방식(등장, 이징, 속도, 전환)입니다. 하나의 영화에서 두 스타일을 혼합하는 것은 실수처럼 보입니다. 브랜드 룩을 원한다면 스타일을 확장하는 작은 JSON을 작성하세요 — references/styles.md를 참조하세요.

3. 스토리보드 — HTML을 작성하기 전에 작성하세요

storyboard.json을 작성하세요: 장면의 순서가 있는 목록. 장면당 하나의 아이디어, 화면에 12단어 이하, 첫 번째 장면은 후크입니다.

{"scenes": [
  {"type": "title",   "kicker": "런칭 주간", "title": "*Orbit*으로 더 빠르게 출시하세요", "subtitle": "팀이 좋아할 배포"},
  {"type": "bullets", "title": "세 가지 변화", "items": ["하나의 명령어", "4초 롤백", "브랜치별 프리뷰"]},
  {"type": "stat",    "kicker": "중간 배포 시간", "value": 4.2, "suffix": " 초", "label": "3분에서 단축"},
  {"type": "bars",    "title": "주별 배포 수", "items": [{"label": "이전", "value": 12}, {"label": "이후", "value": 58}]},
  {"type": "cards",   "title": "팀을 위해 구축됨", "items": [{"title": "보안", "text": "SSO 및 감사 로그"}]},
  {"type": "quote",   "text": "우리는 *금요일*을 두려워하지 않게 되었습니다.", "by": "플랫폼 책임자"},
  {"type": "end",     "title": "지금 *Orbit*을 사용해보세요", "cta": "orbit.example"}
]}

*단어*는 악센트 단어를 표시합니다. 장면 길이는 "dur"를 지정하지 않으면 단어 수에 따라 계산됩니다. 모든 장면은 {"type": "html", "html": "…", "dur": 4}가 될 수 있습니다. 스토리보드를 사용자에게 짧은 표(장면 · 화면 내용 · 시간(초))로 보여주고 승인을 받으세요.

4. 빌드

python scripts/mg.py new film --style saas-glass --format 16:9 --storyboard storyboard.json --accent "#ff5a1f"

이것은 film/index.html, film/theme.css, film/mg.js를 생성합니다. 브라우저에서 index.html을 열면 스크러버가 있는 라이브 프리뷰를 볼 수 있습니다. 그런 다음 HTML을 직접 편집하여 연출하세요: 비트 재정렬, 등장 변경, 차트 또는 SVG 추가. 속성 참조 — 애니메이션, 이징, 전환, 카메라 움직임, 루프, 커스텀 캔버스 코드 — 는 references/authoring.md에 있습니다. 직접 편집하기 전에 읽어보세요.

렌더링을 정확하게 유지하는 규칙(린터가 적용):

움직임은 data-* 속성 또는 MG.frame(t) / MG.scene() 콜백에서만 나와야 합니다. CSS transition/animation, 타이머, Date.now(), Math.random()은 사용하지 마세요 — MG.rand(seed)를 사용하세요.
폰트, 이미지, 스크립트는 프로젝트 폴더에 있어야 합니다. 네트워크가 필요한 렌더링은 반복 가능하지 않습니다.
푸티지는 여기서 렌더링하지 않습니다. --alpha로 그래픽을 렌더링하고 클립 위에 겹쳐 놓으세요(6단계).

5. 렌더링하기 전에 살펴보세요

python scripts/mg.py lint film                 # 결정론, 알 수 없는 이름, 읽는 시간, 긴 유지
python scripts/mg.py sheet film sheet.png      # 연락처 시트 + 프레임 이탈 / 클리핑 / 텍스트 겹침 보고서

시트를 열고 살펴보세요. references/motion-craft.md(계층 구조, 안전 영역, 프레임당 하나의 초점)와 대조 확인하세요. 수정, 재실행, 반복. 렌더링은 느린 단계입니다. 시트는 몇 초면 됩니다.

6. 렌더링

python scripts/mg.py render film draft.mp4 --scale 0.5            # 타이밍 판단을 위한 빠른 초안
python scripts/mg.py render film draft.mp4 --scale 0.5 --range 4-9  # 변경한 부분만
python scripts/mg.py render film final.mp4 --audio music.mp3      # 전체 품질, 끝에서 음악 페이드 아웃
python scripts/mg.py render film lower-third.mov --alpha          # 투명 ProRes 4444 (또는 .webm)
python scripts/mg.py render film loop.gif --scale 0.4             # 채팅 및 문서용 GIF

초안을 보여주고, 메모하고, 변경하고, 변경된 범위를 다시 렌더링하세요. 마지막에 한 번 전체 품질 렌더링을 합니다. 푸티지 위에 투명 그래픽을 배치하려면:

ffmpeg -i clip.mp4 -i lower-third.mov -filter_complex "[0][1]overlay=0:0:enable='between(t,2,7)'" -c:v libx264 -crf 18 -pix_fmt yuv420p -c:a copy out.mp4

사운드, 나레이션 타이밍 및 캡션: python scripts/mg.py cues film cues.json은 모든 장면 및 애니메이션 시작 시간을 나열합니다. 이를 사용하여 음향 효과와 자막을 정확하게 배치하세요. references/sound-and-captions.md를 참조하세요.

7. 확인 후 전달

python scripts/mg.py check final.mp4 --project film

크기, 프레임 속도, 지속 시간, 코덱 및 픽셀 포맷을 프로젝트와 비교 확인하고, 데드 홀드(움직임 없음), 검은 프레임, 클리핑 또는 거의 무음 오디오에 대해 경고합니다. OK 후에만 전달하세요. 사용자에게 파일, 한 줄의 사실(길이, 크기, 스타일), 그리고 변경을 요청할 수 있는 사항을 제공하세요.

품질 기준 — 모든 영화를 이것에 대해 확인하세요

처음 2초 안에 후크. 프레임 15까지 읽을 수 있고 움직이는 무언가.
프레임당 하나의 초점. 두 가지가 함께 들어오면 하나의 그룹입니다.
음소거 상태, 휴대폰에서 읽을 수 있어야 함. 본문 텍스트는 짧은 쪽의 4% 이상; 마지막 등장 후 유지 시간 ≈ 0.4초 + 단어당 0.16초.
약 2.5초 이상 완전히 정지된 상태는 안 됩니다 — 장면은 기본적으로 느린 카메라 푸시를 포함합니다. 유지하세요.
등장은 빠르게, 퇴장은 더 빠르게, 유지는 정직하게. 등장 0.3~0.8초, 퇴장은 그 약 70%.
엇갈리게, 우르르 몰려들지 않게. 형제 간 0.04~0.1초; 총 엇갈림 약 0.8초 미만.
영화당 하나의 전환 언어; 두 번째는 큰 순간에만 사용.
안전 영역. 모든 가장자리에서 5%; 9:16에서는 하단 20%와 상단 12%를 텍스트 없이 유지.
행동으로 끝맺음 — 마지막 프레임은 다음에 할 일을 명명하고 1.5초 이상 유지.

다른 엔진이 더 적합할 때

mg.py는 제로 빌드 단계로 텍스트, 레이아웃, 차트, UI 스타일 및 투명 오버레이를 다룹니다. 작업이 다른 것일 때 전환하세요 — references/engines.md에는 명령어, 라이선스 및 장단점이 있습니다:

필요	사용
React 컴포넌트, 데이터 기반 배치, 기존 Remotion 프로젝트	Remotion (회사 라이선스 참고)
GSAP 타임라인, 비디오/오디오 클립 포함, 에이전트 우선 HTML	HyperFrames (Apache-2.0)
수학, 방정식, 기하학, 알고리즘 시각화	Manim Community
편집기가 있는 수동 작성 TypeScript 애니메이션	Motion Canvas
앱이나 사이트 내에서 배송되는 애니메이션	Lottie / CSS / GSAP — 비디오 아님
3D 장면, 셰이더	`MG.frame(t)`로 구동되는 Three.js, 또는 Blender
푸티지 절단, 슬라이드쇼, 클립 캡션	`video-making` 스킬

요청 없이 작동 중인 프로젝트를 다른 엔진으로 마이그레이션하지 마세요.

참조 파일 — 작업에 필요한 것만 로드하세요

파일	읽을 때
`references/authoring.md`	장면 직접 편집; 모든 속성, 이징 또는 전환 이름; 커스텀 캔버스/SVG 코드
`references/styles.md`	스타일 선택, 혼합 또는 생성; 브랜드 색상 및 폰트
`references/motion-craft.md`	연락처 시트 또는 초안 판단; 페이싱, 계층 구조, 타이포그래피, 일반적인 실수
`references/sound-and-captions.md`	음악, 음향 효과, 나레이션 타이밍, 자막, 음량
`references/engines.md`	Remotion, HyperFrames, Manim, Motion Canvas, Lottie, 3D
`references/recipes.md`	준비된 패턴: 하단 서드, 로고 스팅, 키네틱 가사 줄, 차트 경주, UI 목업, 카운트다운, 엔드 카드

솔직한 한계

폰트는 기계에 있는 것으로 폴백됩니다. 정확한 일치를 원하면 프로젝트에 폰트 파일을 넣고 @font-face를 선언하세요(먼저 폰트 라이선스를 확인하세요).
--scale 0.5의 초안은 선명도가 아닌 타이밍을 판단합니다.
검사는 기계적 결함을 잡아냅니다; 취향은 여전히 눈이 필요합니다. 항상 시트와 초안을 직접 살펴보고, 추정하는 것이 아니라 본 것을 말하세요.
사용자가 소유하거나 사용이 허가된 에셋만 사용하세요. 가져오는 모든 것의 출처와 라이선스를 기록하세요.

모션 그래픽