PC에서 60FPS로 부드럽게 돌아가던 3D 씬이 있었습니다. TV에 올렸더니 10FPS도 나오지 않았습니다. 화면은 버벅거리고, 터치 반응은 수 초 뒤에 오고, 심하면 앱이 그냥 꺼져버렸습니다.

프로덕트 메이커가 LG ThinQ 서비스(MAU 150만 이상)에 WebGL 3D 엔진을 탑재하면서 겪은 현실입니다. TV는 3D 개발자에게 극한의 환경입니다. 이 경험을 바탕으로, 저사양 기기에서 3D를 돌리는 현실적인 방법을 공유합니다.

TV가 왜 이렇게 느린가

TV의 디스플레이는 4K입니다. 해상도만 보면 고급 모니터 수준입니다. 하지만 그 4K 화면을 그리는 GPU는 모바일급입니다. 고급 스마트폰보다 못한 경우도 많습니다.

4K 해상도에 모바일급 GPU. 이것이 TV 환경의 본질입니다.

거기에 더해서:

• 앱 가용 메모리: 200~500MB (PC는 수 GB 이상)
• WebGL 지원: 1.0이 기본 (PC는 2.0)
• 브라우저 엔진: V8 구버전 또는 자체 엔진으로 JS 성능도 낮음
• 입력 장치: 마우스가 아닌 리모컨

PC 기준으로 만든 3D를 그대로 올리면 당연히 안 돌아갑니다.

핵심 최적화 기법

렌더 해상도 분리

가장 효과적인 한 수입니다. 디스플레이는 4K이지만, 3D를 4K로 그릴 필요는 없습니다. 3D 캔버스를 1080p 또는 그 이하로 렌더링하고, CSS로 화면 크기에 맞춰 늘립니다. 픽셀 수가 1/4로 줄어들므로 GPU 부하가 극적으로 감소합니다. 사용자는 2~3미터 떨어져서 TV를 보기 때문에, 해상도 차이를 거의 느끼지 못합니다.

DrawCall 최소화

GPU에 "이걸 그려"라고 요청하는 횟수를 DrawCall이라고 합니다. PC에서 100번 요청해도 괜찮았다면, TV에서는 30번 이하로 줄여야 합니다. 여러 개의 3D 오브젝트를 하나로 합치고, 재질(Material) 종류를 최소화하고, 투명 효과를 가능하면 없애는 방식으로 줄입니다.

텍스처 압축

3D 모델에 입히는 이미지(텍스처)는 메모리를 많이 차지합니다. 1024x1024 이미지 하나가 4MB. TV의 가용 메모리 200MB 안에서 모든 것을 관리해야 하므로, 텍스처 해상도를 512x512 이하로 제한하고, GPU 압축 포맷을 사용합니다. 압축만으로 메모리 사용량을 1/4로 줄일 수 있습니다.

셰이더 단순화

3D의 시각적 품질을 결정하는 셰이더(조명, 반사 처리)를 단순화합니다. PBR(물리 기반 렌더링) 대신 가벼운 방식을 쓰고, 실시간 그림자를 제거하고, 블룸이나 SSAO 같은 후처리 효과를 빼는 것입니다. 시각적으로는 아쉽지만, 성능은 수 배 좋아집니다.

필요할 때만 렌더링

사용자가 조작하지 않는 동안에는 3D를 다시 그리지 않습니다. PC에서는 매 프레임 렌더링해도 문제없지만, TV에서는 불필요한 렌더링이 발열과 프레임 저하의 원인이 됩니다. 사용자가 리모컨을 누를 때만 렌더링하고, 정지 상태에서는 GPU를 쉬게 합니다.

기기별 품질 분기

모든 기기에서 동일한 품질을 제공하려고 하면 안 됩니다. 기기 성능을 감지해서 품질 레벨을 자동으로 분기합니다.

• PC: 최고 품질, PBR 렌더링, 고해상도 텍스처
• 모바일: 중간 품질, 렌더 해상도 75%, 텍스처 축소
• TV: 최저 품질, 렌더 해상도 50%, 단순 셰이더, DrawCall 30 이하

같은 3D 콘텐츠를 기기에 따라 다르게 보여주는 것. 모든 사용자에게 "자기 기기에서 최선의 경험"을 제공하는 것이 목표입니다.

메모리 크래시라는 현실

TV에서 메모리가 초과되면 경고 없이 앱이 종료됩니다. PC처럼 느려지는 것이 아니라, 그냥 꺼집니다. 메모리 사용량을 실시간으로 모니터링하고, 임계치에 접근하면 텍스처 품질을 자동으로 낮추는 방어 로직이 필수입니다.

이런 경험은 문서에 나오지 않습니다. 실제로 TV에 올려보고, 크래시를 겪고, 해결한 팀만이 가진 노하우입니다.

*TV/저사양 기기를 포함한 WebGL 프로젝트에 대해 상담이 필요하시다면, 프로젝트 상담을 통해 문의해 주세요.*