플러스프로젝트 배경
1) 배경 - 사운드와 공간감을 정적인 소개 페이지보다 몰입감 있게 전달하는 브랜드 경험을 시연하기 위해 제작했습니다. - 실제 고객사 의뢰가 아닌 자체 데모 프로젝트입니다. 2) 목표 - 절차형 3D 히어로와 에디토리얼 타이포그래피를 하나의 흐름으로 연결 - 전체 화면 메뉴, 가로형 작품 탐색, 상세 패널을 데스크톱과 모바일에 최적화 - 과도한 장식 없이 조작 피드백과 접근성을 함께 확보
프로젝트 성과
전체 인터랙션 시나리오 검증
메뉴·작품 4종·상세 패널·노트·푸터와 모바일 흐름을 자동 탐색했고, 녹화 구간별 콘솔 오류 0건을 확인했습니다.
핵심 기능
절차형 3D 히어로와 작품 탐색
Three.js 기반 3D 오브젝트가 포인터에 반응하며, 네 개 작품을 가로 스크롤과 상세 패널로 이어서 탐색할 수 있습니다.
진행 단계
기획·디자인·개발·반응형 검증
2026.08.
콘셉트와 정보 구조 설계부터 3D 히어로, 스크롤 인터랙션, 모바일 최적화, 실제 브라우저 녹화·검증까지 수행했습니다.
프로젝트 상세
공간 기반 사운드 오브젝트 스튜디오를 가정해 제작한 자체 데모 프로젝트입니다. Three.js로 절차형 3D 히어로를 구현하고, GSAP ScrollTrigger와 Lenis를 활용해 전체 화면 INDEX 메뉴, 가로 스크롤 작품 아카이브, 프로젝트·노트 상세 패널, 마그네틱 CTA를 하나의 반응형 경험으로 설계했습니다. 데스크톱과 모바일 레이아웃을 모두 최적화했으며 키보드 탐색과 모션 최소화 환경
