17d04ee2bb
'3D 라고 그냥 큐브만 돌면 안 된다'는 지적에서 시작해 조사부터 했다.
research/three/06~08 에 사례 32건, GLB 소스 17곳, 방향 제안 3개가 있다.
조사 결론: 추상이다. GLB 는 쓰지 않는다.
- 구체 오브젝트의 성립 조건 3개(물리적으로 존재 / 각도가 정보 /
오브젝트가 하나로 정해짐)를 우리 브리프는 하나도 충족하지 않는다.
규칙 묶음은 돌려봐도 새 정보가 없다
- 실측: DamagedHelmet.glb 3,685KB 중 텍스처가 87%라 Draco 를 걸어도 -13%.
게다가 디코더만 200KB 로 예산의 67%를 먹는다
- Stripe Globe 는 모델 파일이 0바이트다. 6만 점을 코드로 생성한다.
지오메트리가 파일이 아니라 코드일 때 추상이 이긴다
- 2026 Awwwards Developer Award 수상작 중에는 3D 를 아예 안 쓴 것도 있다
채택안: 파이프라인 게이트
- 유리 판 여섯 장이 깊이 축에 정면으로 선다. 이 스킬의 여섯 단계다
- 스크롤하면 카메라가 문을 하나씩 통과하고 지나온 판은 뒤에 겹친다
- 판이 여섯인 이유가 생겼다. 아래 Pipeline 섹션과 같은 수다
- 순서는 이 제품의 본체다('순서를 바꾸지 마라'가 절대 규칙). 순서를
깊이로 옮기는 것은 은유가 아니라 직역이다
스크롤 연동은 이미 도는 렌더 루프에서 위치를 한 번 읽는다.
addEventListener('scroll') 을 쓰지 않는다(하드 게이트 10). 핀도 없다.
13 KiB
13 KiB
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 클램프, 에셋 압축, 보일 때만 렌더 | 은유가 제품 이름과 일치할 때만 은유를 쓴다 |
구체 오브젝트의 공통 조건
- 파는 것이 물리적으로 존재한다 (또는 아직 존재하지 않아 대체가 필요하다)
- 각도가 정보다 — 돌려봐야 알 수 있는 것이 있다
- 오브젝트는 하나 — 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 | 셰이더 전환은 모델 없이 인상을 만드는 가장 싼 길 |
추상이 성공하는 조건 — 셋 다 만족해야 한다
- 형태가 데이터에 묶여 있다. Stripe의 점은 국가고, Spotify의 파티클은 재생이고, Mapbox의 흐름은 풍속이다. 데이터가 없으면 형태의 근거가 없다
- 은유가 카피에도 존재한다. DeepSee는 제품명이 "수면 아래"고, fromanother는 "굴절하는 정체성"을 문장으로도 말한다
- 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