샷 구성(Shot Composition)
프레임을 구성하고 카메라를 움직입니다: 그리드 시스템, 안전 영역, 초점 위계, 네거티브 공간, 시차 레이어링, 그리고 레이아웃이 시간에 따라 시선을 유도하는 방법. 구성 노트, 레이어 구조(배경/중간/전경), 구체적인 숫자가 포함된 카메라 이동 계획을 생성합니다.
사용 시기
- 프레임의 레이아웃, 초점, 네거티브 공간을 정의할 때.
- 요소의 진입/이탈 방향과 모션 경로를 계획할 때.
- 카메라 푸시/풀, 팬, 팔로우, 시차 이동을 디자인할 때.
- 하나의 구성을 16:9, 9:16, 1:1로 안전 영역과 함께 적용할 때.
의사 결정 트리
무엇을 구성하시겠습니까?
├─ 정적 프레임의 레이아웃
│ └─ 그리드 설정 → 3분할 법칙의 교차점에 하나의 초점 배치
│ → 위계 정렬 (크기>대비>색상>위치) → 네거티브 공간 확보
├─ 요소의 진입/이탈 위치
│ └─ 읽는 방향 따르기; 가장 가까운 가장자리; ease-out 진입, ease-in 이탈
│ (새 콘텐츠 → 오른쪽/아래에서; 뒤로가기/실행취소 → 반대)
├─ 깊이감 / 카메라 이동
│ └─ 배경/중간/전경 레이어로 분할 (세 가지 모션 레이어)
│ → 비트당 하나의 카메라 이동 (푸시 | 팬 | 팔로우 | 시차), ease-in-out
└─ 다양한 화면 비율에 맞춘 하나의 구성 (16:9 / 9:16 / 1:1)
└─ 16:9로 마스터, 초점은 중앙 밴드에 → 세로형(9:16)을 위해 다시 쌓기 (자르지 않음)
→ 중요 콘텐츠는 타이틀 안전 여백 내에 유지
참조 — 공유 프레임워크를 적용하세요. 이 스킬은 animation-principles의 공간적 절반입니다. 명시적으로 적용하세요:
- 1/3 규칙 (
animation-principles)에는 두 가지 형태가 있으며, 이 스킬은 두 형태를 공간적으로 사용합니다: (a) 구성 3분할 — 초점을 3분할 법칙 교차점(33%/67%)에 배치; (b) 거리 — 어떤 요소도 중간 키프레임이나 스케일/투명도 변경 없이 프레임의 약 1/3 이상을 이동하지 않아야 하므로, 진입이 읽기 쉽습니다. - 세 가지 모션 레이어 (
animation-principles: 주/보조/주변)는 깊이에 직접 매핑됩니다: 전경 = 주 (눈이 따라가는 움직임), 중간 = 보조 (주제 + 반응), 배경 = 주변 (느리고 낮은 대비의 생동감). 시차 속도는 그 역할에 따라 조정됩니다. - 카메라 이동에 번호를 매기기 전에 세 가지 기둥(감정적 의도 / 시각적 내러티브 / 모션 제작)과 선택된 모션 개성(
motion-art-direction)을 확정하세요 — 프리미엄은 느리고 긴 푸시를 원하고, 에너제틱은 휩팬을 원합니다.
핵심 워크플로
1. 그리드 설정
그리드는 정렬과 리듬을 제공합니다. 가로형 웹/비디오의 경우 기본적으로 12열 그리드를 사용하세요 (반, 1/3, 1/4, 1/6으로 나눌 수 있음) 여백과 외부 마진을 포함합니다. 1920px 너비 프레임의 경우: 외부 마진 80-120px, 12열, 거터 24-32px.
content_width = frame_width - 2 * margin
column_width = (content_width - (cols - 1) * gutter) / cols
예시 (1920 너비, 마진 100, 거터 24, 12열): 콘텐츠 1720, 열 = (1720 - 11*24)/12 = 121.3px.
베이스라인 그리드(수직 리듬)는 8px을 표준 간격 단위로 사용합니다; 크기와 간격은 모두 8의 배수(8/16/24/32/48/64)로 하여 시각적 일관성을 유지하세요.
2. 초점 배치
3분할 법칙을 사용하세요: 프레임을 3x3 그리드로 나누고, 주요 대상을 1/3 선이나 교차점(파워 포인트)에 배치하세요. 정중앙이 아닌 곳에 배치합니다. 단, 작품이 의도적으로 대칭을 사용하여 정적/격식을 표현하는 경우는 예외입니다. 교차점은 대략 가로/세로 33%/67% 지점에 위치합니다.
다음 우선순위로 시각적 위계를 구축하여 시선을 유도하세요: 크기 > 대비 > 색상 > 위치. 가장 크고 대비가 높은 요소가 먼저 주목을 받습니다. 프레임당 정확히 하나의 주요 초점을 설정하세요; 보조 요소는 지원만 하고 경쟁하지 않아야 합니다.
3. 네거티브 공간을 리듬으로 사용
프레임을 가득 채우지 마세요. 초점 주변의 충분한 네거티브 공간은 고급스럽고 자신감 있는 인상을 주며, 모션이 숨 쉴 공간을 제공합니다. 여백은 능동적인 구성 요소이지, 남은 공간이 아닙니다.
4. 장면 레이어링 (배경/중간/전경) — 깊이와 시차
구성을 깊이 레이어로 나누세요: 배경(가장 느림, 가장 낮은 대비, 종종 채도 낮춤/블러), 중간(주제), 전경(가장 빠름, 교차 시 블러될 수 있음). 시차 = 깊이를 시뮬레이션하기 위해 레이어를 다른 속도로 이동.
이 깊이 레이어는 animation-principles의 세 가지 모션 레이어를 Z축에 투영한 것입니다. 각 레이어의 역할이 속도, 대비, 모션 양을 결정합니다:
| 깊이 | 모션 레이어 | 시차 속도 | 대비 / 초점 | 위치하는 요소 |
|---|---|---|---|---|
| 배경 | 주변 | 0.1–0.3x | 낮음, 종종 채도 낮춤/블러 | 하늘, 그라데이션, 텍스처, 세트 장식 |
| 중간 | 보조 | 0.5–0.7x | 중간; 주제 지원 | 주제의 환경, 지원 요소 |
| 전경 | 주 | 1.0–1.5x | 주제 선명; 전경 소품은 교차 시 블러 | 주인공 주제 + 가장 가까운 소품 |
전경은 매우 가깝게 읽히기 위해 1.0을 초과할 수 있습니다. 주 움직임은 눈이 따라가는 움직임입니다; 두 레이어에 경쟁하는 주 모션을 절대 주지 마세요.
5. 카메라 언어 (2D 및 3D에서 작동)
- 푸시 / 풀 — 대상 안으로 또는 밖으로 확대/축소 (돌리). 친밀감을 형성하거나 맥락을 드러냅니다. 800-2000ms, ease-in-out.
- 팬 / 틸트 / 이동 — 장면을 가로질러 프레임을 이동합니다. 공간을 드러내고, 동작을 따릅니다.
- 팔로우 — 움직이는 대상을 프레임에 유지합니다 (종종 약간 오프센터, 움직임을 리드).
- 시차 — 깊이를 판매하는 레이어 이동.
한 번의 샷, 하나의 의도. 푸시 + 팬 + 회전을 동시에 하지 마세요 — 결합된 움직임은 혼란스럽게 읽힙니다. 비트에 가장 적합한 단일 움직임을 선택하세요. 인라인 타이밍 필수 사항: 카메라 이동은 ease-in-out(cubic-bezier(0.65, 0, 0.35, 1))을 사용하세요; 연속 루프를 제외하고는 절대 linear를 사용하지 마세요; 느릴수록 더 영화적입니다.
6. 진입/이탈 방향은 의미를 전달합니다
읽는 방향을 따르는 움직임(좌→우, 상→하)은 자연스럽고 부드럽게 느껴집니다; 반대 방향은 긴장감을 만들거나 "뒤로/실행 취소" 신호를 보냅니다. 의도에 맞게 방향을 선택하세요:
- 새 콘텐츠 도착 -> 오른쪽 / 아래에서 진입.
- 닫기 / 뒤로 가기 -> 오른쪽 또는 아래로 이탈하거나, 진입을 반대로.
- 더 깊이 들어가기 -> 확대 / 푸시 인.
요소는 일반적으로 가장 가까운 프레임 가장자리를 통해 진입/이탈하고, 진입 시 약간의 오버슈트(ease-out)와 이탈 시 가속(ease-in)이 있어야 합니다.
7. 안전 영역 및 다중 화면 비율 적응
모든 중요 콘텐츠(텍스트, 로고, 얼굴, CTA)를 타이틀 안전 여백 내에 유지하여 플랫폼 UI에 의해 잘리거나 가려지지 않도록 하세요.
| 화면 비율 | 용도 | 타이틀 안전 마진 | 참고 |
|---|---|---|---|
| 16:9 | YouTube, 웹 히어로 | 모든 면 ~5% | 방송용 타이틀 안전은 역사적으로 10% |
| 9:16 | 릴스, TikTok, 스토리 | 상단 ~12-14%, 하단 ~18-20%, 측면 ~6% | 플랫폼 UI가 상단과 하단을 차지함 |
| 1:1 | 피드 게시물 | 모든 면 ~6-8% | 대칭 |
| 4:5 | 피드 (더 긴) | 측면 ~6%, 상단/하단 ~8% | 피드 공간 최대화 |
초점을 충분히 중앙에 배치하여 모든 크롭에서 살아남을 수 있도록 한 다음, 보조 요소를 화면 비율에 따라 재배치하세요. 16:9 -> 9:16의 경우, 단순히 측면을 자르는 대신 가로 배열을 세로로 다시 쌓으세요.
작업 예시
GOOD — 제품 히어로, 16:9 → 9:16
브리프: 앱 출시 히어로, Premium 개성, 웹 히어로와 릴스로 모두 작동해야 함.
- 그리드: 1920×1080, 마진 100, 거터 24, 12열. 폰 목업은 7-11열(오른쪽 파워 열)에 걸쳐 있음.
- 초점: 오른쪽 3분할 교차점(1280, 360)에 폰 화면 — 중앙 아님. 하나의 초점; 헤드라인(1-5열)은 보조, 낮은 대비.
- 깊이 (세 가지 모션 레이어): 배경 = 부드러운 그라데이션 드리프트, 0.2x, 주변. 중간 = 폰 목업, 0.6x, 보조 단계. 전경 = 하나의 초점 흐린 UI 칩이 지나감, 1.2x + 3px 블러, 주 깊이 신호로 읽힘.
- 카메라: 단일 푸시 인, 스케일 1.0→1.10, 1600ms ease-in-out, 원점은 폰 화면 — Premium과 일치 (느림, 오버슈트 없음). 팬 추가 안 함.
- 9:16 적응: 다시 쌓기 — 헤드라인은 폰 위로 이동, 폰은 상단 중간으로 올려 하단 19% CTA/네비게이션 영역을 비움, 텍스트 +20%. 초점이 중앙 밴드에서 시작했기 때문에 크롭에서 살아남음.
효과적인 이유: 하나의 초점, 깊이 역할 할당, 하나의 카메라 이동, 안전 영역 인식 재배치(맹목적 크롭 대신).
안티 패턴 — "모든 것이 중앙에 있고, 모든 것이 움직이는" 프레임
- 폰 목업 정중앙, 헤드라인 중앙 위, 로고 중앙 아래 → 세 요소가 동일한 축에서 경쟁, 위계 없음, 파워 포인트 없음.
- 세 레이어 모두 동일한 1.0x 속도로 왼쪽으로 슬라이드 → 시차 없음, 깊이 없음, "전체 템플릿이 이동했다"고 읽힘 (중간 키프레임 없는 전체 너비 슬라이드는 1/3 규칙 / 거리 위반).
- 카메라가 푸시 + 팬 + 약간 회전을 동시에 수행 → 혼란, 단일 의도 없음.
- 9:16을 16:9의 측면을 잘라서 만듦 → 헤드라인과 로고 잘림, 폰이 네비게이션 바 아래 너무 낮음.
수정: 하나의 초점 파워 포인트 선택, 각 레이어에 깊이 역할 + 뚜렷한 시차 속도 할당, 하나의 카메라 이동, 세로형을 위해 자르기 대신 다시 쌓기.
일반적인 실수
| 증상 | 이유 | 수정 |
|---|---|---|
| 프레임이 평평하게 느껴짐 / "템플릿이 움직인 것 같음" | 모든 레이어가 하나의 속도로 움직임; 깊이 역할 없음 | 배경/중간/전경에 주변/보조/주 역할 + 0.2/0.6/1.2x 시차 할당 |
| 눈이 어디를 봐야 할지 모름 | 동일한 크기/대비의 2개 이상 요소, 모두 중앙 정렬 | 3분할 교차점에 하나의 초점; 크기>대비>색상>위치 순위 매기기 |
| 카메라 움직임이 혼란스럽게 읽힘 | 푸시 + 팬 + 회전 결합 | 비트당 하나의 움직임; 의도에 가장 잘 맞는 것을 선택 |
| 콘텐츠가 휴대폰에서 잘림 | 16:9로 디자인하고 9:16으로 자름 | 세로로 다시 쌓기; 중요 콘텐츠를 타이틀 안전 여백 내에 유지 (9:16에서 상단 13% / 하단 19%) |
| 진입이 "이벤트"가 아닌 "슬라이드"로 읽힘 | 요소가 중단 없는 단일 이동으로 프레임의 1/3 이상 이동 | 중간 키프레임으로 나누거나 이동을 스케일/투명도와 쌍으로 (1/3 규칙, 거리) |
| 저렴해 보임 / 비좁음 | 프레임이 가장자리까지 채워짐 | 초점 주변에 네거티브 공간 확보; 능동적인 요소임 |
| 모션이 스토리와 충돌 | 숫자가 의도보다 먼저 선택됨 | 먼저 세 가지 기둥 + 모션 개성을 확정한 후 숫자 결정 |
산출물 — 구성 계획
좋은 구성 계획은 구현 스킬(gsap-web, remotion-video, after-effects)에 전달되며 다음을 포함합니다:
- 프레임 사양: 화면 비율, 해상도, fps, 그리드 (열/마진/거터), 기준 단위.
- 초점: 3분할 교차점의 좌표 (px 또는 %) + 모든 요소의 위계 순위.
- 레이어 맵: 각 요소에 배경/중간/전경 → 주변/보조/주 할당, 시차 속도 포함.
- 진입/이탈: 요소별 — 가장자리, 방향, 이징 패밀리, 이동이 1/3을 초과하는지 여부 (및 어떻게 나누는지).
- 카메라 이동: 단일 이동, 속성 + 시작→끝 값, 지속 시간, 이징, 변환 원점.
- 안전 영역: 대상 화면 비율별 타이틀 안전 여백 + 세로형을 위한 재배치 계획.
- 참조: 어떤 모션 개성과 어떤 기둥 결정이 타이밍을 결정하는지.
마치기 전 — 체크리스트
- 정확히 하나의 주요 초점, 3분할 교차점 (또는 의도적 대칭)에 위치.
- 위계 순위 매겨짐 (크기 > 대비 > 색상 > 위치); 보조 요소가 경쟁하지 않음.
- 초점 주변에 네거티브 공간 확보.
- 모든 요소에 깊이 레이어 할당됨 (배경/중간/전경 = 주변/보조/주) 시차 속도 포함.
- 하나의 카메라 이동, 쌓이지 않음; 이징 적용 (루프가 아니면 선형 아님); 히어로 이동은 800-2000ms.
- 진입/이탈은 가장 가까운 가장자리 사용, 읽는 방향 따름, ease-out 진입 / ease-in 이탈.
- 어떤 요소도 중간 키프레임 또는 스케일/투명도 변경 없이 프레임의 1/3 이상 이동하지 않음.
- 중요 콘텐츠가 모든 대상 화면 비율의 타이틀 안전 여백 내에 있음; 세로형은 자르지 않고 다시 쌓음.
- 숫자를 선택하기 전에 모션 개성 + 세 가지 기둥이 확정됨.
빠른 참조
| 필요 사항 | 기본값 |
|---|---|
| 그리드 | 12열, 8px 베이스라인, 8의 배수 간격 |
| 초점 배치 | 3분할 법칙 교차점, 정중앙 아님 |
| 위계 순서 | 크기 > 대비 > 색상 > 위치 |
| 깊이 레이어 | 배경 / 중간 / 전경, 시차 0.2x / 0.6x / 1.2x |
| 카메라 | 한 번에 하나의 이동, ease-in-out, 800-2000ms |
| 진입 / 이탈 | 읽는 방향 따름; ease-out 진입, ease-in 이탈 |
| 9:16 안전 | 상단 12%, 하단 18%, 측면 6% |
참조 파일
references/camera-and-grids.md— 계산된 숫자가 있는 그리드 수학, 화면 비율별 전체 안전 영역 백분율 표, 시차 레이어링 코드 (CSS 스크롤 + JS 포인터 + Three.js), 키프레임 값이 있는 명명된 카메라 이동 레시피 (푸시인, 휩팬, 오빗, 돌리 줌).