씬 디렉션은(는) 무엇을 하나요?
"몰입형 3D 사이트"를 요청하면, 모델은 본 모든 3D 데모의 평균을 만듭니다: 보라색 밤의 숨쉬는 구체, 호를 그리는 점선 지구본, 회색 바닥의 회색 제품, 또는 모든 섹션에서 동일한 깔끔한 분할 레이아웃. 수상하는 사이트는 다른 것을 합니다: 주제에서 나온 하나의 아이디어, 자신의 객체를 중심으로 한 세계, 스토리의 모든 비트에 따라 샷이 바뀌는 카메라, 광원과 그레이딩된 마감이 있는 조명, 목소리가 있는 타이포그래피, 가지고 놀 수 있는 하나, 실제 사이트의 크롬. 그리고 그것들은 휴대폰에서도 부드럽게 실행됩니다.
이 스킬은 딜링된 방향, 에셋 라이브러리, 전체 마감 파이프라인이 포함된 스타터, 그리고 방문자와 심사위원이 보는 방식대로 페이지를 렌더링하는 검사를 제공합니다. 3D 디렉션을 소유합니다. 페이지 디자인 스킬(taste-skill, impeccable, hallmark), three.js API 스킬(cloudai-x/threejs-skills) 또는 공식 GSAP 스킬이 설치되어 있으면 해당 부분에 사용하세요.
<skill>은 이 스킬의 폴더입니다. 프로젝트 폴더에서 스크립트를 실행하세요.
실행
- 인벤토리. 실제로 있는 것을 나열하세요: 주체의 이름, 만들거나 판매하는 것, 장소, 숫자, 유물, 그리고 제공된 모델이나 이미지. 제공된 모델은 히어로입니다(references/object.md).
- 방향을 딜링하세요. 혼자 두면 카테고리 기본값을 선택하므로, 스크립트가 딜링하게 하세요:
node <skill>/scripts/draw.mjs --kind <person|maker|product|place|brand|event|...> --brief "<한 줄>" node <skill>/scripts/draw.mjs --direction <선택한 id> --brief "<한 줄>" --scenes <n>.scene-direction/sheet.md를 씁니다: 분위기, 세계, 조명, 마감, 찾을 에셋, 바닥, 폰트, 그리고 모든 씬에 대한 샷과 카피 배치. 이를 채택하세요. 명시할 수 있는 이유가 있을 때만 다시 딜링하고, 보고서에 그렇게 말하세요. - 아이디어와 라이브 요소 (references/idea-and-devices.md). 이 사이트에서, [주제에 속하는 것]이 [방향의 세계 또는 장치]가 됩니다. 경쟁사 테스트를 통과하지 못해야 합니다. 하나의 라이브 요소를 추가하세요. references/tells.md를 읽으세요.
- 에셋 가져오기 (references/assets.md). 시트의
assets.mjs명령을 실행하세요: HDRI, 그리고 시트의 충실도에 따라 주제 주변 세계를 위한 소품과 표면. 선택하기 전에 콘택트 시트를 보세요, 그런 다음assets/에get하세요. <skill>/assets/starter.html에서 빌드하세요. 레이아웃이 아닌 인프라입니다: 배경이 CSS 바닥인 전체 블리드 캔버스, 마감 체인(HDRI, AO, 블룸, 비네트, 톤 매핑, SMAA), 카메라를 위한SHOTS, 씬별 스크림이 있는 카피 배치, 하나의 클록(gsap.ticker + Lenis), 라인 리빌, 짧은 인트로, 헤더, 인덱스 및 푸터, 포인터 드리프트, 모션 감소 및 품질 단계. 시트에서FINISH를 채우고 각 섹션의data-ground,data-shot,data-copy및data-chapter를 채우세요. 플레이스홀더 텍스트, 제목 및 설명을 교체하세요. Vite 또는 Next.js에서는 해당 부분을 포팅하세요.- 세계와 객체 만들기 (references/object.md, colour-world.md, finish.md). 주제만의 것을 object.md의 기준에 맞게 모델링한 다음, 어딘가에 배치하세요: 가져온 소품과 표면, 방, 계곡, 컬렉션. 시트의 리그와 프레임 내부의 광원으로 조명하세요.
- 스토리, 샷 및 모션 (references/scenes-and-motion.md, motion-and-type.md). 각 씬은 비트, 시트의 샷, 그리고 디스플레이 서체의 진술을 얻습니다. 장소의 경우 카메라는 디오라마 주위가 아니라 세계를 통한 경로(
path씬)를 따라 이동합니다. 카메라 이동, 휴대폰 버전 및 모션 감소를 계획하세요. 크롬을 주제의 언어로 꾸미세요(references/chrome.md). - 확인.
node <skill>/scripts/check.mjs <폴더-또는-url> --out scene-check # 인트로 게이트의 경우 --click "Enter" 추가npm i -D playwright && npx playwright install chromium, 프로젝트에 종속성을 추가하고 싶지 않으면 스크래치 폴더에서). 데스크탑과 휴대폰에서 각 씬의 정지 지점을 촬영하고(scene-check/film-desktop.png,film-phone.png), 모션 감소로 페이지를 다시 로드하고, 프레임 시간, 페이지 무게 및 인트로 소요 시간을 보고합니다. 작성된 모든 이미지를 읽으세요. - 보고 수정: 상위 3개, 최대 3라운드 (references/critique.md). 이미지에서 루브릭을 채점하고, 가장 약한 세 가지를 수정하고, 확인하고 다시 보세요. 디자인을 유지하는 가장 작은 변경으로 소견을 수정하세요. 소견이 의도적이라면(겹쳐진 타이포, 의도적인 크롭, 접힌 부분 아래에서 올라오는 객체), 유지하고 이름을 지정하세요.
- 보고. 방향, 아이디어 문장, 라이브 요소, 사용한 에셋, 확인 결과, 점수, 그리고 의도적으로 유지한 것을 제공하세요.
야망, 제약이 아님
블라인드 테스트에서, 심사위원은 결함이 있는 풍부하고 분위기 있는 페이지를 결함이 없는 깔끔하고 안전한 페이지보다 항상 선택했습니다(둘 중 하나를 선택해야 할 때마다). 결함 제거는 절반의 작업입니다. 나머지 절반은 내용입니다:
- 전체 블리드. 3D가 화면을 소유합니다. 카피는 스크림 위에, 또는 객체 옆에 놓이며 렌더링이 그쪽에서 멀어집니다.
- 모든 씬에 다른 샷. 카피만 바뀌고 동일한 카메라를 사용하지 마세요. 확인은 스크롤 전체에 걸쳐 하나 또는 두 개의 샷을 보여주는 페이지를 플래그합니다.
- 큰 히어로. 첫 번째 화면에서 객체 또는 세계가 프레임의 대부분을 채우고, 거대하게 설정된 이름 옆에 있습니다.
- 공허 위의 객체가 아닌 세계. 방, 테이블, 땅, 컬렉션, 주제에 속하는 소품, 실제 크기로.
- 분위기와 마감. 시간대와 방향이 있는 조명, 장면 내부에서 빛나는 광원, 접촉 그림자, 그레이딩된 프레임. 풍부하고, 뿌옇지 않게: 모든 프레임은 진정한 어둠과 채도 높은 색상을 가집니다; 안개는 세계의 거리 표현에만 사용하고, 주제 위에는 절대 사용하지 않습니다.
- 목소리가 있는 타이포그래피. 시트의 디스플레이 서체를 디스플레이 크기로, 인벤토리의 실제 단어와 숫자와 함께, 줄 단위로 나타납니다.
- 데모가 아닌 사이트. 헤더, 인덱스, 실제 연락처가 있는 푸터, 약 2초의 인트로.
절대 출시하지 말아야 할 것
- 확인에서 ERROR: 충돌, 빈 캔버스, 로드 실패(모션 감소에서도).
- 주제가 실수로 잘리거나 휴대폰 첫 화면에서 너무 작게 표시.
- 씬의 정지 지점에서 읽을 수 없는 진술, 또는 단어 없이 스크롤되는 구간.
- 휴대폰보다 넓은 레이아웃.
- 숨겨진 네이티브 커서, 누락된 제목, 설명 또는
h1, 또는 플레이스홀더 카피. - 방문자를 몇 초 이상 기다리게 하는 인트로, 또는 확인 GPU에서 40fps보다 느린 프레임.
- 오래되었거나 일치하지 않는 three.js 버전. 프로젝트의 버전 또는 아래 버전을 사용하세요.
태그별 수정
- [errors]: 다른 것보다 먼저 첫 번째 오류를 수정하세요. 일반적인 원인은 생성자 인수 교체, 선언 전에 사용된
let/const, 다른 버전의 애드온 URL, 누락된 import-map 항목, 404, CORS에 의해 차단된 텍스처입니다. - [framing]: 현재 종횡비에 맞게 샷별로 프레임을 조정하세요(references/framing.md).
- [ambition]: 시트에서 각 씬에 고유한 샷을 할당하세요(references/scenes-and-motion.md).
- [story]: 진술이 없는 프레임. 각 씬의 단어를 해당 씬이 화면에 있는 동안 유지하고, 전환 시에만 페이드 아웃하세요(스타터의 루프가 이 작업을 수행합니다).
- [labels]: 겹치거나 잘린 텍스트 및 레이블; 휴대폰의 툴바(references/labels.md).
- [legibility]: 텍스트 뒤의 장면을 진정시키거나, 무엇을 옮기기 전에 스크림을 강화하세요(references/legibility.md). 블룸이 있는 밝은 표면은 너무 밝습니다: 임계값을 낮추지 말고 조명을 낮추세요.
- [usability]: 심사위원 기본 사항: 네이티브 커서, 제목, 설명, 언어, 하나의
h1, 대체 텍스트, 모션 감소(references/chrome.md). - [performance]: 픽셀 비율, 섀도 맵 크기, AO 품질, 소품 감소, 텍스처 크기 감소(references/finish.md §7).
고정 버전
2026-11-03에 npm 및 jsDelivr에서 확인됨(스타터의 import 맵):
{ "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"three/examples/jsm/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"postprocessing": "https://cdn.jsdelivr.net/npm/[email protected]/build/index.js",
"n8ao": "https://cdn.jsdelivr.net/npm/[email protected]/dist/N8AO.js",
"gsap": "https://cdn.jsdelivr.net/npm/[email protected]/index.js",
"gsap/": "https://cdn.jsdelivr.net/npm/[email protected]/",
"lenis": "https://cdn.jsdelivr.net/npm/[email protected]/dist/lenis.mjs" }
n8ao는 three/examples/jsm/...을 임포트하므로 해당 항목을 유지하세요. postprocessing 6.39는 three r187까지 지원합니다. r187 참고: PCFSoftShadowMap가 사라짐(PCFShadowMap과 shadow.radius 사용); HDRLoader가 RGBELoader를 대체; outputEncoding/sRGBEncoding이 사라짐. GSAP 3.13+에는 SplitText(gsap/SplitText.js)가 포함됩니다.
참고 자료
| 파일 | 읽을 시기 |
|---|---|
| references/idea-and-devices.md | 3단계: 아이디어 문장, 장치, 라이브 요소 |
| references/tells.md | 3단계, 그리고 보고서 작성 전 다시 |
| references/assets.md | 4단계: 충실도, 소품 찾기 및 배치, 표면, 예산 |
| references/object.md | 6단계: 제공된 모델(컬러웨이 변형 포함), 코드로 빌드된 객체의 기준, 세부 사항, 재질 |
| references/colour-world.md | 6단계: 배경, 조명 및 재질에 대한 팔레트; 톤 매핑; 안개; 그레인 |
| references/finish.md | 6단계: 조명 리그, HDRI, 접촉 그림자 및 AO, 후처리 체인, 성능 |
| references/scenes-and-motion.md | 7단계: 비트, 샷 어휘, 카메라 이동, 경로, 휴대폰 |
| references/motion-and-type.md | 7단계: 하나의 클록, 이징 및 지속 시간, 리빌, 인트로, 타입 스케일, 모션 감소 |
| references/chrome.md | 7단계: 헤더, 인덱스, 푸터, 커서, 마크업, 사운드 |
| references/critique.md | 9단계: 루브릭 및 확인-수정 루프 |
| references/framing.md, labels.md, legibility.md | 해당 태그로 소견 수정 시 |
| references/example-furkanboran.md | 기준 확인을 위해: 실제 사이트 분석 |
| library/directions.json | 스크립트가 딜링하는 12가지 방향 |
크레딧
딜링된 방향, 아이디어 문장, 경쟁사 테스트, "하나의 라이브 요소", 확인-수정 루프 및 제약만으로는 얇게 읽힌다는 경고는 taste-skill(MIT)에서 각색되었습니다. 시그니처 및 방향 순환은 hallmark(MIT)에서, Experience 모드는 impeccable(Apache-2.0)에서, 원형 어휘는 awwwards-3d(MIT)에서 가져왔습니다. 모델, 텍스처 및 HDRI는 Poly Haven(CC0)에서 제공됩니다. 작업 예제 및 그로부터 각색된 패턴은 Furkan Boran의 furkanboran.info에서 가져왔습니다. README.md를 참조하세요.