Blog·인사이트

TV 환경에서의 WebGL: webOS 최적화 실전기

··6분 읽기
요약

WebGL을 TV에 올리면 무엇이 달라질까요? 같은 브라우저 기반이지만 TV 환경은 PC와 근본적으로 다른 하드웨어 제약을 가집니다.

WebGL을 TV에 올리면 무엇이 달라질까요? 같은 브라우저 기반이지만 TV 환경은 PC와 근본적으로 다른 하드웨어 제약을 가집니다. LG ThinQ WebGL 엔진을 webOS TV에 배포하며 쌓은 경험을 바탕으로, TV WebGL 최적화의 실전 원칙을 정리합니다.

TV WebGL vs PC WebGL

· 항목 · PC · TV ·

· --- · --- · --- ·

· GPU · 전용 그래픽카드 · 내장 모바일급 GPU ·

· 메모리 · 8~32GB · 1~2GB (OS 공유) ·

· 앱 가용 메모리 · 거의 무제한 · 200~500MB ·

· JS 엔진 성능 · V8 최신 · V8 구버전 or 자체 엔진 ·

· WebGL 버전 · WebGL 2.0 · WebGL 1.0 (일부 2.0) ·

· 해상도 · 1080p~4K · 4K (렌더링 비용 큼) ·

핵심은 "4K 해상도에 모바일급 GPU"라는 극한의 조합입니다.

최적화 원칙

1. 렌더 해상도 분리

디스플레이는 4K이지만 WebGL 캔버스를 4K로 렌더링할 필요는 없습니다. 렌더 해상도를 절반(1080p) 또는 그 이하로 낮추고 CSS로 스케일 업합니다.

// 4K TV에서 1080p로 렌더링
const scale = 0.5; // 렌더 해상도 비율
renderer.setSize(window.innerWidth * scale, window.innerHeight * scale);
renderer.domElement.style.width = '100%';
renderer.domElement.style.height = '100%';

픽셀 수가 1/4로 줄어 Fragment Shader 부하가 극적으로 감소합니다. 사용자 시청 거리(2~3m)에서는 해상도 차이가 거의 인지되지 않습니다.

2. DrawCall 극한 최적화

PC에서 200개 수준의 DrawCall이 문제없다면, TV에서는 30~60개 이하를 목표로 잡아야 합니다. 저사양 TV일수록 30개 이하로 조여야 합니다.

  • 모든 정적 오브젝트를 단일 메시로 병합
  • Material 종류를 최소화 (아틀라스 적극 활용)
  • 투명(alpha) 오브젝트 최소화 (알파 블렌딩은 DrawCall + 소팅 비용)
  • UI 오버레이는 HTML/CSS로 분리 (WebGL로 UI를 그리지 않음)

3. 텍스처 메모리 관리

TV의 앱 가용 메모리는 200~500MB이고, 이 안에 JS 힙, DOM, WebGL 텍스처가 모두 들어가야 합니다.

메모리 버짓 예시 (가용 400MB 기준)
- OS/브라우저 오버헤드: 150MB
- JS 힙 + DOM: 50MB
- WebGL 텍스처: 150MB (실질 예산)
- 여유: 50MB

텍스처 예산 150MB 안에서 모든 에셋을 관리해야 합니다. 1024x1024 RGBA 텍스처 하나가 4MB이므로 약 37장이 한계입니다.

전략:

  • 텍스처 해상도를 512x512 이하로 제한
  • GPU 압축 포맷(ETC1/ETC2) 사용 → 메모리 1/4
  • 동시 로드 텍스처 수 제한 + 비활성 텍스처 해제
  • 밉맵(Mipmap) 생성 비활성화 (메모리 33% 절감, 대신 에일리어싱 감수)

4. 셰이더 단순화

TV GPU는 복잡한 Fragment Shader에 매우 취약합니다.

  • PBR(물리 기반 렌더링) 대신 Phong 또는 커스텀 라이트 셰이더 사용
  • 실시간 그림자 제거 → 베이크된 그림자 텍스처로 대체
  • 포스트 프로세싱(블룸, SSAO 등) 제거 또는 극도로 단순화
  • 반사/환경맵 해상도를 64x64 이하로

5. 렌더 루프 제어

PC에서는 requestAnimationFrame으로 매 프레임 렌더링하지만, TV에서는 변화가 없으면 렌더링을 멈추는 것이 좋습니다.

let needsRender = true;

function onUserInteraction() {
    needsRender = true;
}

function animate() {
    requestAnimationFrame(animate);
    if (needsRender) {
        renderer.render(scene, camera);
        needsRender = false; // 다음 인터랙션까지 정지
    }
}

정적 상태에서의 불필요한 GPU 사용을 줄이고, 발열과 배터리(포터블 디바이스) 문제도 완화됩니다.

TV 전용 이슈

리모컨 입력

TV에는 마우스가 없습니다. 리모컨의 방향키와 확인 버튼으로 3D 씬 내 인터랙션을 설계해야 합니다. 포커스 시스템을 직접 구현하거나, 포인터 커서 모드가 있는 TV의 경우 마우스 이벤트로 매핑됩니다.

메모리 크래시

TV에서 메모리를 초과하면 경고 없이 앱이 종료됩니다. PC처럼 스왑 메모리가 없으므로, 메모리 사용량을 실시간으로 모니터링하고 임계치 접근 시 에셋 품질을 자동으로 낮추는 방어 로직이 필요합니다.

WebGL 확장 지원

TV 브라우저는 PC 대비 WebGL 확장(Extensions) 지원이 제한적입니다. WEBGL_compressed_texture_etc, OES_texture_float 등 사용하려는 확장이 지원되는지 반드시 사전 확인해야 합니다.

const gl = renderer.getContext();
const extensions = gl.getSupportedExtensions();
console.log('지원 확장:', extensions);

디바이스별 분기 전략

모든 디바이스에서 동일한 품질을 제공하는 것은 불가능합니다. 디바이스 성능에 따라 품질 레벨을 분기합니다.

function getQualityLevel() {
    const gl = renderer.getContext();
    const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
    const gpuRenderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);

    // TV 환경 감지
    if (navigator.userAgent.includes('Web0S') || navigator.userAgent.includes('Tizen')) {
        return 'low';
    }
    // 모바일
    if (/Mobile|Android|iPhone/.test(navigator.userAgent)) {
        return 'medium';
    }
    return 'high';
}

· 레벨 · 렌더 해상도 · DrawCall 목표 · 텍스처 해상도 · 셰이더 ·

· --- · --- · --- · --- · --- ·

· High (PC) · 네이티브 · 200 이하 · 2048 · PBR ·

· Medium (모바일) · 0.75x · 80 이하 · 1024 · Phong ·

· Low (TV) · 0.5x · 30 이하 · 512 · Basic ·

정리

TV WebGL 최적화는 "제약 안에서의 기술"입니다. 무한한 리소스가 아닌, 극도로 제한된 환경에서 최선의 결과를 만들어내는 과정이 오히려 개발자를 성장시킵니다.

핵심을 다시 정리하면:

  • 렌더 해상도를 낮추고 CSS로 스케일 업
  • DrawCall 30~60개 이하, 텍스처 예산 150MB 이하
  • 복잡한 셰이더와 포스트 프로세싱은 버린다
  • 변화가 없으면 렌더링을 멈춘다
  • 디바이스별로 품질을 분기한다

다음 글에서는 WebGL이 E-Commerce에서 전환율을 어떻게 높이는지, 실제 프로젝트 사례와 함께 다루겠습니다.


WebGL, TV, webOS, LG, 최적화, 저사양
다른 포스팅
Blog·인사이트

TV 환경에서의 WebGL: webOS 최적화 실전기

··6분 읽기

WebGL을 TV에 올리면 무엇이 달라질까요? 같은 브라우저 기반이지만 TV 환경은 PC와 근본적으로 다른 하드웨어 제약을 가집니다. LG ThinQ WebGL 엔진을 webOS TV에 배포하며 쌓은 경험을 바탕으로, TV WebGL 최적화의 실전 원칙을 정리합니다.

TV WebGL vs PC WebGL

· 항목 · PC · TV ·

· --- · --- · --- ·

· GPU · 전용 그래픽카드 · 내장 모바일급 GPU ·

· 메모리 · 8~32GB · 1~2GB (OS 공유) ·

· 앱 가용 메모리 · 거의 무제한 · 200~500MB ·

· JS 엔진 성능 · V8 최신 · V8 구버전 or 자체 엔진 ·

· WebGL 버전 · WebGL 2.0 · WebGL 1.0 (일부 2.0) ·

· 해상도 · 1080p~4K · 4K (렌더링 비용 큼) ·

핵심은 "4K 해상도에 모바일급 GPU"라는 극한의 조합입니다.

최적화 원칙

1. 렌더 해상도 분리

디스플레이는 4K이지만 WebGL 캔버스를 4K로 렌더링할 필요는 없습니다. 렌더 해상도를 절반(1080p) 또는 그 이하로 낮추고 CSS로 스케일 업합니다.

// 4K TV에서 1080p로 렌더링
const scale = 0.5; // 렌더 해상도 비율
renderer.setSize(window.innerWidth * scale, window.innerHeight * scale);
renderer.domElement.style.width = '100%';
renderer.domElement.style.height = '100%';

픽셀 수가 1/4로 줄어 Fragment Shader 부하가 극적으로 감소합니다. 사용자 시청 거리(2~3m)에서는 해상도 차이가 거의 인지되지 않습니다.

2. DrawCall 극한 최적화

PC에서 200개 수준의 DrawCall이 문제없다면, TV에서는 30~60개 이하를 목표로 잡아야 합니다. 저사양 TV일수록 30개 이하로 조여야 합니다.

  • 모든 정적 오브젝트를 단일 메시로 병합
  • Material 종류를 최소화 (아틀라스 적극 활용)
  • 투명(alpha) 오브젝트 최소화 (알파 블렌딩은 DrawCall + 소팅 비용)
  • UI 오버레이는 HTML/CSS로 분리 (WebGL로 UI를 그리지 않음)

3. 텍스처 메모리 관리

TV의 앱 가용 메모리는 200~500MB이고, 이 안에 JS 힙, DOM, WebGL 텍스처가 모두 들어가야 합니다.

메모리 버짓 예시 (가용 400MB 기준)
- OS/브라우저 오버헤드: 150MB
- JS 힙 + DOM: 50MB
- WebGL 텍스처: 150MB (실질 예산)
- 여유: 50MB

텍스처 예산 150MB 안에서 모든 에셋을 관리해야 합니다. 1024x1024 RGBA 텍스처 하나가 4MB이므로 약 37장이 한계입니다.

전략:

  • 텍스처 해상도를 512x512 이하로 제한
  • GPU 압축 포맷(ETC1/ETC2) 사용 → 메모리 1/4
  • 동시 로드 텍스처 수 제한 + 비활성 텍스처 해제
  • 밉맵(Mipmap) 생성 비활성화 (메모리 33% 절감, 대신 에일리어싱 감수)

4. 셰이더 단순화

TV GPU는 복잡한 Fragment Shader에 매우 취약합니다.

  • PBR(물리 기반 렌더링) 대신 Phong 또는 커스텀 라이트 셰이더 사용
  • 실시간 그림자 제거 → 베이크된 그림자 텍스처로 대체
  • 포스트 프로세싱(블룸, SSAO 등) 제거 또는 극도로 단순화
  • 반사/환경맵 해상도를 64x64 이하로

5. 렌더 루프 제어

PC에서는 requestAnimationFrame으로 매 프레임 렌더링하지만, TV에서는 변화가 없으면 렌더링을 멈추는 것이 좋습니다.

let needsRender = true;

function onUserInteraction() {
    needsRender = true;
}

function animate() {
    requestAnimationFrame(animate);
    if (needsRender) {
        renderer.render(scene, camera);
        needsRender = false; // 다음 인터랙션까지 정지
    }
}

정적 상태에서의 불필요한 GPU 사용을 줄이고, 발열과 배터리(포터블 디바이스) 문제도 완화됩니다.

TV 전용 이슈

리모컨 입력

TV에는 마우스가 없습니다. 리모컨의 방향키와 확인 버튼으로 3D 씬 내 인터랙션을 설계해야 합니다. 포커스 시스템을 직접 구현하거나, 포인터 커서 모드가 있는 TV의 경우 마우스 이벤트로 매핑됩니다.

메모리 크래시

TV에서 메모리를 초과하면 경고 없이 앱이 종료됩니다. PC처럼 스왑 메모리가 없으므로, 메모리 사용량을 실시간으로 모니터링하고 임계치 접근 시 에셋 품질을 자동으로 낮추는 방어 로직이 필요합니다.

WebGL 확장 지원

TV 브라우저는 PC 대비 WebGL 확장(Extensions) 지원이 제한적입니다. WEBGL_compressed_texture_etc, OES_texture_float 등 사용하려는 확장이 지원되는지 반드시 사전 확인해야 합니다.

const gl = renderer.getContext();
const extensions = gl.getSupportedExtensions();
console.log('지원 확장:', extensions);

디바이스별 분기 전략

모든 디바이스에서 동일한 품질을 제공하는 것은 불가능합니다. 디바이스 성능에 따라 품질 레벨을 분기합니다.

function getQualityLevel() {
    const gl = renderer.getContext();
    const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
    const gpuRenderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);

    // TV 환경 감지
    if (navigator.userAgent.includes('Web0S') || navigator.userAgent.includes('Tizen')) {
        return 'low';
    }
    // 모바일
    if (/Mobile|Android|iPhone/.test(navigator.userAgent)) {
        return 'medium';
    }
    return 'high';
}

· 레벨 · 렌더 해상도 · DrawCall 목표 · 텍스처 해상도 · 셰이더 ·

· --- · --- · --- · --- · --- ·

· High (PC) · 네이티브 · 200 이하 · 2048 · PBR ·

· Medium (모바일) · 0.75x · 80 이하 · 1024 · Phong ·

· Low (TV) · 0.5x · 30 이하 · 512 · Basic ·

정리

TV WebGL 최적화는 "제약 안에서의 기술"입니다. 무한한 리소스가 아닌, 극도로 제한된 환경에서 최선의 결과를 만들어내는 과정이 오히려 개발자를 성장시킵니다.

핵심을 다시 정리하면:

  • 렌더 해상도를 낮추고 CSS로 스케일 업
  • DrawCall 30~60개 이하, 텍스처 예산 150MB 이하
  • 복잡한 셰이더와 포스트 프로세싱은 버린다
  • 변화가 없으면 렌더링을 멈춘다
  • 디바이스별로 품질을 분기한다

다음 글에서는 WebGL이 E-Commerce에서 전환율을 어떻게 높이는지, 실제 프로젝트 사례와 함께 다루겠습니다.


WebGL, TV, webOS, LG, 최적화, 저사양
다른 포스팅
WebGL프로젝트 상담