세종에머슨 CC 홈페이지 제작의 목표

1. 세종에머슨 CC의 골프장 브랜딩
기존 고객과 더불어 신규 고객이 방문 전 홈페이지를 통해 세종에머슨 CC의 브랜드 가치를 웹사이트를 통해 경험 해 볼 수 있도록 하는 것이 가장 중요한 요소였습니다. 30여년간 다져진 수목의 울창한 숲속 체험은 코스마다 프라이빗한 라운딩이 가능하다는 장점이 있었습니다. 무엇보다 신규 설립된 골프장CC에 비해 광활한 페어웨이가 큰 장점이었습니다. 또한 골프장은 이용자 거주지와 거리가 있기 때문에 사전 답사 성격을 가지며 골프장의 수준을 가늠해 볼 수 있는 척도로 작용할 가능성이 컸습니다.

2. 세종에머슨 CC 내 라운딩 코스를 상세하게 볼 수 있어야 함
국내 골프장에서 각 홀마다 플레이 계획 수립을 위한 상세한 정보를 개제하는 경우는 많지 않았습니다. 있어도 상세하지 않아 실제 라운딩 하는 플레이어에게 도움이 되지 못하는게 현실이었습니다. 이에 VIUM에서는 이러한 문제를 개선하고자 모든 코스(27홀)를 새롭게 맵을 제작하여 디테일한 정보를 홈페이지에 삽입하였습니다.

3. 편리한 사용자 경험
기존 홈페이지의 사용자 배려가 느껴지지 않는 나열식 메뉴와 콘텐츠들은 명료한 정리와 압축이 필요했습니다. 사용자들에게 꼭 필요한 예약은 가장 빠르게 접근할 수 있되 디자인 가치를 훼손해서는 안되었습니다. 또한 신규 회원가입을 고려하는 방문자를 위한 골프장 가치를 나타낼 수 있는 분위기와 헤리티지, 역사, 주변 환경을 모두 감상할 수 있도록 하였습니다. 관리자 모드 또한 중요한 요소로 지속적인 회원관리를 위한 관리자모드 UI편리성을 개선함으로써 보다 높은 효율성을 달성 하여야 했습니다.

메인 비주얼 & 카피

세종시 현장 사진을 메인 비주얼로 적용하였으며 Smooth-Scroll 효과와 그에 따른 요소 변화를 부드럽게 처리하였습니다. 카피와 슬로건을 제안하여 채택에 따른 웹사이트 적용을 진행하였습니다.

지도 일러스트레이션 작업

체어원크리에이티브(비움)에서 세종에머슨 전체 맵(지도)를 제작하였습니다. 인공위성 맵과 그래픽 맵의 중간 지점의 느낌을 구현하고자 하였으며 결과적으로 성공적인 정보전달형 맵 제작을 완성 할 수 있었습니다.

지도 디테일

전체와 개별 홀, 나무와 그린, 호수와 모래를 각각 분리하여 제작하였습니다. 전체 사이즈를 크게 하되 디테일하게 제작하여 원본을 이용해 다른 내부 홍보물 제작이 가능하도록 하였습니다. 체어원크리에이티브(비움)에서 제작 된 모든 원본은 웹사이트 제작 납품과 함께 제공됩니다.

코스 공략 UI

골프 각 코스별 공략 맵을 지도를 통해 선택할 수 있는 UI를 제작하였습니다. 골프를 치기전, 혹은 치면서도 현장 코스를 분석 할 수 있습니다. 따라서 미리 전략 스터디나 브리핑을 듣지 않아도 개인 휴대폰을 통해 타격 계획을 수릭 할 수 있도록 하였습니다. 모바일에서도 동일한 선택이 가능합니다.

해당 홀을 선택하며 일러스트로 제작된 공략 지도와 그린맵, 그리고 해당 코스의 상세 사진까지 볼 수 있도록 하였습니다.

UI설계

27홀 중 하나의 홀을 보면서 다음 혹은 이전 홀을 이동하기 편해야 했습니다. 무엇보다 내가 보고 있는 현재 홀이 어디에 있는 어떤 홀인지 인지하기 위해 아웃라인 맵을 통해 인지를 하도록 하였고, 숫자 버튼을 통해 점프 이동이 가능하도록 하였습니다. 물론 화면 좌, 우 버튼을 통해서도 이전, 이후 홀으로의 이동도 가능하게 하였습니다.

예약화면

세종에머슨 홈페이지는 브랜드 홍보 기능 외에 이용자의 예약, 확인 등의 온라인 회원 기능을 포함하여 제작되었습니다. 기존 홈페이지의 UI를 개선하여 직관적이고 빠른 선택이 가능하도록 요소의 크기와 중요도 순으로 배치를 진행하였습니다. 모바일에서도 모든 기능이 가능한 반응형 형태로 퍼블리싱 되었습니다.

리뉴얼 전 기존의 홈페이지입니다. 서브페이지 내부 메뉴구성이 매우 복작하고 흩어진 정보로 인해 사용자가 내용을 이해하고 정리하기가 힘이 들었습니다. 체어원크리에이티브(비움)에서는 군더더기 없는 사이트 구성을 통해 고객들의 빠른 접근성을 높이는데 목표로 하여 메뉴를 최대한 간결/정리화 하여 정보를 한번에 파악 할 수 있도록 하였습니다.

디자인 설계 화면

이러한 프로젝트에서 가장 중요한 부분은 '기획 설계' 입니다. 사이트 전체를 한 번에 아우르는 흐름을 계속 유지 하면서 사용자 경험과 UI를 고려하면서 제작하여야 하기 때문에 진행 중 고려 되어야 할 사항이 많습니다. 정보 설계는 사용자 경험의 흐름대로 유지해 주어야 하며, 예약 시스템을 위해 즉각적인 이용자 서비스도 고려 해야 합니다. 이에 비움에서는 통합 디자인 관리 시스템 방식으로 모든 페이지를 한 화면 안에서 설계 하였습니다. 그리고 최종적인 목적인 사이트의 아름다움을 통한 온라인 브랜딩을 구현하였습니다.

기존 홈페이지의 관리자 모드 화면입니다. 관리자를 위한 UI배려가 없으며 크로스브라우징이 되어 있지 않아 한정된 환경에서만 사이트 관리를 할 수 밖에 없었습니다.

관리자 모드 UI설계

새롭게 관리자 모드 화면을 설계하여 제작을 진행하였습니다. 일관된 컬러와 베리에이션으로 집중도 높은 사용자 관리와 사이트관리가 가능하도록 하였습니다. 특히 좌측 메뉴와 우측 영역을 명확히 구분하여 카테고리 관리에 보다 집중도를 높이도록 하였습니다.