온라인 쇼핑몰 업계의 Issue! 인터파크 리뉴얼

2005/04/23 09:10

먼저 방문해 주셔서 감사합니다. ^0^

부족한 제 포스팅이 읽을만 한지도 잘 모르겠습니다. 단지 글을 읽으실때 꼭 끝까지 읽어주시고.. 글의 중요한 부분은 제가 항상 Bold로 진하게 표시를 해 두니... 읽어주시길 바랍니다. 그리고... 다른 의견이나 나누고 싶은 의견이 있으시면 댓글을 달아 주십시오.

제 블로그에 이런 표시를 하게 될지는 몰랐는데.. 어째튼... 글 내용을 오해하시고 잘못된 댓글 올라와 간혹 논쟁이 되어 버리는 경우가 생겨 이런 표시를 하게 되었습니다. 댓글 달때 글 내용을 꼼꼼히 읽어보시고 달아주십시오. 불편을 끼쳐 죄송스럽고, 너그러이 이해... 협조 부탁드립니다.

향기나는 블로그를 만듭시다~~!! 향기+블로그

아직 강팀장 과 트위터 친구가 아니라구요? 지금 팔로우를 신청하세요~ ^^

㈜픽스다인, 대한민국 온라인 쇼핑몰 업계의 Issue! 인터파크 리뉴얼
→Client : ㈜인터파크
→URL :http://www.interpark.com
→제작 : ㈜픽스다인

㈜픽스다인, 대한민국 온라인 쇼핑몰 업계의 Issue! 인터파크 리뉴얼

인터넷 쇼핑몰 인터파크는 지난 3월 새로운 C.I와 함께, 선도적인 인터넷 쇼핑몰로서의 위상과 함께 변화하는 Trends의 수용을 위해 전면적인 웹사이트의 리뉴얼을 계획하였다.

그 동안 인터파크는 디자인 위주의 단발적인 개편은 수시로 이루어졌지만, 전체적인 의미의 개편은 3년 만에 이루어지는 만큼 변화! 온라인 쇼핑몰의 선두주자로서, 획일화된 웹사이트 구조의 새로운 변화에 초점을 맞추었다.

인터파크가 원하는 웹사이트 리뉴얼의 목적은?
첫째, 종합 쇼핑 미디어로서 정보전달력이 강화된 INTERPARK Identity 확립
둘째, 사용자 중심의 카테고리 분류를 통한 최적의 User Interface 구현
즉 인터파크 웹사이트는 편리하며 직관적인 Interface의 구현으로 뒷받침 된, INTERPARK만의 쇼핑미디어로서 차별적인 Identity를 구축하는 것이었으며
차별적인 Identity안에 새롭게 선보이는 Hyper-grid 라는 새로운 텍스트 구조가 숨어 있었다.

인터파크는 Mall, 도서, 티켓, 여행 등의 다양한 쇼핑미디어로 타겟층도 다양하다.
인터넷이라는 매체의 쇼핑몰인 만큼 인터넷에 익숙한 25~35세 남/녀가 Core Target이다.
목적별로는 구매상품을 결정한 목적 방문자와 광고배너 또는 이벤트 등을 통하여 유입된 단순 방문자로 구분할 수 있다.
(목적 방문자에는 인터파크의 회원으로 적립금 활용 등의 충성도 높은 방문자와 구매상품의 종류만 결정하여 타 쇼핑몰과 비교하여 구매하고자 하는 방문자가 있다.)
픽스다인은 Core Target을 “성취를 목적으로 정보화에 기반한 선택적인 의사 결정자(Prospective User)” 로 정의하고 그들의 성향에 부흥할 수 있는 인터파크를 만들기 위한 작업을 진행하였다.

[ Hyper-Grid ]

일반적으로 Usability를 다룬 선행 연구에 따르면
온라인 상에서 User와 웹사이트간에 재미와 함께 직관력, 기술수준의 균형을 이룬 상호작용에 의해 지속적인 탐색의지는 상승되고, 비로서 User에게 만족감을 주고 웹사이트의 Loyalty를 확보게 되는 것이다.
즉, Design과 Usability의 만족도가 높을수록 웹사이트 이용 만족도 또한 높아진다고 할 수 있다.
복잡하게 이루어진 쇼핑몰에서 Usability는 따로 목표로 정의하지 않다 하더라도 빼놓을 수 없는 기본적인 사항일 것이다.
그렇다면 인터파크의 Usability의 주안점은 과연 무엇일까?
웹사이트를 진행하고 탐색하게 될 User를 빼놓을 수는 없을 것이다.
이에 따라 인터파크와 User와의 “관계”라는 측면에서 본 Usability Concept을 정의한다면 다음과 같다.
인터파크는 나를 중심으로 연결되어,
편리하게, 이해하기 쉬운, One-Stop 서비스일 것이다.
바로 “나”
쇼핑몰의 메인화면은 URL을 치고 들어가서 보이는 첫 화면이 아니라
바로 나 자신이라고 할 수 있을 것이다.
MP3 플레이어를 알아보고 싶은 User는 생활가전을 가장 먼저 찾고 싶어할 것이며
결혼을 준비하는 신부는 혼수특별전이라는 컨텐츠를 가장 먼저 찾고 싶어할 것이다.
(이들은 PiXDINE은 Prospective User로 정의하였다)

어떤 사람들은 그냥 무엇이 있나 둘러 보는 사람이 있을 것이다.
(이들을 PiXDINE은 Flow User로 정의하였다.)

이를 이미 알고 있었던 인터파크 측은 가전, 생활, 전자, 티켓 등의 각각의 쇼핑컨텐츠가 기존의 메인화면과 서브화면의 구조가 아닌 각각이 메인이 될 수 있는 구조를 기획하였으며
이에 픽스다인은 Hyper-grid라는 새로운 개념을 착안하여 수행하였다.

Hyper – grid란 Grid 의 각 면-여기서는 주요 컨텐츠-이 각각이 메인이 될 수 있고 다른 메인의 서브가 될 수 있는 구조를 말하며 일반적으로 Hyper-Text라는 웹사이트가 어느 순간부터 메인 화면, 서브 화면으로 관행적으로 굳어져 고정되어 가는 것에 대한 작은 혁명이었다.

인터파크가 Paradigm Leader가 되기 위한 방법의 시작
온라인 종합 쇼핑미디어로서 정보에 대한 접근 및 이동이 신속해야 하며, 효과적으로 정보를 전달하고, User에게 익숙하지만 흥미 있는 경험을 주도록 하는 것을 목적으로 구체적인 방안들을 잡아 하나씩 해결해 나갔다.

첫째, 서비스 채널 간 독립성을 부여하되, 일관성 있는 커뮤니케이션의 연출
둘째, 명확한 개념의 Header와 Footer의 적용으로 편리한 Navigation 유도(Easy Learning)
셋째, 정보의 가독성이 뛰어나며 User의 이해 속도 향상을 고려한 Lay-Out

- Change Pattern
기존의 인터파크는 서비스간 채널 이동이 난해하거나 어려운 구조로 되어 있기 때문에 사용자가 머뭇거리거나 사이트를 이탈하는 현상이 발생할 여지가 컸다.
따라서 직관적 이해와 학습이 쉬운 서비스 간 채널 전환을 지원을 위하여 픽스다인은 Hyper-Grid를 도입하였다.

- Click Stream

깊은 Depth까지 쉬운 접근이 가능하고, Location 정의를 통한 최단 거리 이동이 용이한 네비게이션의 구현

- Layout
상품이미지 나열 중심의 화면에서 벗어나 종합 쇼핑미디어로서의 정보전달력 강화를 목적으로 하였으며 이에 따른 사용자의 학습 수고를 최대한 줄여주며 효과적인 정보 노출을 위한 레이아웃 설계

- Consistency
채널 네비게이션과 통합 검색이 포함된 Header를 모든 서비스 채널에 공통적으로 사용하여 일관성 있는 Identity 유지하고 전문적 성격의 서비스 채널에서는 자체 로컬 네비게이션을 별도로 적용하여 독립성을 보장

구별이 잘 안되는 인터넷 쇼핑몰 어떻게 디자인 할 것인가?

(PT 당시 위의 쇼핑몰 이미지를 나열하고 인터파크를 구별해 보라고 하자 모두들
“아~”하고 무릎을 치며 공감하였다. 그분들은 쉽게 인터파크를 알 수 있었겠지만…)

국내 최초의 쇼핑몰 인터파크의 탄생은 녹색의 컬러와 함께 시작되었다.
웹사이트의 Identity를 녹색의 컬러로 강하게 유지시켰으나 리뉴얼이 거듭되면서 그 Identity는 점점 희미해져 가고 있는 모습을 보이고 있다.

- 아이덴티티 확립
종합 쇼핑 미디어로 자리매김을 하기 위한 정보전달력이 강화된 인터파크만의 아이덴티티 확립
- 사용자 편의성 극대화시킨 유저빌러티 개선
사용자 중심의 카테고리 분류와 이미지 위주의 광고전단과 같은 이미지 탈피.
원하는 상품 군을 쉽게 찾을 수 있도록 상품 군과 검색에 대한 타이틀, 그룹핑, 위치 개선
- 확장 및 유지보수가 용이한 구조
중, 소 분류 카테고리 재 분류 시 유지관리가 용이하며, 영업/마케팅 툴로서의 활용도가 강화된 UI 설계

- Integration
개별적인 Identity의 통합화

- Navigation

기존에는 인터파크만의 특별한 아이덴티티를 반영하지 못한 심플한 스타일의 네비게이션이었으나, 새로운 CI의 Shape을 응용하여 네비게이션에 적용하여 새로운 아이덴티티를 강화.
인터파크 사이트의 Malls Navigation 은 Script를 사용하여 최소한의 마우스 움직임으로 직관적으로 원하는Mall로 쉽게 접근이 가능하도록 디자인.
메뉴 구분은 크게 상단 기본 카테고리 10개와 부수적인 카테고리로 구분 되며 Rollover를 이용하여 방향성을 명확히 지시.

- Image Strategy

기존에는 규칙을 찾아보기 힘든 이미지 표현 방식이었으나, 전략에 입각한 일관성 있는 이미지 표현 방식으로 개편

- Color System

특정 카테고리가 아닌 고객센터 등의 인터파크라는 이름으로 서비스 되는 페이지에(회사소개, 회원가입, 고객센터 등) 아이덴티티의 컬러를 충분히 반영.

- Shopping Category Menu

Category Navigation은 기본 고정 사이즈에서 모두보기 버튼을 이용하여 960pixcel로 사이즈가 변화되면서 해당 하위 모든 카테고리를 한눈에 볼 수 있도록 구성.
별도의 인클루딩 개념의 파일을 따로 관리하여 유지보수의 편이성과 함께 해당 카테고리의 즉각적인 업데이트를 고려.

- Banner 규칙 적용

기존 티켓 카테고리의 경우 표현 방법이나 사이즈가 너무 다양해 유지관리에 어려움.
개편 후 표현방법과 사이즈는 물론 사이트에 규칙을 두어 일관성을 유지한 빠른 유지관리가 가능하고, 배너의 위치를 전략적으로 교체가 가능.

새롭게 리뉴얼된 인터파크의 웹사이트는 기존 쇼핑몰과 다른 정보 접근성을 최대한 높이고 각 쇼핑 카테고리 별 독립성을 보장하여 웹사이트를 통합하였다.
최적화된 User의 사용성을 목적으로 전체 네비게이션은 탭을 사용하여, 드롭다운으로 해당 분류의 모든 카테고리가 펼쳐지는 방식을 택하였다.
기존의 쇼핑몰에서 상품보다 배너, 이벤트 기타 타이틀이나 비쥬얼 요소들이 부각되었다면, 리뉴얼된 인터파크의 웹사이트에서는 요소들의 색감을 최대한 억제하고 사이즈 등을 스타일로 규정지어 상품 자체로의 주목도를 높이고 신속한 정보전달력을 강화하였다.

인터파크는 쇼핑몰을 1차 오픈하고 이어 티켓/여행/도서 등 순차적인 오픈으로 현재는 도서를 제외한 전체 웹사이트의 개편이 완료되었다.
특히 1차 오픈 이후 새로운 텍스트의 해석으로 구축된 네비게이션으로
타쇼핑몰과 업계에 센세이션을 일으키고, 인터파크가 온라인 쇼핑몰 선두업체인만큼 후발 업체들의 벤치마크 대상으로 쇼핑몰 프로젝트의 끊임없는 문의가 쇄도하고 있다.

픽스다인은 웹사이트 개편 프로젝트 이외에 인터파크의 새로운 오픈 마켓인 미니샵을 추가 프로젝트로 수주하여 10월 20일 서비스를 오픈 하였다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'PRJ노하우&분석' 카테고리의 다른 글

위즈위드 쇼핑몰 웹사이트 프로젝트 (0)	2005/04/23
온라인 쇼핑몰 업계의 Issue! 인터파크 리뉴얼 (1)	2005/04/23
파송송계란탁~! 웹사이트의 충격[상상의 나래를 펴라~] (0)	2005/04/12