Case Study · LG ThinQ
LG ThinQ WebGL 엔진 — MAU 150만 규모 웹 3D
LG ThinQ는 스마트홈 가전을 제어·시각화하는 LG전자의 플랫폼입니다. 프로덕트 메이커는 ThinQ의 웹 3D 엔진을 Three.js 기반으로 구축했고, TV·모바일·PC에서 월간 활성 사용자 150만 명 규모로 안정적으로 운영되었습니다.
MAU 150만월간 활성 사용자
3 플랫폼TV·모바일·PC
webOS저사양 TV 구동
Three.js순수 WebGL 스택
Challenge — 직면한 문제
LG ThinQ는 가전의 상태를 3D로 시각화하고 사용자가 각 기기를 선택·제어할 수 있는 경험을 제공해야 했습니다. 이를 위한 기술 과제는 다음과 같았습니다.
- 멀티 플랫폼: webOS TV, 안드로이드·iOS 모바일 웹, PC 브라우저 동시 지원.
- 저사양 TV: webOS TV는 PC 대비 메모리·GPU가 크게 제한됨.
- 대규모 트래픽: 월간 활성 사용자 150만 명, 세션 폭주 시에도 안정.
- 다수 3D 에셋: 수십~수백 종 가전 모델을 동시에 로드·캐싱.
- 장기 운영: 제품 라인업 추가에 따라 에셋·씬이 지속적으로 확장.
Solution — 해결 방식
Three.js 기반 순수 WebGL로 엔진 아키텍처를 설계하고, TV·모바일·PC 각 플랫폼별 프로파일을 명시적으로 관리했습니다.
플랫폼 프로파일
TV·모바일·PC별 텍스처 해상도·LOD·섀도우 품질을 구성으로 분리.
DrawCall 최소화
머티리얼 병합·InstancedMesh로 DrawCall을 대폭 절감.
에셋 파이프라인
glTF + Draco·Meshopt + KTX2 텍스처로 파일·메모리 최적화.
지연 로딩·캐싱
뷰포트·사용자 행동 기반 지연 로딩, 재방문 캐시 재활용.
모듈형 씬 구성
신규 가전 추가 시 에셋만 올리면 자동으로 엔진에 편입.
프레임 예산 관리
requestIdleCallback으로 무거운 연산을 분산해 버벅임 제거.
Result — 결과
- MAU 150만 규모의 서비스에서 장기간 안정적으로 구동.
- webOS TV에서도 핵심 씬 60fps 구동 목표 달성.
- 제품 라인업 확장 시 에셋 추가 비용만 발생, 엔진 재설계 불필요.
- 모바일 초기 로딩을 경량 번들 + Draco 압축으로 수 초 내로 단축.
- 이후 타 WebGL 프로젝트(디지털 카탈로그·BIM)의 표준 파이프라인이 됨.
Tech Stack — 기술 스택
| 영역 | 기술 |
|---|---|
| 렌더링 | Three.js · WebGL1/2 |
| 에셋 | glTF · Draco · Meshopt · KTX2 |
| 프론트엔드 | Next.js · React · TypeScript |
| 플랫폼 | webOS TV · Android · iOS · PC 브라우저 |
| 배포 | CDN · GCS |
이 사례에서 검증된 파이프라인은 현재 프로덕트 메이커의 모든 WebGL·3D 프로젝트의 기본 구조로 사용됩니다.
프로젝트 상담
구체적인 요구사항을 알려주시면 1~3영업일 내 제안서로 회신드립니다.
프로젝트 상담하기