트렌드

상쾌환 웹사이트를 방문했더니… 게임이 시작된다?

더즈인터랙티브, 게이미피케이션 스토리텔링을 통해 진정한 의미의 소통을 구현하다

2024.04.26

URL을 클릭했더니 흡사 게임 로딩과 같은 화면이 나온다. ‘상쾌환 STREET으로 가는 중…’이라는 안내 문구가 나오더니 이내 정말 게임 화면이 등장했다.

키보드를 눌러 배경이 된 거리를 구경하다 분홍 옷을 입은 NPC를 마주치니 “상쾌환 STREET에 온 걸 환영해”라며 말을 걸어온다. 좀 더 거리를 누벼보니 곳곳에서 같은 브랜드가 눈에 띈다. 바로 ‘상쾌환’이다.

사실 이는 게임이 아니라 숙취해소제품 브랜드인 상쾌환의 리브랜딩 웹사이트다. 과거 ‘회식에서 살아남는 직장인의 비법’으로 여겨졌던 숙취해소제품 ‘친구와의 즐거운 술자리를 위한 아이템’으로 변화시킨 상쾌환이 최근 도전과 새로움으로 대표되는 상쾌환의 브랜드 이미지와 스토리를 강화하기 위해 더즈인터랙티브의 손을 거쳐 새로운 디지털 브랜딩 채널 구축을 시도한 것이다.

한 바퀴 돌아보니… 내가 상쾌환을 이렇게 잘 알았나?

새롭게 탄생한 상쾌환의 웹사이트를 체험해보며 가장 먼저, 그리고 가장 크게 떠오른 궁금증은 “왜 브랜드 웹사이트 구축에 게이미피케이션을 적극적으로 활용했을까?”였다. 이에 대해 상쾌환 웹사이트 리뉴얼 프로젝트를 담당한 전혜린 더즈인터랙티브 기획팀 플래너는 “다양한 방식으로 소비자와 교류하며 적극적으로 소통하는 상쾌환의 방향성을 구현하기 위해서”라고 답했다. 기존 웹사이트가 가진 일방향적 소통으로는 상쾌환의 방향성을 표현하기에 충분하지 않았다는 이야기다.

전 플래너의 이야기대로 게임으로 표현된 상쾌환 STREET은 소비자가 직접 거리 곳곳을 누비며 상쾌환에 대해 알아가고 소통할 수 있는 공간이다. 스토어, 뉴스 가판대 등 여러 공간에 서 있는 NPC는 각각 자신이 서 있는 공간 콘셉트에 맞는 정보를 전달해주고, 더해서 하늘에는 최근 출시된 ‘상쾌환 Booster Zero’가 둥둥 떠다닌다. 익숙한 느낌이 들어 생각해보니 고윤정 배우가 등장했던 CF에서 하늘에 떠다니던 거대 상쾌환을 구현한 것이다.

이처럼 기존에 출시된 제품, CF를 인용한 인터랙티브한 요소는 마치 게임 속에서 개발자가 숨겨놓은 ‘이스터에그’를 발견한 듯한 재미를 준다. 실감나고 재밌기 때문에 거리 곳곳을 탐구하게 되는 소비자는 공사 중인 건물 앞에 서있는 NPC를 통해 곧 오픈할 팝업스토어에 대한 정보를 전해 듣는 등 브랜드 소식에서부터 브랜드의 전반적인 스토리에 이르기까지 브랜드에 대한 여러 정보를 자연스럽게 수집하게 된다. 맵을 꼼꼼하게 다 둘러보고 나면 “내가 상쾌환을 이렇게 잘 알았던가?”싶은 생각이 들 정도다.

만들기 어려웠을 것 같은데…

이쯤 되면 떠오르는 또 다른 궁금증이 있다. “도대체 어떻게 만든 걸까?”라는 물음이다.

총 3개월의 개발 기간이 소요된 상쾌환 웹사이트는 Full Web GL을 메인으로 구성됐다. 풀이하면 웹 페이지 전체가 인터랙티브한 3D 그래픽을 사용할 수 있도록 설계됐다는 뜻이다. 이렇다 보니 <기획→디자인→개발→구축>이라는 보편적인 웹 제작 프로세스가 아닌 새로운 방법론과 프로세스가 필요했다. 전 플래너에게 “일반적인 웹사이트 구축에 비해 많이 어려웠을 것 같다”고 묻자, “구현 가능성과 범위, UI 디자인부터 공간 콘셉트와 3D 디자인 등 여러 요소의 기획부터 개발, 테스트까지 모든 팀의 협력이 필요했다”고 밝혔다.

게임 형식으로 브랜드 웹사이트를 구축하려면 많은 것을 고려해야 한다. 소비자가 조작을 통해 직접 움직이며 공간을 체험해야 하니, 각 공간의 콘셉트와 디자인을 꼼꼼하게 구축하는 것은 물론, 캐릭터의 동선에 따른 여러 오브젝트의 배치 등을 꼼꼼하게 검토해야 했다. 상쾌환 STREET을 돌아다니며 헤매지 않고 자연스럽게 둘러보며 다양한 인터랙션을 통해 입체적으로 콘텐츠를 경험할 수 있는 것은 이처럼 설계에 들어간 보이지 않는 무수한 노력 덕택인 셈이다.

고민과 긴밀한 의사소통의 결과물

이처럼 웹사이트 구축의 여러 부분에서 신경 써야 할 요소가 많았음에도 불구하고 성공적으로 사이트 구축을 마칠 수 있었던 데는 ‘더즈인터랙티브가 일하는 방법’이 큰 도움이 됐다. 전 플래너는 “더즈인터랙티브는 기획부터 구현, 개발까지 전 과정을 모두가 함께 고민하고 협력하는 곳”이라고 표현한다.

이번 프로젝트도 여러 팀이 전체 프로세스를 진행하는 동안 긴밀하게 소통했다. 특히 메인 공간은 인터랙션과 모델링이 많았던 만큼 퍼포먼스가 무거워질 수 있어 디자인부터 구현 단계에 이르기까지 수많은 구성원이 다양한 프로토타입을 제작, 여러 브라우저와 기기 환경에서 테스트를 거쳐 최적화를 이뤄냈고, 이를 통해 안정적이고 높은 퀄리티의 웹사이트 구축을 이뤄낼 수 있었다. 상쾌환 웹사이트 자체가 더즈인터랙티브의 노하우가 집약된 결과물인 셈이다.

실질적 기능도 매끄럽게

한 가지 주목할 것은 이번 프로젝트에서 가장 많은 고민이 필요했던 부분은 3D로 구성된 메인 페이지에서 정보 중심 페이지나 문의 페이지로의 매끄러운 전환 과정을 위한 UX 설계였다는 점이다. 가상 공간을 통한 체험도 중요하지만, 상쾌환의 정보 콘텐츠 탐색과 고객/제휴 문의 등 실질적 기능 이용에도 불편함이 없어야 하기 때문이다.

이를 위해 메인페이지에서도 정보 중심 페이지로 손쉽게 이동할 수 있도록 토글을 배치했으며, 웹사이트에 방문한 고객이 자주 찾는 문의하기 버튼의 경우 플로팅으로 고정해 제공하는 등 유저 플로우를 고려한 UI·UX를 설계로 편의성 증대를 놓치지 않았다.

인터랙티브는 제품 페이지에도

제품 페이지 또한 웹사이트 개발 과정에서 중요했던 부분이었다. 상쾌환의 브랜드 색깔을 보여주는 것 만큼이나 중요했던 것이 상쾌환의 제품군에 대한 정보를 효과적으로 전달하는 일이었기 때문이다.

상쾌환이 MZ세대를 사로잡은 데에는 간식처럼 섭취할 수 있는 젤리 제형, 트렌드한 패키지 디자인 등 기존의 올드한 숙취해소제품의 이미지를 벗어난 새롭고 통통 튀는 매력을 선보인 점이 크게 작용했다.

이처럼 매력적인 제품의 요소를 표현하기 위해 더즈인터랙티브는 제품 페이지에도 메인 페이지와 동일하게 Web GL 기술을 적용해 제품의 형태를 3D 그래픽으로 표현하고 브랜드 키 컬러 및 디자인 요소를 인터랙티브하게 녹여냈다.

이를 통해 소비자는 제품 페이지에 접속해 스크롤에 따라 동적으로 움직이는 스토리텔링 요소와 인터랙션하며 제품에 대한 정보를 보다 쉽고 빠르게 이해할 수 있다.

진정한 의미의 소통

상쾌환 웹사이트는 ‘도전과 혁신, 즐거움과 새로움’이라는 상쾌환의 방향성과 메시지를 녹여내는 동시에 일방향으로 이뤄지던 브랜드와 소비자 소통을 양방향으로 변화시켜 진정한 의미의 소통을 구현한 공간이다.

실제로 오픈 후 단 일주일 만에 상쾌환 웹사이트를 방문한 방문객 수는 3배가량 증가했으며, 사이트에 방문객이 체류하는 시간 또한 평균 12초 증가했다. 인터랙티브하고 새로운 웹사이트를 통해 체험하는 즐겁고 신선한 브랜드 경험에 소비자가 만족하고 있다는 뜻이다. 상쾌 웹사이트가 진정한 의미의 고객 소통 채널이 되길 희망했던 더즈인터랙티브의 바람은 현실이 되고 있다.

---

MINI INTERVIEW

전혜린 더즈인터랙티브 기획팀 플래너

상쾌환 프로젝트는 기존 국내 브랜드 플랫폼에서 시도해보지 않은 방식으로 구축됐기 때문에, 초기 기획부터 디자인, 구현까지 전 프로세스에서 정말 많은 고민과 도전을 해야 했습니다. 상쾌환의 브랜드 아이덴티티를 효과적으로 전달할 수 있는 공간을 설계함과 동시에 사용성과 같은 UX도 복합적으로 고려해야 했죠.

이를 위해 내부 제작팀부터 고객사까지 긴밀한 협력과 커뮤니케이션이 어느 때보다 중요했습니다. 프로젝트를 진행하는 동안 많은 도전과 인고의 과정을 겪었지만, 모든 팀이 적극적으로 프로젝트에 임해주시고 노력해줘 좋은 결과물을 낼 수 있었던 것 같아 정말 감사 드립니다.

상쾌환 브랜드 웹사이트가 고객에게 긍정적이고 유쾌한 경험을 전달하며 브랜드와 소통할 수 있는 하나의 창구가 되기를 기대합니다.

윤미송 삼양사 디지털마케팅팀 과장

이번 프로젝트는 온라인상의 새로운 브랜드 경험을 제공하기 위해 기획됐습니다. 일반적인 레이아웃에서 벗어나 지금까지 시도한 적 없는 방향으로 결정하기까지 많은 고민을 했는데요. 브랜드 웹사이트의 역할인 정확한 브랜드 정보를 제공하는 것은 물론, 어떻게 하면 양방향 소통을 할 수 있는 플랫폼을 구축할 것인지, 온오프라인을 연결하는 허브로 활용할 수 있을지를 생각하는 데 많은 시간을 할애했습니다. 

결과적으로 WebGL을 사용한 게이미피케이션 스토리텔링, 숨겨진 이스터 에그를 찾는 재미를 제공함으로써 실제 브랜드 사이트 방문객의 체류시간을 200% 가까이 높이는 성과를 거뒀습니다. 앞으로 상쾌환 웹사이트가 상쾌환을 사랑해 주시는 2030 타깃에게 새로운 재미를 주는 공간으로 거듭날 수 있길 기대합니다.

• 더즈인터랙티브

• 에디터이민호 (treewords@ditoday.com)
• 섬네일손 찬호