씬 데크: 하나의 그림, 하나의 카메라
씬 데크는 하나의 일러스트레이션 안에서 진행되는 발표입니다. 모든 페이지는 동일한 그림 위의 카메라 위치입니다. 카메라는 특정 세부로 줌인하고, 그려진 경로를 따라 다음 객체로 이동하며, 공간을 가로질러 점프하고, 마지막에는 와이드 샷으로 후퇴합니다. 텍스트는 화면 공간에 그려진 카드 위에 표시되며, 카메라가 도착한 후 잠시 멈춤(beat) 뒤에 나타나므로 청중이 읽기 전에 먼저 장면을 보게 됩니다.
이 스킬은 @open-slide/core 2.2에서 22개 샷, 20분 분량의 컨퍼런스 발표를 제작한 방법입니다. open-slide에는 카메라 API가 없으므로 카메라는 페이지 컴포넌트 내부에서 구동됩니다. template/index.tsx에는 전체 엔진과 7개의 예제 샷이 포함되어 있습니다. 이를 복사하여 씬, 앵커, 카드를 교체하십시오.
사용 시점
- 발표에 특정 장소(교실, 수술실, 공장 바닥, 도시 블록)가 있습니다. 그 장소의 객체들이 이야기의 정거장(station)에 매핑됩니다.
- 발표자가 Prezi의 느낌(줌인하여 말하기, 전체를 보기 위해 줌아웃, 다음 지점으로 미끄러지듯 이동)을 원하지만 Prezi는 사용하고 싶지 않습니다.
- 샷의 개수는 15~25개입니다. 그보다 적으면 일반 데크로도 충분하고, 많으면 카메라 움직임이 배경화면처럼 느껴집니다.
데이터가 많은 데크, 라이브 데모, 또는 다른 사람이 PowerPoint에서 편집해야 하는 경우에는 사용하지 마십시오. 이것은 웹 페이지이며 Chrome에서 재생됩니다.
작업 순서
- 먼저 스토리보드를 작성합니다. 하나의 씬, 정거장 목록, 각 정거장당 하나의 카메라 위치와 하나의 카드, 그리고 여전히 필요한 실제 자료(스크린샷, 로그, 사진) 목록을 만듭니다. 아트나 코드 작업 전에 기록하십시오.
references/storyboard.md에는 표와 발표자와 함께 결정해야 할 질문들이 있습니다. - 씬을 제작합니다. 와이드 샷의 스타일 후보 3개를 생성하고 발표자가 선택하도록 한 후, 이미지-투-이미지 편집(객체 제거, 스토리에 필요한 한 가지 요소 추가, 화면을 비워둠)으로 그림을 수정합니다. 카메라가 수백 세계 픽셀 이내로 접근하는 경우에만 클로즈업 플레이트를 생성합니다.
references/art.md. - 앵커를 그리드로 측정합니다. 와이드 샷에서 눈짐작으로 측정하지 마십시오.
scripts/measure-grid.sh는 100px 그리드로 그림 영역을 자릅니다. 스크린샷이 들어가야 하는 모든 것에 대해 3배 코너 크롭을 사용합니다.references/art.md. - 템플릿에서 데크를 구축합니다.
ViewKey,VIEWS항목(카메라, HUD 모드, 블러, 홀드),HudBody케이스, 페이지, 노트를 추가합니다. 엔진은 변경되지 않습니다.references/engine.md에서 모든 설정을 설명합니다. - 눈으로 확인하지 말고 검증합니다. 헤드 Chrome에서
scripts/perf-probe.cjs를 실행합니다. 모든 페이지 변경에서 장시간 작업(long task)이 없고 프레임 갭이 50ms를 초과하지 않아야 합니다. 스크린샷 없이 측정하십시오. 스크린샷은 각각 300ms가 소요되며 버벅임(jank)처럼 보입니다.references/verification.md. - 워크스루를 녹화하고 휴대폰으로 시청합니다.
scripts/record-walkthrough.cjs는 샷별 체류 시간으로 데크를 재생하고 녹화합니다. mp4로 변환하여 발표자의 휴대폰으로 보냅니다. 원본 프로젝트의 모든 피드백 라운드는 브라우저가 아닌 이 루프에서 이루어졌습니다. - 빌드에서 발표합니다.
scripts/present.command는 빌드하고dist/를 서빙한 후 데크와 발표자 창(노트, 타이머, 다음 페이지)을 엽니다. 행사장 프로젝터에서 발표자 본인의 노트북으로 테스트합니다.references/presenting.md.
대가를 치르고 배운 규칙
- 카드보다 씬을 먼저 보여줍니다. 카드는 카메라가 도착한 후
holdms(기본값 1초)가 지나야 나타납니다. 비행 중 70% 지점에서 팝업되는 카드는 씬을 바탕화면으로 만들어 버립니다. - 클로즈업 카메라는 해당 플레이트 내에 위치해야 합니다. 뷰가 플레이트보다 넓으면 확대된 기본 그림이 주변으로 번져 그림자나 유령 손처럼 읽힙니다.
- 스크린샷은 호모그래피를 통해 그려진 화면 위에 배치되며, 베젤 안쪽 가장자리에 매핑됩니다. 3배율로 네 모서리를 측정합니다.
- 긴 점프에는 중간 페이지가 필요하지 않습니다. van Wijk 경로가 스스로 상승하고 다이빙합니다. 먼 정거장을 그림의 먼 끝에 배치하고 비행하도록 놔두십시오.
- 카드에는 평이한 언어를 사용합니다. 그림이 말의 절반을 대신하고 있습니다. 카드는 하나의 아이디어와 최대 4줄을 담습니다.
- 이를 위해 절대
MorphElement를 사용하지 마십시오. 애니메이션이 시작되기 전에 메인 스레드에서 모든 하위 요소의 계산된 스타일을 복사합니다. 실제 데크에서 5초 동안 멈춘 사례가 있습니다.docs/adr/0001-drive-the-camera-in-page.md를 참조하십시오.
이 폴더의 내용
| 경로 | 설명 |
|---|---|
template/index.tsx | 엔진과 7개의 예제 샷. slides/<id>/index.tsx에 복사하십시오. |
template/assets/ | 예제 씬(2752 × 1536), 클로즈업 플레이트, 앱 스크린샷. 교체하십시오. |
references/engine.md | 카메라, HUD, 홀드, 플레이트, 원근 화면 작동 방식; 샷 추가 방법. |
references/storyboard.md | 스토리보드 표와 아트 작업 전 결정 사항. |
references/art.md | 씬 프롬프팅, 수정, 앵커 측정, 플레이트. |
references/verification.md | 성능 프로브, 워크스루 녹화, 휴대폰 검토 루프. |
references/presenting.md | 빌드, 미리보기, 발표자 창, 런처, 대체 방법. |
references/pitfalls.md | 한 번 실수하여 다시는 실수하지 않도록 한 모든 것. |
scripts/ | perf-probe.cjs, record-walkthrough.cjs, measure-grid.sh, genimg.py, genedit.py, present.command. |
docs/adr/ | 카메라가 페이지에 있는 이유, HUD가 대기하는 이유. |
발표자와의 협업
다음 순서대로 발표자와 함께 결정하십시오: 정거장의 스토리 순서; 먼 거리 점프가 와이드 샷을 경유해야 하는지(자동으로 그렇게 됩니다); 어떤 실제 자료를 언제 제공할지; 아트 스타일(세 개를 보여주고 하나를 선택); 그림에 절대 나타나서는 안 되는 것. 각 결정을 날짜와 함께 스토리보드에 기록합니다. 그런 다음 전체 데크를 구축하고 녹화한 후 비디오를 보냅니다. 각각 5개의 샷을 건드리는 3~4회의 피드백을 예상하십시오.