designpaca/research/three/06-webgl-showcase.md

# 06 — 웹 3D 사례집: 형태가 의미를 나르는 경우

> 조사일 2026-08-20. 판정 기준 하나: **3D를 끄면 무엇을 잃는가.** 아무것도 안 잃으면 장식이다.
> 무게는 가능한 곳에서 실측했고, 아닌 것은 `추정`으로 표시했다.

---

## 0. 먼저 — 3D 없이 이긴 사례들

사례집을 3D 사례로 시작하면 편향된다. 2026 Awwwards Developer Award 수상작 중 **3D를 전혀 쓰지 않은 것들**이 있다.

| 사이트 | 무엇으로 이겼나 |
|---|---|
| **By-Kin** https://by-kin.com | GSAP + 스무스 스크롤. "전환이 스스로를 드러내지 않는데 전체가 하나의 연속된 표면으로 느껴진다" |
| **Mat Voyce** https://matvoyce.tv | 키네틱 타이포만. 작가가 키네틱 타입 아티스트라 **사이트가 그 작업처럼 움직여야** 했다 |
| **Uncommon Studio** https://uncommonstudio.com.au | GSAP 전환을 카메라 무브처럼. 그리드 규율 |

**교훈**: "3D가 있어야 상을 받는다"는 전제가 틀렸다. 형태와 메시지가 맞을 때만 3D가 이긴다.
Mat Voyce의 논리 — *"작업이 움직임이니 사이트도 움직여야 한다"* — 가 이 문서 전체의 판정식이다.

---

## 1. 구체 오브젝트 (제품·기계·캐릭터)

파는 물건이 **물리적으로 존재할 때**의 문법이다.

| # | 사례 | 3D가 무엇 | 왜 그 형태여야 했나 | 지오/모델 | 무게·전략 | 훔칠 것 |
|---|---|---|---|---|---|---|
| 1 | **Oryzo** oryzo.ai (Lusion, Awwwards SOTM 2026-04) | 코르크 코스터 하나 | 제품이 하나뿐이라 **하나만 제대로** 보여준다. 여러 각도 = 구매 확신 | GLB | 추정 1~3MB | **관성.** 물리를 흉내낸 이징 + 스크롤이 2D 레이어가 아니라 **진짜 Z축**으로 카메라를 민다 |
| 2 | **Cartier Watches & Wonders** cartier.com/watchesandwonders | 여섯 개의 독립된 3D 방(alcove) | 시계 여섯 종을 각각의 세계에 둔다. 그리드에 늘어놓으면 럭셔리가 죽는다 | GLB | 추정 수 MB/방, 방 단위 지연 로드 | **씬을 쪼개서 필요할 때만 로드.** GLSL+GSAP+Lenis+Web Audio를 서사 레이어로 |
| 3 | **Lacoste Ace Breaker** members-play.lacoste.com/ace-breaker-rg | 플레이 가능한 벽돌깨기 | 캠페인이 "참여"라서 **볼 것이 아니라 할 것**이어야 했다 | 프로시저럴 | — | 게임 메커닉 하나를 브랜드 월드로 감싼다. 기능이 곧 메시지 |
| 4 | **Porsche: Dream Machine** (Lusion) | 차 | 차는 형태 자체가 상품이다 | GLB | — | 3D 일러스트+모션그래픽을 웹이 아니라 **영상으로** 뺐다. 웹에 다 넣지 않는 선택 |
| 5 | **Bruno Simon portfolio** bruno-simon.com | 운전 가능한 차 + 물리 월드 | 포트폴리오 주인이 **three.js 교사**다. 사이트가 곧 실력 증명 | GLB + Cannon.js | 무겁다(수 MB). 로딩 화면 명시 | 어려운 아이디어 **하나**를 끝까지 판다. 여러 효과를 쌓지 않는다 |
| 6 | **Adventure Time: BMO** (Active Theory) | 캐릭터 | IP 자체가 캐릭터다 | GLB, 리깅 | — | 캐릭터는 **표정과 반응**이 전부. 폴리곤 수가 아니다 |
| 7 | **NASA JPL Open Source Rover** (Active Theory) | 실제 로버 | 오픈소스 하드웨어를 **분해해서 보여주는 것**이 목적 | GLB, 부품 분리 | — | 폭발도(exploded view). 조립 순서가 정보다 |
| 8 | **KODE Sports Club** (Merci Michel, SOTM) | 건축 공간 | 아직 안 지어진 건물을 판다 | GLB | — | 미완성 실물의 대체재로서의 3D — **가장 정당한 용도** |
| 9 | **Hubtown** hubtown.co.in | 풍경 위 빛나는 모놀리스 | 부동산. 랜드마크성이 상품 | 혼합 | — | 마우스로 **가려진 디테일을 벗겨내는** 인터랙션 |
| 10 | **Gunner Kennels** (AR 컨피규레이터) | 켄넬 실물 크기 | 개 옆에 놓아봐야 **사이즈 확신**이 생긴다 | GLB | — | **반품률 5% 감소**. 3D의 ROI가 숫자로 나온 드문 사례 |
| 11 | **Lundia** 모듈 선반 컨피규레이터 | 조립 결과물 | 조합 수가 많아 사진으로 불가능 | 프로시저럴 조립 | — | 실시간 가격 연동. 3D가 **견적서**가 된다 |
| 12 | **Explore Primland** explore.ownprimland.com | 블루리지 산맥 지형 | 리조트가 파는 것이 **입지**다 | 하이트맵(프로시저럴) | — | 스크롤=카메라 활공 + 대기 안개. 지형은 모델이 아니라 하이트맵으로 |
| 13 | **DeepSee Commerce** deepseecommerce.com | 빙산을 따라 하강 | "수면 아래를 본다"는 은유가 제품명 그 자체 | 혼합 | DPR 클램프, 에셋 압축, **보일 때만 렌더** | 은유가 **제품 이름과 일치**할 때만 은유를 쓴다 |

### 구체 오브젝트의 공통 조건
1. **파는 것이 물리적으로 존재한다** (또는 아직 존재하지 않아 대체가 필요하다)
2. **각도가 정보다** — 돌려봐야 알 수 있는 것이 있다
3. **오브젝트는 하나** — Oryzo는 코스터 하나, Bruno Simon은 차 하나. 여러 개를 띄운 사례는 상위권에 없다

---

## 2. 추상 (데이터·재질·현상)

파는 것이 **무형일 때**의 문법이다. designpaca가 여기 속한다.

| # | 사례 | 3D가 무엇 | 왜 그 형태여야 했나 | 지오/모델 | 무게·전략 | 훔칠 것 |
|---|---|---|---|---|---|---|
| 14 | **Stripe Globe** stripe.com/blog/globe | 지구본 위 결제 흐름 | 평면 지도 대비 **화면 면적 20% 미만**으로 같은 정보. 국가 크기 왜곡도 적다 | **완전 프로시저럴** — 해바라기 나선으로 6만 점 생성, 실제 그리는 건 2만 점 | 모델 파일 **0바이트**. 국가 마스킹은 색으로 인코딩한 PNG 1장 | **이 문서 최고의 참조.** 점 하나하나가 데이터고, 지오메트리가 파일이 아니라 **코드**다. `antialias: false`가 전 기기에서 성능을 살렸다 |
| 15 | **Stripe Connect** stripe.com/blog/connect-front-end-experience | 결제 연결 구조 | 추상적 인프라를 공간으로 | 프로시저럴 | — | 무형 제품의 3D는 **구조도**여야 한다 |
| 16 | **fromanother** (FWA 수상) | 아이덴티티가 유리처럼 굴절·변형 | 스튜디오가 파는 것이 **아이덴티티 시스템**이다. 시스템이 변형되는 걸 보여준다 | 커스텀 GLSL | 모델 없음 | **"로고를 3D로"가 아니라 "정체성이 굴절한다"** — 우리와 가장 가까운 사례 |
| 17 | **Iventions** iventions.com | 프로젝트마다 스포트라이트 설치물 | 공간·이벤트를 만드는 회사라 사이트가 **공간처럼 느껴져야** 했다 | 조명 중심 | Next.js + Three + GSAP | **볼거리가 아니라 분위기로** WebGL을 쓴 가장 명확한 사례. 조명이 주인공 |
| 18 | **IVRESS** brand.ivress.co.jp | 브랜드 월드 | — | 프로시저럴 | **WebGPURenderer + WebGL 폴백**, TSL로 양쪽 컴파일 | 2026년 WebGPU 프로덕션 투입의 실사례 |
| 19 | **The Harmonic State** (Active Theory, SOTM) | 소리의 시각화 | 오디오가 주제라 **소리에 반응하는 형태**가 필수 | 프로시저럴 파티클 | — | 오디오 리액티브는 데이터 바인딩의 한 종류다 |
| 20 | **Spotify: Listening Together** (Active Theory) | 동시 청취 데이터 | 실제 재생 데이터가 형태를 만든다 | 프로시저럴 | — | **데이터가 없으면 형태가 없다** — 형태의 정당성이 데이터에서 나온다 |
| 21 | **Thorne: The Frontier Within** (Active Theory) | 체내 생물학 | 눈에 안 보이는 것을 보게 한다 | 혼합 | — | 비가시적 대상의 시각화 = 추상 3D의 정당한 자리 |
| 22 | **Worldcoin Globe** (Lusion) | 전 세계 분포 | Stripe Globe와 같은 논리 | 프로시저럴 | API 연동 | 지구본은 **분포 데이터가 있을 때만** 쓴다 |
| 23 | **Lusion Labs** lusion.co/projects/lusion_labs | 실험 모음 | 스튜디오의 R&D 자체가 상품 | 프로시저럴 | — | 기술 실험을 콘텐츠로 만드는 구조 |
| 24 | **Aave** aave.com | 금융 프로토콜 | 무형 금융의 추상 표현 | 추상 | — | 다크+연보라. **우리는 이 팔레트를 피한다**(슬롭 지문) |
| 25 | **Audion / Tavus / SISA / Tracebit** | AI·보안 SaaS의 추상 형태 | — | 추상 | — | 대부분 **의미 없는 추상**의 사례. 반면교사로 본다 |
| 26 | **Shopify Editions** shopify.com/editions/spring2026 | 기능 체인지로그를 제품 서사로 | 릴리스 노트를 읽게 만들어야 했다 | 씬 분할 | 섹션마다 자체 무대 | **스크롤 시퀀스 = 각 섹션이 독립된 무대.** 하나의 긴 씬이 아니다 |
| 27 | **Bellwoods / Audiograph** (Matt DesLauriers) | 제너러티브 지형/음악 | 작품 자체가 코드다 | 100% 프로시저럴 | 극도로 가벼움 | 모델 없이 **시드 하나**로 세계를 만든다 |
| 28 | **Mapbox 바람 지도** | 풍속 데이터 | 벡터장은 정지 이미지로 못 읽는다 | GPGPU 파티클 | 데이터 텍스처 | **움직임이 정보인** 유일한 정당화 |
| 29 | **IBM Technology Garden** (Variable) | 기술을 정원으로 | 은유가 브랜드 서사와 붙어 있다 | 프로시저럴 생성 | — | 은유형 추상. 성공 조건은 **은유가 카피에도 있는 것** |
| 30 | **Minh Pham** minhpham.design | 작업물의 틀 | 3D가 작업을 **압도하지 않도록** 설계 | 혼합 | — | 3D를 **액자**로 쓴다. 주인공이 되지 않는다 |
| 31 | **Sleep Well Creative** sleep-well-creatives.com | 손그림+3D 혼합 | 수면 안내라 부드러움이 요구됐다 | 혼합 | — | 3D에 손그림을 섞어 "CG 티"를 지운다 |
| 32 | **Taotajima.jp** (Akella 해부) | 이미지 전환 | — | 셰이더만 | 모델 0 | 셰이더 전환은 **모델 없이** 인상을 만드는 가장 싼 길 |

### 추상이 성공하는 조건 — 셋 다 만족해야 한다
1. **형태가 데이터에 묶여 있다.** Stripe의 점은 국가고, Spotify의 파티클은 재생이고, Mapbox의 흐름은 풍속이다. 데이터가 없으면 형태의 근거가 없다
2. **은유가 카피에도 존재한다.** DeepSee는 제품명이 "수면 아래"고, fromanother는 "굴절하는 정체성"을 문장으로도 말한다
3. **3D를 끄면 정보를 잃는다.** 분위기만 잃으면 그건 장식이다

---

## 3. 우리가 지금 실패한 이유 (진단)

현재 히어로: 유리 판 6장이 렌더타겟에 구운 배경 그라디언트를 UV를 밀어 샘플링한다.

| 성공 조건 | 현재 |
|---|---|
| 형태가 데이터에 묶여 있다 | ❌ **판이 6장인 이유가 없다.** 5장이나 8장이어도 똑같다 |
| 은유가 카피에 존재한다 | ❌ 페이지 어디에도 "유리"가 없다 |
| 3D를 끄면 정보를 잃는다 | ❌ CSS 그라디언트로 대체되고 아무도 모른다 |

기술은 옳았다(렌더타겟 1장으로 transmission 비용 회피, 예산 준수, 폴백 완비). **형태 선택만 틀렸다.**
사용자 평 "3D라고 그냥 큐브만 돌면 안 됩니다"는 정확히 이 진단이다.

---

## 4. 기법 카탈로그 — 무게 순

| 기법 | 추가 비용 | 언제 정당한가 | 출처 사례 |
|---|---|---|---|
| **프로시저럴 점/선 지오메트리** | **0KB** | 데이터가 점의 위치를 정할 때 | Stripe Globe (6만 점, 모델 0바이트) |
| 셰이더 전용 표면 (풀스크린) | 0KB | 재질이 메시지일 때 | Taotajima, fromanother |
| InstancedMesh 격자 | 0KB | 반복 단위가 데이터 항목일 때 | Codrops 큐브 그리드 |
| GPGPU 파티클 | 0KB | 움직임 자체가 정보일 때 | Mapbox 바람, Spotify |
| 하이트맵 지형 | 텍스처 1장(~50KB) | 지형이 상품일 때 | Explore Primland |
| 스크롤 카메라 리그 | +45KB (GSAP+Lenis) | 깊이가 서사일 때 | Oryzo, Shopify Editions |
| SDF 텍스트 (troika) | +55KB | WebGL 안에 대형 타이포가 필요할 때 | — |
| **GLB 모델 (무텍스처, Draco)** | **35~90KB** (실측 §07) | 오브젝트가 상품일 때 | Duck 34KB, Fox 90KB |
| **GLB 모델 (PBR 텍스처)** | **1~10MB** (실측 §07) | 사실감이 구매 결정에 필요할 때만 | DamagedHelmet 3.7MB |
| 포스트프로세싱 (bloom+CA) | +32KB | 발광이 형태의 일부일 때 | — |
| Spline 씬 임포트 | **800KB~2MB** | **거의 없음** | — |

---

## 5. 출처

- awesome-casestudy (110건 아카이브) https://github.com/luruke/awesome-casestudy
- Stripe Globe 기술 해설 https://stripe.com/blog/globe
- Stripe Connect https://stripe.com/blog/connect-front-end-experience
- Best Three.js Websites 2026 https://www.utsubo.com/blog/best-threejs-websites-2026
- Award-Winning Websites 2026 https://www.hontran.dev/blog/best-award-winning-websites-2026
- WebGL Website Examples https://www.hontran.dev/blog/webgl-website-examples
- 3D Landing 갤러리 (24건) https://www.a1.gallery/websites/3d-landing
- Lusion 프로젝트 https://lusion.co/projects/
- Active Theory 케이스 스터디 https://medium.com/active-theory
- 3D 컨피규레이터 ROI https://www.designrush.com/agency/ecommerce/trends/3d-product-configurators