더욱 빨라진 WebGL 로딩 시간 및 제품 출시 시점

Marxent가 Unity 전문 서비스와 협력하여 애플리케이션 성능을 최적화한 방법

Marxent: Unity 전문 서비스 사례 연구

최적의 사용자 환경을 위해 정교한 2개의 소프트웨어 프로그램과 다양한 브라우저 기술 컬렉션을 어떻게 함께 작동하도록 하나요? Marxent에서는 최고 수준의 개발자 팀을 보강하여 웹용 360도 3D 인테리어 디자인 툴을 최적화했으며, 이를 통해 고객과 영업 직원이 풍부한 시각화를 제작하고 수정할 수 있게 되었습니다. Marxent는 유니티 프로페셔널 서비스를 활용하여 시장에 더 나은 제품을 빠르게 출시했습니다.

Beck과 Barry Besecker는 최신 3D 기술을 활용하여 특히 가정용 가구 및 주거 개선 소매업체를 돕고, 매출 증가와 제품의 반품 수를 줄이기 위해 2011년에 Marxent를 설립했습니다. 설립 초기에는 일회성 AR과 VR 애플리케이션을 빌드했지만, 증가하는 성능 요구 사항과 통합 콘텐츠 관리의 필요성으로 인해 OpenGL에서 Unity 실시간 엔진으로 바로 전환했습니다. 이를 통해 Marxent® 3D 클라우드 플랫폼은 업계를 선도하는 플랫폼으로 거듭나 이제는 옴니채널 3D 디자인 및 시각화 분야의 글로벌 리더가 되었습니다.

  • 프로젝트

    신속한 인터랙티브 가상화를 통한 인테리어 설계 매출 증대 및 반품 감소

  • 목표

    다양한 브라우저 환경에서 앱 로딩 시간 최적화

  • 플랫폼

    WebGL, iOS, Android

  • 팀원 수

    80

  • 위치

    오하이오 마이애미스버그 – 오스틴 랜딩

필수 요소인 Unity의 실시간 엔진

Marxent의 3D Room Designer는 브라우저 기반의 인테리어 설계 도구로 고객과 영업 직원이 다채로운 3D 환경에서 가구, 색상, 벽면 처리, 차원 등을 취사 선택하고 조합할 수 있는 기능을 제공합니다. 이러한 간단하고 응답성이 높은 인터페이스를 통해 구매자는 직접 눈으로 보면서 원하는 가격에 맞게 가구를 구성할 수 있습니다. Unity의 실시간 엔진은 필수 요소입니다.

Marxent가 3D Room Designer의 최신 WebGL 구현 데모를 선보였을 때 새로운 클라이언트가 로딩 시간이 너무 길다고 지적했습니다. Marxent 엔지니어는 도구 전반에 주요 최적화를 진행하였지만 이 문제를 명확히 파악할 수 없었습니다. 이들은 고객이 더 나은 최종 사용자 경험을 제공하고 궁극적으로 매출을 늘릴 수 있도록 이 문제를 해결하고자 계속 노력하였습니다.

당시 엔지니어 팀은 렌더링 프로그램이 WebAssembly와 같은 일부 특이한 코드 형식에 대해 어떻게 작동하는지 자세히 알지 못했으며 Unity 실시간 엔진에 대한 이해가 부족했습니다. 따라서 Marxent는 Unity 코드, Marxent 코드, .dll과 프레임워크의 구축 방식 등 어떤 부분이 실행 및 로딩 시간과 특히 WebGL 플랫폼에 영향을 주는지 조사하고 해결하기 위해 Unity Professional Services에 도움을 요청했습니다.

결과:

  • 더욱 빠르고 간소화된 3D 프로그램을 통해 고객 환경 향상
  • Unity 플랫폼을 사용하는 사내 전문 역량 강화
  • 세계 최고의 두 소프트웨어 기업 간의 파트너십 강화

목표: 로딩 시간 단축

3D Room Designer의 프론트 엔드는 내장된 네이티브 HTML과 외부 JavaScript 호출을 통해 Unity WebGL Player와 상호 작용하는 JavaScript입니다. 이 도구는 Marxent가 만들고 관리하는 라이브러리 제품군을 기반으로 하며 이 라이브러리는 모든 Marxent® 3D Cloud 애플리케이션 전반에 공유됩니다.

Marxent 개발자로부터 프로젝트의 아키텍처, 시스템, 구축 프로세스, 설정 및 라이브러리에 대한 설명을 듣고 난 후 Marxent와 Unity 팀은 WebGL 애플리케이션의 플레이어 데이터와 코드베이스 크기를 줄이고 애플리케이션 흐름을 최적화하는 것을 목표로 삼았습니다. 자세한 내용은 다음과 같습니다:

  • WebAssembly 구현
  • 플레이어 빌드에서 필요 없는 에셋을 제거하고 규모가 큰 필수 에셋의 크기 최적화
  • 필요 없는 Unity 패키지(모듈) 제거
  • 스트리핑을 개선하고 관리되는 코드 라이브러리의 일부를 제거하여 관리되는 코드 크기 최적화
  • 셰이더 컴파일 시간과 첫 번째 씬의 선행 로드 시간 최소화
  • 기타 CPU 병목현상 제거

해당 앱을 WebAssembly에 맞게 수정한 것이 애플리케이션 성능 최적화(APO) 프로젝트에서 중요한 부분이었음을 알 수 있었습니다. WebAssembly는 JavaScript를 보완하기 위해 World Wide Web Consortium(W3C)에서 개발한 빠르게 실행되는 코드를 위한 텍스트 형식입니다. Marxent의 제품 개발 책임자인 Vince Kilian은 "WebAssembly 통합이 Unity 2018.3 릴리스에서 당사에게 가장 중요한 기능 중 하나입니다"라고 말합니다.

한 사람이 가져올 수 있는 변화

Unity의 수석 지원 엔지니어 중 한 명은 현장에서 고객 팀과 1주일을 보냈습니다. Marxent의 CTO이자 공동 창업자인 Barry Besecker는 "이 엔지니어의 전문 기술은 매우 방대하고 깊었지만, 더 중요한 것은 우리 팀과 훌륭한 팀워크를 이루었다는 점입니다. 덕분에 협업이 매우 뛰어났습니다."라고 말했습니다. 그는 기업 규모로 실행되는 Unity 플랫폼에 고도로 숙련되어 있었으며 능숙하게 문제를 해결했을 뿐만 아니라 커뮤니케이션의 허브 역할을 하여 솔루션에 기여할 수 있는 Unity의 다른 개발자와 엔지니어를 연결해주었습니다. 특히 작업 세션 도중 종종 Unity의 WebGL 전문가 중 한 명에게 직접 메시지를 보내며 아이디어를 나누고 까다로운 문제를 해결하는 데 도움을 주었습니다.

이 엔지니어의 역할은 Unity의 지적 소유권을 보호하면서 이해하기 어려운 Unity 기능을 다루기 위해 유용하고 실용적인 가이드를 제공하는 것이었습니다. Kilian은 "매우 깊은 수준의 문제를 진단하기 위해서는 때로 시스템의 제작에 대한 특정 지식이 필요합니다. Unity가 보유한 중첩 구문과 일부 스택 추적 기능은 정말 이해하기 어려운 내용입니다! 이러한 전문 지식과 통찰력이 우리에게 큰 도움이 되었습니다."라고 말합니다.

매우 생산적인 협업

APO를 실시한 후, Marxent는 해당 고객에게 프론트 엔드 로딩 문제를 빠르게 해결하고 즉시 구현할 수 있음을 알렸습니다. 베세커는 "클라이언트는 문제가 발생하면 즉시 저희에게 알립니다. 이번에는 새 고객이 테스트 환경에서 프로토타입을 사용하고 있었기 때문에 개선 사항을 쉽게 보여줄 수 있었습니다"라고 말했습니다. Marxent는 전반적으로 로딩 속도를 30% 향상하였으며 이는 상당한 개선이었습니다.

이러한 경험을 바탕으로 Marxent는 현재 셰이더 시스템(Unity 2018.3에 도입된 셰이더 파이프라인과 렌더링 시스템 파이프라인)의 확장성을 높이는 데 필요한 개발 지원의 작업 기술서를 작성하고 있습니다.

앞으로 Marxent는 동적인 사용자 생성 환경과 오브젝트를 향상하려는 Unity의 노력을 활용할 계획입니다. "개발자 컨퍼런스에서 적은 수의 호출로 화면에 수백만 개의 인스턴스를 표시하는 Unity 프로젝트를 본 적이 있는데 이는 매우 혁신적인 발전입니다. 하지만 화살을 쏘는 수많은 병사들에 적합하죠. Marxent에서 동시에 수천 개의 소파를 생성할 일은 없으니까요"라고 킬리안은 말합니다.

하지만 해당 프로젝트는 수천 개의 소파를 판매하도록 도움을 제공합니다. 전 세계적으로 Marxent는 상업용 AR 및 VR 도구 개발 분야를 선도하고 있으며, 두 가지 방식으로 Professional Services 참여 작업과 같은 협업이 이루어집니다. 즉 제품이 최적화되고, Unity는 자체 제품 및 로드맵을 개선하고 구현하기 위한 구체적인 통찰력을 얻게 됩니다. 예를 들어, Marxent와의 협업을 통해 일반적인 진단 도구로써 메모리 프로파일러의 중요성과 동적인 소매 업체 앱을 위한 셰이더 시스템에서 제공하는 실시간 광원의 중요성을 다시금 깨닫게 됩니다.

"우리는 다른 공급 업체는 일절 고려하지 않고 바로 Unity를 선택했습니다. Unity는 우리가 자랑하는 기술과 R&D를 검증했으며 우리는 Unity가 당사의 앱을 최적화하는 데 도움을 줄 수 있음을 알 수 있었습니다. 또한 Unity는 프로젝트에 바로 투입할 수 있는 전문 직원을 보유하고 있었습니다."

Barry Besecker, CTO and Co-Founder, Marxent

Unity에서는 최적의 웹사이트 경험을 제공하기 위해 쿠키를 사용합니다. 자세한 내용은 쿠키 정책 페이지를 참조하세요.

확인