📌 ÉTUDE - 사진가 전시 웹사이트
🔹 프로젝트 개요
- 작업 기간: 약 3주
- 작업 범위: 몰입형 인터랙티브 웹 디자인 및 프론트엔드 개발, WebGL 기반 3D 갤러리 시스템 구축, 커스텀 GLSL 셰이더(흑백·심도 포그·호버) 구현, GSAP 전환 시퀀스 설계
- 사용 도구:
- Frontend: React 18, TypeScript, Vite
- Creative / Graphics: Three.js · react-three-fiber, WebGL · GLSL Shader
- Animation: GSAP
- Deployment: Vercel
🔹 프로젝트 목적
"A study in silver — photographs that float, gather, and turn (은염의 습작 — 떠다니고, 모이고, 회전하는 사진)."
ÉTUDE는 파리 사진가 Noa Vidal의 흑백 사진 아카이브를 위한 인터랙티브 WebGL 전시 사이트입니다. 스크롤 그리드로 나열하는 일반적인 온라인 갤러리와 달리, 사진을 3차원 공간에 띄워 관람자가 직접 회전·산개·재배열하며 감상하도록 설계했습니다. 온라인 사진 아카이브를 '읽는' 것이 아니라 '거니는' 공간적·촉각적 경험으로 재구성하는 것을 목표로 삼았습니다.
🔹 핵심 기술 및 구현 기능 (Key Technical Features)
- 3D Gallery Layout System (3D 갤러리 배치 시스템)
- 하나의 엔진으로 Ring · Sphere · Flower, 그리고 드래그 패닝·중앙 크로스헤어 연결선을 가진 Constellation(성좌형)까지 네 가지 배치를 실시간 전환합니다.
- 카드마다 개별 위상의 둥둥 플로팅과 카메라 거리 기반 심도 포그를 적용해, 먼 사진은 어둠 속으로 자연스럽게 사라집니다.
- Custom GLSL Shaders (커스텀 셰이더)
- 흑백 변환·심도 포그·호버 시 원본 컬러 복원·원형 크롭을 단일 프래그먼트 셰이더로 처리해 실버 젤라틴 톤을 통일했습니다.
- Spatial Navigation & Detail View (공간 내비게이션·상세 뷰)
- 사진 클릭 시 흩어진 필드가 링으로 모여 한 바퀴 회전한 뒤 가로 일렬로 펼쳐지며, 모든 배치의 클릭 전환이 '링 애니메이션'으로 통일됩니다.
- 선택한 사진은 제목·연도와 함께 프로스트(frosted) 상세 오버레이로 슬라이드 인하며, Silver/Colour 모드 토글을 반영합니다.
- Performance & Loading (성능·로딩)
- 적응형 DPR, 호버-렌더 디커플링, 픽셀비 조정으로 프레임 드랍을 관리하고, 실제 에셋 로드율에 연동된 커튼형 로딩 인트로(세션당 1회)를 구현했습니다.
🔹 디자인 포인트
- Photographs as the Hero (사진이 주인공): 거대 마스트헤드를 걷어내고 컴팩트한 워드마크만 남겨, 회전하는 사진이 화면 중앙의 주체가 되도록 구성했습니다.
- Inverted White Cube (뒤집힌 화이트 큐브): 밝은 전시 벽 대신 딥 차콜(#0e0e0e) 배경을 채택해 흑백 사진이 발광하도록 하고, 캠페인 피드의 시네마틱한 톤과 일치시켰습니다.
- Editorial Serif System (에디토리얼 세리프): Fraunces 세리프와 웜 오프화이트 잉크로 '밤의 갤러리' 무드를 만들고, 좌측 비대칭 레이아웃으로 전형적인 그리드에서 벗어났습니다.
- Motion with Weight (무게감 있는 모션): GSAP 이징으로 모든 전환을 안무 — 쫀득한 배치 모프, 한 번의 의도된 스핀, 관람 로우로의 순차 정렬.
🔹 담당 역할
- Web Designer & Creative Developer:
- 사진가의 정체성과 전시 컨셉에 기반한 UI/UX 디자인 및 아트 디렉션.
- react-three-fiber 기반 3D 갤러리 엔진 구축 및 커스텀 GLSL 셰이더 구현.
- GSAP를 활용한 배치 전환·상세 뷰 시퀀스 인터랙션 설계.
- 적응형 DPR·렌더 최적화 및 광고 유입 대비 모바일 튜닝.
🔹 주요 화면