Kage: 스크롤과 실시간 3D를 결합한 웹 디자인 사례
원문 읽기 · MengTo ↗(새 탭에서 열림)Kage는 스크롤에 맞춰 3D 공간과 이미지 레이어를 바꾸는 공개 웹 디자인 사례다. 2026-10-18 확인 당시 원 코드와 작품은 재사용이 허락되지 않았다.
무엇인가
- 교토 산사의 밤길을 다섯 장면으로 나누고 Three.js 카메라, 조명, 비·안개·낙엽 같은 절차적 요소를 스크롤과 연결한다.
- 생성한 장면 이미지와 투명 전경 이미지를 HTML 레이어로 얹어 실시간 3D와 합성한다.
언제 쓰나
- 브랜드 소개나 전시형 웹페이지에서 스크롤 서사, 장면 전환, 정적 이미지와 WebGL의 역할 분담을 설계할 때 구조 참고 자료로 읽을 수 있다.
작게 시작하는 방법
- README와 공개 프로젝트를 열람하고 장면별 전환·모바일·동작 축소 항목을 체크리스트로 정리한다. 이번 검수에서 코드를 실행하거나 자산을 내려받지 않았다.
적용 조건과 한계
- README는 원 Kage 코드와 작품에 재사용·재배포 허락이 없다고 밝힌다. 포함된 Three.js의 MIT 고지는 그 부분에만 적용된다.
- 새 구현은 별도 코드와 권리 확보한 이미지로 제작해야 하며 실제 모바일 성능·접근성은 자체 시험이 필요하다.
함께 확인할 조건
- 원 코드와 아트워크는 공개 저장소에 있어도 재사용 권리가 없다. Three.js 런타임의 MIT와 구분해야 한다.
- WebGL 성능, 접근성, 모바일 품질은 이번에 실행·측정하지 않았다.
- 원 프로젝트의 장면·이미지를 복제하지 않고 구조적 착상만 참고해야 한다.
출처와 편집 기준
MengTo · 오픈소스 저장소 · 자료 확인 2026.10.18 (KST)
요약은 원문의 핵심을 정리했으며, 커머스 인사이트는 편집 해석이다. 용어가 낯설다면 AI 용어집를 참고할 수 있다.