이트라이브, 한화 아쿠아플라넷 PC 웹사이트 리뉴얼
드넓은 대양을 품은 아름다운 바다의 별, 한화 아쿠아플라넷 PC 웹사이트
거대한 창 너머로 자유롭게 유영하는 해양생물들을 보고 있노라면 잠시 넋을 놓고 멍하니 바라보게 된다. 그리고 그 앞에서 느끼는 감동은 부모님 손을 잡고 처음 마주했을 때나 어른이 된 지금이나 크게 다르지 않다. 최근 이트라이브가 PC에 고스란히 가져다 놓온 그 푸른 감동을 함께 느껴보자.
- 프로젝트명 ㅣ 한화 아쿠아플라넷 PC 웹사이트 리뉴얼
- 클라이언트 ㅣ 한화호텔앤드리조트㈜
- 제작사 ㅣ 이트라이브
- 오픈일 ㅣ 2020. 02. 27
국내 최고의 아쿠아리움 온라인 채널
한화 아쿠아플라넷은 1985년도에 개장한 우리나라 최초의 현대화 아쿠아리움으로, 현재 국내 최대 규모 전시관인 제주와 더불어 해양 문화의 가치와 생태계를 보존하는 여수, 국내 최초 놀이형 생태체험 공간으로 특화된 일산, 서울의 랜드마크이자 아쿠아리움의 모체인 63까지 총 네 곳의 전시관을 운영하고 있다(12월 아쿠아플라넷 광교 오픈 예정).
하지만 2012년에 리뉴얼한 기존 웹사이트는 노후화 등으로 국내 최고 아쿠아리움이라는 명성에 걸맞지 않은 채널로 운영되고 있었다. 이에 이트라이브는 노후화 개선, 운영 환경의 통합, 브랜드십 제고를 달성하고, 궁극적으로 온라인 직판몰로 이어지는 마케팅, 세일즈 허브 구축을 목표로 삼았다. 지난 2018년에 이미 모바일 웹을 부분적으로 리뉴얼한 상황이었기 때문에 이번에는 국/영문 PC 웹사이트 리뉴얼을 중점적으로 진행했다.
관람을 넘어선 ‘체험’을 담다
웹사이트에 들어와 가장 먼저 마주하는 게이트 페이지에서부터 방문자는 마치 눈 앞에서 아쿠아리움을 체험하고 있다는 느낌을 받게 된다. 수족관 윈도우의 프레임을 콘셉트로 그린 세로 방향의 그리드가 마치 수족관 밖에서 안을 들여다보는 듯한 착각을 일으키기 때문이다.
먼저, 네 곳의 전시관을 클릭하면 해당 지점의 대표 해양생물 또는 프로그램을 담은 영상이 짧게 재생된다. 이어 바로가기 버튼을 눌러 각 지점의 메인화면으로 이동하면 전시관의 특징을 임팩트있게 보여주는 15초 분량의 영상이 백그라운드에서 재생되고, GNB, 퀵메뉴, 타이틀이 시퀀스에 맞게 등장한다. 이러한 비주얼적 요소들은 패럴랙스 스크롤을 통해 메인 섹션 콘텐츠를 넘겨 보며 창 너머에서 수족관을 바라보는 듯한 사용자 경험을 일관성 있게 제공한다. 메인화면에 사용된 기법은 자칫 서브 화면에서 스크롤의 무거움, 정보 제공의 즉시성 등 문제를 야기할 수 있는데, 이를 고려해 서브 화면의 인터랙션 요소는 간결하게 구현한 디테일도 엿보인다.
또 메인화면과 동일한 상단 비주얼 이미지를 잠시 보여주고, 자동 스크롤된 후 콘텐츠 영역의 시작 부분에서는 정지되어 자연스럽게 방문자가 스크롤한 만큼 화면이 상하로 이동하는 형태로 구현됐다. 서브 화면에서는 각 콘텐츠에 가장 적합한 UI/UX가 적용됐고, 전체 프로그램 정보는 아코디언 메뉴 방식이 적용돼 개별 프로그램 내용 영역을 클릭하면 선택한 프로그램만 활성화되어 직접 촬영한 영상을 3초 분량의 시네마그래프로 변환해 일명 ‘움짤’ 느낌을 준다. 해양 생물의 귀엽고 재미난 모습을 자연스러우면서도 인상적으로 보여준 요소다.
온라인으로 먼저 느끼는 바닷속 감동
기존 웹사이트 및 대부분의 타 아쿠아리움 사이트가 일반적인 정보 제공 목적의 블로그 타입이라면, 리뉴얼된 웹사이트는 단순 정보성 콘텐츠를 넘어 ‘체험’이라는 사용자 경험을 콘셉트로 비주얼과 직접 촬영한 영상 콘텐츠를 주로 활용한 브랜딩 사이트라 할 수 있다. PC 웹사이트의 와이드한 화면 영역을 적극적으로 활용해 아쿠아리움의 웅장한 스케일과 각 지점의 대표 해양생물 또는 프로그램을 메인화면 백그라운드에 표현했고, 각 서브 화면에는 동적인 시각 콘텐츠를 배치했다.
아쿠아플라넷을 가장 잘 즐길 수 있도록
아쿠아리움 방문 전, 웹사이트에 한 번씩 들어가 보는 사용자의 행동을 고려해 VR 영상 가이드맵 콘텐츠를 비롯하여 주요 스팟에 대한 인포메이션으로 디지털 ‘체험’ 공간을 확장했다. 특히, 기존 전시관 가이드맵 콘텐츠는 다소 산만하고 디자인 룩이 지점마다 달라 일관된 사용자 경험을 제공하지 못하고 있었는데, 실측 도면 비율을 시각화한 일러스트 맵 이미지를 활용해 관람 영역 특성을 고려해 카테고리를 크게 구분했다.
각 영역의 주요 스팟을 하단의 썸네일 이미지로 좌우 스크롤해서 시각적으로 잘 눈에 띄게 표현했고, 썸네일 또는 맵 이미지를 클릭하면 상세정보를 볼 수 있는 레이어 팝업이 표시되어 VR 영상 콘텐츠와 함께 해양생물의 위치 및 정보를 쉽게 둘러볼 수 있는 웹사이트 구조로 개선됐다.
또한, 방문 시간별 최적화된 관람 동선을 제공하기 위해 전시관 층별 주요 스팟을 타임라인으로 한눈에 볼 수 있도록 프로그램 시간표를 구성했다. 결과적으로 방문자가 현장 방문 당일의 프로그램 시간표를 확인하고, 프로그램 시작 시간과 관람 소요 시간을 체크한 후 층 전체에서 진행하는 다양한 프로그램을 효율적으로 경험할 수 있게 됐다.
해양생물을 만나는 새로운 기회
서비스를 직접 경험해야 인사이트를 얻을 수 있다는 원칙 아래, 주요 프로그램 영상 및 vr 콘텐츠 제작을 위해 이트라이브 팀원들은 바쁜 일정을 쪼개 협장 답사를 진행했다. 휴대폰 카메라를 들고 전시관 내 모든 곳을 구석구석 돌아다니며 관람 동선과 해양생물의 모습을 촬영하고 면밀히 관찰했다. 이 현장감을 어떻게하면 웹사이트 방문자들에게 잘 전달할 수 있을지 밤새 논의했는데, 이는 마치 한 편의 영화 시나리오를 만드는 과정과도 같았다는 후문이다. 이러한 노력 끝에 국내 최초로 360 vr 영상을 탑재한 아쿠아리움 브랜드 사이트가 탄생하게 됐다.
현재 전 세계적인 비상사태로 외출을 자제하는 분위기로 인해 현장의 관람객이 줄고 있는 상황에서 웹사이트 오픈 소식이 반가운 상황만은 아닐지도 모른다. 하지만 역으로, 이번 리뉴얼 웹사이트가 아쿠아플라넷의 매력적인 해양생물과 디지털 콘텐츠를 체험할 수 있는 새로운 기회가 되기를 바란다.
Mini Interview
서비스인사이트그룹 서비스팀
추승휘 팀장
프로젝트를 마치신 소감이 궁금합니다.
이번 프로젝트는 단순히 웹사이트를 만드는 작업이 아니었습니다. 현장을 통해 바라보는 모습을 다양한 디지털 콘텐츠로 표현하여 통합하는 과정에서 가상의 공간에서 가져다주는 ‘체험’이라는 요소를 어떻게 표현할 수 있을까를 고민해야 하는 상황이었습니다.
결국 현장의 아날로그 방식의 경험을 디지털 방식으로 체험할 수 있도록 이식하는 작업이었고, 우리가 수족관에서 바라보는 웅장하고 신비로운 광경을 웹사이트에서도 느낄 수 있도록 구현하는 과정의 프로젝트였습니다. 이제는 한화 아쿠아플라넷 웹사이트가 정보 습득이 아닌 “체험한다”의 관점으로 확장되었으면 좋겠습니다.
프로젝트를 함께한 동료분들께 한마디 부탁드립니다.
제작이 완료된 이후에 사용자들은 웹사이트를 경험하지만, 저희는 제작하는 과정 자체의 경험이 더 중요한 것이 많습니다. 결국 프로젝트에서 중요한 것은 만드는 사람들이고, 그 사람들의 경험이 집대성되어 결과물로서 나오는 과정이죠.
이번 프로젝트에서 만난 한화 아쿠아플라넷의 현업 담당자분들과 작업 과정에서 여러 제한적인 상황들이 있었습니다. 하지만, 초기 단계부터 완료까지 주파수를 맞추기 위한 긴밀하고 시의적절한 미팅을 통해 아젠다를 정의해 주요 목표와 우선순위를 짧은 시간 안에 도출하여 완료할 수 있었습니다.
제한적인 상황에서 함께 각 지점의 시그니처 영상을 맛깔나게 만들어주신 영상팀의 감독님과 스태프분들, 그리고 항상 최고의 퀄리티를 위해 같은 방향을 바라보고 달려준 TF 팀원들에게 감사드립니다. 이번 프로젝트를 통해 ‘새로움을 도전하는 사람이 만드는 새로움’이라는 수식어가 모두에게 붙기를 바랍니다.
