우진트레이딩 메타버스 3D 가상 쇼룸 웹사이트 UX/UI 구축

Client.

피코노스아시아

Work.

UI Design, Publishing, Development

Production.

WEB

Device.

PC

Period.

20.08~20.09

Tech.

Metaverse

Project Overview.

우진 트레이딩 홈페이지는 메타버스를 활용하여 실제 홍보관에 온 듯한 경험을 제공합니다. 가상의 건물과 내부 모습을 제작하여 홈페이지를 쇼룸의 형식으로 구성해, 더욱 생동감 있게 서비스를 사용할 수 있습니다.
장소를 클릭하여 사용자가 마치 직접 이동하는 듯한 느낌을 주고, 그 안에서 관련 정보를 확인할 수 있습니다.


우진 트레이딩 메타버스 3D 가상 쇼룸 웹사이트 UI/UX 구축1
우진 트레이딩 메타버스 3D 가상 쇼룸 웹사이트 UI/UX 구축2

우진 트레이딩 메타버스 3D 가상 쇼룸 웹사이트 UI/UX 구축3
우진 트레이딩 메타버스 3D 가상 쇼룸 웹사이트 UI/UX 구축4
우진 트레이딩 메타버스 3D 가상 쇼룸 웹사이트 UI/UX 구축5
우진 트레이딩 메타버스 3D 가상 쇼룸 웹사이트 UI/UX 구축6
우진 트레이딩 메타버스 3D 가상 쇼룸 웹사이트 UI/UX 구축7  


공간을 넘나드는 생동감 있는 브랜드 경험, '우진트레이딩 메타버스 3D 가상 쇼룸'


우진트레이딩 메타버스 3D 가상 쇼룸 웹사이트는 가상의 홍보관 공간에서 실제 건물을 둘러보듯 브랜드와 제품을 체험할 수 있는 디지털 쇼룸 플랫폼입니다. 기존 텍스트와 2D 이미지 중심의 단조로운 기업 웹사이트는 우진트레이딩의 제품과 서비스 역량을 생동감 있게 전달하기에 공간적 몰입감이 부족했습니다. 이에 비대면 환경에서도 글로벌 고객에게 실제 홍보관을 방문한 듯한 능동적 탐색 경험을 제공하는 입체적인 웹 환경 구축이 필요했습니다.


유엑스스토리(UXstory)는 메타버스 기반의 3D 가상 건물과 내부 홍보관을 웹 화면에 통합해 홈페이지 자체가 거대한 쇼룸으로 기능하도록 설계했습니다. 특정 장소나 진열대를 클릭하면 사용자가 직접 걸어서 이동하는 듯한 카메라 뷰 워프(Warp) 연출을 적용해 뛰어난 공간적 몰입감을 구현했습니다. 또한, 가상 공간 내 오브젝트를 클릭하면 상세 스펙과 가공 영상, 카탈로그 팝업이 즉시 표시되는 단축 동선을 구축했습니다.


3D 입체 공간에 어울리는 전문적인 UI 톤앤매너와 핫스팟 포인터 아이콘, 정보 모달 컴포넌트를 정립하여 메타버스 전용 디자인 시스템을 구축했습니다. 이를 통해 실제 이동하는 듯한 공간 조작 UX로 기존 2D 웹사이트 대비 체류 시간과 브랜드 관심도를 크게 높였으며, 첨단 메타버스 기술을 활용한 가상 홍보관을 완성하여 기업의 브랜드 가치와 대외 신뢰도를 대폭 향상시켰습니다.



Key Features

- 3D 가상 홍보관 공간 연출: 메타버스 기술을 적용해 가상의 건물과 내부 쇼룸을 웹사이트에 통합 구현
- 공간 이동형 뷰 워프(Warp): 장소 클릭 시 사용자가 직접 걸어 이동하는 듯한 직관적 Spatial 네비게이션
- 공간 연동 정보 모달: 가상 오브젝트 클릭 시 제품 상세 스펙, 비디오, 카탈로그가 노출되는 단축 동선
- 메타버스 전용 디자인 시스템: 3D 공간 시인성을 고려한 핫스팟 포인터 아이콘 및 정보 팝업 모달 정립
- 글로벌 접근성 확보: 오프라인 방문 없이 웹 브라우저 접속만으로 체험 가능한 원스톱 브랜드 쇼룸