WebGL과 Unity WebGL, 무엇이 다른가요?

핵심 비교 표

앱 크기·로딩 속도

Unity WebGL은 런타임과 에셋이 함께 포함돼 초기 다운로드가 커지기 쉽습니다. Three.js는 필요한 기능만 구성할 수 있지만 실제 용량과 로딩은 에셋·기능·네트워크에 따라 달라집니다.

• Three.js: 라이브러리 + 씬 로딩이 네트워크에 자연스럽게 섞여 첫 화면이 빠르게 표시.
• Unity WebGL: WASM·에셋 번들·데이터 파일이 먼저 내려온 뒤에야 첫 프레임 시작.
• 측정 기준: 실제 용량과 첫 로딩 시간은 대표 기기·씬·네트워크 조건을 정해 측정합니다.

브라우저 호환성·저사양 디바이스

LG ThinQ WebGL 엔진은 webOS TV, 저가 스마트폰까지 타깃으로 했습니다. 이 환경에서는 Unity WebGL 구동이 현실적으로 어렵고, Three.js 기반 커스텀 렌더링이 유일한 선택지였습니다.

• TV·임베디드: 메모리·CPU 제약이 커서 Unity WebGL 구동 곤란.
• 구형 안드로이드: 저가 모델에서 Unity WASM 로딩 중 충돌 빈번.
• Three.js 커스텀: 필요한 기능만 남기고 DrawCall·텍스처를 직접 관리 가능.

SEO·공유 링크·개발 조직

마케팅·이커머스 관점에서 SEO와 공유 링크는 중요한 판단 기준입니다. Three.js WebGL은 HTML 구조 위에 3D 씬이 올라가므로 검색엔진 크롤링과 OG 공유에 강점이 있습니다.

• SEO: Three.js는 Next.js·SSR과 자연스럽게 통합. Unity WebGL은 내부가 WASM이어서 크롤링 제한.
• 공유 링크: Three.js는 페이지 단위 OG 설정 가능. Unity는 캔버스·iframe 구조.
• 개발 조직: Three.js는 일반 React 프론트엔드 개발자 풀과 공유. Unity는 별도 전문가 필요.

언제 Unity WebGL이 유리한가

모든 경우에 Three.js가 우월한 것은 아닙니다. 다음 상황에서는 Unity WebGL이 합리적인 선택입니다.

• 이미 Unity 기반 게임·시뮬레이션 자산이 완성되어 있을 때
• 복잡한 물리 엔진·AI·애니메이션 블렌드가 필수일 때
• 사용자가 고사양 PC 브라우저만 타깃으로 할 때
• 기존 Unity 팀이 있고 웹 배포 채널을 추가하려는 경우

LG ThinQ 사례: MAU 150만 규모 LG ThinQ 서비스의 WebGL 엔진 핵심 개발에서 얻은 선택 기준

저희는 MAU 150만 규모 LG ThinQ 서비스의 WebGL 엔진 핵심 개발에 참여했습니다. 구체적인 성능 수치는 대표 기기·씬·측정 조건이 공개 승인된 경우에만 제시합니다.

• 요구사항의 핵심: webOS TV(저사양 메모리·GPU) + 안드로이드/iOS 모바일 앱 + PC 브라우저 를 동일한 엔진·동일한 에셋 파이프라인으로 지원.
• Unity WebGL 이 탈락한 이유: webOS TV 에서 WASM 로딩·메모리 요구량을 감당할 수 없었고, 모바일 저가 모델에서도 구동 불안정.
• Three.js 선택 근거: 필요한 기능만 구성해 TV·모바일에서 즉시 시작 가능, DrawCall·에셋·프레임 예산을 코드 레벨에서 직접 관리 가능, 플랫폼별 프로파일을 자유롭게 분리.
• 개발 조직 측면: 웹 프론트엔드 개발자 풀과 공유할 수 있어 Unity 전용 팀 이중화가 불필요.

구체 기술 스택·최적화 디테일은 NDA 로 비공개이지만, 이 프로젝트에서 축적된 경험이 프로덕트 메이커의 WebGL 프로젝트 설계 기반이 되었습니다. (자세한 맥락은 LG ThinQ 프로젝트 상세)

결론

• 이커머스·카탈로그·브랜드 캠페인: Three.js WebGL 권장.
• TV·저사양 모바일 동시 지원: Three.js WebGL 사실상 유일한 선택.
• 기존 Unity 게임·시뮬레이션 자산 재활용: Unity WebGL.
• 의사결정 기준은 "누가 얼마나 자주 이 3D를 볼 것인가"입니다. 방문 빈도가 높고 공유가 중요하면 WebGL이 유리합니다.

자주 묻는 질문

Three.js WebGL 과 Unity WebGL 중 어떤 게 빠른가요?

Unity WebGL 은 런타임과 에셋이 함께 포함돼 초기 다운로드가 커지기 쉽습니다. Three.js 는 필요한 기능만 구성할 수 있지만 실제 용량과 로딩은 에셋·기능·네트워크에 따라 달라집니다. 대표 기기·씬·네트워크 조건을 정해 측정한 뒤 비교하세요.

저사양 TV 나 구형 모바일에서도 Unity WebGL 을 쓸 수 있나요?

현실적으로 어렵습니다. webOS TV, 저가 안드로이드 기기에서는 Unity WASM 로딩 중 메모리 부족으로 충돌이 잦습니다. 이 구간 타깃이 필요하면 Three.js 커스텀 렌더링이 사실상 유일한 선택입니다.

Three.js 로 복잡한 물리 엔진이나 게임 로직도 구현 가능한가요?

가능하지만 Unity 대비 직접 구현 비용이 큽니다. 단순한 충돌·물리는 cannon.js · rapier 같은 라이브러리로 충분하지만, 복잡한 물리·AI·애니메이션 블렌딩이 필수라면 Unity 가 합리적입니다.

SEO 와 OG 공유에는 어떤 기술이 유리한가요?

Three.js 가 유리합니다. Next.js·SSR 위에 3D 씬이 올라가 검색엔진이 HTML 을 그대로 인덱싱하고 페이지 단위로 OG 메타를 설정할 수 있습니다. Unity WebGL 은 내부가 WASM·캔버스 구조이므로 크롤링과 공유 메타 구성에 제약이 있습니다.

어떤 경우에 Unity WebGL 선택이 합리적인가요?

이미 Unity 기반 게임·시뮬레이션 자산이 완성되어 있거나, 복잡한 물리·AI 가 필수이고 고사양 PC 브라우저만 타깃일 때 합리적입니다. 기존 Unity 팀이 웹 배포 채널을 추가하는 경우도 포함됩니다.

관련 가이드

• 네이티브 vs Electron: 데스크톱 앱에서도 웹 기술(HTML·CSS·JS) 로 크로스플랫폼을 달성하는 방법. WebGL 선택 배경과 같은 "웹 기술 레버리지" 철학.
• 종이 vs 디지털 카탈로그: 3D WebGL 이 실제 비즈니스에서 어떻게 디지털 카탈로그로 이어지는지. 제품 시각화의 다음 단계.