2026Interactive Exhibition
ÉTUDE
설명
Interactive WebGL Photography Exhibition
기간
May 2026 - Jun 2026
역할
- 크리에이티브 개발자: react-three-fiber 갤러리 엔진, 커스텀 GLSL 셰이더, GSAP 전환 안무.
- 아트 디렉터: 에디토리얼 세리프 시스템, 다크 전시 디렉션, 가상 사진가 정체성.
- 성능 최적화: 적응형 DPR, 호버/렌더 디커플링, 광고 유입 대비 모바일 튜닝.
기술
Frontend
React · TypeScript · Vite
3D / WebGL
Three.js · react-three-fiber · GLSL (Shaders)
Animation / Motion
GSAP
Deployment
Vercel
프로젝트 목적
"사진가의 흑백 스터디를 위한 인터랙티브 전시." ÉTUDE는 파리 기반 가상 사진가 Noa Vidal의 인터랙티브 WebGL 전시 사이트입니다. 사진들이 3차원 갤러리에 떠서 Ring·Sphere·Flower·Constellation 배치로 회전·산개·재배열되고, 관람자가 한 장을 골라 감상합니다. 온라인 사진 아카이브를 스크롤 그리드가 아닌 공간적·촉각적 경험으로 재구성했습니다.
범위
- · 인터랙티브 웹 디자인 & 개발
- · WebGL 3D 갤러리 시스템 (react-three-fiber)
- · 커스텀 셰이더 (흑백·심도 포그·호버)
- · 에디토리얼 아트디렉션 & 타이포그래피
주요 기술 특징
3D 갤러리 배치 시스템
- · Ring·Sphere·Flower, 그리고 드래그 패닝·중앙 크로스헤어 연결선을 가진 Constellation까지 네 가지 배치를 전환.
- · 하나의 엔진으로 모든 배치를 구동하며, 카드마다 둥둥 플로팅과 심도 포그로 먼 사진은 어둠 속으로 사라짐.
공간 내비게이션 & 상세 뷰
- · 사진 클릭 시 필드가 링으로 모여 한 바퀴 돈 뒤 가로 일렬로 펼쳐져 브라우징.
- · 프로스트 상세 오버레이가 제목·연도와 함께 슬라이드 인, Silver/Colour 토글을 반영.
디자인 포인트
사진이 주인공
거대한 마스트헤드를 걷어내고 컴팩트한 워드마크만 남겨, 이미지가 화면 중앙을 차지하고 회전하는 주체가 되도록 했습니다.
뒤집힌 화이트 큐브
밝은 전시 벽 대신 딥 차콜 배경으로 흑백 사진을 발광시켜, 캠페인 피드의 시네마틱한 톤과 맞췄습니다.
무게감 있는 모션
GSAP 이징이 모든 전환을 안무 — 쫀득한 배치 모프, 한 번의 의도된 스핀, 관람 로우로의 순차 정렬.
갤러리
클릭하여 확대프로젝트 보기