3D 웹 콘텐츠에서 오브젝트가 사실적으로 보이는 이유는 형태(Geometry)가 아니라 머티리얼과 라이팅 때문입니다. 같은 구체(Sphere)라도 머티리얼과 조명 설정에 따라 금속 공, 고무공, 유리구슬로 전혀 다르게 보입니다. WebGL 셰이더의 기초인 머티리얼과 라이팅 개념을 실무 관점에서 정리합니다.

머티리얼: 표면이 빛에 반응하는 방식

머티리얼은 3D 오브젝트의 표면 속성을 정의합니다. 실무에서 자주 만지는 파라미터는 거칠기(Roughness), 금속성(Metalness), 반사율(Reflectivity) 정도입니다. 거칠기는 0이면 거울처럼 매끈하고 1이면 콘크리트처럼 거칩니다. 금속성은 금속이냐 비금속이냐를 결정하고, 반사율은 빛이 표면에서 얼마나 돌아오는지를 제어합니다.

Three.js의 MeshStandardMaterial이 이 세 값을 모두 받으며, PBR(Physically Based Rendering) 워크플로우의 표준 머티리얼입니다. 텍스처 맵을 붙이면 한 오브젝트 안에서도 부분마다 다른 속성을 표현할 수 있습니다. 노멀 맵으로 미세한 요철을 얹고, AO(Ambient Occlusion) 맵으로 틈새 그림자를 추가하면 폴리곤을 늘리지 않고도 디테일을 키울 수 있습니다.

라이팅: 장면에 생명을 불어넣는 조명

아무리 정교한 머티리얼을 설정해도 조명이 없으면 아무것도 보이지 않습니다. Three.js에서 실무로 가장 많이 쓰는 조합은 DirectionalLight(태양광처럼 평행하게 비추는 주 조명) + AmbientLight(장면 전체를 균일하게 밝혀 그림자가 너무 어두워지는 것을 방지)입니다. 여기에 필요에 따라 PointLight(전구처럼 한 점에서 퍼지는 조명)를 더합니다.

제품 뷰어처럼 사실감이 중요한 씬에서는 HDR Environment Map이 핵심입니다. 실제 환경 사진을 구 형태로 감싸서 반사와 간접 조명을 만들어내는데, 같은 금속 재질이라도 HDR 환경 유무에 따라 인상이 완전히 달라집니다.

PBR이란 무엇인가

PBR은 Physically Based Rendering의 약자로, 빛의 물리적 법칙을 근사해서 렌더링하는 방식입니다. 에너지 보존 법칙에 따라 표면이 반사한 빛의 양과 흡수한 빛의 양의 합이 입사광을 넘지 않도록 설계되어 있어서, 어떤 조명 환경에 놓아도 자연스러운 결과가 나옵니다.

과거의 Phong이나 Blinn-Phong 셰이딩은 조명이 바뀔 때마다 파라미터를 수동으로 만져야 했지만, PBR은 한 번 설정하면 다양한 환경에서 일관되게 사실적으로 보입니다. 현대 게임 엔진과 WebGL이 PBR을 기본값처럼 채택한 이유입니다.

프로덕트 메이커의 실무 최적화

프로덕트 메이커가 구축한 LG ThinQ WebGL(TV, Mobile, PC) 엔진은 월간 활성 사용자 150만 명이 자신의 집에 가전을 3D로 배치하고 제어하는 서비스입니다. TV 리모컨, 모바일 터치, PC 마우스 등 기기마다 입력 방식이 다르고, 특히 TV는 데스크톱보다 GPU 성능이 낮기 때문에 DrawCall 최적화와 셰이더 단순화가 프로젝트 내내 가장 큰 이슈였습니다.

솔직히 말하면, 어떤 3D 엔진을 써도 실제 제품과 완벽하게 똑같이 구현하는 건 불가능합니다. 현실의 라이팅과 재질을 흉내 내는 거지, 완벽하게 재현하는 건 아닙니다. 두코 디지털 카탈로그 프로젝트에서 저희가 한 것은, 가능한 한 실물에 가깝게 만들기 위해 재질 템플릿을 계속 쌓아가고, 클라이언트가 직접 커스터마이징할 수 있는 구조를 제공한 것입니다. 한 번 만들고 끝이 아니라, 지속적으로 재질을 업데이트할 수 있게 해서 시간이 지날수록 퀄리티가 올라가는 구조입니다.

왜 이것이 비즈니스에 영향을 주는가

제품 뷰어에서 머티리얼이 사실적이면 고객은 실물을 보는 것 같은 신뢰를 느끼고, 이는 구매 전환에 영향을 줍니다. 업계에서 자주 인용되는 Shopify 발표에 따르면 3D/AR 뷰어가 있는 상품 페이지에서 전환율이 크게 올라간 사례가 보고되고, IPSOS 조사에서도 3D/AR이 적용된 페이지에서 체류 시간이 크게 늘어난다고 합니다. 수치는 제품군과 트래픽 특성에 따라 편차가 크기 때문에, 저희는 도입 전 후에 퍼널을 직접 측정해 보기를 권합니다.

이보다 체감하기 쉬운 효과는 반품률입니다. 이커머스 반품 사유는 많은 경우 "생각했던 것과 다르게 생겼다", "크기가 예상과 달랐다", "색상이 사진과 다르다"입니다. 사진 10장으로도 안 보이는 각도를 3D 뷰어는 360도 회전·확대로 보여줍니다. 반품률이 몇 퍼센트만 줄어도 쇼핑몰 규모에 따라 연간 비용 효과가 크고, 무엇보다 CS 인력의 부하가 내려갑니다.

최근 저희가 모션데스크를 사려고 여러 제품을 알아본 적이 있습니다. 프로덕트 메이커 개발 데스크 하나에 32인치 모니터를 최대 8대까지 설치하는 환경이라, 모니터암 설치가 필수였습니다. 문제는 많은 모션데스크가 뒷면에 콘센트 모듈이 내장되어 있어서, 모니터암 클램프가 물리적으로 장착되는지 확인해야 했다는 것입니다. 상품 상세 페이지 이미지와 블로그 리뷰 사진을 아무리 뒤져도 뒷면과 하단 구조는 잘 안 보였습니다. 제품 사진은 대부분 정면이나 사용 장면 위주이고, 모니터암이 걸리는 하단 가장자리 같은 부분은 촬영 우선순위가 낮기 때문입니다. 결국 매장에 직접 갔습니다.

만약 3D 뷰어가 있었다면, 데스크를 뒤집어 하단 프레임을 보고 뒷면을 돌려서 콘센트 위치와 클램프 장착 가능성을 눈으로 확인할 수 있었을 겁니다. 3D 뷰어의 본질적인 가치는 "예쁜 정면을 보여주는 것"이 아니라, 사진이 담지 못하는 구조적 정보를 고객 스스로 탐색하게 해 주는 데 있습니다.

디지털 카탈로그 영역에서는 효과가 더 직접적입니다. 종이 카탈로그를 3D 디지털 카탈로그로 바꾸면 신제품 추가 시 인쇄·배포 비용이 사라지고, 해외 바이어에게 실물 샘플을 보내지 않아도 제품을 정밀하게 확인시킬 수 있습니다. 특히 가구·가전·산업 장비처럼 크기와 디테일이 중요한 제품군에서는 셰이더 품질이 곧 고객의 의사결정 근거가 됩니다.