플러스엑스가 시도하는 메타버스 시대를 위한 새로운 경험
Plus X Showroom, Virtual Showroom 제작기
Plus 人(in)spiration - 플러스엑스의 ‘일’ 그리고 ‘사람’ 이야기
더하기를 기울여 곱하기로 변화하듯 플러스엑스는 다양한 사람이 모여 함께 일합니다. 변화하는 시대에 다양한 경험들을 새롭게 조합해 나가며 늘 최선의 결과를 만들어 내는 플러스엑스. 그 사람들의 이야기를 만나보세요.
가상 세계에 플러스엑스의 사옥이 생겼다?
김기현 이사님께 듣는 Plus X Showroom,
Virtual Gallery and Bridge Game 제작기
DX팀을 주축으로 3D 디자이너와 UI/UX/BX 디자이너들의 피나는 노력 끝에 플러스엑스가 새로운 웹사이트(virtual.plus-ex.com)를 오픈했습니다. 가상의 공간에서 포트폴리오를 전시하는 ‘Virtual Showroom’의 형식으로 제작된 이번 웹사이트는 시각화뿐만 아니라, 쇼룸을 경험하는 3D 개발부터 백엔드 관리까지 플러스엑스에서 직접 개발했다는 점에서 더 특별한 의미를 가집니다. 왜 플러스엑스는 가상공간에 쇼룸을 세웠을까요? 본 프로젝트를 리딩한 김기현 이사님께 제작 비하인드 스토리를 들어봤습니다.
DX팀을 리드하는 김기현 이사님, 이번이 두 번째 만남입니다.플러스엑스의 첫 체험형 3D 웹사이트
공개된 플러스엑스의 쇼룸은 어떤 공간인가요?
플러스엑스의 포트폴리오와 디자인 어워드에서 수상한 상들을 3D 공간에 전시한, Virtual Showroom입니다. 쉽게 플러스엑스의 디지털 사옥이라고 생각하면 될 것 같아요. 총 4층으로 이뤄져 있는데요. 지상 1층에는 BX 프로젝트를, 2층에는 UI/UX 프로젝트를 전시했고 3층에서는 수상내역을 볼 수 있습니다. 지하는 지상과 다르게 게임을 할 수 있는 공간입니다. 세계적으로 핫한 ‘오징어 게임’ 속 유리 다리 건너기 게임을 쇼룸의 톤 앤 매너로 재해석했습니다.
포트폴리오를 전시한 쇼룸에 게임을 함께 구성한 이유가 궁금해요.
디자인 에이전시를 잘 모르는 사용자도 우리 Virtual Showroom에 와서 경험을 즐겼으면 했습니다. 지하층은 접속과 공유가 쉽도록 독립적인 페이지로 구현했기 때문에 일반 사용자에게 많이 바이럴 될 거라고 기대하고 있어요. ‘오징어 게임’의 세계적인 인기에 따라 해외 사용자의 접속도 기대되고요. 국내·외로 많은 사람들이 참여할 것을 예상하여 랭킹을 10만 등까지 산출해서 보여주고, 그중 가장 점수가 높은 30명은 명예의 전당에 오르도록 했습니다. 랭킹은 서버와 연동되어 실시간으로 결과가 반영됩니다.
오징어 게임을 구현한 Plus X Showroom의 지하층. 실감 나는 체험에 후덜덜합니다.
무사히 다리를 건너면 명예에 전당에 입성, 랭킹을 확인할 수 있습니다.5개월 동안 모두가 힘을 합쳐 완성한 Plus X Showroom
플러스엑스의 포트폴리오를 3D 가상공간으로 보여주겠다는 생각을 하신 계기가 있을까요?
Plus X Showroom은 R&D 프로젝트이자, 플러스엑스가 처음으로 제작한 체험형 3D 웹사이트예요. 트렌드에 민감한 업계에 있다 보니 작년부터 주목받은 메타버스에 관심이 생겼고, 이를 플러스엑스의 관점으로 재해석한 무언가가 있으면 좋겠다는 생각을 했어요.
처음으로 제작한 3D 공간인 만큼 제작 기간도 길었을 것 같아요.
올여름부터 아이디어를 구상하고 조건에 맞는 3D 라이브러리를 찾기 시작했습니다. 3D 모델링으로 시각화를 하거나, 3D 콘텐츠 반응형 웹사이트를 제작한 경우는 있었지만 체험형 개발은 처음이었기 때문에 공부를 많이 했습니다. 그리고 대표님들과 각 사업부에게 제작한 프로토타입을 보여주고, 함께 쇼룸으로 할 수 있는 일과 앞으로의 발전 가능성에 대해 논의하는 시간을 가졌습니다. 본격적인 개발은 9월부터 시작해서 3개월 넘게 작업했습니다. 생각보다 짧다고 느낄 수도 있지만, 잦은 야근과 밤샘이 있었습니다.
매번 디자인팀과 긴밀하게 협업을 하는 걸로 알고 있습니다. 이번 Plus X Showroom 프로젝트를 진행하면서 서로의 호흡은 어떠셨나요?
개발팀과 디자인팀은 각각 플러스엑스의 한쪽 다리를 맡아서 함께 나아가는 관계라고 생각합니다. 그래서 이번 쇼룸도 컨셉 리서치부터 개발자, 3D 디자이너, UI/UX/BX 디자이너가 함께 진행했습니다. 개발팀은 디자인팀의 아이디어를 반영하여 게임 같은 화면 구성과 미니맵을 구현했고, 디자인팀 역시 개발팀의 피드백을 긍정적으로 수용해 줬습니다. 프로젝트가 잘 되기 위해서는 서로의 호흡이 중요하다는 걸 팀원들도 잘 알고 있었기 때문에 서로를 존중하면서 즐겁게 작업할 수 있었습니다.
BX 프로젝트가 전시된 쇼룸 1층 내부. 콘텐츠를 클릭하면 상세 콘텐츠를 볼 수 있습니다.
UI/UX 프로젝트가 전시된 쇼룸 2층. 중앙 홀로그램에서는 듀얼프레임 영상이 상영됩니다.120% 다른 경험을 선사하는 체험형 웹사이트
이번 쇼룸은 이전 웹사이트와 전혀 다른 경험을 제공하는데요. 이외에 또 다른 점이 있나요?
기존 웹사이트는 시각화에 초점이 맞춰져 있어 콘텐츠 접근과 확산이 어려웠습니다. 많은 기업과 디자인 전공생이 우리 사이트에서 포트폴리오를 보고 인사이트를 얻어 간다는 사실을 잘 알고 있기에 전부터 콘텐츠를 공유하기 쉬운 구조로 바꾸고 싶다는 생각을 했습니다. 하지만 포트폴리오 양이 너무 방대해서 재정비에도 많은 시간이 필요했기에 선뜻 시도하지 못했습니다. 다행히 쇼룸을 구축하면서 그를 시도할 수 있었어요. 이전 사이트처럼 모든 콘텐츠를 담지 못했지만, 콘텐츠를 데이터베이스화하고 새로운 방식으로 경험할 수 있는 첫걸음을 만들었다고 생각합니다.
최근 가상공간에 전시하는 사례가 많아졌습니다. 이들과 Plus X Showroom의 차이점은 무엇일까요?
Plus X Showroom처럼 3D 공간을 1층 이상 구성한 사례는 드뭅니다. 오프라인 공간을 온라인에 그대로 구현하거나, 콘텐츠 노출에만 집중해서 감성이 부족한 경우가 많았죠. 이런 클리셰에서 벗어나고자 플러스엑스의 결을 녹여서 회사의 아이덴티티가 살아있는 공간을 만들려고 했습니다. 가상공간이지만, 우리의 아이덴티티를 담아낸다면 몰입된 경험을 전달할 수 있기 때문입니다. 이와 함께 모바일 최적화, 모드 전환 등 다양한 편의 기능을 제공하여 대중성과 사용성을 골고루 고려했다는 점도 다른 가상공간과 차별되는 점입니다.
조명부터 재질까지. 층을 구성하는 작은 요소 하나까지 직접 구현하셨다고 들었습니다.
인테리어는 물론 동선까지 신경을 써서 제작했습니다. 슬라이드 계단으로 각 층을 연결하고, 벽과 바닥의 재질까지 직접 구현했습니다. 홀 중앙에는 플러스엑스의 상징물과 홀로그램을 두었고요. 전체적인 톤은 콘텐츠 배치를 고려하여 어둡게 낮췄고, 간접 등과 레일 조명으로 빛을 주어 심플하게 디자인했습니다. 가상공간이긴 하지만, 실제 건물을 세우는 듯한 느낌이었어요.
공간 디자인은 어디에서 영감을 받으셨나요?
쇼룸에서 중요한 디자인 요소는 빛입니다. 1, 2층은 간접 조명으로 은은한 분위기를 연출했고, 3층은 천장을 원형으로 뚫어서 빛이 내려오도록 디자인했습니다. 빛으로 공간을 새롭게 바라보게 만드는 방법은 설치미술가 제임스 터렐에게 영감을 받았습니다. 처음에는 미술관이나 유명 브랜드의 쇼룸을 보고 디자인을 했는데 공간의 디테일한 요소들이 콘텐츠를 방해하는 걸 보고 지금처럼 단순하지만 빛으로만 포인트를 주는 방법을 선택했습니다.
그동안 플러스엑스가 수상한 상들이 전시된 3층에서는 하늘에서 내려오는 빛으로 신비로운 분위기가 연출됩니다.
간접 조명으로 공간감과 무드를 살렸습니다.쇼룸 개발부터 운영 툴까지! Plus X Showroom 개발 이야기
이번 쇼룸은 DX팀의 실력을 볼 수 있는 프로젝트라고 들었습니다.
이번 개발에서 두드러지는 특징은 플랫폼의 모든 콘텐츠를 CMS 기반의 데이터베이스로 만들었고, 모든 기능을 API 화하여 표준화했다는 점입니다. 덕분에 관리자 모드로 누구나 어드민에 접속하여 쇼룸을 만들고 콘텐츠를 게시할 수 있습니다. 하나의 모델링을 기반으로 제한 없이 갤러리를 생성할 수 있으며, 같은 콘텐츠를 가진 갤러리를 여러 가지 모드로도 생성할 수 있습니다. 플러스엑스 DX팀은 프런트엔드 팀과 백엔드 팀으로 구성되어 매우 탄탄한 조직력과 실력을 갖추고 있어요. 언제나 이들이 성장할 수 있는 동기를 부여하고, 실력을 알릴 수 있는 방법에 대해 고민하는데, 이번 쇼룸이 좋은 계기가 되었으면 합니다.
플러스엑스 3D 플랫폼 CMS. API로 표준화되어 누구든지 쉽게 쇼룸을 만들고 콘텐츠를 올릴 수 있습니다.쇼룸의 개발과 운영을 위한 에디팅 툴도 제작하셨는데 간단히 설명해 주세요.
쇼룸 개발뿐만 아니라, 개발 과정의 효율을 높이고 추후 확장성과 생산성을 높이기 위한 개발에도 많은 시간을 들였는데요. 그 결과, 개발과 운영을 위한 두 가지 에디팅 툴을 별도로 제작했습니다. 하나는 콘텐츠를 원하는 공간에 쉽게 전시하기 위한 콘텐츠 에디팅 툴로, 사용자와 동일한 3D 환경에서 원하는 공간의 벽을 클릭하면 콘텐츠를 추가할 수 있고 드래그로 위치와 크기를 변경할 수 있습니다. 다른 하나는 카메라의 위치와 회전을 연결하여 동선을 만들어주는 패스 에디팅 툴입니다. 마찬가지로 사용자와 동일한 3D 환경에서 포인트를 추가하고 자유롭게 이동시키거나 원하는 시선의 방향으로 카메라 각도를 수정할 수 있습니다. 이 포인트들은 베지어 곡선으로 연결되어 이지모드(Easy Mode)에서 사용자가 스크롤을 통해 쇼룸을 경험할 수 있는 경로로 생성됩니다.
운영이 쉽다면 콘텐츠의 업데이트도 간편하고 신속하게 이뤄지겠네요.
앞서 설명한 것처럼 이번에 개발한 플랫폼에서는 모델과 콘텐츠 등 모든 데이터를 CMS에서 쉽게 관리할 수 있고, 3D 공간에서 직접 콘텐츠 추가와 수정이 가능합니다. CMS에서 좌표를 입력하고 3D 공간에 확인하는 번거로움 없이 사용자가 보는 동일한 3D 환경에서 위치, 크기를 실시간으로 조정할 수 있으며 확정된 정보는 서버에 바로 저장이 됩니다.
개발한 플랫폼이 플러스엑스의 컨설팅 업무에도 활용될 가능성이 있나요?
플러스엑스가 제공하는 3D 공간에서 전시와 이벤트를 연다면, 기업은 사용자의 행동 패턴을 공간과 위치별로 분석한 데이터를 얻을 수 있습니다. 자체 운영 엔진으로 3D 공간에서 사용자의 행동을 트래킹 할 수 있기 때문에 이를 수집하고 통계를 산출하여 사용자가 선호하는 동선이나 효과적인 디스플레이로 수정이 가능합니다. 또한, 구매와 선호도가 높은 상품을 분석하여 마케팅과 세일즈에 도움을 줄 수 있습니다.
패스 에디팅 툴. 3D 공간 안에서 직접 움직임 편집이 가능합니다. 사용자의 경험을 중시한 모션 & 인터랙션
지금까지 플러스엑스의 웹사이트에서는 새로운 모션을 많이 경험할 수 있었습니다.
이번 Plus X Showroom에서도 새로운 모션을 보여주고자 하셨나요?
사용자는 보통 마우스 클릭이나 스크롤 같은 행위를 통해 페이지에 접속하고 콘텐츠를 소비합니다. 그래서 저는 모션보다는 인터랙션이라고 표현하는데요. 인터랙션에서 중요한 건 사용자의 행위에 반응하여 응답하고, 지속적으로 사용하고 싶은 마음을 갖게 만드는 겁니다. 그래서 이번 쇼룸에서는 랜딩 페이지에 신경을 많이 썼습니다. 쇼룸에 접속하면, 먼저 쇼룸의 탑 뷰를 2D로 구현한 런처 페이지를 마주하게 됩니다. 스크롤을 내리면 2D가 3D로 전환되면서 각 층별 콘텐츠가 소개되는데요. 2D에서 3D로 전환되는 과정, 층별 3D 레이아웃이 변화하는 느낌, 디지털 노이즈를 통한 아날로그적 감성 등을 신경 써서 만들었습니다.
Plus X Showroom에 접속하면 제일 먼저 마주하게 되는 랜딩 페이지. 스크롤을 내리면서 모션을 하나, 하나 즐겨보세요.이외에 쇼룸을 제작하면서 신경을 쓴 부분은 무엇인가요?
체험용 콘텐츠는 사용자가 아무것도 안 하면 어떤 일도 일어나지 않기 때문에 사용자가 쇼룸에 왔을 때, 움직여보고 싶은 마음이 들도록 만들고자 했습니다. 로딩과 브릿지에 동적인 느낌을 넣고, 내비게이션과 같은 부수적인 영역에 굉장히 신경을 썼어요. 화면 하단에 미니맵과 나침반을 디스플레이한 것도 이를 위해서예요. 사용자가 움직이면 미니맵과 나침반이 변하기 때문에 쇼룸에서도 FPS 게임을 하는 듯한 느낌을 받을 수 있습니다. 3D 엔진과 미니맵, 나침반 각각 다른 엔진과 라이브러리를 사용해서 손이 많이 갔지만, 완성하고 보니 콘텐츠가 풍부해진 느낌이라 만족스럽습니다.
가상공간 내에서 사용자의 움직임을 구현하는 것도 중요했을 텐데요. 이는 곧 경험과 직결되니까요.
사용자가 쇼룸을 여기저기를 뛰어다니면서 움직임을 즐길 수 있게 여러 가지 장치를 마련했습니다. 조작이 서툰 사용자를 위해서 층을 점프해서 이동할 수 있는 워프 기능을 넣었고, PC에서도 마우스 스크롤만 사용하여 조작할 수 있도록 노멀 모드(Normal Mode) 외에 이지 모드(Easy Mode)를 추가했습니다. 이지 모드에서는 모바일과 동일하게 미리 계산한 카메라 동선을 따라 스크롤만으로 모든 층을 둘러볼 수 있습니다.
3D 엔진은 Three.js, 미니맵(중앙 원)은 P5 라이브러리, 나침반(상단)은 네이티브 코드로 구현했습니다.사용자를 위한 모바일 최적화 & 조작성
웹에서 바로 경험할 수 있다는 점도 Plus X Showroom의 장점이라고 생각해요.
여전히 3D 공간을 체험하려면 별도의 설치가 요구되거나 사용자 조작이 불편한 경우가 많아요. 플러스엑스가 추구하는 건 누구나 쉽게 접속하고 편하게 경험할 수 있는 범용적인 서비스이기 때문에 이미지 퀄리티를 낮춰서 렌더링을 최적화하고, 평균적인 PC 환경에서도 무리 없이 경험할 수 있는 방법을 택했습니다. 시각적 퀄리티를 조금 더 높였으면 좋겠다는 의견도 있었지만, 사용자는 속도가 느리면 거부감을 느낍니다. 그리고 이는 생각보다 오래가고요. 그래서 이번에는 시각적 전달보다는 체험에 중점을 두어 최적화에 더 많은 신경을 기울었습니다.
이번 쇼룸을 구현하면서 제일 어려웠던 점은 무엇이었나요?
물리적인 형태를 구현하는 것도 힘들었지만, 새로운 환경에서의 조작성과 모바일 최적화가 제일 힘들었습니다. 일반 공개를 하기 전, 지하층의 게임을 사내 테스트용으로 배포한 적이 있습니다. 다들 흥미로워하고, 재미있게 게임을 즐겼지만 모바일에서 조작을 어려워하더라고요. 블록을 선택하는 것보다 앞으로 나아가는 조작을 어려워하는 모습을 보고 이를 해결할 방법을 고민했습니다. 사용자는 조작이 어려우면 소비하지 않으니까요.
조작의 어려움은 어떻게 해결하셨나요?
모바일용 버튼을 별도로 추가하여 터치만으로 조작할 수 있도록 수정을 했습니다. 그리고 터치만으로 움직이는 단순화된 점프를 구현했는데 PC에서의 리얼한 느낌이 나지 않았고, 공간의 느낌과도 어울리지 않았어요. 결국 PC에 구현된 기능을 그대로 모바일에 옮기고 점프의 가속도와 물리력을 계산해서 모바일에서도 PC와 똑같은 위치로 뛸 수 있도록 구현했습니다. 덕분에 모바일에서도 바닥으로 떨어질 때의 생생한 느낌을 재현할 수 있었습니다.
조작이 어려운 분들을 위해 두 가지 모드를 준비했습니다. 선택해 주세요!Plus X Showroom의 미래
심혈을 기울인 Plus X Showroom이 공개되었습니다. 첫 3D 공간인 만큼 감회가 새로울 것 같아요.
반응은 어떨지, 시장에서 어떻게 통할지… 엄청 궁금합니다. 생각보다 반응이 작을 수도 있겠지만, 다음을 위한 발판이 될 수 있지 않을까요? 저는 Plus X Showroom이 현재 디자인 에이전시가 보여줄 수 있는, 가장 흥미로운 크리에이티브 중 하나라고 생각합니다. 사이트의 형태가 상향 평준화된 현 상황에서 쇼룸이 신선한 자극이 되어 메타버스 시대에 디자인 에이전시의 웹 사이트 트렌드가 되었으면 하는 바람입니다.
앞으로 Plus X Showroom은 어떻게 확장이 될까요?
빅 데이터의 처리와 기술적 공유가 대형 플랫폼의 역할이라면, 플러스엑스와 같은 디자인 에이전시들은 더 풍부하고 섬세한 감성을 전달하는 3D 경험을 만들 수 있어요. 그런 의미에서 Plus X Showroom이 감성을 기반으로 한 3D 경험의 신호탄이 되었으면 합니다. 현재 저희가 개발한 플랫폼을 활용할 수 있는 여러 가지 방법을 구상하고 있어요. 플러스엑스의 컨설팅 업무에 활용하거나, 회사 내부 디자이너들의 개인 작업을 보여주는 3D 갤러리 서비스로도 활용할 수 있을 겁니다. 저의 목표이자 과제는 이 플랫폼을 시작으로 ‘플러스엑스가 이런 것도 하는구나’를 보여주면서 더 멋있는 서비스를 제공하는 것이라고 생각합니다.
Plus 人(in)spiration 릴레이 인터뷰는
플러스엑스 브런치를 통해 발행됩니다.
다음 편도 기대해 주세요.
