Unity 검색

Unity ArtEngine으로 제작하는 극사실적인 제품 시각화

2021년 7월 27일 산업 분야 | 15 분 소요
Image of an office rendered in Unity
Image of an office rendered in Unity
다루는 주제
공유

사무용 가구 제작업체는 고객 경험 개선에 3D 제품 시각화 기술을 어떻게 활용할 수 있을까요? 가구 회사 Flokk은 맞춤형이라는 제품의 특성을 고려하여 자사의 웹 플랫폼 전체를 개편하기로 결정했습니다. 이번 프로젝트의 핵심은 Flokk의 의자 머티리얼을 모두 디지털화해서 3D 모델로 바꾸는 것으로, 신뢰할 수 있는 솔루션 파트너인 Forte Digital과 Unity ArtEngine을 활용한 스캐닝 워크플로를 통해 작업이 진행되었습니다. 

 

Flokk의 사실적인 제품 시각화를 지원하는 Unity ArtEngine

Flokk은 고급 사무용 가구 디자인 및 제조 시장을 선도하는 기업입니다. Flokk의 제품은 80개국 이상에서 판매되며, HÅG, Offecct, Giroflex, RH, Profim, 9to5 Seating, BMA, RBM, Malmstolen 등의 브랜드를 보유하고 있습니다. 2,000명의 직원이 매일 '위대한 일에 영감을 불어넣다(Inspire great work)'라는 공통의 비전을 실현하기 위해 협력하고 있습니다.

이 콘텐츠는 Targeting Cookies 카테고리를 수락해야만 동영상을 시청할 수 있도록 허용하는 타사 제공업체에서 호스팅합니다. 이러한 제공업체의 비디오를 보려면 쿠키 환경 설정에서 Targeting Cookies 카테고리를 수락하시기 바랍니다.

디자인은 Flokk 제품의 핵심입니다. 매우 효율적인 공급망과 제조 공정 덕분에 각 제품의 커스터마이징이 가능합니다. 하지만 디자인이 항상 온라인 고객 경험의 중심에 있던 것은 아니었습니다. 2019년에 Flokk은 믿을 수 있는 파트너인 Forte Digital과 함께 새로운 전자상거래 플랫폼에 대대적으로 투자하여 변화를 꾀하기로 했습니다. 핵심 작업은 Unity ArtEngine을 사용하여 의자 제품의 머티리얼을 디지털화하고 고객이 익숙한 웹 브라우저 내에서 의자를 3D로 디자인할 수 있도록 사내에서 개발한 3D 컨피규레이터에 통합하는 것이었습니다.

Image of a blue room with a wooden desk and blue chairs.

그 결과는 다음과 같습니다.

  • 온라인 셀프 서비스 결제 지원으로 웹 트래픽 증가 
  • 3D 컨피규레이터로 고해상도 사진을 생성하면서 실제 사진 촬영이 불필요해짐에 따라 내부 효율성 개선 
  • 주문 환경의 안정성 향상으로 주문 오류 및 반품이 줄어들고 딜러와 고객의 만족도 향상 
  • Flokk의 디자인 가치를 제품뿐 아니라 고객 경험의 모든 단계에 통합하여 Flokk 브랜딩 및 포지셔닝에 일관성 확보
  • 실시간 3D 기술에 대한 투자가 활발하지 않은 기존 산업과의 차별화를 통해 지속 가능한 경쟁 우위 확보

최고의 고객 경험에 대한 투자가 가진 잠재력

맞춤 제작되는 Flokk의 의자는 매우 다양하게 구성할 수 있으므로 회사의 공급망과 주문 프로세스를 매우 복잡하게 만듭니다. 예를 들어 사무용 의자 모델인 SKU의 경우, 고객은 수십 가지 패브릭 중 하나를 고르고 의자 크기, 리프트, 발 받침, 바퀴를 고를 수 있으며 목 받침대와 팔 받침대 같은 추가 액세서리를 더할 수 있습니다. 이러한 경험은 자동차를 구매하는 과정과 크게 다르지 않습니다.

Image of office chair hardware and parts.

디자인은 Flokk이 추구하는 핵심 가치입니다. Flokk은 고객이 원하는 아름답고 견고한 고품질 제품을 제작한다는 자부심을 가지고 있습니다. (실제로 Flokk의 사무용 의자 하나 가격은 미화 700~2,000달러에 달합니다.) 고객은 온라인 주문 경험뿐 아니라 이 회사와의 모든 접점에서 품질과 디자인에 대한 Flokk의 가치가 드러나길 기대합니다.

Image of a rose colored office with green office chairs.

하지만 2019년 이전에는 Flokk이 제공한 웹 환경이 다소 정돈되지 않은 상태였습니다. 정적인 콘텐츠로 인해 고객의 관심을 유발하기 어려운 문제도 있었습니다. 최근에 체결한 인수 계약으로 인해 일관성과 제어 문제가 한층 가중되기도 했습니다. 기존 웹사이트 인프라는 확장성이 낮아 브랜드와 제품이 추가되며 발생한 복잡성에 대응하지 못했으며, 결국 고객 경험의 질이 떨어지게 되었습니다. Flokk에는 온라인 셀프 서비스 채널도 없었습니다.

Flokk의 전자상거래 관리자인 Martina Winsell은 “딜러와 고객 모두가 Flokk의 제품을 온라인으로 살펴보고 필요에 따라 어떻게 커스터마이징할 수 있는지를 확인하고 싶어 한다는 것을 알았습니다”라고 전했습니다. “제품이 상당히 복잡하기 때문에 앞으로의 상황을 고려하면 사용성에 중점을 두는 것이 중요했습니다.”

전자상거래 플랫폼이 개선되기를 원하는 고객들이 아주 많았으며, 프로젝트 목표는 야심차고 명확했습니다. 바로 셀프 서비스 채널을 활용하고 간접 판매 도구의 제작을 지원하며, 회사의 제품 포트폴리오에 따라 확장 가능하면서도 최적의 사용자 경험을 촉진하는 공통의 인프라를 설계하는 것이었습니다.

실제 제품을 3D로 시각화하기 위한 토대 마련

투자 결정 이후에는 신뢰할 수 있는 파트너를 찾아 나섰습니다. 

기술과 디자인, 전략 분야를 아우르는 Forte Digital은 고객과의 장기적인 파트너십을 통해 디지털 제품과 서비스를 구축하는 컨설팅 회사입니다. Forte Digital의 포트폴리오에는 Farmasiet(노르웨이 최대의 온라인 약국), Nationaltheatret(세계적으로 유명한 극장), Gyldendal Akademisk(대형 학술 출판사), NorgesGruppen(노르웨이 최대의 소매업체)과 같은 다양한 산업의 기업이 포함됩니다.

분야를 넘나드는 Forte Digital의 전문성은 고객을 위해 지속 가능한 솔루션을 성공적으로 구축하기 위한 핵심이 되어 왔습니다. Flokk 역시 자사의 목표 달성에 도움을 줄 수 있는 파트너의 선택에서 이러한 전문성에 주목했고, 결국 Forte Digital을 파트너로 선정하게 되었습니다.

프로젝트의 중심에는 '컨피규레이터'라는 공통의 제품 시각화 인프라가 있으며, 이 인프라는 Flokk의 제품과 수많은 조합을 정확하게 표시하여 고객이 대면하는 웹사이트나 딜러를 위한 새로운 툴 Flokk Hub, 기타 영업 및 마케팅 도구와 같은 다양한 웹 플랫폼에 배포하기 위해 제작하였습니다.

Green circle chart showing how to design the new website.

확장성과 효율성이라는 Flokk의 목표를 고려했을 때, 모든 의자와 구성을 모든 각도에서 실제로 촬영하는 상당한 시간과 비용이 소요될 수 밖에 없는 방식과 비교하면 3D 기반의 컨피규레이터를 채택하는 편이 유리했습니다. 

컨피규레이터를 제작한 후 다음 단계는 수많은 의자 머티리얼의 디지털화를 비롯해 Flokk이 가상의 환경에서 제품을 선보일 수 있도록 하는 것이었습니다.

ArtEngine을 활용한 머티리얼의 디지털화

Flokk의 머티리얼을 정확하게 표현하는 것이 가장 중요한 사항이었으므로 스캐닝 워크플로를 사용하여 수백 가지 의자 머티리얼의 디지털 트윈을 만들었습니다. 소프트웨어를 사용하여 머티리얼을 절차적으로 처음부터 생성하거나, 공개된 머티리얼 라이브러리에서 스캔본을 구입하는 대안도 있었습니다. 하지만 실물에 가장 가까운 결과물을 얻는 유일한 방법은 Flokk의 머티리얼을 직접 스캔하는 것이었습니다.

프로젝트 팀에서는 광도 양안법이라는 스캐닝 워크플로를 사용하기로 했는데, 이 기법을 사용하면 다양한 빛 조건에서 촬영한 여러 장의 사진을 사용하여 피사체의 표면 속성을 캡처할 수 있습니다. 광도 양안법을 사용하면 일반적인 평판 스캐너와 마찬가지로 알베도 데이터(색상)를 얻을 수 있으며, 여기에 더해 노멀(표면의 양각 패턴)과 때로는 반사성 및 조도에 관한 데이터도 추출할 수 있습니다. 이러한 데이터는 산업 표준 형식인 물리 기반 렌더링(PBR) 머티리얼을 만들 때 반드시 입력해야 하는 정보입니다.

Gif of how unity lighting works

디지털화해야 하는 머티리얼의 수가 많았으므로 프로세스를 최대한 자동화하고 일관되게 유지해야 했습니다. Forte Digital의 3D 아티스트인 Piotr Bieryt는 완전히 자동화된 커스텀 릭을 만들고 ArtEngine을 사용하여 스캔본을 처리하기로 했습니다.

prototype rig using laser-cut plywood and 3D-printed elements

레이저로 자른 합판과 3D 프린터로 제작한 구성물을 사용해 릭을 조립한 후, Bieryt는 변색과 빛 반사를 방지하기 위해 프로토타입의 내장을 검은 벨루어로 덮고 아래에서 조명을 비춰 투명함을 포착해내기 위해 하단에 검정색 탈착식 플레이트를 설치했습니다. 이 릭은 Arduino로 제어되도록 구성되었습니다.

Bieryt는 "뭔가를 만들고 자동화하는 작업은 정말 즐겁습니다"라고 말합니다.

Bieryt는 60mm 매크로 렌즈를 장착한 Olympus 16 MP 미러리스 카메라(Micro Four Thirds 시스템)를 사용하여 Flokk 패브릭의 미세한 부분까지 캡처했으며, 정확한 화이트 밸런스와 컬러를 위해 RAW로 촬영했습니다. 색상 보정 후 Bieryt는 ArtEngine으로 작업을 시작했습니다.

ArtEngine을 사용한 Bieryt의 일상적인 워크플로를 간략하게 소개하면 다음과 같습니다.

아래 예시의 샘플은 Flokk 의자 중 하나에서 가져온 10x10cm 면적의 반투명 패브릭 견본입니다. 머티리얼을 디지털화할 경우 투명성에는 추가적인 투명성 채널이 필요하기 때문에 문제가 복잡해집니다. 이를 해결하기 위해 Bieryt는 패브릭을 두 번 스캔했는데, 한 번은 일반적인 표준 광도 양안법 캡처 과정과 같이 측면에서 빛을 비춰서 촬영하고, 또 한 번은 투명성을 캡처하기 위해 하단에서 빛을 비춰 촬영했습니다.

ArtEngine으로 가져온 후 두 이미지 세트 각각을 Multi-Angle to Texture 노드에 연결하여 16개의 이미지를 세 가지 맵인 알베도, 노멀, 투명에 결합했습니다.

 

Image demonstrating the art engine texture node with albedo, normal, and transparent textures.

그런 다음 알베도 및 노멀 맵 모두에 Gradient Removal(Photoshop의 High Pass 필터와 유사)을 적용하여 눈에 띄는 그레디언트를 없애고 반복적인 타일 느낌을 개선했습니다.

Image showing a before and after of adding a texture gradient to speakers in ArtEngine
Image showing the process of merging textures in ArtEngine.

Compose Material을 적용하여 세 개의 맵을 하나의 머티리얼로 병합한 후 Bieryt는 Pattern Unwarp로 패브릭의 자연스러운 왜곡을 수정했습니다. Bieryt는 “후처리에 드는 시간을 줄이기 위해 시간을 들여 스캔 전에 샘플을 잘 펴는 것이 좋습니다. 하지만 주름을 모두 제거할 수 없다면 ArtEngine을 이용하여 사후에 효과적으로 수정할 수 있습니다”라고 말합니다.

Image showing texture before pattern warp and after pattern warp in ArtEngine

그런 다음 Bieryt는 Crop 을 사용해 펴진 텍스처의 일부분을 종횡비가 1:1인 프레임으로 설정했습니다. 아래 노드 그래프를 참고하세요.

Image describing how the ArtEngine mutation structure works.

다음은 Mutation Structure를 사용했습니다. 이 노드는 기본 패턴 구조는 그대로 유지하면서 AI로 반복되는 패턴을 인식해서 없애는 방식으로 타일링을 한층 더 개선해줍니다.

Bieryt는 “Mutation Structure는 ArtEngine이 펼치는 마법입니다. 소프트웨어나 알고리즘과 씨름하는 대신, 스캐닝의 예술적인 측면에 더 집중할 수 있도록 만들어 준 아주 혁신적인 도구입니다”라고 극찬했습니다.

Image showing how ArtEngine's mutation structure changes the 3D model's appearance.
Image showing how to adjust output dimensions in ArtEngine.

월드 스케일 요소와 출력 크기 등 몇 가지 파라미터만 추가로 조정하여, 10x10cm로 스캔한 샘플보다 6배 크고, 눈에 띄는 타일링 아티팩트가 없으며, 고도로 정밀한 8K 텍스처를 얻을 수 있었습니다.

Image showing the world scale, pattern map, and mutation structure settings in ArtEngine.

마지막으로 Height GenerationRoughness / Gloss Generation으로 높이 및 거칠기 맵과 최종 Compose Material을 만들어 모든 것을 쉽게 익스포트할 수 있도록 컴파일했습니다.

Image of the compose material process inside of ArtEngine.

아래는 최종 노드 그래프입니다.

Final node graph of all the textures used by Bieryt and team in ArtEngine.

색상만 다른 머티리얼의 경우에는 한 번만 스캔했으며, Blender Cycles에서 동일한 패브릭의 다양한 색상을 만들고 머티리얼을 3D 의자 모델에 적용한 다음 최종 렌더링을 진행했습니다.

Image showing a green office chair, blue office chair, and grey office chair

모든 것을 하나로

새로운 프로젝트가 시작된 지 얼마 지나지 않아 Flokk은 이미 가시적인 결과를 확인할 수 있었습니다. 국가별 온라인 결제가 출시되면서 회사의 웹 트래픽이 크게 증가했습니다. 딜러와 고객의 만족도가 높아졌으며 브랜드 충성도와 평판도 함께 상승했습니다. 또한 수동 주문 처리에 따르는 오버헤드 비용도 줄어들었습니다.

고객용 웹사이트인 Flokk.com을 살펴보면 개선 사항이 가장 잘 구현되어 있는 것을 확인할 수 있습니다. 사용자는 관심 있는 의자를 선택한 후 거의 모든 요소를 커스터마이징할 수 있으며, 원하는 구성을 다양한 거리와 각도에서 확인할 수 있고, 온라인 주문을 결정하기 전에 특정 기능을 변경하는 데 따르는 비용을 파악할 수도 있습니다.

Image showing the new layout of the Flokk website
Image showing the updated chair textures created with ArtEngine

Flokk은 국가별 웹사이트에서 지속적으로 셀프 서비스 기능을 확장하고 영업 팀과 고객을 위한 새로운 도구를 배포하는 등 프로젝트는 여전히 진행 중입니다. 일례로, 현재의 이니셔티브 중 하나는 매장에서도 Flokk 제품을 손쉽게 찾고 주문할 수 있도록 전 세계 쇼룸에 비치된 iPad에 "쇼룸 모드" 앱을 설치하여 컨피규레이터를 활용할 수 있도록 하는 것입니다.

이번 작업은 온라인을 더 편하게 여기는 고객들의 변화하는 선호도에 적응하며, 웹 또는 앱을 통해 구매할 수 있게 만드는 방식으로 고객 경험에 투자하는 것이 얼마나 중요한지에 대해 회사 전체에 제시했습니다. Flokk은 특히 전체적인 사용자 경험에 대한 투자가 적은 가구 제조업과 같은 산업에서 탁월한 경쟁력을 갖추게 되었습니다. 향후 투자 결정에 있어서도 고객 경험을 가장 우선순위에 두기로 결정함으로써, Flokk은 미래의 성공을 위해 지속 가능한 경쟁력을 갖게 되었습니다.

Simulation of Flokk chairs in a glass walled room looking out to mountains
2021년 7월 27일 산업 분야 | 15 분 소요
다루는 주제