가상공간에서의 쇼핑을 디자인하다, 무신사 VR Room
열세 번째 人(in)spiration | BX & DX팀
Plus 人(in)spiration – 플러스엑스의 '일' 그리고 '사람' 이야기
더하기를 기울여 곱하기로 변화하듯 플러스엑스는 다양한 사람이 모여 함께 일합니다. 변화하는 시대에 다양한 경험들을 새롭게 조합해 나가며 늘 최선의 결과를 만들어 내는 플러스엑스. 그 사람들의 이야기를 만나보세요.
게임처럼 즐거운 가상공간에서의 쇼핑
BX팀 백시은 디자인 디렉터 / DX팀 프론트엔드 개발 Faris 책임/ DX팀 박준수 모션 디자이너
메타버스가 등장하면서 여러 브랜드가 가상공간을 통한 마케팅을 시작하고 있습니다. 트렌드에 민감한 패션 브랜드는 누구보다 빠르게 가상공간에 팝업스토어를 열고, 이벤트를 진행하는 등 이를 적극적으로 활용하고 있습니다. MZ세대 패션을 주도하는 무신사도 자신만의 가상공간을 오픈했습니다. 무신사의 입점 브랜드를 가상공간에서 만날 수 있는 'VR Room'이 바로 그것입니다.
무신사가 제공하는 6개의 카테고리를 바탕으로 만든 무신사 VR Room은 플러스엑스가 디자인과 개발을 담당했습니다. 뫼비우스 띠처럼 무한하게 이어지는 가상공간의 무신사 스토어를 구현할 수 있었던 건 패션 브랜드에 대한 이해가 높은 BX 팀과 플러스엑스 Showroom을 통해 이미 가상공간을 개발한 경험이 있는 DX 팀 덕분입니다. 사용자에게 또 다른, 새로운 경험을 전달한 BX 팀과 DX 팀에게 무신사 VR Room 제작기를 들어봤습니다.
무신사 VR Room 팀을 소개합니다! - DX팀의 파리스 책임님 & 박준수 디자이너님, BX팀의 백시은 디렉터님Q. 안녕하세요! 무신사 VR Room 프로젝트에서 어떤 업무를 맡으셨는지 간략하게 소개해 주세요.
백시은 안녕하세요. BX 팀은 VR Room에 있는 6개 관의 컨셉을 정립했습니다. 먼저 무드보드를 제작한 후, DX 팀에서 3D로 구현할 수 있게 프로토타입 이미지를 제작했어요.
박준수 BX 팀에서 설정한 6개의 컨셉을 토대로 VR Room의 3D 모델을 제작하고, 카메라 동선을 세팅했습니다. 그리고 파리스 책임님과 함께 마지막에 등장하는 Infinite M 로고를 3D 모델로 구현하는 작업도 진행했어요.
파리스 프론트엔드 개발자로서 VR Room의 인터랙티브 요소를 개발하고, 팀원들이 작업한 3D 모델과 U I디자인 요소를 연결했습니다.
Q. 무신사 VR Room을 보면서 작년 겨울에 공개했던 플러스엑스 Showroom이 떠올랐어요.
박준수 무신사 VR Room은 showroom을 통해 플러스엑스의 기술력을 공개한 후, 맡은 첫 외부 프로젝트에요. 무신사는 현재 계획 중인 광고와 함께 무신사의 세계관을 맞춰 VR Room을 제작하고 싶어 했습니다. 그래서 무아인이 VR Room을 소개하는 방식으로 진행되었습니다.
Q. 무신사 VR Room의 컨셉은 무엇이었나요?
백시은 무신사는 자사에 입점한 수십 개의 브랜드를 가상의 백화점처럼 즐길 수 있는 가상공간을 원했습니다. 하지만 VR Room은 가만히 앉아서 PC나 모바일로 접하는 공간이기 때문에 실제 백화점과는 경험이 달라요. 그래서 사용자들이 심심하지 않고 새로운 경험을 할 수 있도록 컨셉슈얼한 공간으로 구성했습니다.
박준수 마지막에 등장하는 Infinite M 로고는 무신사 VR Room을 구성하는 중요한 형태예요. 그래서 프로젝트를 시작하자마자, 이 로고를 3D 모델로 구현하라는 미션을 받았죠. Infinite M 로고는 착시로 표현한 그래픽이라서 3D로 제작한다는 건 불가능했습니다. 하지만 김기현 이사님께서 미션과 함께 해결할 아이디어까지 함께 주셔서 파리스 책임님과 3D 로고를 구현할 수 있었습니다.
Q. 무신사 VR Room은 6개의 공간으로 이뤄져 있는데, 각 공간의 컨셉과 디자인은 어떻게 정했나요?
백시은 6개의 공간은 무신사에서 제공하는 6개의 카테고리(부티크, 골프, 키즈, 뷰티 등)를 바탕으로 구성된 것으로 로고, 컬러와 같은 각 카테고리의 시각 자산을 잘 반영하는 것도 이번 프로젝트의 과제 중 하나였습니다. 그래서 처음에는 두 가지 방향을 제안했어요. 첫 번째는 ‘빛’이라는 컨셉 아래 6개의 공간을 통일성 있게 디자인하고 컬러와 로고로 차별화를 주는 방향이었어요. 두 번째는 카테고리 특성에 집중해서 6개의 공간을 개성 있게 디자인하는 것이었습니다. 최종적으로 사용자가 더 재미있게 체험할 수 있는 두 번째 방향으로 정해졌어요. 비주얼 디자인은 앞서 말했던 것처럼 카테고리의 시각 자산을 활용하는 동시에 카테고리를 직관적으로 표현할 수 있는 키워드와 아이디어를 접목했습니다. 스테디셀러관은 오프라인 무신사 스토어, 골프관은 골프장 필드, 뷰티관은 메이크업 룸, 플레이어관은 체육관 등에서 아이디어를 얻었습니다.
로고의 컬러와 분위기를 녹여낸 뷰티관 & 골프장 필드를 표현한 골프관Q. 각 공간을 서로 다르게 표현한다는 게 까다로웠을 것 같아요.
박준수 개인적으로 뷰티관 작업이 제일 어려웠어요. 무신사에는 카테고리별 가이드라인이 있는데, 뷰티의 아이덴티티는 2분할된 그리드에 그라디언트를 적용하는 것이었습니다. 이런 아이덴티티를 공간으로 녹이기가 어렵더라고요. 고민 끝에 뷰티관의 시작점을 기준으로 공간 전체를 좌우로 2분할하고 한쪽 영역에만 그라디언트를 적용했습니다. 그리고 사용자가 이 컨셉을 경험할 수 있게 카메라 동선을 좌, 우로 나눴어요.
파리스 공간마다 그 카테고리를 표현하기 위한 시각 요소들을 넣고, 이들을 자연스럽게 녹이는 것이 어려웠습니다. 예를 들어 뷰티관에서는 색종이가 날리는 장면으로 포인트를 줬다면, 키즈관에는 아이콘에 애니메이션 요소를 넣는 등 각 관마다 다른 표현 요소를 넣었습니다.
백시은 저는 뷰티관과 골프관이 제일 어려웠어요. 준수님 말씀처럼 뷰티관은 그만의 아이덴티티를 공간으로 녹이기가 어려웠어요. 골프관은 천장의 하늘 이미지가 끊임없이 이어져 보일 수 있게 구름을 약간씩 조정하여 이미지를 만들었는데 매우 힘들었던 기억이 납니다.
통통튀는 색감과 애니메이션으로 포인트를 준 키즈관 & 운동장의 트랙과 모델 이미지를 적극 활용한 플레이어관Q. 가상공간의 즐거운 경험을 위해서는 몰입도가 매우 중요하죠. 그를 위해 특별히 만든 장치가 있나요?
백시은 플레이어관은 브랜드의 모델 사진을 활용해서 그들이 체육관에서 운동하는 사람처럼 보이도록 디자인했습니다. 그리고 관마다 조명을 다르게 구성하고 실제 조도와 비슷하게 디자인함으로써 사용자가 가상이 아닌, 실제 공간처럼 느낄 수 있도록 했어요.
박준수 6개 관을 각각 다른 컨셉으로 작업한 후, 결합하는 방식으로 진행하다 보니 각 공간이 자연스럽게 이어졌으면 했어요. 그래서 두 공간이 이어지는 지점에 각 공간의 조명이 자연스럽게 묻어날 수 있게 디자인했습니다. 조명이 섞이면, 공간 컨셉이 다르더라도 자연스럽게 이어지고 사용자도 공간의 변화를 자연스럽게 받아들일 수 있을 거라 생각했거든요.
파리스 개발에서는 어떤 사양에서도 원활하게 무신사 VR Room을 경험할 수 있는 환경을 구현하는 것이 중요했습니다. 웹 기반의 3D 경험은 디바이스의 사양이 낮으면 몰입감이 떨어질 수 있거든요. 그래서 무신사 VR Room은 저사양 기기에서도 원활하게 실행될 수 있도록 DX 팀원들의 도움을 받아 에셋(assets)을 최적화하고 디바이스별 특정 사용자 정의를 개발했습니다.
Q. 사용자의 움직임을 이끈 카메라 무빙도 몰입도를 높여준 요소라고 생각해요. 롤러코스터를 타는 것처럼 6개 관을 자유롭게 이동하는 움직임이 인상 깊었어요.
박준수 앞서 설명한 Infinite M 로고 형태와 깊은 연관이 있어요. VR Room의 각 공간은 로고의 3D 모델을 6개로 나누어 제작한 것이에요. 덕분에 사용자는 뫼비우스 띠처럼 무신사 VR Room을 무한히 경험할 수 있습니다. 다른 방향으로 구성된 공간을 디자인한다는 것이 쉽지 않았어요. 그래서 6개의 공간을 따로 제작하고 결합하는 방법으로 제작해야 했습니다.
파리스 PC에서 마우스와 트랙패드를 사용할 때 혹은 스마트폰이나 태블릿에서 터치와 스와이프로 이용할 때 등 어떤 디바이스에서도 무신사 VR Room을 자연스럽게 경험할 수 있도록 카메라의 움직임과 템포를 더욱 정교하게 만드는 작업 역시 어려운 과정 중 하나였습니다.
무신사 VR Room은 뫼비우스 띠처럼 연결된 Infinite M 로고를 3D 모델로 작업해서 이를 공간으로 해석한 결과입니다.Q. 카메라 무빙은 자유롭지만 사용자는 앞, 뒤로만 움직일 수 있죠. 일부러 한계를 둔 건가요?
파리스 VR Room의 컨셉을 한 단어로 표현하면 '무한함'입니다. 이는 앞서 말했듯이 3D로 구현된 Infinite M 로고를 기반으로 구현되었고요. 따라서 VR Room 경험의 시작과 끝의 경계를 매끄럽게 만들기 위해서 사용자의 이동이 자유로우면서도 한편으로는 제어할 수 있게 설계했습니다.
박준수 VR Room에서 보는 콘텐츠가 많은 만큼, 움직임을 제한하여 사용자의 피로도를 줄이는 것이 필요했어요. 그래서 전진과 후진만 가능하도록 개발했습니다.
무신사 VR Room의 마지막은 크레디트로 마무리됩니다.Q. 마지막에 제작 크레디트가 올라가요. 왠지 VR Room에서의 경험이 한 편의 영화처럼 느껴졌어요.
백시은 무신사 VR Room은 다 둘러본 후에도 스크롤을 계속하면 다시 처음으로 돌아가는, 무한대의 공간이에요. 크레디트는 '여러분, 공간을 다 체험하셨습니다.'라는 의미이자 가이드 역할을 하는 장치로 두었습니다.
Q. 제작자로서 사용자가 무신사 VR Room에서 어떤 경험을 했으면 하나요?
파리스 개인적으로 이전과 다른 웹 경험을 개발하고 구현하는 걸 좋아합니다. 그래서 팀원들과 함께 무신사 VR Room을 작업할 수 있어서 좋았어요. 제가 느낀 것처럼 사용자들도 VR Room의 공간과 브랜드를 즐기면서 몰입된 경험을 했으면 하고, 공간에 숨겨진 이스터에그를 찾아 보상도 얻었으면 합니다.
박준수 기존 쇼핑몰에서 경험할 수 없었던, 색다른 공간에서의 신선한 경험과 새로운 자극을 통해 재미를 느꼈으면 해요. 또, 무신사 VR Room을 계기로 이후에 나올 플러스엑스의 메타버스에도 기대를 가져 줬으면 하는 바람도 있습니다.
백시은 제작자이자 사용자로서 무신사 VR Room 프로젝트를 '백화점 게임' 또는 '앉아서 즐기는 백화점 놀이'라고 생각하며 진행했습니다. 그래서 사용자들도 VR Room에서 만나는 브랜드들을 놀이처럼 접하고 즐겼으면 좋겠습니다.
가상공간에서 무신사 스토어를 경험할 수 있는
무신사 VR Room은 무신사 웹과 앱에서 모두 경험할 수 있습니다.
현재 오픈 기념으로 다양한 이벤트를 열고 있으니, 더 늦기 전에 방문해 보세요(GO!)
참, 팁 하나를 드리자면 토큰은 곳곳에 숨어있으니 꼼꼼히 봐야 합니다!
