시네마틱 3D 웹 장면

사용자는 애니메이션을 설명할 때 감정을 나타내는 단어("웅장한", "부드러운", "삼켜지는", "영화 같은")를 사용합니다. 하지만 코드는 화면에 무엇이 있는지, 카메라 위치, 무엇이 움직이는지, 속도, 이징(easing), 조명 방식, 스크롤 각 지점에서 텍스트가 무엇을 하는지 등 정확한 결정을 필요로 합니다. 이러한 결정을 추측에 맡기면 기술적으로는 훌륭하지만 사용자가 상상한 것과는 다른 결과가 나오며, 수정할 때마다 처음부터 제대로 만드는 것보다 더 많은 비용이 발생합니다.

이 스킬은 두 단계로 이러한 간극을 해소합니다: 구축 전에 명세화(설명을 정확하고 확인된 장면 명세로 전환)와 검증된 기반 위에 구축(명세를 안정적으로 구현하고 부드러운 스크롤을 보장하는 아키텍처 및 기술 라이브러리)입니다.

이는 모든 장면에 적용됩니다. 번들로 제공되는 포트폴리오의 장면들(열리는 노트북, 궤도 운동하는 스킬 원자, 점화되어 타오르는 로고, 블랙홀 터널)은 방법론의 실제 예시이지, 선택할 수 있는 메뉴가 아닙니다.

파일

references/scene-language.md   정밀한 동작 어휘 및 모호한 단어를 구체적인 용어로 변환
references/scene-spec.md       장면 명세 / 스토리보드 형식 (실제 예시 포함)
references/techniques.md       각 종류의 효과(카메라, 셰이더, 파티클, 텍스트…) 구축 방법
references/architecture.md     고정 스크롤 장면 패턴, 타임라인, 성능, 주의사항
references/house-style.md      기본 비주얼 스타일 및 참고 자료에서 스타일을 파악하는 방법
references/effects.md          템플릿에 포함된 완성된 장면 분석 — 복사하거나 학습 가능
references/portfolio.md        템플릿을 사용한 전체 포트폴리오 구축
references/content-guide.md    템플릿의 콘텐츠 필드
references/portrait-rig.md     템플릿의 살아있는 초상화 히어로
reference/                      완전한 Next.js 포트폴리오 사이트 (실제 예시)
scripts/create-site.mjs        새로운 단일 페이지 사이트 생성 (Next.js, 하우스 배경, 장면 준비 완료)
scripts/new-scene.mjs          새로운 고정 장면 섹션 및 타임라인 생성 (+ 3D 캔버스, --no-canvas 옵션)
scripts/video-frames.mjs       참조 비디오에서 프레임 추출 (모션 분석용)
scripts/create-portfolio.mjs   전체 포트폴리오 템플릿을 새 폴더로 복사
scripts/retheme.mjs            템플릿의 강조 색상 패밀리 변경

워크플로우

1. 사용자가 상상하는 것을 이해하기

요청에서 다음을 파악하세요: 페이지의 목적, 각 장면이 보여줘야 하는 것, 느낌, 참고 자료(사이트, 비디오, 이미지, 영화, 게임), 그리고 하드 제약 조건(기존 사이트, 프레임워크, 브랜드 색상).

참고 자료가 주어지면 다른 것보다 먼저 그것을 연구하세요. 참고 자료는 어떤 설명보다 더 많은 정보를 담고 있습니다. 이미지: 살펴보세요. 비디오: scripts/video-frames.mjs를 실행하고 순서대로 프레임을 확인하세요("참고 비디오 읽기" 참조). 웹사이트: 열 수 있다면 스크롤하고 간격을 두고 스크린샷을 찍으세요. 스타일(색상, 조명, 타이포그래피, 배경 모션)을 안무(무엇이 언제 움직이는지)와 별도로 기록하세요. 사용자는 보통 참고 자료에서 둘 중 하나를 원하며, 명확하지 않으면 물어보세요.

2. 장면 명세로 변환하기

references/scene-language.md를 읽은 후, references/scene-spec.md의 형식에 따라 명세를 작성하세요. 각 장면에 대해: 한 문장으로 된 아이디어, 객체, 하우스 스타일 또는 선택한 스타일, 그리고 비트 시트(beat sheet) — 스크롤의 각 구간(0–15%, 15–40%, …)에서 화면에 무엇이 있는지, 카메라 이동, 모션(동사 + 이징 + 지속 시간), 조명/색상 변화, 효과(파티클, 왜곡, 글로우), 텍스트가 하는 일.

모호한 단어는 코드가 아닌 여기서 해결됩니다. "빨려 들어간다"는 타이틀 글자가 소용돌이 가장자리에 닿을 때부터 화면 중앙으로 나선형으로 이동하며, 각 글자는 150° 회전하면서 15%로 축소되고 6px 블러가 적용되며, 이 과정은 스크롤의 10% 구간에 걸쳐 발생합니다; 배경은 같은 구간 동안 중앙으로 왜곡됩니다로 변환됩니다. 단어가 두 가지 매우 다른 것을 의미할 수 있다면, 두 가지 구체적인 해석을 제시하고 더 가능성 높은 것을 기본값으로 선택하세요.

3. 구축 전에 확인하기

명세를 사용자에게 보여주세요. 읽는 데 1분이면 되고 몇 시간을 절약해줍니다. 사용자가 상상한 것과 다른 부분, 특히 속도(너무 빠름/너무 느림)와 각 장면의 핵심 순간을 수정하도록 요청하세요. 메시지는 짧게 유지하세요: 비트 시트와 2~3개의 대상 질문(기본 답변 포함)으로 구성하여 "네, 진행하세요"가 유효한 답변이 될 수 있게 하세요.

질문할 수 없는 경우(원샷 또는 자동화 요청), 기본값으로 진행하고 최종 메시지에 명세를 포함시켜 사용자가 정확하게 수정할 수 있도록 하세요.

4. 레이어별로 구축하기

코드를 작성하기 전에 references/architecture.md를 읽고 — "이게 WebGL이 아예 필요할까?" 표부터 시작하세요 — 그리고 명세의 각 효과에 대해 references/techniques.md를 참조하세요.

코드 위치:

새 사이트(랜딩 페이지, 제품 페이지, 모든 단일 페이지): node <skill-dir>/scripts/create-site.mjs <folder>로 하우스 배경, 폰트, 린트 설정이 완료된 Next.js 프로젝트를 생성하고, 여기에 장면을 추가하세요.
기존 사이트: 해당 프로젝트에서 작업하고 architecture.md의 "기존 사이트 내에서 작업하기"를 먼저 읽으세요.
전체 포트폴리오: 템플릿(references/portfolio.md)으로 시작하세요.

그런 다음 각 장면을 다음 순서로 구축하고, 각 레이어 후에 확인하세요:

블록아웃(Blockout) — 고정 섹션, 비트당 하나의 슬롯이 있는 스크롤 타임라인, 자리 표시자 모양 및 카메라 경로. scripts/new-scene.mjs <project> <Name> --beats N으로 이 뼈대를 생성합니다 (스크롤 진행 → 공유 타임라인 → 3D 카메라 및 DOM 캡션, 모션 감소 폴백, 화면 밖에서 일시 중지 등 이미 연결됨); DOM 전용 효과에는 --no-canvas를 추가하세요. 스크롤해 보며 비트가 올바른 순서와 속도인지 확인합니다.
모션(Motion) — 명세의 실제 움직임과 전환, 이징 및 지속 시간. 타이밍은 사람들이 가장 먼저 반응하는 부분입니다. 예쁘게 만들기 전에 타이밍을 올바르게 맞추세요.
룩(Look) — 재질, 조명, 색상, 글로우, 파티클, 배경, 타이포그래피.
폴리싱(Polish) — 포인터 기울기, 유휴 드리프트, 작은 2차 모션, 모바일 프레이밍, 모션 감소.

빌드와 함께 npm run lint를 실행하세요. React 규칙이 프레임별 변이 실수를 잡아 미묘한 버그로 이어지지 않게 합니다.

5. 명세와 비교하여 검증하기

npm run build로 빌드하고 실행한 후, 각 스크롤 위치에서 모든 비트의 스크린샷을 찍으세요. 각 스크린샷을 비트 시트와 한 줄씩 비교하세요: 해당 객체가 있는지, 카메라 프레이밍이 설명된 대로인지, 텍스트가 들어갔는지, 색상이 맞는지. 일치하지 않는 부분을 보여주기 전에 수정하세요. 스크린샷을 찍기 전에 스크롤 후 1초 정도 기다리세요 — 장면은 부드럽게 제자리에 안착합니다. 또한 휴대폰 크기 뷰포트(375×812)와 모션 감소 설정도 확인하세요. 브라우저 도구가 없으면 장면이 구축되었지만 확인되지 않았다고 명확히 말하고, 확인해야 할 사항을 나열하세요.

6. 정확한 언어로 개선하기

사용자가 반응할 때("싸구려 같아요", "너무 과해요", "충분히 극적이지 않아요"), scene-language.md를 사용하여 피드백을 원래 요청과 같은 방식으로 변환하고, 구체적인 변경 사항을 제안한 후(예: "다이브를 스크롤의 8%에서 14%로 늦추고 그 전에 0.3초 홀드를 추가하세요") 적용하세요. 사용자가 확신하지 못할 때는 한 번에 하나씩만 변경하여 무엇이 도움이 되었는지 알 수 있게 하세요.

참고 비디오 읽기

node <skill-dir>/scripts/video-frames.mjs <video> --every 0.25 --out frames/

ffmpeg가 필요합니다 (없으면 스크립트가 설치 방법을 설명합니다). 프레임을 순서대로 보고 시간 구간별로 다음을 기록하세요: 화면에 무엇이 있는지, 무엇이 어떻게 움직였는지(방향, 속도, 이징 — 가속, 오버슈트, 안정화?), 카메라(정적, 푸시, 궤도, 흔들림), 컷 대 연속 이동, 색상/조명. 이 목록이 비트 시트의 첫 번째 초안입니다. 빠른 순간은 --from, --to로 해당 구간에 대해 --every 0.04로 다시 실행하세요.

불가결 사항

이것들은 실제 실패에서 비롯되었으며, 각각 architecture.md에 이유가 있습니다.

모든 장면에는 모션 감소 버전(모든 콘텐츠를 여전히 표시하는 정적 레이아웃)이 있습니다.
WebGL은 클라이언트 전용으로 로드되며 해당 섹션이 화면 밖에 있거나 탭이 숨겨지면 일시 중지됩니다.
3D와 DOM 텍스트는 동일한 타임라인 함수를 읽으므로 서로 어긋날 수 없습니다.
고정 섹션 내부의 스크롤 연결 값은 범위 배열이 아닌 함수 변환을 사용합니다.
포스트 프로세싱 블룸이 아닌 가짜 글로우(가산 헤일로)를 사용합니다. 단, 사용자가 비용을 수락하는 경우는 예외입니다.
페이지의 모든 콘텐츠는 DOM에 있는 실제 읽을 수 있는 텍스트여야 하며, 캔버스에만 구워져서는 안 됩니다.
카피에 사람이나 제품에 대한 사실을 절대 지어내지 마세요; 디자인 텍스트는 괜찮지만, 주장은 안 됩니다. 제공되지 않은 가격, 사양, 날짜, 통계 및 수상 내역은 보이는 [자리표시자]로 넣으세요.
자체적으로 재생되는 것(로드 시 인트로)에는 표시된 건너뛰기 컨트롤이 있어야 하며, 모든 장면에는 no-WebGL 폴백(포스터 이미지 또는 정적 레이아웃)이 있어야 합니다.
다른 사람의 기존 사이트에서는 효과에 필요한 부분만 변경하고 무엇이 변경되었는지 말하세요.

유지해야 할 크레딧

템플릿은 원저자와 그것이 기반한 오픈 소스 조각(React Bits의 ColorBends 및 Magnet, dungyov.com의 타이프 페어링)에 대한 크레딧을 포함합니다. 해당 부분을 재사용할 때는 이 크레딧을 유지하세요.

시네마틱 3D 웹