시네마틱 샷

당신은 모션 디자이너가 아니라 감독이자 DP입니다. 영화는 히어로 샷 시퀀스로 구성됩니다. 각 샷은 제품 UI의 실제 부분을 가파르고 낮은 각도에서 바라보며, 너무 가까워서 초점면이 텍스트 한두 줄만을 덮고 나머지는 모두 검은색으로 사라집니다. 카메라는 다음 일이 일어날 곳을 향해 천천히 드리프트합니다. UI는 스스로 작동합니다. 우리가 지켜보는 동안 텍스트가 입력되고, 스트리밍되고, 선택되고, 작성됩니다. 아무것도 자막으로 설명되지 않습니다.

이 스킬은 카메라, 프레이밍, 조명, 편집에 관한 것입니다. 어떤 렌더링 스택으로든 영화를 만드세요. 무엇을 선택하든, 모든 프레임을 시간의 순수 함수로 만들어 영화가 결정론적으로 렌더링되고 모션 블러를 적용할 수 있게 하세요.

정확한 카메라, 피사계 심도, 조명, 리빌, 타이포그래피 레시피는 references/look.md를 참조하세요. 샷 문법의 전체 예시는 references/shot-list-example.md를 참조하세요.

느낌

검은 공허. 제품이 그 안에 어두운 판처럼 떠 있으며, 카메라에서 멀어지도록 기울어져 있고, 중요한 것을 따라가고 나머지는 검은색으로 떨어지게 하는 부드러운 조명 풀에 비춰집니다. 카메라는 낮고 가까이 있으며, UI를 똑바로 바라보는 것이 아니라 따라 바라보므로 텍스트 줄이 프레임을 가로질러 대각선으로 흐르고 멀리서 작아집니다. 초점면은 얇은 띠입니다. 하나의 컨트롤, 한 줄의 타이핑, 리스트의 한 행이 선명하고 나머지는 부드러운 보케입니다. 카메라는 절대 멈추지 않고 천천히 움직입니다. 샷은 무언가가 일어나는 것을 볼 수 있을 만큼 길게 유지됩니다. 유일한 색상은 제품 자체의 색상입니다. 다른 모든 곳에서는 절제를 유지하세요.

1. 샷을 계획하기 전에 스토리를 찾으세요

단 하나의 카메라를 계획하기 전에 다음을 적으세요:

플로우: 화면에서 일어나는 4~7가지 일을 순서대로. 예: 뷰 열기, 탭 선택, 프롬프트 입력, 답변 스트리밍되는 것 지켜보기, 문서가 스스로 작성되는 것 지켜보기, 승인.
페이오프: 제품이 눈에 띄게 놀라운 일을 하는 단 한 순간. 영화는 이 프레임에 도달하기 위해 존재합니다.
데모 콘텐츠: UI 내부의 구체적이고 신뢰할 수 있는 데이터. 이름, ID, 상태, 코드, 짧고 인간적인 텍스트. 실제처럼 보이는 밀도가 근접 촬영을 아름답게 만듭니다. 열두 개의 그럴듯한 이슈 목록은 제품처럼 읽히지만, 세 개의 회색 플레이스홀더는 목업처럼 읽힙니다.
한 줄의 카피: 제품 또는 기능 이름, 그 다음 5단어 이하의 태그라인.

2. 샷 리스트 작성

빌드하기 전에 샷 리스트를 게시한 다음 계속 진행하세요:

#	컷 시점	길이	피사체 (초점이 맞는 대상)	스케일	각도	무브	액션

규칙:

길이: 총 45~~55초, 8~~10개의 UI 샷, 그 다음 카피와 로고.
샷 길이는 액션을 따릅니다. 프로세스 샷(타이핑, 스트리밍, 문서 작성, 긴 diff)은 5~9초 실행됩니다. 구두점 샷(탭, 버튼, 네비게이션 항목)은 2~3.5초 실행됩니다. 두 가지를 번갈아 사용하여 긴 관찰 후에 짧은 악센트가 오도록 합니다. 중앙값 약 5초.
박자에 맞춰 컷하지 말고 액션에 맞춰 컷하세요. 비트 그리드는 없습니다. 피사체가 이미 프레임 안에 있거나 도착하려 할 때 컷인; 액션은 0.3~~0.8초 내에 시작; 결과를 0.5~~1초 동안 유지; 카메라가 아직 움직이는 동안 컷.
샷당 하나의 아이디어. 샷은 카메라가 하나의 연속적인 흐름을 따르는 경우에만 짧은 체인(입력 → 전송 → 응답 시작)을 포함할 수 있습니다.
편집자처럼 스케일을 다양화하세요. 익스트림 매크로와 매크로가 지배적입니다. 미디엄 샷은 더 긴 프로세스를 전달합니다. 와이드 샷(전체 창, 정면에 가까움)은 페이오프를 위해 아껴두세요. 마치 해방감처럼 다가옵니다. 그 후 다시 클로즈업으로 돌아옵니다.
대각선을 번갈아 사용하세요. 한 샷의 텍스트가 오른쪽으로 올라가면, 다음 샷의 텍스트는 오른쪽으로 내려가거나 평면이 반대 방향으로 기울어집니다. 모든 컷은 새로운 카메라 위치로 읽혀야 합니다.
연속 커서 없음. UI는 스스로 작동합니다(섹션 4 참조). 시청자는 샷 사이에서 포인터를 따라갈 필요가 없습니다.
분리된 표면은 분리된 설정을 가집니다. 스토리가 다른 표면(터미널, 전화기, 다른 앱)으로 이동하면, 동일한 검은 공간에 자체 판을 할당하고 하드 컷으로 전환하세요.

샷 스케일

스케일은 기본 크기에 대한 초점 지점에서 UI의 확대 배율로 측정합니다:

스케일	확대 배율	용도	피사계 심도
익스트림 매크로	5~7×	단일 탭, 버튼, 네비게이션 항목, 상태 배지. 한두 단어가 프레임의 1/3을 채웁니다.	피사체만 선명. 나머지는 모두 무거운 보케.
매크로	2.5~4×	한 줄의 타이핑이 있는 작성기, 리스트의 몇 행, 코드 덩어리	2~4줄 텍스트 깊이의 띠가 선명
미디엄	1.5~2.5×	작업 중인 패널: 스트리밍되는 리스트, 문서 작성, 사이드바가 있는 diff	더 넓은 띠가 선명; 먼 가장자리와 가까운 가장자리는 부드러움 유지
와이드	0.8~1.1×	페이오프 전용: 전체 창, 정면에 가까움, 콘텐츠 스크롤 또는 변경	대부분 선명; 프레임 가장자리는 여전히 부드러움

매크로 샷은 선명하게 유지되어야 합니다. 카메라가 스케일링하기 전에 UI를 확대 배율의 해상도(예: 6배)로 래스터화하세요. 1배 비트맵을 업스케일하지 마세요.

카메라 각도

이것이 룩의 시그니처입니다. 와이드 샷을 제외하고, 카메라는 낮고 비스듬하며, UI 평면을 가로질러 바라봅니다:

평면을 뒤로 기울이기(피치) 30~50°, 그래서 UI의 먼 쪽은 멀어지고 가까운 쪽은 우뚝 솟습니다.
평면 내에서 회전 10~20° 기울이기 전에, 그래서 텍스트 줄이 대각선으로 흐르도록 합니다. 연속된 샷 사이에 부호를 바꾸세요.
약간의 요를 추가, ±5~15°, 그래서 프레임의 한쪽이 다른 쪽보다 더 가깝습니다.
짧은 원근을 사용하여 원근 단축이 명확하도록: 같은 프레임에서 가까운 텍스트는 먼 텍스트보다 약 1.4~~1.8배 커야 합니다. 프레임 너비의 약 0.6~~0.75배의 원근 거리가 적합합니다(1080p에서 1100~1400px).
와이드 샷은 예외입니다: 정면에 가까움, 피치 8~12°, 평면 내 회전 없음, 요 ±3° 이내.
프레이밍: 공격적으로 크롭하세요. 판의 가장자리는 프레임 밖으로 나가거나 검은색으로 사라집니다. 넉넉한 검은색을 남기세요: 프레임의 1/4에서 절반은 종종 공허이거나, 초점이 너무 맞지 않아 질감으로 읽히는 UI입니다.

카메라 무브

각 샷은 하나의 연속적인 무브입니다. 동기화되어 있습니다: 카메라는 다음에 나타날 것을 향해 드리프트합니다.

트랙은 액션의 읽는 방향을 따릅니다: 일반적인 샷에서 프레임 너비의 3~~10%, diff나 문서를 따라 긴 팬의 경우 최대 20~~35%.
콘텐츠가 성장함에 따라 따르기: 답변이 아래로 스트리밍될 때 함께 아래로 드리프트; 한 줄이 입력될 때 캐럿과 함께 드리프트.
부드럽게 푸시, 샷 전체에 걸쳐 1~5%의 스케일 변화. 풀아웃은 드뭅니다.
약간 회전, 샷 전체에 걸쳐 0.5~4°의 롤 또는 요 변화.
속도: 일정한(선형) 속도, 또는 처음 1/3 동안 짧은 이즈-아웃 도착 후 느린 일정한 드리프트로 계속. 카메라는 완전히 정지하도록 이즈하지 않으며 컷 시점에도 여전히 움직입니다. 핸드헬드 노이즈나 흔들림 없음.
액션에 맞춰 포커스를 변경: 주의가 타이핑된 줄에서 응답으로, 또는 제목에서 본문으로 이동할 때, 그곳으로 0.4~0.8초에 걸쳐 초점 띠를 밀어 넣으세요.

3. 조명과 그레이딩: 검은 공허

모든 샷은 같은 스튜디오에서 촬영된 것처럼 보여야 합니다. 값은 references/look.md에 있습니다.

스튜디오: 제품 주변은 진정한 검은색. 그라데이션 배경화면, 색이 있는 헤이즈, 바닥 없음.
피사체 조명: 피사체 위에 부드럽고 중립적인 풀, 프레임이 아닙니다. UI는 초점 지점에서 프레임 너비의 약 1/3 이내에서 검은색으로 떨어집니다. 풀은 UI 평면 위에 있으므로 기울기가 원근 단축시키고 롤이 대각선을 따라 놓입니다. 액션 라인을 따라 더 길고, 오프 액시스 키 쪽으로 핫스팟이 밀려 있으며(키 쪽은 대각선에 따라 뒤집힘), 때로는 한쪽이 부드러운 플래그로 잘립니다. 피사체를 한 박자 늦게 따라가고, 포커스 변경과 함께 미끄러지며, 콘텐츠가 성장하고 페이오프에서 열립니다. 모든 샷에서 똑같이 보이는 중앙 원이 아닙니다. 색이 있는 키 라이트는 없습니다.
로우 키: 평균 프레임은 매우 어둡습니다(약 7~10% 휘도). 밝은 픽셀은 초점이 맞은 텍스트와 제품 자체의 색이 있는 UI를 위해 예약됩니다. 초점이 맞지 않은 밝은 것은 흐리게 처리됩니다.
제품은 어두운 판: 자체 크롬, 둥근 모서리, 패널 위의 희미한 1px 가장자리 하이라이트. 실제 UI를 충실히 유지하세요; 스타일을 변경하지 마세요.
색상은 제품에 속함: 상태 아이콘, diff 녹색과 빨간색, 브랜드 색상의 기본 버튼. 자신만의 악센트를 추가하지 마세요: 플레어, 글로우, 링, 색이 있는 빛 없음.
마감: 모션 블러(180° 셔터, 4+ 서브 프레임) 및 최종 렌더링에 미세한 필름 그레인. 피사계 심도와 함께 이 세 가지가 거의 모든 작업을 수행합니다.

4. 샷 내부의 모션

커서 없음. UI는 스스로 작동합니다. 네비게이션 항목이 강조 표시됩니다. 탭의 선택 필이 슬라이드됩니다. 버튼이 눌립니다. 코드 줄에 거터 컨트롤이 나타나고 줄이 강조 표시됩니다. 클릭이 읽혀야 한다면, 컨트롤 자체의 눌리거나 선택된 상태를 통해 보여주세요.
타이핑: 초당 12~13자, 보이는 캐럿 포함. 코드 식별자와 파일 참조는 입력될 때 인라인 칩으로 변환됩니다. 전송 시 작성기가 지워지고 메시지가 스레드로 이동합니다.
스트리밍: 생성된 텍스트가 위에서 아래로 한 줄씩 해결됩니다. 각 줄은 약 0.5초 동안 응축되어 단단한 글리프가 되는 미세한 점들의 스티플로 도착하며, 줄당 약 0.1초씩 지연됩니다. 아이콘과 아바타도 같은 방식으로 해결됩니다.
작성: 문서와 다이어그램은 순서대로 빌드됩니다: 제목, 그 다음 헤딩, 그 다음 단락; 다이어그램 노드, 그 다음 커넥터가 그려지고, 그 다음 레이블.
스크롤링: 미디엄 및 와이드 샷에서 콘텐츠는 드리프트하는 카메라 아래에서 부드럽게 스크롤될 수 있습니다. 이것은 두 번째 모션 레이어이며, 읽는 속도처럼 느껴져야 합니다.
나타나기: 새 패널과 메시지는 0.3~0.5초의 이즈-아웃 동안 작은 블러를 통해 페이드 인되며 약간 올라옵니다. 오버슈트로 튀어나오는 것은 없습니다.
충격 효과 없음. 페이오프는 스케일(와이드 샷)과 변경되는 양으로 표시되며, 흔들림, 섬광, 링으로 표시되지 않습니다.

5. 엔딩: 카피, 그 다음 정지 로고

마지막 UI 샷을 떠나기 검은색으로 하드 컷, 또는 0.4초 블러 및 딤 인투 블랙.
카피: 검은색 배경에 가운데 정렬된 한 줄, 1080p에서 약 80~~100px, 무게 500, 트래킹 약 -0.02em, 흰색. 약 16px에서 블러가 풀리면서 0.6~~1초에 걸쳐 페이드 업되어 도착합니다. 전체 줄을 한 번에 설정하거나, 제품 이름을 먼저 설정한 다음 같은 줄에 태그라인을 추가하여 줄이 성장함에 따라 다시 중앙 정렬되도록 합니다. 선명해짐에 따라 타입 뒤의 희미한 부드러운 글로우가 사라질 수 있습니다. 가로지르는 것은 없습니다. 3~5초 동안 유지.
로고: 정지 로고(마크 단독 또는 마크와 워드마크, 1080p에서 약 110~~120px 높이, 평범한 흰색)로 컷 또는 짧은 디졸브(약 0.3초). 움직이거나, 맥동하거나, 빛나지 않습니다. 4~~5초 동안 유지하고 영화를 그것으로 끝냅니다.

요청하지 않는 한 CTA 버튼, URL 카드 또는 "지금 사용 가능" 배너를 추가하지 마세요.

6. 사운드

음악은 없습니다: 스코어, 드론, 비트, 라이저, 브람, 음조 신호 없음. 사운드트랙은 거의 침묵에 가까운 조용하고 촉각적인 폴리입니다.

모든 보이는 액션은 큐를 얻습니다: 입력된 문자당 부드러운 키 틱, 탭이나 항목이 선택될 때 부드러운 클릭, 전송 시 조용한 우쉬, 스트리밍 텍스트 아래 희미한 과립형 히스. 페이오프는 충격 효과가 없습니다. 카피와 로고는 침묵 위에서 재생됩니다.

하지 말 것

다음은 영화를 튜토리얼이나 템플릿처럼 보이게 만듭니다:

콜드 오픈, 타이틀 카드, 또는 액션 전에 "Introducing..." 및 "New in..." 화면.
키캡 오버레이, 자막, 콜아웃 화살표, 또는 UI를 설명하는 레이블.
액션을 구동하는 보이는 마우스 포인터, 또는 대상 사이를 이동하는 커서.
평평하고 정면인 클로즈업. 와이드 페이오프 샷 외에는 카메라가 UI를 똑바로 바라보지 않고 가로질러 봅니다.
모든 것이 초점에 있음. 프레임에 보케가 없으면 샷이 너무 넓거나 초점 띠가 너무 깊습니다.
UI 샷 사이의 디졸브 또는 검은색으로 딥. UI 샷은 하드 컷만 사용합니다.
빠른 무브, 느린 궤도, 큰 3D 회전, 급강하 플라이스루, 카메라 흔들림, 또는 정지하도록 이즈하는 카메라.
그리드로 컷팅. 연속된 2초 샷은 시즐 릴로 읽힙니다. 프로세스 샷이 숨 쉴 시간을 주세요.
제품의 UI를 "시네마틱"하게 보이도록 스타일 변경. 실제 UI를 충실히 유지하고, 카메라, 포커스, 조명에서 시네마를 얻으세요.
아나모픽 플레어, 글로우, 악센트 링, 색이 있는 키 라이트, 또는 제품이 이미 가지고 있지 않은 어떤 색상.
프레임을 가로질러 움직이는 빛: 광택 밴드, 스위프, 또는 UI 위를 여행하는 라이트 바. 빛은 피사체를 따릅니다; 공연하지 않습니다.
모든 샷에서 중심에 있고 동일한 스크린-스페이스 원인 라이트 풀. 그것은 판 위의 빛이 아니라 구멍이 뚫린 검은색 오버레이로 읽힙니다.
애니메이션 로고 리빌.
어떤 종류의 음악(스코어, 비트, 드론, 라이저, 브람, 종 포함).

7. DP처럼 검증하세요

모든 샷의 중간, 각 액션의 정점, 페이오프, 카피 및 로고 프레임에서 스틸을 렌더링하세요. 각각을 영화의 프레임 그래브로 판단하세요:

정확히 하나의 선명한 피사체가 있고, 눈이 0.5초 이내에 그 위에 머뭅니다.
와이드 샷을 제외하고 초점 띠는 얇고, 가까운 쪽과 먼 쪽 모두 보케가 있습니다.
평면이 기울어진 것으로 읽힙니다: 텍스트가 대각선으로 흐르고 멀리서 눈에 띄게 작아집니다.
초점이 맞은 텍스트는 절반 해상도에서 읽을 수 있습니다.
프레임의 적어도 1/4은 검은색 또는 거의 검은색입니다.
연속된 샷은 스케일이나 대각선 방향이 다릅니다.
모든 프레임은 동일한 블랙 레벨, 중립 조명, 그레인을 공유하지만, 풀의 모양은 각 카메라에 따라 변경됩니다: 원근 단축되고, 액션을 따라 늘어나며, 한쪽에서 조명됩니다.
가장 강력한 프레임을 포스터로 선택하세요.

모든 스틸이 런치 포스트의 스크린샷이 될 수 있을 때까지 반복하세요.

Cinematic Shot: 실제 UI로 런칭 필름 연출하기