.gif) |
㈜픽스다인, 대한민국 온라인 쇼핑몰 업계의 Issue! 인터파크 리뉴얼 →Client : ㈜인터파크 →URL :http://www.interpark.com →제작 : ㈜픽스다인 |
| ㈜픽스다인, 대한민국 온라인 쇼핑몰 업계의 Issue! 인터파크 리뉴얼 | |
 |
| 인터넷 쇼핑몰 인터파크는 지난 3월 새로운 C.I와 함께, 선도적인 인터넷 쇼핑몰로서의 위상과 함께 변화하는 Trends의 수용을 위해 전면적인 웹사이트의 리뉴얼을 계획하였다. 그 동안 인터파크는 디자인 위주의 단발적인 개편은 수시로 이루어졌지만, 전체적인 의미의 개편은 3년 만에 이루어지는 만큼 변화! 온라인 쇼핑몰의 선두주자로서, 획일화된 웹사이트 구조의 새로운 변화에 초점을 맞추었다. |
.gif) |
 |
.gif) |
| 인터파크가 원하는 웹사이트 리뉴얼의 목적은? 첫째, 종합 쇼핑 미디어로서 정보전달력이 강화된 INTERPARK Identity 확립 둘째, 사용자 중심의 카테고리 분류를 통한 최적의 User Interface 구현 즉 인터파크 웹사이트는 편리하며 직관적인 Interface의 구현으로 뒷받침 된, INTERPARK만의 쇼핑미디어로서 차별적인 Identity를 구축하는 것이었으며 차별적인 Identity안에 새롭게 선보이는 Hyper-grid 라는 새로운 텍스트 구조가 숨어 있었다. |
 |
| 인터파크는 Mall, 도서, 티켓, 여행 등의 다양한 쇼핑미디어로 타겟층도 다양하다. 인터넷이라는 매체의 쇼핑몰인 만큼 인터넷에 익숙한 25~35세 남/녀가 Core Target이다. 목적별로는 구매상품을 결정한 목적 방문자와 광고배너 또는 이벤트 등을 통하여 유입된 단순 방문자로 구분할 수 있다. (목적 방문자에는 인터파크의 회원으로 적립금 활용 등의 충성도 높은 방문자와 구매상품의 종류만 결정하여 타 쇼핑몰과 비교하여 구매하고자 하는 방문자가 있다.) 픽스다인은 Core Target을 “성취를 목적으로 정보화에 기반한 선택적인 의사 결정자(Prospective User)” 로 정의하고 그들의 성향에 부흥할 수 있는 인터파크를 만들기 위한 작업을 진행하였다. |
 |
| [ Hyper-Grid ] |
.gif) |
| 일반적으로 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라는 웹사이트가 어느 순간부터 메인 화면, 서브 화면으로 관행적으로 굳어져 고정되어 가는 것에 대한 작은 혁명이었다. |
 |
 |
BODY {
MARGIN: 0px; FONT: 12px/17px 돋움; COLOR: #000000; BACKGROUND-COLOR: #ffffff
}
TD {
FONT: 12px 돋움
}
P {
MARGIN: 0px
}
IMG {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
}
IMG.img_bottom02 {
MARGIN-BOTTOM: 2px
}
.td_txt {
FONT: 12px 돋움; COLOR: #666666
}
.view_post {
WORD-BREAK: break-all; LINE-HEIGHT: 17px; TEXT-ALIGN: justify
}
.view_type {
FONT: bold 12px 돋움; COLOR: #999999; TEXT-DECORATION: none
}
A.view_type:hover {
FONT: bold 12px 돋움; COLOR: #343434; TEXT-DECORATION: none
}
.view_type_on {
FONT: bold 12px 돋움; COLOR: #343434; TEXT-DECORATION: none
}
A.view_type_on:hover {
FONT: bold 12px 돋움; COLOR: #343434; TEXT-DECORATION: none
}
.page {
FONT: bold 10px verdana; COLOR: #999999; TEXT-DECORATION: none
}
A.page:hover {
FONT: bold 10px verdana; COLOR: #343434; TEXT-DECORATION: none
}
.page_on {
FONT: bold 10px verdana; COLOR: #343434; TEXT-DECORATION: none
}
.txt_id {
COLOR: #343434; LETTER-SPACING: -1px; TEXT-DECORATION: underline
}
A.txt_id {
COLOR: #343434; LETTER-SPACING: -1px; TEXT-DECORATION: underline
}
.link {
COLOR: #666666; TEXT-DECORATION: none
}
A.link:hover {
FONT-SIZE: 12px; COLOR: #666666; FONT-FAMILY: 돋움; TEXT-DECORATION: underline
}
.post_link {
FONT: 12px 돋움; COLOR: #666666; TEXT-DECORATION: none
}
A.post_link:hover {
FONT: 12px 돋움; COLOR: #666666; TEXT-DECORATION: underline
}
.post_reply {
FONT-SIZE: 12px; COLOR: #666666; TEXT-DECORATION: none
}
A.post_reply:hover {
FONT-SIZE: 12px; COLOR: #666666; TEXT-DECORATION: underline
}
.post_reply_on {
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #624a9b; TEXT-DECORATION: none
}
A.post_reply_on {
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #624a9b; TEXT-DECORATION: none
}
.post_url {
FONT: 9px verdana; COLOR: #999999; TEXT-DECORATION: none
}
A.post_url:hover {
FONT: 9px verdana; COLOR: #999999; TEXT-DECORATION: underline
}
.line_17 {
LINE-HEIGHT: 17px
}
.txt_34 {
COLOR: #343434
}
A.txt_34:hover {
FONT-SIZE: 12px; COLOR: #343434; FONT-FAMILY: 돋움; TEXT-DECORATION: underline
}
.txt_F6 {
COLOR: #ff6600
}
A.txt_F6:hover {
FONT-SIZE: 12px; COLOR: #ff6600; FONT-FAMILY: 돋움; TEXT-DECORATION: underline
}
.txt_62 {
COLOR: #624a9b
}
.txt_99 {
COLOR: #999999
}
.txt_verdana {
FONT-FAMILY: verdana
}
.txt_bold {
FONT-WEIGHT: bold
}
.txt_size12 {
FONT-SIZE: 12px
}
.txt_size10 {
FONT-SIZE: 10px
}
|
BODY {
MARGIN: 0px; FONT: 12px/17px 돋움; COLOR: #000000; BACKGROUND-COLOR: #ffffff
}
TD {
FONT: 12px 돋움
}
P {
MARGIN: 0px
}
IMG {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
}
IMG.img_bottom02 {
MARGIN-BOTTOM: 2px
}
.td_txt {
FONT: 12px 돋움; COLOR: #666666
}
.view_post {
WORD-BREAK: break-all; LINE-HEIGHT: 17px; TEXT-ALIGN: justify
}
.view_type {
FONT: bold 12px 돋움; COLOR: #999999; TEXT-DECORATION: none
}
A.view_type:hover {
FONT: bold 12px 돋움; COLOR: #343434; TEXT-DECORATION: none
}
.view_type_on {
FONT: bold 12px 돋움; COLOR: #343434; TEXT-DECORATION: none
}
A.view_type_on:hover {
FONT: bold 12px 돋움; COLOR: #343434; TEXT-DECORATION: none
}
.page {
FONT: bold 10px verdana; COLOR: #999999; TEXT-DECORATION: none
}
A.page:hover {
FONT: bold 10px verdana; COLOR: #343434; TEXT-DECORATION: none
}
.page_on {
FONT: bold 10px verdana; COLOR: #343434; TEXT-DECORATION: none
}
.txt_id {
COLOR: #343434; LETTER-SPACING: -1px; TEXT-DECORATION: underline
}
A.txt_id {
COLOR: #343434; LETTER-SPACING: -1px; TEXT-DECORATION: underline
}
.link {
COLOR: #666666; TEXT-DECORATION: none
}
A.link:hover {
FONT-SIZE: 12px; COLOR: #666666; FONT-FAMILY: 돋움; TEXT-DECORATION: underline
}
.post_link {
FONT: 12px 돋움; COLOR: #666666; TEXT-DECORATION: none
}
A.post_link:hover {
FONT: 12px 돋움; COLOR: #666666; TEXT-DECORATION: underline
}
.post_reply {
FONT-SIZE: 12px; COLOR: #666666; TEXT-DECORATION: none
}
A.post_reply:hover {
FONT-SIZE: 12px; COLOR: #666666; TEXT-DECORATION: underline
}
.post_reply_on {
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #624a9b; TEXT-DECORATION: none
}
A.post_reply_on {
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #624a9b; TEXT-DECORATION: none
}
.post_url {
FONT: 9px verdana; COLOR: #999999; TEXT-DECORATION: none
}
A.post_url:hover {
FONT: 9px verdana; COLOR: #999999; TEXT-DECORATION: underline
}
.line_17 {
LINE-HEIGHT: 17px
}
.txt_34 {
COLOR: #343434
}
A.txt_34:hover {
FONT-SIZE: 12px; COLOR: #343434; FONT-FAMILY: 돋움; TEXT-DECORATION: underline
}
.txt_F6 {
COLOR: #ff6600
}
A.txt_F6:hover {
FONT-SIZE: 12px; COLOR: #ff6600; FONT-FAMILY: 돋움; TEXT-DECORATION: underline
}
.txt_62 {
COLOR: #624a9b
}
.txt_99 {
COLOR: #999999
}
.txt_verdana {
FONT-FAMILY: verdana
}
.txt_bold {
FONT-WEIGHT: bold
}
.txt_size12 {
FONT-SIZE: 12px
}
.txt_size10 {
FONT-SIZE: 10px
}
|
