3D 웹사이트: 언제 가치가 있고, 어떻게 빠르게 유지할까

짧은 답변

3D 웹사이트는 대상이 공간적이거나, 그 안을 움직여 봐야 사진으로는 설명할 수 없는 무언가를 이해할 수 있을 때 가치가 있습니다. 돌려 보고 싶은 제품, 장소, 데이터셋, 하나의 세계 같은 것들입니다. 사진이나 짧은 영상으로도 똑같이 설명할 수 있는 페이지를 꾸미기만 한다면 가치가 없습니다. 어느 쪽이든 3D 레이어는 다운로드 용량, 배터리, 접근성 면에서 실제 비용이 들기 때문에, 페이지는 3D 없이도 작동하게 만들고 3D는 향상 요소로 다루세요.

이 가이드는 저희의 두 프로젝트를 바탕으로 합니다. 3D 월드 10개로 이루어진 브라우저 경험 Janus Observatory, 그리고 홈페이지가 실시간 3D 장면으로 시작하는 dardo.studio입니다.

3D가 제 몫을 하는 경우

• 방문자가 무언가를 여러 각도에서 봐야 할 때: 제품, 건물, 장비.
• 공간 자체가 이야기일 때: 지도, 배치도, 여러 장소를 거치는 여정.
• 인터랙션이 텍스트보다 빠르게 시스템을 설명할 때: 시나리오를 비교하거나 데이터를 탐색하는 경우처럼.
• 브랜드 경험 자체가 제품일 때: 분위기가 중요하고 방문자가 탐색을 기대하는 런칭, 전시, 캠페인.

그렇지 않은 경우

• 3D 장면이 헤드라인과 이미지가 이미 말하는 내용을 반복할 때.
• 대부분의 방문자가 모바일 데이터로 중급 휴대폰에서 접속하며, 가격, 주소, 영업시간처럼 한 가지 정보를 빨리 찾아야 할 때.
• 런칭 후 모델, 코드, 폴백을 관리할 사람이 팀에 없을 때.

3D, 영상, 이미지 중 무엇을 고를까?

WebGL은 모든 최신 브라우저에서 작동합니다. WebGPU는 더 새롭고 일부 작업에서는 더 빠르지만 지원 범위가 아직 제각각이므로 폴백을 계획하세요. dardo.studio의 3D 첫 화면은 먼저 WebGPU를 시도하고 WebGL 2로 폴백하며, 서비스, 작업 사례, 문의 페이지는 3D 장면을 기다리지 않는 일반 HTML입니다.

Janus Observatory를 만들며 배운 것

Janus Observatory는 지구의 미래에 관해 공개된 시나리오 10개를 17개 챕터의 이야기, 아틀라스, 관측소로 풀어낸 프로젝트로, 오리지널 로우폴리 월드 10개와 관절이 움직이는 외계인 천문학자가 등장합니다. 애플리케이션 크기에 상한이 있는 Cloudflare Workers 무료 플랜에서 운영됩니다. 2026년 9월 27일자 프로젝트 릴리스 보고서에는 빠른 속도를 유지하기 위해 한 일이 기록되어 있습니다.

• 모델을 압축하고 폴백을 남기세요. 3D 모델 59개는 15.8MB 대신 합계 8.2MB의 gzip 버전으로 제공되어 다운로드량이 47.9% 줄었습니다. 압축을 풀 수 없는 브라우저에는 원본 파일이 제공됩니다.
• 메인 스레드 밖에서 디코딩하고, 끝나면 멈추세요. Meshopt 디코딩은 백그라운드 워커 하나에서 실행되며, 5초 동안 유휴 상태이면 종료됩니다.
• JavaScript 예산을 정하고 지키세요. 홈페이지 초기 JavaScript는 256,000바이트 예산 대비 gzip 기준 197,059바이트이며, 빌드에서 이를 검사합니다.
• 요청 폭주를 경계하세요. Next.js와 OpenNext 스택의 추측성 프리페치(speculative prefetch) 루프가 실패한 브라우저 트레이스 하나에서 11,704건의 요청을 발생시켰습니다. 해당 링크의 프리페치를 끄는 것으로 해결했고, 이제 테스트에서 추측성 요청 0건을 요구합니다.
• 프레임 레이트를 좇지 말고 해상도를 고정하세요. 캔버스는 1~1.5의 고정 기기 픽셀 비율로 렌더링됩니다. 보고서는 해상도를 낮춰야 나오던 이전 프레임 레이트 수치도 철회했기 때문에, 저희도 그 수치는 인용하지 않습니다.

3D 없이도 작동하게 만드세요

Janus에는 다른 모든 것을 좌우하는 규칙이 하나 있습니다. 핵심 경험은 WebGL 없이도, AI 없이도 작동해야 한다는 것입니다. 시나리오 기록 10개는 모두 JavaScript를 끈 상태에서도 로드되고, 조작은 WebGL 없이도 작동하며, 키보드 회전, 눈에 보이는 포커스, 동작 줄이기는 기능마다 함께 구현되었습니다. 접근성 페이지에는 조작 방법, 시각 외 대체 수단, 알려진 한계가 정리되어 있습니다. 목표는 WCAG 2.2 AA 등급이며, Chromium, Firefox, WebKit에서 자동화 테스트로 확인합니다.

이 규칙은 검색엔진과 AI 어시스턴트에도 도움이 됩니다. 텍스트, 이름, 데이터가 캔버스 안이 아니라 HTML에 있기 때문입니다.

빠르고 접근성 높은 3D 페이지를 위한 체크리스트

1. 먼저 3D 없이 페이지를 작성하세요. HTML 버전이 말이 되지 않는다면 3D로도 해결되지 않습니다.
2. 3D가 무엇을 설명하는지 정하고, 인상만 주려고 넣은 것은 빼세요.
3. 모델링을 시작하기 전에 예산을 정하세요. JavaScript, 모델 용량, 텍스처 크기의 예산을 정하고 빌드에서 확인하세요.
4. 모델을 압축하세요. meshoptimizer 같은 도구를 사용하고, glTF 형식으로 제공하며, DecompressionStream 같은 비교적 새로운 브라우저 기능에 의존한다면 압축하지 않은 폴백을 남겨 두세요.
5. 콘텐츠 다음에 장면을 로드하세요. 그리고 화면에 곧 보일 때만 로드하세요.
6. 픽셀 비율에 상한을 두세요. 고밀도 화면이 네 배의 픽셀을 렌더링하지 않도록 하기 위해서입니다.
7. 동작 줄이기 설정을 존중하세요. prefers-reduced-motion을 따르고, 모든 인터랙션에 키보드 경로를 제공하고, 모든 캔버스 옆에 텍스트 대체 콘텐츠를 두세요.
8. 실제 중급 휴대폰에서 테스트하세요. 둘 이상의 브라우저 엔진에서도 테스트하고, 런칭 후에는 Core Web Vitals를 지켜보세요.

비용

3D는 디자인과 개발에 더해 모델링, 최적화, 테스트 시간이 추가되며, 폴백은 추가 옵션이 아니라 작업의 일부입니다. 저희 견적에서는 콜롬비아 웹사이트 제작 비용 가이드에서 설명한 비용 요인 가운데 '맞춤 모션, 3D 또는 인터랙티브 데이터' 항목으로 반영됩니다.

Dardo가 3D 웹사이트를 만드는 방식

인터랙티브 3D 웹사이트 서비스로 3D 경험을 디자인하고 구축하며, 더 가벼운 모션과 스크롤 작업은 크리에이티브 디벨롭먼트로 진행합니다. Hyper에서는 React Three Fiber로 흩어진 신호를 하나의 고객 프로필로 엮어 내는 스크롤 기반 3D 스토리를 만들었습니다. 공간이 있어야 이해되는 아이디어가 있다면 알려 주세요.