Window to the Future, 엔씨 공식 웹사이트 리뉴얼
더즈인터랙티브는 WebGL을 적용한 엔씨의 새로운 웹사이트로 새로운 경험을 선사했다.
- 프로젝트명. 엔씨 공식 웹사이트 리뉴얼
- 클라이언트. 엔씨
- 제작사. does interactive(더즈인터랙티브)
- 집행기간. 2019. 09 ~ 2020. 03
- 오픈일. 2020. 03. 11(국문 기준)
- URL. kr.ncsoft.com
- 사진. does interactive(더즈인터랙티브) 제공
즐거운 세상을 경험하다
‘Window to the Future(미래를 보는 창)’라는 의미가 담긴 신규 CI를 발표한 엔씨는 새로운 브랜드 스토리를 잘 담아내기 위해 웹사이트 리뉴얼이 필요했다. 특히, 게임뿐만 아니라 다양한 영역으로 서비스를 확장하는 시점에서, 엔씨만의 독창적인 기술로 연결된 ‘즐거운 세상’을 방문자들이 경험하기를 희망했다. 더즈인터랙티브는 새로워진 웹사이트가 엔씨의 브랜딩 전반에서 하나의 상징적인 역할을 할 수 있도록 리뉴얼을 진행했다.
무엇보다 엔씨 공식 웹사이트의 경우, 게임 및 캐릭터 등 엔터테인먼트 분야에 관심이 있는 그룹과 투자 정보, 뉴스 등의 기업 정보를 얻고자 하는 그룹 등 방문자층이 폭넓은 편이었던 만큼, 개별 방문자들이 엔씨의 핵심 메시지는 공통적으로 전달받되, 각자가 원하는 정보 및 페이지에 접근하기 용이하도록 구성하는 것이 이번 프로젝트의 가장 중요한 과제였다.
WebGL로 선사한 새로운 세상
기존 웹사이트에는 엔씨의 정체성을 보여줄 만한 공간이 많지 않다는 아쉬움이 있었다. 이에 리뉴얼 작업 전, 첨단 기술력과 엔씨만의 크리에이티브 역량을 보여줄 방안에 대해 긴 시간 논의했다. 그 결과 메인이자 인트로를 임팩트 있게 구성하자는 결론을 도출했고, 사이트 진입 시, 신규 CI가 중앙에 등장하고 그 안으로 빨려 들어가면서 새로운 세계가 펼쳐지도록 했다.
특히, 이번 사이트에서는 플러그인 없이 웹에서 실시간 3D를 구현할 수 있는 WebGL 기술을 적극적으로 활용했다. 이로써 기존 CPU 중심에서 디바이스의 GPU를 적극 사용하는 커스텀 셰이더를 적용해 수백만 개의 파티클에 라이팅과 애니메이션, 모핑까지 리얼타임 렌더할 수 있었다. 이렇게 만들어진 새로운 세상은 방문자에게 인터랙티브하고 새로운 웹 경험을 몰입감 넘치게 선사한다.
뿐만 아니라, 엔씨의 Sound Center에서 게임 OST 4곡의 멜로디를 하나의 곡으로 재편집했고 이를 인트로 페이지의 BGM으로 설정함으로써 비주얼과 사운드가 결합한 풍성한 웹 경험을 가능케 했다. 엔씨의 브랜드커뮤니케이션실과 Sound Center, 그리고 더즈인터랙티브의 개발팀, 비주얼 아티스트가 함께 협업한 크리에이티브의 결과물이다.
지식과 기술, 사람이 연결된 즐거운 세상
이번 프로젝트에서 가장 중요하게 생각한 키워드는 ‘연결’이었다. 지식이 모여 첨단 기술이 되고, 이러한 기술이 창조적인 세계를 만들며, 그 세계 안에서 사람들이 유기적으로 연결되어 탄생하는 ‘즐거운 세상’을 그렸기 때문이다. ‘연결’이라는 요소를 웹사이트 내에서 직간접적으로 경험하도록 하는 것이 미션이었던 만큼, 초반 웹사이트 구조 및 사용자 시나리오 구성 단계에서도 이 부분을 가장 중점적으로 고려했다.
이러한 고민이 잘 드러나는 것 중 하나가 WHAT WE CREATE라는 메뉴인데, 이는 엔씨의 게임을 소개하는 페이지로 7가지의 각 페이지가 하나로 연결되어 있다. 예를 들어, 리니지1의 소개를 모두 본 후 아래로 계속해서 스크롤하면 리니지2를 연결해서 볼 수 있도록 구성되어 있다. 7가지의 별도 페이지이지만, 방문자 입장에서는 끊임없이 이어서 볼 수 있도록 함으로써 서로 다르지만 하나의 큰 연결고리를 경험할 수 있다.
이러한 구조적인 측면과 아울러, 비주얼적으로도 임팩트를 놓치지 않기 위해 작은 부분들에 많은 공을 들였다. 예를 들면 모든 메인 상단에 시네마 그래프(Cinemagraph) 효과를 주어 캐릭터나 그 배경들이 살아 숨 쉬는 것처럼 묘사했고, 스크롤을 내리면서 보이는 패럴럭스(Parallax) 효과를 통해 시각적 단조로움을 피했다. 디자인팀과 개발팀, 모션팀의 협업을 통해 아주 작은 디자인이나 모션 요소에도 자연스럽게 ‘연결’의 속성을 숨겨둔 셈이다.
브랜드를 각인시키는 비주얼 전략
한편, 메인이자 인트로 영역을 제외한 나머지 페이지들은 모두 볼드&미니멀리즘을 기본으로 디자인되었다. 플랫하면서도 볼드한 비주얼로 변경된 신규 CI에는 엔씨만의 대담함과 진지함이 담겼는데, 이를 웹사이트에도 오롯이 반영하고자 했기 때문이다.
비주얼적 요소 측면의 선택과 집중을 위해 엔씨와 더즈인터랙티브는 끊임없이 논의하며 무엇을 더 뺄 수 있을지 고민했는데, 이 과정에서 자칫 비주얼 방향이 지루하거나 심심해질 수도 있었기 때문에 더욱 디테일하고 섬세한 모션감으로 이를 보완하기로 했다. 위트 있는 모션을 찾기 위해 많은 레퍼런스를 참고했고, 모션의 속도와 각도를 여러 차례 다듬으며 스크롤에 따른 이동 정도를 기종과 브라우저별로, 또 마우스의 종류별로 확인하며 결정했다.
또 하나의 비주얼 전략은 컬러였다. CI가 변경되면서 대표되는 브랜드 컬러가 있었고, 이를 넓은 영역에 사용하지 않으면서도 사람들의 머릿속에 포지셔닝 될 수 있도록 디자인에 반영했다. 마우스 오버 시 버튼의 컬러가 전환되거나 하이라이트 라인의 컬러 등 곳곳에 포함된 포인트 컬러가 지속적으로 노출되도록 했다. 사소한 영역이지만 노출 빈도를 높임으로써 피로감은 없되, 기억에 남는 브랜딩이 될 수 있도록 했다.
즐거움을 고민하는 이들
엔씨는 게임이라는 ‘즐거운’ 서비스를 제공하는 만큼 위트를 좋아하는 회사이기도 하다. 이번 웹사이트에서도 방문자가 발견할 수 있는 이스터 에그를 넣기 위해 고민했다. 인트로의 세 번째 테마인 ‘즐거움으로 연결된 세계’는 리니지의 아덴성을 파티클로 형상화해 표현한 공간으로, 자세히 보시면 성 곳곳에 유난히 밝고 크게 빛나는 5개의 파티클이 보인다.
이것을 클릭하면 Hidden Message를 발견할 수 있는데, 각각의 메시지에는 그동안 엔씨의 게임을 즐겨온 유저라면 누구나 반가워할 내용과 일러스트들이 담겨있다. 또한, 엔씨 Sound Center의 도움으로 메시지 별로 해당 게임에서 실제 사용됐던 상징적인 효과음들까지 다시금 들어볼 수 있다. 물론 작은 부분일 수 있지만, 방문자와 유저에게 즐거움을 주기 위해 애쓰고 고민한 엔씨의 진심을 느껴볼 수 있는 대목이다.
또 하나 눈에 띄는 부분은 NC 21 MOMENTS라는 페이지다. 엔씨의 히스토리를 살펴보면, 기본적인 회사의 연혁 외에도 재미있는 행사나 이슈들이 20년 넘는 시간 동안 많이 일어났다는 것을 알 수 있다. 이번 리뉴얼 프로젝트에서는 이것들을 재미있게 구성해 대중들에게도 알리고 나누면 어떨까 하는 생각에 해당 페이지를 기획하게 되었다. 공식 웹사이트지만 딱딱하지 않게 21가지의 ‘키워드’로 풀어낸 특별한 페이지로, 어떻게 하면 유연하면서도 직관적으로 전달할 수 있을지 고민했다.
MINI INTERVIEW
장슬기 does interactive(더즈 인터랙티브) 기획팀 대리
프로젝트를 마무리하신 소감이 궁금합니다.
이번 엔씨와의 프로젝트는 정말 협업이 시너지를 낸 작업이었습니다.
킥오프 미팅에서부터 굉장히 적극적으로 의견과 아이디어를 내주셨고,
동시에 저희를 믿고 귀를 열어주셔서 자유로운 의견 교류가 가능했던 것 같습니다.
워낙 명확한 철학과 메시지를 가지고 계셨기 때문에 그것을 바탕으로
다양한 표현법을 고민할 수 있었고 그 과정이 내부에서도 재미있었던 프로젝트입니다.
이번 신규 브랜딩의 일환으로 웹사이트가 하나의 역할을 해주길 기대하며
다음번 챌린지가 될 만한 프로젝트가 있다면 또 한 번 함께 해보고 싶습니다.
프로젝트 결과에 대한 평가는 어떤지 궁금합니다.
다른 프로젝트보다 이번 웹사이트 오픈 이후 가장 긴장했던 것 같습니다.
색다른 시도를 많이 했던 작업이었기 때문에 계속해서 봐온 내부 사람들에게는
익숙하지만 처음 보시는 분들이 어떻게 받아들일지 많이 궁금했는데요.
다행히도 오픈 이후 재미있어하시고, 특히나 개발 작업들을 하는 분들은
얼마나 노력했는지 알아주셔서 칭찬받는 기분이었습니다.
이전 웹사이트와 이번 웹사이트의 GA 수치를 2주간 비교해보았을 때
가장 눈에 띄는 차이점은 Duration Time과 이탈률 부분이었습니다.
전체 페이지에 머무는 시간이 2분 넘게 증가하였고,
이탈률 또한 이전보다 50% 이상 줄어들었습니다.
웹사이트에 들어와서 많은 정보를 얻고 엔씨가 말하고자 하는 바를
충분히 전달받도록 하는 것이 목표였기 때문에 만족스러운 결과라고 할 수 있습니다.
