Kage 운영 중

Kage는 디자이너 Meng To가 오픈 소스로 공개한 몰입형 3D 인터랙티브 경험 프로젝트입니다. 단일 HTML 파일만 사용해 Three.js로 실시간 렌더링하고 GPT Image 2로 생성한 장면 소재를 결합하여 가상의 교토 산사에서 보내는 밤 산책을 구현합니다. 사용자는 마우스 스크롤만으로 카메라 경로를 제어하며, 산문과 고요한 정원 등 다섯 개의 장을 지나 빗안개, 낙엽, 주홍빛 보름달이 어우러진 영화 같은 분위기를 경험할 수 있습니다. Kage는 바로 열어 실행할 수 있으며, AI 생성 콘텐츠와 실시간 WebGL을 결합한 프론트엔드 디자인의 사례입니다.

WeChat에서 팔로우 후 “开源”라고 답장하여 AI 오픈 소스 프로젝트 교류 그룹에 참여하세요.
스크롤로 탐색: 마우스 휠로 카메라를 미리 설정된 경로를 따라 산사 안으로 이동시킵니다. 버튼과 메뉴 없이 스크롤만이 유일한 인터랙션 방식입니다.
실시간 3D 렌더링: Three.js를 기반으로 브라우저에서 사찰, 산문, 빗안개, 낙엽, 주홍빛 보름달 등의 동적 장면을 실시간으로 구성합니다.
AI 소재 결합: GPT Image 2로 생성한 장면 이미지 보드와 투명 WebP 전경 요소를 실시간 3D 세계 위에 겹쳐 영화 같은 느낌을 강화합니다.
5장 구성의 내러티브: “산문→고요한 정원→장인의 솜씨→여운→선언”의 다섯 장으로 구성되며, 각 스크롤 구간마다 새로운 구도의 장면이 펼쳐집니다.
단일 파일, 빌드 불필요: 모든 로직, 스타일, 렌더링을 하나의 HTML 파일에 담아 npm, React 또는 빌드 도구가 필요 없습니다.
몰입형 시각적 분위기: 거의 검은색, 짙은 남색, 따뜻한 앰버, 뼈색, 주홍색의 절제된 색상 조합에 bloom, 필름 그레인, 비네팅 후처리를 더했습니다.
접근성 지원: 애니메이션 완화 옵션을 내장하고 모바일 반응형 레이아웃을 지원합니다.

온라인 체험: 브라우저에서 https://mengto.github.io/kage/ 에 접속하면 교토 산사의 밤 산책을 시작할 수 있습니다.
로컬 배포: 저장소를 클론한 후 python3 -m http.server와 같은 정적 서버를 실행하면 됩니다. 빌드 단계는 필요하지 않습니다.
인터랙션: 페이지를 연 뒤 마우스를 스크롤하면 카메라가 미리 설정된 경로를 따라 다섯 개의 장면을 자동으로 이동합니다.
브라우저 요구 사항: WebGL을 지원하는 최신 브라우저를 사용해야 하며, 그렇지 않으면 화면이 렌더링되지 않습니다.
2차 창작: 모방 제작 시 PROMPT.md를 참고해 AI로 소재를 새로 생성해야 하며, 원 프로젝트의 artwork를 직접 재사용할 수 없습니다.
접근성 설정: 시스템 환경설정에서 “동작 줄이기”가 활성화되어 있으면 어지럼증을 방지하기 위해 페이지의 애니메이션 강도가 자동으로 낮아집니다.

단일 파일 아키텍처: 모든 로직, 스타일, 3D 렌더링을 하나의 HTML 파일에 압축하여 빌드와 의존성 없이 바로 사용할 수 있습니다.
극도로 단순한 인터랙션: 스크롤만으로 카메라 경로를 제어하며 버튼과 메뉴가 없어 별도의 학습이 필요하지 않습니다.
AI 융합 렌더링: GPT Image 2로 생성한 장면 소재와 Three.js 실시간 3D 렌더링을 매끄럽게 결합해 실제 촬영 같은 질감과 역동적인 빛을 함께 구현합니다.
영화 같은 몰입감: 다섯 장의 내러티브 구성과 절제된 색상, 후처리 효과가 어우러져 인터랙티브한 교토 산사 야간 산책의 영화적 분위기를 연출합니다.
디자이너 중심의 제작: 프로그래머 출신이 아닌 제작자가 프롬프트를 중심으로 창작하여 AI 시대의 디자인 우선 프론트엔드 개발이라는 새로운 방식을 보여줍니다.
가볍고 높은 이식성: 백엔드, 분석 스크립트, 런타임 네트워크 요청이 없어 어떤 정적 서버에도 몇 초 만에 배포할 수 있습니다.

프로젝트 웹사이트: https://mengto.github.io/kage/
GitHub 저장소: https://github.com/MengTo/kage

개인 포트폴리오/크리에이티브 홈페이지: 디자이너나 개발자는 단일 파일로 만든 3D 몰입형 경험을 기존 포트폴리오 대신 활용하고, 스크롤 내러티브로 프로젝트를 소개할 수 있습니다. 일반적인 웹페이지보다 시각적 기억에 훨씬 오래 남습니다.
관광지 디지털 가이드: Kage의 “산사 야간 산책” 방식을 실제 관광지에 적용해 스크롤로 고건축군과 자연경관을 둘러보게 하고, 정적인 이미지와 텍스트 소개를 대체할 수 있습니다.
브랜드 출시/제품 티저 페이지: 신제품 출시 전 단일 페이지의 영화 같은 경험으로 분위기를 조성할 수 있습니다. 자동차, 시계, 명품 브랜드는 장별 스크롤을 통해 제품의 세부 요소와 브랜드 스토리를 공개할 수 있습니다.
박물관/역사 교육 디지털 전시: 고대 도시나 유적지 같은 역사적 장면을 재현하고, 학생이나 관람객이 스크롤하며 역사 속으로 들어가도록 만들 수 있습니다. AI 생성 소재를 활용해 미술 제작 비용도 줄일 수 있습니다.
프론트엔드 교육 및 Three.js 입문 사례: 단일 파일, 빌드 불필요라는 대표적인 구조로 Kage는 소스 코드를 직접 분석하며 가르치기에 적합합니다. 학생들은 npm 환경을 설정하지 않아도 3D 장면, 카메라 경로, 스크롤 기반 구동 로직의 핵심을 이해할 수 있습니다.