긴 스크롤 콜라주 평면 모션 그래픽: 디자인 언어, AE 구현 및 복제 방법

이 스킬은 완전한 프레임 단위 복제(1920×1080, 24fps, 272프레임, 12번의 반복)에서 비롯되었습니다. 다음 세 가지 질문에 답합니다: 이런 영상이 어떻게 생겼고, 어떻게 움직이는지; After Effects에서 어떻게 구성하는지; 참조 영상을 받았을 때 어떻게 측정하고 맞추는지. 세 부분은 각각 따로 사용할 수 있습니다: 창작 시에는 1-3절, 엔지니어링 구성 시에는 4절, 복제 시에는 5-6절을 참조하세요.

현재 프로젝트에 rollback-replica/ 디렉토리가 있다면, 그것이 참조 구현입니다: 拆解分析.md에 모든 실제 측정값이 있고, scripts/는 장면 생성기, tools/는 측정 스크립트입니다. 먼저 그것들을 읽고, 처음부터 다시 작성하지 마세요.

1. 디자인 언어

1.1 세계와 카메라

모든 콘텐츠는 가로형 긴 스크롤(참조 영상은 11000×1080)에 배치되며, 시청자는 카메라가 스크롤 위를 이동하는 것을 봅니다.
카메라는 수평 이동과 확대/축소만 가능하며, 회전이나 수직 이동은 없습니다. 변환: X스크린 = (X월드 − cx)·s + 960, Y스크린 = (Y월드 − 540)·s + 540.
하나의 눈금자가 전체 스크롤을 가로지르며 항상 화면 중앙에 고정됩니다(y=540, 작은 눈금 간격 약 7.27px, 5칸마다 큰 눈금). 이것은 레이아웃의 축이자 카메라 측정의 기준입니다.
전체 영상에 모션 블러 없음: 프레임당 500px씩 이동하는 카메라도 여전히 선명하며, 이것이 이 스타일이 '날카로운' 이유입니다.

1.2 레이아웃

하나의 축: 콘텐츠는 눈금자 위아래로 펼쳐집니다. 연도, 번호는 눈금자에 직접 붙어 좌표 역할을 합니다.
위는 실물, 아래는 거울: 눈금자를 거울처럼 사용하여 위는 원본 이미지와 정방향 텍스트, 아래는 단색 실루엣과 뒤집힌 텍스트를 배치합니다.
괄호 번호: 모든 레이블은 괄호로 묶습니다. (1) (2), (crash), [cloud1]; 괄호 안의 단어는 종종 빈 획으로 만듭니다.
굵기 대비: 1px의 가는 원, 동심원, 호형 텍스트, 가이드 라인을 넓은 면적의 단색 블록과 대비시킵니다.
중첩 상자: 검은색 상자 안에 검은색 상자를 넣고 90° 회전하여 눈금자가 중간을 통과하게 합니다.
밀도 리듬: 성김 → 빽빽함 → 매우 빽빽함 → 여백 → 가득 참 → 성김. 처음부터 끝까지 같은 밀도가 되어서는 안 됩니다.

1.3 색상

회색 바탕에 흑백이 주체이며, 강조 색상은 세 가지만 사용하고 나머지 색상은 사진 내에서만 나타납니다.

이름	값	용도
바탕 회색	`#E6E6E6`	배경(매우 가벼운 입자 포함)
장미색	`#E8086D`	고리, 리본, 광선, 배경색 플래시
밝은 파랑 / 진한 파랑	`#1F86F0` / `#0D3ED8`	막대 블록, 미러 실루엣 / 큰 원, 하늘
청자색	`#6982F6`	배경색 플래시, 실루엣 자리 표시자 색상
민트색	`#19E6B4`	소량의 면
거의 검은색	`#110D0C`	검은 장면, 마무리

배경색 자체는 단락에 따라 하드 컷됩니다: 회색 → 검은색 → 장미색 → 청자색, 매번 한 프레임에 전환됩니다.

1.4 글꼴 조합

혼용은 의도적이며, 각 정보 유형마다 하나의 글꼴입니다: 과도기 세리프(Times, 괄호 레이블, 빈 획), 기하학 산세리프 가는체(Montserrat, 연도 숫자, 자간 좁힘), 둥근 모서리의 기술적 느낌 글꼴(Jura/OCR-A, 명령줄 및 작은 레이블), 고대비 현대 세리프(Playfair/Bodoni, 큰 제목 단어, 글자 밀착), 매우 굵은 굵은 세리프(Lubalin/Rockwell, 메인 제목, 가로로 늘림), 고정폭(Consolas/Courier, 코드 및 큰 숫자), 명조체(CJK, 가로로 3배까지 늘릴 수 있음), 픽셀 도트. 작은 글자는 6-10px로 작게 유지하고 절대 확대하지 마세요. '정보'가 아니라 '질감'입니다.

1.5 자산 어휘

사진 누끼(고대비 흑백, 임계값 처리), 가장자리 감지 느낌의 선화(검은 선, 흰 바탕, 부서진 점), 시스템 UI 스크린샷(팝업, 파일 아이콘, 표, 키프레임 텍스트), 필름 스캔(필름 베이스, 스프로킷 홀, 가장자리 코드), 3D 소품(액체 금속, 광택 튜브, 흰색 모형, 와이어프레임), 홀로그램 원뿔 그라데이션, 1비트 디더 패턴, QR 코드, 픽셀 캐릭터. 동일한 대상이 종종 두 가지 버전으로 나타납니다: 실물과 단색 실루엣.

1.6 질감

단색 블록은 깨끗하게 유지하고, 그라데이션과 회색 영역에는 눈에 띄는 입자를 추가합니다. 전체 영상의 최상위 레이어에 2-3% 단색 노이즈를 추가합니다.
사진은 '복사기' 질감으로 만듭니다: 임계값, 색조 분리, 3-4개의 그레이스케일만 남깁니다.
선화는 회색 선이 아닌 검은 선, 흰색 채우기입니다. 선은 가늘어야 하며, 끊어지거나 부서진 점이 허용됩니다.
크롬 질감의 물체는 색조 분리된 렌더링처럼 보입니다: 전체가 흰색 외곽선과 검은 윤곽선으로 둘러싸여 있고, 하이라이트는 흰색 코어 외부에 동심원이 있습니다.

2. 모션 언어

2.1 카메라

확대/축소: 몇 가지 고정된 단계 사이를 3-5프레임 순수 선형으로 전환하며, 도달하면 딱 멈추고 이징은 없습니다. 드물게 지수 감속(프레임마다 차이에 0.6-0.75 곱함) 또는 지수 가속을 사용하여 확대합니다. 또는 직접 하드 컷할 수도 있습니다.
수평 이동은 세 가지 성분의 중첩입니다:
1. 일정한 드리프트, 약 4 월드 px/프레임, 영상 내내 지속됨;
2. 비트 프레임에서의 임펄스, 이후 0.6-0.8 비율로 프레임마다 감쇠(예: +195, +33, +20, +14, +11, +9, +7);
3. 점프 컷, 한 프레임에 수백 px 점프.
카메라는 프레임 단위로 선형 키프레임으로 굽습니다. 베지어 이징으로 이런 곡선을 추측하지 마세요.

2.2 비트

이벤트는 6프레임당 한 박자(24fps에서 0.25초) 그리드에 떨어지며, 전체적으로 위상을 가질 수 있습니다. 요소는 동시에 페이드 인되지 않고, 박자에 따라 하나씩 순서대로 나타납니다.

2.3 요소 진입 및 변화 (핵심 기법)

실루엣 자리 표시자: 먼저 단색 실루엣을 1-2프레임 동안 표시(흰색 → 청자색 → 실물, 또는 장미색 → 실물)한 다음 실제 텍스처로 교체합니다. '색조' 효과를 사용하여 흑백을 모두 같은 색상으로 매핑하고, 양을 100 → 0으로 홀드합니다.
한 프레임 플래시/크기 교대: 나타남 → 한 프레임 꺼짐 → 다시 켜짐; 또는 크게, 작게, 크게, 작게 세 번 플래시한 후 고정.
비트에 따른 방사형 지우개 분할: 링 요소가 먼저 한 부분을 스윕한 다음, 각 박자마다 전체 부분이 새 각도로 점프하고, 부분 사이에서는 프레임당 1-2°만 드리프트합니다.
머리와 꼬리 두 개의 선형 지우개: 막대 모양 요소가 먼저 '머리'가 앞으로 뻗은 다음, '꼬리'가 따라붙고, 남은 부분이 다음 요소가 됩니다.
홀드 키프레임 위주: 위치, 크기, 회전은 모두 프레임 단위로 점프합니다. 실제 이징은 2-3프레임의 감속만 있습니다.
팝: 0.3-0.7배 → 1.0, 2-3프레임, 1.1-1.2의 오버슈트 가능.
고정 화면: 카메라가 이동할 때 특정 요소가 화면에 고정됩니다(카메라의 역변환을 사용하여 프레임별 키프레임 적용), 일정 시간이 지나면 세계로 '반환'됩니다.
혼합 프레임 속도: 3D 작은 애니메이션은 종종 30fps로 만든 다음 24fps 타임라인에 넣어, 4프레임마다 1, 2, 1, 1 단계로 움직입니다. 복제 시 소스 프레임 번호 = ⌊1.25·(f − f0) + 0.5⌋로 프레임을 가져오고 균일하게 보간하지 마세요.
미러 및 오프셋 복제본: 미러 실루엣이 나타날 때 아래에 흰색 복제본 레이어를 깔고, 4-5프레임 동안 오프셋 위치에서 일치하는 위치로 슬라이드합니다.

2.4 글로벌 플래시 프레임

효과	방법
배경색 하드 컷(검정, 장미, 청자)	배경 단색 레이어의 홀드 키프레임
임계값 플래시(1프레임, 화면이 흑백 2값으로 변경)	최상위 조정 레이어 '임계값'
차분 임계값 플래시(배경색과 다른 모든 것이 흰색이 됨)	배경과 같은 색상의 단색 레이어를 '차이' 혼합 모드로 설정하고 위에 '임계값' 적용
전체 화면 반전(일부 요소는 원래 색상 유지)	최상위 레이어 '반전'; 원래 색상을 유지해야 하는 레이어는 먼저 자체적으로 '반전'을 한 번 적용
로컬 가로 와이어 드로잉	좁은 조정 레이어에 '변형' 추가, 균일 크기 조정 해제, 너비를 수천 %로 설정
뒤집기	레이어 X 크기를 프레임별로 홀드(0을 지나 음수가 됨), 축도 프레임별로 이동, 한 프레임 오버슈트
마무리	그라데이션 가로 막대가 계단식으로 화면을 채운 후 퇴장, 배경색이 단계적으로 거의 검은색으로 가라앉고, 제목이 가로로 늘어나 잔상이 됨

3. 이런 영상을 창작할 때의 순서

먼저 긴 스크롤을 그립니다: 세계 너비 결정(초당 약 800-1000 월드 px), 4개 섹션으로 나누고, 각 섹션에 하나의 주제와 하나의 밀도를 지정합니다.
샷 리스트를 정리합니다: 각 샷의 확대/축소 단계, 시작/끝 cx, 배경색, 발생 이벤트를 기록합니다. 단계 간에는 선형 램프 또는 하드 컷만 사용합니다.
이벤트를 6프레임 그리드에 맞춥니다. 각 박자마다 하나의 새 요소; 2-3초마다 한 번의 글로벌 플래시 프레임 또는 배경색 전환을 배치합니다.
각 요소는 섹션 2.3에서 진입 기법을 하나 선택하고, 동일한 섹션 내에서 두 번 이상 반복하지 않습니다.
자산은 섹션 1.5의 어휘에 따라 준비하고, 각 항목마다 단색 실루엣 버전도 함께 만듭니다.
마지막으로 입자를 균일하게 추가하고, 강조 색상이 여전히 세 가지만 있는지 확인합니다.

4. After Effects 구현

4.1 프로젝트 구조

RB_REPLICA/
  01_合成/   RB_MAIN (1920×1080 완성본)   RB_WORLD (긴 스크롤 세계, 예: 14400×2600)
  02_素材/   섹션별 하위 폴더 (A_… B_… C_… D_…、눈금자 및 글로벌 효과)
  03_纯色/   배경색, 조정 레이어, 마스크용 단색

RB_WORLD에 모든 세계 공간 레이어를 배치합니다. 세계 점 (x, y)는 합성 픽셀 (x + OX, y + OY)에 해당하며, 주위에 여유 공간을 둡니다.
RB_MAIN은 아래에서 위로: 배경 단색 → RB_WORLD(붕괴 변환 켜기, 카메라는 이 레이어의 위치/크기 키프레임입니다) → 화면 공간 오버레이 → 조정 레이어(입자, 임계값, 반전...).
레이어는 섹션별로 레이블 색상을 지정하고, 자산 파일명에 섹션 접두사를 붙여 500개 이상의 레이어 중에서 쉽게 찾을 수 있도록 합니다.

4.2 스크립트로 생성, 수동 배치 금지

레이어 수가 많고 값이 모두 실제 측정값이므로, 장면을 스크립트로 설명한 다음 가져오는 것이 적합합니다:

하나의 Scene이 레이어 목록을 보유합니다. 각 레이어에는 세계 좌표, 시간 범위 span(f_in, f_out), 속성 키프레임, 효과 목록이 있습니다.
자산은 함수로 그려지고 '함수 소스 코드 + 매개변수'의 해시로 캐시되어, 변경된 경우에만 다시 그려집니다.
AE 프로젝트 JSON으로 내보내고, aftereffects MCP의 ae_project_import_json으로 가져옵니다. 재구축 시 이전 루트 폴더를 id로 삭제한 다음 가져옵니다(가져오기는 추가만 가능).
JSON으로 전달할 수 없는 스위치(조정 레이어, 붕괴 변환, 혼합 모드)는 별도 목록으로 정리하고, 가져온 후 layer.set_props/layer.set_blend_mode로 보충합니다.
프레임마다 자세가 다른 요소(회전하는 3D 조각, 프레임별로 변하는 그라데이션)는 '프레임당 레이어 하나'로 만들어 각 레이어가 한 프레임만 존재하도록 합니다. 하나의 레이어에 효과 키프레임을 쌓는 것보다 안정적입니다.

4.3 효과 사용법 메모

선형 지우개: 각도는 진행 방향입니다. +90은 왼쪽에서 지우기, -90은 오른쪽에서, 180은 위에서, 0은 아래에서 지우기. 지우개는 레이어 자체 공간을 기준으로 계산되므로, 레이어가 회전할 때는 각도를 역으로 보상해야 합니다.
방사형 지우개: 시작 각도 0 = 정상, 시계 방향. '양쪽 모두'는 시작 각도를 중심으로 양쪽으로 지우는 것입니다.
16bpc 프로젝트에서 '임계값' 레벨은 0-1 범위로 입력합니다.
합성 크기와 다른 조정 레이어의 경우, 효과 내의 점 매개변수는 '레이어 → 합성' 변환이 한 번 적용됩니다.
비등비율의 정적 크기 조정은 가능하면 자산에 굽고 레이어 변환에 남겨두지 마세요(미리보기와 내보내기가 일치하지 않을 수 있음).

4.4 렌더링 및 출력

AE 기본 H.264는 고채도 장미색을 어둡게 만듭니다. '무손실' AVI로 내보낸 후 ffmpeg 사용:

ffmpeg -i main.avi -vf "scale=in_range=full:out_range=tv:out_color_matrix=bt709,format=yuv420p" -c:v libx264 -crf 17 -preset slow -color_primaries bt709 -color_trc bt709 -colorspace bt709 -color_range tv -movflags +faststart out.mp4

4.5 프로젝트 수집 및 정리

인도 또는 보관 시, 프로젝트와 실제로 사용된 자산을 별도의 폴더에 넣습니다('파일 → 프로젝트 정리 → 파일 수집'과 동일):

레이어가 참조하는 자산만 복사하고, 프로젝트 패널의 폴더 구조를 유지하여 (Footage)/에 넣습니다.
자산 경로가 수집 디렉토리를 가리키는 프로젝트를 생성합니다(새 프로젝트 → 경로가 변경된 JSON 가져오기 → 스위치 보충 → 원본 프로젝트와 동일한 비트 심도 및 색상 설정 적용 → 다른 이름으로 저장).
수집 보고서를 작성합니다: 합성 사양, 자산 수 및 크기, 누락된 파일, 사용된 효과(타사 플러그인 의존 여부, 글꼴), 수집되지 않은 항목.
검증: 원본 프로젝트와 수집 프로젝트에서 동일한 두 프레임을 렌더링하여 픽셀 단위로 비교해야 완전히 일치합니다. 누락된 자산이 없는지도 확인합니다.
완료 후 AE를 원본 프로젝트로 다시 전환합니다. 사용자가 프로젝트에 넣은 합성 및 자산을 건드리지 마세요.

5. 참조 영상 복제 방법

목표는 '동일한 영상처럼 보이는 것'이며, 자산은 다시 그리고 다시 생성하는 것이지 원본 영상의 픽셀을 그대로 가져오는 것이 아닙니다.

5.1 순서

프레임 추출(모든 프레임, JPG 가능) 및 기본 매개변수 기록: 해상도, 프레임 속도, 프레임 수, 모션 블러 유무, 오디오 트랙에 실제 소리가 있는지 여부.
먼저 카메라 풀기: 전체 영상을 관통하는 단단한 기준(여기서는 눈금자)을 찾아 프레임별로 확대/축소 및 이동을 측정하고 카메라 테이블로 굽습니다.
세계 구성: 카메라가 있으면 모든 프레임을 세계 좌표로 역투영할 수 있습니다. 이후 모든 측정은 세계 좌표에서 수행됩니다.
요소 목록 작성: 각 요소의 세계 위치, 등장 프레임, 사라짐 프레임, 진입 기법, 프레임별 변화를 기록합니다.
첫 번째 버전 구성, 렌더링, 프레임별 비교, 차이에 따라 반복. 각 버전은 한 가지 문제 그룹만 공략하고, 수정 후 다시 렌더링하여 비교합니다.

5.2 측정 규율

카메라 감사: 각 프레임의 눈금을 하나씩 찾아 세계 좌표로 변환하고 이상적인 그리드와 비교합니다. 잔차는 동일한 샷 내에서 상수여야 합니다. 상수가 아니면 카메라 테이블이 잘못된 것입니다. 이 단계에서 한 번은 8px와 49px의 정렬 오류 두 군데를 발견했습니다. 이 오류는 나란히 비교한 이미지에서는 전혀 보이지 않았지만, 이후 모든 측정에 편향을 가져왔습니다.
육안 대신 수치 감지 사용: 그리드가 있는 잘린 이미지에서 좌표를 읽으면 3-8px의 체계적인 편향이 있습니다. 중요한 값은 감지기를 사용하여 가져옵니다: 색상 임계값 + 경계 상자(블록의 머리와 꼬리), 연결된 구성요소의 무게 중심(하이라이트, 마커 포인트), 원/타원 피팅(구, 링, 궤도), 라인별 통계(라인 번호 및 두께). 원본과 복제본에 동일한 감지기를 각각 실행하여 비교합니다.
세계 정렬 잘린 이미지: 비교 시 원본과 복제본의 동일한 세계 사각형을 나란히 잘라내고, 화면 스크린샷을 비교하지 마세요. 특히 카메라가 움직이는 샷에서 더욱 그렇습니다.
프레임 단위, 건너뛰지 않음: 2프레임 간격으로 샘플링하면 4프레임 주기의 회전이 '거의 움직이지 않는 것'으로 보일 수 있습니다.
요소가 '이상하게 움직인다'고 느껴지면 먼저 카메라를 의심하고, 그 다음 요소를 의심하세요.

5.3 GPT/Codex로 참조 프레임 기반 자산 다시 그리기

사진, 선화, 콜라주 조각, 손 그림에 적합:

해당 요소의 가장 깨끗한 1-2프레임을 잘라내어 2-4배 확대하여 참조 이미지로 사용합니다.
프롬프트 구조: "참조 이미지의 X를 충실히 다시 그려라" → 각 물체와 모양을 항목별로 설명 → 제거할 것 목록 작성(눈금자, 위에 겹쳐진 선, 인접 요소, 텍스트) → 투명 배경 요청.
모델은 주제를 캔버스에 꽉 채우도록 확대하는 경향이 있습니다. 참조 이미지를 출력 화면 비율에 맞게 패딩을 추가하고 "비율 유지, 여백 확보"라고 명시하세요.
미리보기 이미지는 투명 채널을 표시하지 않아 헤일로가 있는 것처럼 보일 수 있습니다. 판단하기 전에 알파 채널을 확인하고, 임계값 처리 후 사용하세요.
여러 물체가 있는 이미지는 레이아웃이 흐트러질 수 있습니다. 이미지를 조각으로 자르고, 각 조각을 실제 측정된 세계 사각형에 따라 배치하며, 조각별로 비등비율 크기 조정을 허용합니다.
모델이 그대로 가져온 타사 상표는 지워야 합니다.
생성 작업은 백그라운드에서 병렬로 실행할 수 있으며, 그 동안 측정 및 프로그래밍 방식 부분을 계속 진행합니다.

생성 모델에 적합하지 않은 것: 모션 또는 토폴로지가 정확해야 하는 것(회전하는 링, 융합된 구슬, 프레임별로 변하는 그라데이션, 와이어프레임). 이러한 것은 피팅된 기하학적 매개변수를 사용하여 프로그래밍 방식으로 렌더링합니다. 생성 모델은 텍스처와 화면만 담당합니다. 사용자가 제안한 도구에서 벗어날 때는 보고서에 그 이유를 명확히 밝혀야 합니다.

5.4 3D 소품 피팅 방법

두드러진 특징(하이라이트)의 프레임별 위치를 추적합니다.
투영 궤도(타원)를 피팅한 다음, 원근 모델을 사용하여 '가까운 것은 크고 먼 것은 작다, 가까운 것은 촘촘하고 먼 것은 듬성듬성하다'를 설명합니다.
위상 시퀀스에서 회전 속도와 프레임 속도 변환의 리듬을 읽습니다.
피팅된 매개변수를 사용하여 프레임별로 렌더링한 다음, 렌더링 결과를 원본 영상과 겹쳐 위상을 확인합니다.

5.5 비교 및 인도

각 버전의 출력: 완성본, 위는 원본, 아래는 복제본의 프레임 번호가 있는 동기화 비교 비디오, 여러 장의 키프레임 상하 비교 이미지.
문서에 기록: 샷 목록, 카메라 곡선, 요소별 실제 측정값, 각 버전에서 변경된 사항, 여전히 차이가 있는 부분.
보고 시 일치하지 않는 부분을 명확히 설명하고, 차이 유형(형태, 명암, 위치, 시간)을 구분하여, 단순히 변경된 사항만 보고하지 마세요.

6. 체크리스트

인도 전에 항목별로 확인:

7. 자주 묻는 질문

고채도 색상 렌더링 후 어두워짐: 무손실 + ffmpeg bt709 변환을 거치지 않았습니다.
요소가 두 샷 사이에서 수십 px 어긋남: 점프 컷 지점에서 카메라 테이블이 눈금 주기를 하나 더하거나 덜 셌습니다.
지우개 방향이 잘못됨: 선형 지우개의 각도는 진행 방향입니다. 레이어가 회전할 때는 보상해야 합니다.
임계값 프레임이 완전히 검거나 흰색: 16bpc에서 레벨을 0-255로 작성했습니다.
생성된 자산 비율이 맞지 않음: 참조 이미지가 출력 화면 비율에 맞게 패딩되지 않았습니다.
고정 화면 요소가 확대/축소 시 떠다님: 역변환은 각 프레임의 카메라 값을 사용하여 프레임별로 홀드 키프레임을 적용해야 하며, 처음과 끝에만 적용해서는 안 됩니다.

novahanser/rollback-motion-recreation

rollback-motion-recreation란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서