Étude
설명
인터랙티브 WebGL 사진 전시
기간
May 2026 - Jun 2026
역할
- 크리에이티브 개발자: react-three-fiber 갤러리 엔진, 커스텀 GLSL 셰이더, GSAP 전환 안무.
- 아트 디렉터: 에디토리얼 세리프 시스템, 다크 전시 디렉션, 가상 사진가 정체성.
- 성능 최적화: 적응형 DPR, 호버/렌더 디커플링, 광고 유입 대비 모바일 튜닝.
기술
React · TypeScript · Vite
Three.js · react-three-fiber · GLSL (Shaders)
GSAP
Vercel
프로젝트 목적
"사진가의 흑백 스터디를 위한 인터랙티브 전시." ÉTUDE는 파리 기반 가상 사진가 Noa Vidal의 인터랙티브 WebGL 전시 사이트입니다. 사진들이 3차원 갤러리에 떠서 Ring·Sphere·Flower·Constellation 배치로 회전·산개·재배열되고, 관람자가 한 장을 골라 감상합니다. 온라인 사진 아카이브를 스크롤 그리드가 아닌 공간적·촉각적 경험으로 재구성했습니다.
범위
- · 인터랙티브 웹 디자인 & 개발
- · WebGL 3D 갤러리 시스템 (react-three-fiber)
- · 커스텀 셰이더 (흑백·심도 포그·호버)
- · 에디토리얼 아트디렉션 & 타이포그래피
주요 기술 특징
3D 갤러리 배치 시스템
- · Ring·Sphere·Flower, 그리고 드래그 패닝과 중앙 크로스헤어 연결선을 가진 Constellation까지 네 가지 배치를 오갑니다.
- · 하나의 엔진이 모든 배치를 구동하고, 카드마다 미세하게 떠다니는 움직임과 심도 포그가 걸려 먼 사진은 어둠 속으로 물러납니다.
공간 내비게이션 & 상세 뷰
- · 사진을 고르면 흩어져 있던 필드가 링으로 모여 한 바퀴 돈 뒤, 가로 한 줄로 펼쳐져 넘겨볼 수 있게 됩니다.
- · 반투명 상세 오버레이가 제목과 연도를 달고 미끄러져 들어오며, 사이트의 Silver/Color 토글을 그대로 따릅니다.
디자인 포인트
사진이 주인공
거대한 마스트헤드를 걷어내고 컴팩트한 워드마크만 남겨, 이미지가 화면 중앙을 차지하고 회전하는 주체가 되도록 했습니다.
뒤집힌 화이트 큐브
밝은 전시 벽 대신 딥 차콜 배경으로 흑백 사진을 발광시켜, 캠페인 피드의 시네마틱한 톤과 맞췄습니다.
무게감 있는 모션
GSAP 이징이 모든 전환을 안무합니다. 쫀득하게 형태를 바꾸는 배치 모프, 한 번만 의도적으로 도는 스핀, 그리고 관람 열로 순차 정렬되는 마무리.
갤러리
클릭하여 확대자주 묻는 질문
3D 인터랙티브 웹사이트는 일반 홈페이지와 무엇이 다른가요?
Three.js와 WebGL을 사용해 브라우저에서 3D 오브젝트가 움직이고 마우스와 스크롤에 반응하는 웹사이트입니다. 일반 홈페이지가 정보를 정리해 보여준다면, 3D 인터랙티브 웹은 브랜드의 인상을 체험으로 전달합니다. 패션, 뷰티, 건축, 전시처럼 브랜드 경험이 중요한 분야에서 효과가 큽니다.
웹사이트 제작 기간은 얼마나 걸리나요?
랜딩페이지는 7일, 5페이지 기업 웹사이트는 15일, 10페이지 3D 인터랙티브 웹은 30일을 기준으로 합니다. 자료를 전달받은 시점부터 기산하며 디자인 시안 확인과 피드백 일정에 따라 조정됩니다. 급한 일정이 있으시면 상담 시 말씀해 주시면 가능 여부를 먼저 확인해 드립니다.
호스팅, 도메인, 서버 비용은 따로 드나요?
SSL 보안 인증서 설치, 호스팅 세팅, 데이터베이스 구축은 무상으로 제공해 드립니다. 도메인 구입 비용만 의뢰인이 부담하시며 연 2~3만원 수준입니다. 계정은 처음부터 의뢰인 명의로 생성하므로 이후 담당자가 바뀌어도 서비스가 끊기지 않습니다.
완성 후 제가 직접 내용을 수정할 수 있나요?
관리자 페이지를 함께 구축해 드리므로 개발 지식 없이도 텍스트, 이미지, 게시물을 직접 수정하실 수 있습니다. 납품 시 관리자 사용 매뉴얼을 함께 전달해 드립니다. 화면 구조를 바꾸거나 새로운 기능을 추가하는 작업만 별도 개발이 필요합니다.