페이지 릴(Page Reel) 제작하기

개요

페이지는 이미 최고의 장면을 담고 있습니다. 바로 실제로 실행되는 페이지 자체의 모션입니다. 작업은 이 모션을 충실하게 캡처하고, 이를 통해 보여줄 경로를 선택하며, 결과물을 검증하는 것입니다.

핵심 원칙: 실제 애니메이션을 기록하고, 절대 다시 만들지 말며, 감이 아닌 측정으로 편집하라.

페이지의 녹화물은 '워크스루(walkthrough)'입니다. 그렇게 말하세요. 브랜드 필름은 스토리보드가 있는 디자인된 애니메이션 필름으로 별개의 작업입니다. 이 스킬은 "우리가 만든 페이지가 어떻게 보이고 움직이는지"를 보여주기 위한 것입니다.

녹화 전 결정 사항

릴이 증명하는 것. 한 문장으로. "새 페이지가 스스로 구성되고 설계된 대로 스크롤된다."
어떤 버전. 실제로 출시되어 리뷰 환경에 배포된 버전을 녹화하세요. 아직 출시되지 않은 버전(미발표 제품 페이지, 초안)이나 아직 수정 중인 프로토타입은 절대 안 됩니다. 로컬 빌드가 아닌 스테이징 환경을 녹화하세요.
포맷. 16:9, 1920x1080이 기본 데스크톱 캡처이며 가장 안전합니다. 팀이 QA하지 않은 세로 레이아웃을 임의로 만들지 마세요.
길이. 짧게. 15~20초면 전체 페이지의 기능을 보여줍니다. 5초면 한 가지 동작을 보여줍니다. 릴에 필요한 것이 무엇인지 결정하세요.
나타나면 안 되는 것. 고객 로고, 이름이 있는 인용문, 타사 마크, 자리 표시자 텍스트, 깨진 이미지, 미공개 주장. 지금 목록을 작성하세요.
해상도. 1080p로 리뷰하세요. 편집본이 승인되기 전까지 4K 마스터를 렌더링하지 마세요.

1단계: 실제 애니메이션 녹화

프레임별 스크린샷이 아닌, Chrome의 CDP 스크린캐스트를 사용하세요. GSAP 스크롤 스크럽, 부드러운 스크롤, 캔버스 트레일 및 타이머 인트로는 모두 실제 벽시계 시간으로 실행됩니다. 이들을 프레임 단위로 진행시키면 모션이 변경됩니다.

Page.startScreencast  format jpeg, quality 100, maxWidth = viewport width, everyNthFrame 1

Apple 실리콘 노트북에서는 초당 약 60프레임(중앙값 간격 16.7ms)을 제공합니다.

로드 시간 인트로: 스크린캐스트를 시작한 다음 페이지를 다시 로드하여 인트로가 녹화에 포함되도록 합니다. 페이지 다시 로드 전의 프레임은 자릅니다.
스크롤링: 키프레임 [초, 위치]로 스크롤을 구동합니다. 단조 3차 보간(오버슈트 없음, 정지 구간은 평탄하게 유지)으로 위치를 전달하고, 부드러운 스크롤 라이브러리의 scrollTo(y, { immediate: true, force: true })로 각 값을 적용하여 페이지 자체의 스크러빙과 스무딩이 독자가 경험하는 그대로 정확히 실행되도록 합니다. 페이지의 요소를 수동으로 애니메이션하지 마세요.
숨기기, 제거하지 않기: 로고와 인용문에 visibility: hidden을 사용하면 고정된 레이아웃이 유지됩니다. display: none은 레이아웃을 변경합니다.
클록: 페이지 내부에서 시작 시간을 기록합니다(performance.timeOrigin + performance.now()). 그래야 스크롤 키프레임과 스크린캐스트 타임스탬프가 하나의 클록을 공유합니다.
일정한 프레임 속도로 리샘플링: 출력 프레임 k는 k / fps 시점 또는 그 이전의 최신 스크린캐스트 프레임을 표시합니다.

이 저장소의 video/capture.mjs는 작은 JSON 계획만으로 이 모든 작업을 수행합니다.

2단계: 측정으로 경로 선택

감으로 선택한 스크롤 경로는 데드존(휠이 움직여도 화면에 아무 변화가 없는 구간)을 남깁니다. 이를 찾으세요:

전체 범위를 느리고 일정하게 한 번 쓸어내립니다.
video/analyze.py를 실행합니다. 이 스크립트는 프리즈(동일 프레임) 및 프레임 간 가장 큰 변화를 보고합니다.
프리즈된 구간을 스크롤 위치에 매핑합니다. 이것들이 데드존입니다. 빠르게 통과하세요.
스크롤 스크럽되는 순간(원이 커지는 것, 카드가 만들어지는 것, 카운터가 증가하는 것)은 느리고 읽기 쉬운 구간을 만듭니다. 스크럽된 장면은 스크롤을 따라가므로 기다려도 끝나지 않습니다.
시간 기반 애니메이션은 임계값을 넘으면 시작되며 실제 시간이 필요합니다. 마지막 애니메이션이 끝날 때까지 클립을 끝내지 마세요.

그런 다음 조정된 경로로 실제 테이크를 녹화하고 analyze.py를 다시 실행합니다. 고정된 장면 내부의 짧은 프리즈 구간은 유지(hold)이므로 괜찮습니다. 그러나 플릭 중간에 0.4초 프리즈는 괜찮지 않습니다.

캡처 상태를 확인하세요. 사용할 부분 내에서 스크린캐스트 프레임 간 최대 간격이 약 40ms 미만이어야 합니다. 더 큰 간격은 히치(hitch)이므로 다시 녹화하세요.

3단계: 완성된 장면 선택

커밋하기 전에 0.5~1초 간격으로 콘택트 시트를 확인하세요. 다음은 거부하세요:

빈 카드, 깨진 이미지, 그림이 있어야 할 자리에 표시된 대체 텍스트
CMS 목록의 자리 표시자 복사본
페이지가 페인트되는 동안 비어 있는 첫 1초; 헤드라인이 올라오기 시작하는 지점으로 자르세요
"나타나면 안 되는 것" 목록에 있는 모든 것

섹션이 미완성이면 제외하고 소유자에게 알리세요. 깨진 카드가 포함된 릴은 공개 버그 보고서입니다.

4단계: 색상 태그를 포함하여 인코딩

./encode.sh <framesDir> out.mp4 <firstFrame> <frameCount> 60

스크린캐스트 프레임은 전체 범위 BT.601 JPEG입니다. 인코드는 이를 제한된 범위 BT.709로 변환하고 스트림에 태그를 지정하여 플레이어가 추측하지 않도록 합니다:

scale=in_range=full:in_color_matrix=bt601:out_range=tv:out_color_matrix=bt709,format=yuv420p
libx264 -crf 14 -preset slow -x264-params colorprim=bt709:transfer=bt709:colormatrix=bt709:fullrange=off
-movflags +faststart

yuv420p와 +faststart는 모든 환경에서 재생되고 즉시 시작되도록 합니다. 몇 프레임을 디코딩하여 원본과 픽셀 단위로 비교하여 결과를 검증하세요. 채널 평균을 비교하지 마세요: 수백만 개의 float32 값을 평균내면 존재하지 않는 색조를 만들어낼 만큼 오차가 누적됩니다. 채널당 약 3 레벨 이내이면 충실한 것입니다.

5단계: 비디오 QA

파일에서 읽어온 지속 시간, 프레임 속도, 크기 및 색상 태그 확인
초당 한 프레임씩 살펴보고, 전환 구간은 일반 속도로 확인
선택한 프레임뿐만 아니라 모든 프레임에 로고, 이름, 자리 표시자, 배너 또는 깨진 이미지가 없는지 확인
프레임 내에 쿠키 배너나 동의 위젯이 없고 클릭되지 않았는지 확인: 페이지 자체 CSS에서 숨기거나 이를 표시하지 않는 환경에서 녹화
첫 프레임은 훅(hook)입니다. 페이지가 빈 화면으로 페인트되면 잘라내세요
페이지가 완전하고 정지된(스크롤 중이 아닌) 상태의 포스터 프레임을 선택하세요

그런 다음 reviewing-page-design의 콜드 리뷰어 게이트를 실행하세요.

6단계: 확인할 수 없는 사항 명시

소리(있는 경우) ("들을 수 없습니다"). 플랫폼 자체의 재압축. 테스트하지 않은 기기에서 표시되는 모든 것.

디자인된 릴이 필요한 경우

페이지 영상을 모든 비주얼이 시간의 함수(닫힌 형태의 스프링, 비트당 하나의 오버레이 아이디어, 2~5단어 자막, 이름과 엔드 카드에만 브랜드 색상)인 레이아웃 안에 구성하세요. 동일한 규칙이 적용됩니다: 페이지 창은 절대 가려지지 않으며, 텍스트는 360px 너비에서 읽을 수 있어야 하며, 페이오프는 최소 1.2초 이상 유지되어야 합니다.

위험 신호

스크롤 기반 페이지의 프레임별 스크린샷 캡처
수정 중인 프로토타입이나 출시되지 않은 페이지 녹화
미완성 섹션이 포함된 릴
프레임 내 고객 로고나 이름이 있는 인용문
감으로 선택되었고 배경 스윕이 없는 스크롤 경로
채널 평균으로 색상 비교
편집본 승인 전 4K 렌더링

페이지 릴 제작