'PRJ노하우&분석'에 해당되는 글 3건

  1. 2005.04.23 위즈위드 쇼핑몰 웹사이트 프로젝트
  2. 2005.04.23 온라인 쇼핑몰 업계의 Issue! 인터파크 리뉴얼 1
  3. 2005.04.12 파송송계란탁~! 웹사이트의 충격[상상의 나래를 펴라~]
2005. 4. 23. 12:48

위즈위드 쇼핑몰 웹사이트 프로젝트


->Client : ㈜위즈위드
-> URL:
http://www.wizwid.com
->펜타브리드
->수행기간: 4개월
->주 사용 프로그램: ASP, Flash
->프로젝트 성격: 인터넷 쇼핑몰

위즈위드 쇼핑몰 웹사이트 프로젝트


트렌드 리더들의 해외 쇼핑 구매대행 사이트, 위즈위드(WIZWID). 타 사이트에서 찾아 볼 수 없는 상세한 구매 정보 제공과 구매 서비스로 방문자들로 하여금 상품을 구매하도록 유도한 사이트로, 특히 위즈위드(WIZWID)는 국내에서 구입하기 힘든 해외 상품들을 클릭(Click) 하나로 구매하도록 한 차별화 된 쇼핑몰 사이트이다.

2003년 위즈위드(WIZWID)는 한 차원 높은 서비스로 국내 대표 해외 쇼핑몰의 자리를 다시 한번 확고히 다지고자 했다. 그 발판이 바로 사이트 리뉴얼이었다.
기존의 해외 구매대행 서비스 이외에 신규서비스인 위즈몰(WIZMALL)이라는 국내 TOP 브랜드 상품 판매 서비스를 계획해온 위즈위드는 패션 트랜드에 민감한 타겟 고객을 공략할 기존 서비스 강화와 신규 서비스 도입을 사이트 리뉴얼 전략과 맞추어 내세우게 되었다.


글 제공l 펜타브리드 한재상, 김주현, 이경찬


해외 브랜드 구매대행 사이트 위즈위드는 2003년 국내 TOP 브랜드 상품도 판매할 수 있는 위즈몰(Wiz Mall) 운영을 통해 기존 서비스의 확장을 결정하였다.
이미 해외 구매대행 서비스로 패션 트렌드 리더 (Trend Leader)의 이미지로 인지를 굳힌 위즈위드(WIZWID)가 이 같은 국내 상품 판매 서비스 확장을 내세운 것은 해외 상품 구매대행의 수요가 크게 늘고 있지만, 국내에서 공급이 가능한 TOP 브랜드에 대한 고객 요구사항(Needs)이 무한하게 존재하고, 기존 해외 구매대행의 여러 가지 불편한 점(배송기간 등)을 다소 해소하기 위한 한 차원 높은 서비스를 제공하고자 한 것이다.

하지만 이를 위해서는 사이트 리뉴얼은 불가피하다.
더군다나 사이트 리뉴얼을 통해 업그레이드 된 서비스를 방문자로 하여금 인식시키기 위해서는 비주얼 전략이 필요하였다.

위즈위드(WIZWID)는 그래서 인지도 높은 eBI업체를 상대로 경쟁 프리젠테이션을 요청했다. 주요 안건은 디자인 통합 전략으로……
펜타브리드도 이 대열에 끼여 고객의 요구사항을 분석하여 그들이 만족할 수 있는 대안을 제시하고자 했다.

당시 위즈위드(WIZWID)는 무엇보다도 구입하기 힘든 해외상품들을 쉽게 인터넷에서 구입할 수 있다는 점이 가장 큰 강점이었다. 또한 구입시 언어 장벽을 해결할 수 있고, 유통과정에서 발생할 수 있는 불이익들을 미연에 방지한다는 점이 위즈위드 서비스(WizShop)의 장점이었다. 이런 이유로 위즈위드(WIZWID)에는 재구매율이 40%에 달하는 등 마니아성 충성고객들이 있다.

이 분석을 기초로 경쟁 프리젠테이션에 성공하기 위한 방법은 클라이언트의 니즈를 명확히 파악하여 그에 준한 제안내용을 구성하여 전달함으로써 자사가 가지고 있는 노하우(Know-How)에 대한 신뢰를 클라이언트로부터 얻어내는 것이다.

이를 위해서는 주어진 프로젝트에 대한 논리적이고 인과관계가 분명한 제안 내용을 작성해야 한다. 동시에 이것이 반영된 실제 아웃풋(Output)과 연계하면서 클라이언트의 이해가 용이하도록 설명함으로써 향후 실제 프로젝트의 진행에 있어서 자사의 방식을 취하게 될 때의 예상결과를 분명하게 암시시켜 주는 것이 필요하다.

이를 숙지하고 접근한 위즈위드(WIZWID) 사이트 구축에 있어서 핵심전략이 되었던 것은 비즈니스적 요구사항에 대응하기 위한 시각적인 대응방식을 합리적으로 제시하는 것이다.

위즈위드(WIZWID)가 가진 비즈니스(Business)적인 요구사항(Needs)에 준한 시각적 대응의 핵심은 기존 서비스인 위즈샵(WizShop) 및 위즈어드레스(Wiz Address) 서비스와 신규 서비스인 WizMall을 통합할 위즈위드(WIZWID)의 발전적인 웹 아이덴티티의 구축과 사업역량의 확대를 통한 최고급 해외 브랜드 샵의 위상을 다지는데 기여하는 것이었으며
이에 따라 도출된 목표는 다음과 같다.

- 사업적 측면: 확장 개편에 의한 Cannibalization을 최소화하는 Identity 통합방안 제시
- 운영적 측면: 향후 사이트 관리를 위한 확장성, 효율성을 반영한 Web Style Guide 제시
- 시각적 측면: 개편될 WIZWID의 쇼핑몰로서의 분명한 Visual 방향성 제시
- 서비스적 측면: Marketing을 기반으로 Service의 Visual적 어필방법 제시 (상품노출방식)
- 사용자적 측면: 확대된 쇼핑공간 안에서의 사용자 편의성을 고려한 UI Guide 제시

제안의 전체적인 진행과정은 귀납적 방식에 의거하여 통합 웹 아이덴티티라는 것을 전제로
[현 사이트 및 타 사이트 분석→목표 설정→구조적화 →시각화]등의 과정을 통해 전체적인 사이트의 설계와 연계고리 마련 및 시각적 Tone & Manner에 대한 부분을 정의하는 수순을 밟았다.
이 과정에서 주의해야 했던 것은 위즈위드(WIZWID) 메인과 위즈샵(WizShop), 위즈몰(WizMall)이 각 섹션별 특성을 유지하면서도 전체적으로는 위즈위드(WIZWID)라는 하나의 브랜드로 목소리를 낼 수 있어야 한다는 것이었으므로 세부적 내용에 치중하여 연계에 대한 부분을 놓치지 않도록 하는 것이었다.



위와 같은 과정을 통해 설정 된 방향에 대한 보다 구체적인 실행예측 결과를 위한 시안이
아래와 같이 제시되었다.

제안과 더불어 놓칠 수 없는 것 중의 하나는 제안을 도출하기까지의 논리적인 과정을 일목요연하게 전달하는 Presenter의 Communication 역할이다. WIZWID의 경우 실제로 디자인 시안을 처음 접했을 때와 Presentation을 받고 난 후의 시안에 대한 반응이 보다 호의적으로 바뀌기도 하였다.


위즈위드(WIZWID) 사이트의 전체 리뉴얼에 있어서 주요 이슈는 기존의 위즈위드(WIZWID) 쇼핑 고객에게 각인이 된 디자인의 아이덴티티를 그대로 유지하자는 것이다.
왜냐하면 이미 위즈위드 브랜드는 해외 상품 구매 대행으로 인지도가 높았으며, 브랜드 이미지에 맞게 표현한 우아하고 고급스러운 색상과 세련되고 감각적인 디자인이 기존사이트의 장점이었기 때문이다.
그래서 기존 사이트의 장점인 아이덴티티 이미지를 계속해서 유지시켜 타 쇼핑몰과 전면적으로 차별화된 느낌을 유지하기로 결정하였다. 대신에 위즈위드의 아이덴티티를 유지하면서 전체적으로 추가된 다양한 컨텐츠를 메인에 부각시키고 새롭게 구성된 디자인을 보여주도록 하도록 기획하는 것이 필요했다.
다양화된 컨텐츠 중 특히 신규로 추가된 Wiz Mall의 카테고리는, 기존 Wizwid.com의 Fashion Item에 대한 구매력이 Wiz Mall로 그대로 연결 될 수 있도록 구성하였으며, 쇼핑페이지의 차별화와 카테고리 식별의 용이성을 가져가고 전체적인 통일성을 유지하도록 하였다.
WIZWID, Wiz Shop, Wiz Mall 페이지의 각 메인은 마케팅 전개방향에 따라 프로모션형, 이벤트형, 세일형, 시즌형으로 페이지를 관리자가 자유롭게 구성하는 확장성을 가지도록 하였다.


정보 제공은 WIZWID의 가장 큰 장점이었다. 기존사이트에서도 구매대행 서비스를 위한 정보제공을 위해 WIZ Address (해외쇼핑 직접구매), WIZ Shop (해외쇼핑 구매대행)등을 기획하여 진행하였다.
여기에 쇼핑 기획전을 통합해 소개하는 위즈 스페셜(WIZ Special) 과 입점 브랜드를 한눈에 볼 수 있는 위즈 브랜드(WIZ Brand) 메뉴를 추가하였다.
그리고 이를 각 메인 페이지에 부각시킴으로써 쇼핑 편리성을 높였다.

특히 마이 위즈 스타일(My WIZ Style) 이라는 코너를 새로 추가하여, 고객이 좋아하는 브랜드의 물품으로 자신의 스타일에 맞춰 직접 코디한 물품이나, 전문 MD 가 추천하는 스타일의 물품을 손쉽게 구매할 수 있도록 하였다.

또한 MD가 추천하는 핫트렌드(Hot trend), 사용자가 최신 트렌드를 이끌며, 여러 상품을 테마에 맞게 구성이 가능한 영역이며 역시 여러 상품을 한번에 구매하도록 유도 가능한 영역을 기획했다.
이외에도 타 사이트에서 발견하기 힘든 부분인 관리자가 실시간 제어 가능한 템플릿을 기획하였다.
Mall의 브랜드 템플릿은 기존의 단순한 전개방식에서 벗어나 유명 브랜드의 성향에 맞는 메인 템플릿, 서브 템플릿이 수 십 가지가 구비되어 있다. 관리자들은 목적에 맞게 미리 제작된 템플릿을 통해 상품들을 매우 다양하게 조합이 가능하며 입점 브랜드와 사용자의 즐거움을 가미하였다.
끝으로 Help Desk 에서 이용안내, 구매가이드, About WIZWID, FAQ 등으로 분류를 하였으며, 그 하위 메뉴에 각 서비스 별로 설명을 하여, 고객이 원하는 정보를 손쉽게 찾아볼 수 있도록 하였다.
특히나 회사소개, 채용정보, 이용약관, 개인정보보호정책, 저작권정책, 국제전자상거래피해상담, 협력업체정보시스템(PIN), 제휴/ 입점 상담 등의 코너를 밖으로 구성하여, 고객 및 업체와의 이용 편리성을 최대한 높였다.


위즈위드(WIZWID) 라는 한 장소에서 WIZ Address (전문가용 해외쇼핑), WIZ Shop (해외쇼핑 구매대행), WIZ Mall (Top Brand 국내쇼핑) 이란 카피로 모든 쇼핑 영역을 다루고 있다.

일반인에게 생소한 ‘WIZ Address (전문가용 해외쇼핑)’ 메뉴 안에는 이용 편리성을 높이기 위해 세일이나 쿠폰 정보를 발 빠르게 소개하고 있다.
그리고 신규이용 고객을 위하여 해외 유명 쇼핑몰을 소개하는데, 해외 쇼핑몰의 구매법을 단계별로 소개하고 있으며, 또한 구매 및 배송시에 체크해야 할 사항들을 일목요연하게 정리하여 제공하고 있다.
특히 해외쇼핑 전문가인 ‘Editor’s Pick’ 코너를 새로 마련하여, 쇼핑에이전트가 추천하는 다양한 상품정보를 제공하고, 구매에 신뢰성을 높이고 있다.

국내 최초로 해외 쇼핑 구매대행 서비스를 제공하고 있는 메뉴이다.
여기에서는 최신 등록된 상품, 한 주간의 최대 인기 상품이나, 꾸준히 히트하고 있는 상품 및 MD가 추천하는 상품들이 각 코너 별로 자세하게 안내되고 있다.
또한 고객이 직접 MD에게 신상품 제안을 할 수 있는 코너가 있어 국내에서 구하기 힘든 물품들을 손쉽게 구할 수 있는 최대의 장점을 가지고 있다.
그리고 고객의 니즈를 반영하여 고급(Luxury) 브랜드만 모아 브랜드 소개 및 컨텐츠를 제공함으로써 차별화된 서비스를 보여주고 있다.

국내에 무수히 많은 쇼핑몰들 중 위즈위드(WIZWID)가 지닌 패션 지향적이고 고급스러운 느낌에 맞는 국내외의 탑 브랜드(패션 잡화 위주)를 해외 구매대행이 아닌 국내 벤더들로부터 소싱(Sourcing)하는 신규 서비스이다.
특히 각각의 입점 브랜드는 Mall in Mall 형태로 구성되는데, 이때 여러 가지 템플릿 중 브랜드와 어울리는 페이지를 선택하여 마치 Off-Line 에서 인테리어를 하듯이 매장을 꾸밀 수 있으며, 이로써 브랜드 자체의 고유성이 충분히 지켜진다.
고객도 여타의 쇼핑몰에서 보여지듯 일원화된 페이지가 아니라, 생동감 있고 특화된 페이지를 보면서 해당 브랜드를 더 잘 알 수 있고, 쇼핑시에도 큰 도움을 받을 수 있다.

WIZ People 이라는 새로운 메뉴를 구성하여, 고객과 WIZWID 간의 대화 창구를 확장시켰다.
이곳에서는 고객이 여러 가지 게시판 형태의 채널에서 아이디어를 보여주고, 요구사항을 쉽게 전달 할 수 있도록 하였다.
이로 인하여 고객과 WIZWID 간의 피드백을 자연스럽게 보편화 하였다. 또한 WIZ People 은 고객들간의 커뮤니케이션 기능을 통해 서로간의 정보공유로 보다 알찬 쇼핑을 돕도록 하였다.
특히 기존에 좋은 반응을 보이던 나도MD, 신상품제안, 쇼핑노하우, Best 상품평 등을 한 자리에 모아, 고객간에 정보 공유성을 최대한 높였다.
그리고, 신설된 포토 Gallery 라는 코너에서는 고객이 WIZWID 에서 제공하는 서비스를 이용하여 구매한 물품을 사진으로 찍어 전시하는데, 이는 구매자의 표출 욕구를 충족시켜줄 뿐 아니라, 판매 물품에 신뢰성을 극대화하고 있다.


제안에 있어서 분석을 통해 방향설정을 하고 이에 따른 구조화와 시각화가 수반되었다면
프로젝트 진행에 있어서는 클라이언트의 실제적인 담당자와 함께 보다 구체화된 방향의 설정을 위한 커뮤니케이션이 필요하며 이를 실제 사이트 구축에 있어 디자인적인 가이드(Guide)로 활용하기 위한 재해석이 필요하다. 펜타브리드에서는 이러한 재해석에 의해 도출된 산출물을 프로토타입이라고 부른다.
이것의 제작이 가져오는 프로젝트 진행상의 이점은 클라이언트(Client)의 생각과 제작회사의 생각의 차이를 상호간에 분명히 인식함으로써 제작 진행 중의 오류를 방지할 수 있다는 것과 진행도중 처음의 설정방향과 어긋나게 제작되는 실수를 막을 수 있다는 것을 들 수 있다.

위즈위드(WIZWID)사이트 제작을 위해 국내외 기존 쇼핑몰을 벤치마킹하여 장단점을 분석 후 WIZWID의 특수성을 반영하여 작성된 프로토타입은 아래와 같은 구성을 가지고 각 사항을 가지고 각 항목을 정의해 나갔다.



디자인 프로토 타입에 의하여 구조적, 시각적 방향이 구체화 된 것에 준해 실제적인 사이트에서 활용 될 시안이 제작되며 이 작업을 통해 WIZWID의 실제적인 얼굴이 될 디자인 아웃풋이 생성된다. 이번 위즈위드(WIZWID)의 디자인 작업에서 쇼핑몰의 아이덴티티로써 확정된 비주얼 적인 요소는 아래와 같으며 이에 준하여 각 개별 쇼핑영역인 WIZ Address, WIZShop, WIZMall이 디자인 되었다.



소비자들이 믿고 구매대행을 맡길 수 있게끔 유도하기 위해 신뢰감과 안정감을 상징하는 그린계열의 컬러를 사용하였고, MD가 추천하는 사이트 바로 가기의 위치를 크게 배치하는 레이아웃 구조를 가지고 있다.

위즈위드 쇼핑에서 가장 매출이 높고 기존에 사용자들이 가장 사용빈도가 높기 때문에 대표컬러인 버번디 컬러를 사용하였고, 레이아웃 구조도 기존의 WIZ Shop과 크게 벗어나지 않게 디자인 되었다.


위즈위드에서 새로 추진하는 사업으로써 참신함과 깨끗한 느낌을 주는 블루계열의 색상을 사용하였고, 입점 브랜드를 강조하기 위한 브랜드 배너를 메인 비쥬얼 비롯하여 화면 곳곳에 배치하는 형태의 레이아웃구조를 가지고 있다.



아직도 많은 디자이너들이 플래시와 데이터의 연동에 대해서 어려워하고 쉽게 접근하지 못하는 경우가 많다. 플래시에서 외부데이타를 이용하는 방법은 많지만 이번에 위즈위드에서 사용한 방법은 가장 간단한 방법 중에 하나이다.
위즈위드에서는 DB에 저장된 상품의 데이터들-상품이미지와 상품명, 가격이나 상품설명 같은 값을 가져와서 플래시에서 사용하게 된다. 플래시가 데이터를 받은 다음 그것을 사용하는 것은 보통의 플래시와 전혀 다르지 않다.
그러므로 이번에는 위즈위드의 상품전시플래시에서 데이터를 얻어오는 부분을 이야기하도록 하겠다.

HTML에서 플래시를 삽입할 때 들어가는 태그 중에 태그가 있다. 이 태그를 사용하면 플래시가 로딩될 때 브라우저가 가진 데이터를 플래시로 넘길 수 있다.


<PARAM NAME=FlashVars value="p_img1= p_a.jpg&p_id1= www.abc(가칭).com">
<PARAM NAME=movie VALUE="main01.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>


위의 태그는 main01.swf라는 플래시를 HTML에 삽입하면서 사용된 <PARAM>들이다.
이중에 주목할 것은 FlashVars라는 name을 가진 태그인데 이것이 main01.swf로 데이터들을 넘겨주는 역할을 하는 것이다.
예에서 보면 main01.swf라는 플래시로 p_img1과 p_id1이라는 변수에 각각 ‘p_a.jpg’와 ‘www.abc(가칭).com’ 이라는 값을 넣어주고 있다.
이렇게 HTML에서 PARAM태그를 써서 정의한 변수는 플래시의 _root에 같은 이름의 변수로 생겨나게 되어서, 플래시에서는 _root.p_img1과 _root.p_id1이라는 변수값으로 사용할 수 있게 되는 것이다.
위의 예는 특정한 변수에 특정한 데이터 값을 정의해서 플래시로 넘겨주는 것이고, 실제 위즈위드에서는 상품데이타를 <PARAM>태그를 사용하여 넘기면서 HTML이 아닌 ASP구문을 사용하여 DB에서 받아온 값을 적절히 넣어주도록 되어 있다.
이것은 아주 간단한 응용으로서 <PARAM NAME=FlashVars value=”ASP구문”>과 같은 형식으로 사용하면 된다. 여기서 value값에 필요한 값을 넣어주면 되는데, 쿠키에서 얻어온 값을 넣을 수도 있고 DB의 데이터가 들어갈 수도 있고 또한 이전 페이지의 링크에서 넘어온 데이터를 지정해 줄 수도 있다.
이것은 필요에 따라 사용하면 되는 것으로 여러 부분에 다양하게 적용되어질 수 있다.



<%
MemberID = Request.Cookies("MemberID ")
WebID = Request.Cookies("WebID")
MemberNM = Request.Cookies("MemberNM")
MemberPoint = Request.Cookies("MemberPoint ")
%>
_________________________________________________________________

<PARAM=FlashVars value="log_sta=<% If WebID< "" Then %>in&log_name=<%= MemberNM %> & MemberNM = <%= MemberNM % > & MemberPoint = <%= MemberPoint %> & WebID = <%= WebID % > <% Else % > out <% End If %> ">

이것은 실제 메가박스에 적용된 것과 같은 내용인데, 쿠키에서 유저의 정보를 얻어와서 PARAM태그에 적용시키는 구문이다. 위와 같이 다양하게 응용한다면 여러 분야에 유용하게 사용할 수 있다.


오랜 기간 동안 클라이언트와 제작진들이 하나가 되어 만든 프로젝트인 위즈위드 쇼핑몰은 작년 12월 17일 고객들에게 새 모습을 선사하였으며, 2004년 1월 위즈몰을 선보였다.
해외 구매 대행을 전문적으로 다뤄온 위즈위드(WIZWID)가 리뉴얼을 통해 고객 중심의 서비스 강화를 비롯해 상품군을 국내에 유통되는 명품 브랜드까지 확대 강화한 것이다.
특히 이번 리뉴얼은 통합 아이덴티티 강화와 더불어 타 사이트들과 차별화된 서비스로 주목을 받는다.
먼저 위즈위드(WIZWID)안의 My Wiz Style과 Hot trend, 관리자가 실시간 제어 가능한 템플릿은 인터넷 쇼핑몰로서 새로운 웹트렌드를 제시한 것과 같다.
이외에도 신설된 코너인 '위즈피플(WIZ People)' 메뉴와 사진으로 보는 쇼핑정보 '포토 갤러리', 고객 사용후기를 엄선한 '베스트 상품평' 코너 등은 현 웹 트렌드인 커뮤니티 강화를 반영하였다.
이같이 위즈위드는 쇼핑몰로서의 역할과 목적을 여러 가지 기능을 통해 만족시켰다.
이 모든 과정을 이룰 수 있었던 비결은 4개월 동안 함께 동고동락(同苦同樂)하며, 프로젝트에 최선을 다 해준 위즈위드 담당자 분들과 펜타브리드 가족들의 노력의 결실이다.

첫째, 클라이언트의 요구사항은 처음부터 끝까지 염두해 두어라.
아무리 좋은 기획이라도 클라이언트의 요구사항을 반영하지 못하면, 그 기획은 무용지물이다. 상점에서 잘 팔리는 제품들은 소비자의 소비형태와 필요에 의해 탄생한 제품이다.
웹 기획도 마찬가지이다. 이 부분이 벗어나지 않도록 기획해라.

둘째, 사용자는 곧 “나”라는 생각으로 기획해라.
사용성을 고려하지 않은 기획은 보기 좋은 비주얼을 가졌다 해도 지속적인 방문을 유도하지 못할 것이다. 누구나 쉽게 정보를 찾을 수 있도록 기획해라.

셋째, 모든 매체에 민감하게 반응하여 신속하게 대처해라.
웹기획자는 모든 매체의 트렌드를 파악할 줄 알아야 한다.
온라인 매체는 매우 민감한 속도로 변한다. 기업들이 1년마다 사이트 리뉴얼을 하고 연간 운영을 에이전시에게 위탁하는 이유는 이에 대처하기 위함이다.
따라서 기획자는 모든 매체를 아이디어 원천으로 삼고 신속하게 대처해야 한다.
출처 -
2005. 4. 23. 09:10

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

㈜픽스다인, 대한민국 온라인 쇼핑몰 업계의 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일 서비스를 오픈 하였다.


 

2005. 4. 12. 00:46

파송송계란탁~! 웹사이트의 충격[상상의 나래를 펴라~]

[ 본 글은 사이트를 둘러보면서 사이트에 대한 한줌이의 생각을 적은 것입니다. 사이트에 대한 어떠한 관계나 다른 생각이 있는 것이 아니라 단순 한줌이의 개인적인 생각임을 밝혀 둡니다.]

● 파송송~~ 계란탁~~~♪ 노래를 찾아서~~~

영화매니아 한줌이에게 토요일은 항상 어떤 영화를 볼까 고민하는 날이기도 합니다.
늦게 퇴근하는 두 여직원...
"팀장님 같이 영화보러 가실래요?"

보통날 같았으면 "그래~" 그날 영화에 간단한 군것질까지 강팀장 주머니에게 나갔겠지만.. 이번달 지출이 많았던터라... 같이 가지 못하고 혼자 "파송송계란탁" 을 봤다.

잔잔한 감동에... 나름대로 괜찮은 영화다~ 싶을 정도로... 눈물 많은 강팀장의 눈을 적혔는데....

오늘까지 강팀장 입에선 "파송송~~ 계란탁~~♪" 흥얼 거리는 지라...

직원 하나가 물어본다. "팀장님 파송송~~ 계란탁~~" 다음에 다른 가사는 없어요??

"ㅋㅋㅋ 왜 없어~ 내가 몰라서 그렇지... 배워서 갈켜 줄께... ㅎㅎㅎ"

그렇게 노래를 찾아서 웹사이트를 접속했다.



● 망각의 선에서...

첫 페이지... 티격되던 2명의 주인공이 여던히 웹에서 티격되고 있었다...

"ㅎㅎㅎ 여기서도 서로 우기고 있군~!!" ^^

홈페이지를 접속해라~! 다음플랜트에 접속해라~! 서로 흔들어되던 그들의 동작에서 한줌인 "파송송 계란탁~" 노래를 찾는다는 건 벌써 망각의 선 저 멀리 던져버리고 있었다.

● 인트로 - 파송송계란탁~! 은 냄비였다. 그들을 훔쳐보다

투덜 거리는 둘에게서 아빠를 선택하고 들어왔는데... 이것 저것 다 어디 없고 냄비 하나만 턱~~!! 하니 화면을 채운다.

두 부자의 싸움은 첫 화면에서 홈페이지 인트로 화면에서 여전했다.
씨익~ 웃으며 즐겁게 그들의 싸움을 엿보는듯 한 앵글이 한줌이를 더 즐겁게 했다.

뭔가 은밀한 대화를 엿 듣는듯... 방 천장에 구멍을 뚫고 그들을 대화를 엿 듣는듯.... 사이트의 높은 앵글로 잡은 인트로가 인터넷이라는 매체의 사용자는 그들의 사건에 3자인듯 엿보는 재미로 사이트를 시작했다. 호기심 유발의 효과에서 단순 인트로 화면으로 치고는 그 어떤 사이트에 비해 충격적임이 분명했다.

플래쉬 사이트로 충격을 주었던 취화선 붓에 비한다면 상 앞에 앉아 대화를 나누는 이들의 모습은 뚜렷한 플래쉬 기법이나 화면의 구성이나 그런 부분은 전혀 신경쓰지 않은듯 했다.

단지... 처음 이들의 상앞에 싸움에 호기심이 갈 뿐.....

만약 그들의 모습을 옆에서 잡은 형태로 플래쉬를 구성했다면 이 정도로 이들에게 호기심이 갔을까?

사이트 기획자는 사람의 호기심에 대해서 충분히 이해하고 어떻게 조리하는지 분명히 알고 있는듯 했다.




● 다른건 생각하지 말자구~!!!

호기심을 이끌던 이들은 결국 먼저 극한 상태의 싸움을 이끌어 나갈 것 같은 느낌이 든다....

하지만 두 주인공의 인상은 전혀 분위기가 그렇지 않다.


분명 괴로운 듯 하면서 그들이 서 있는 사이트 내에서 왠지 더 재미나는 일만 벌어 질듯 하다...

다른 사건이 아니 단지 두 주인공의 행동에만 시선을 집중 시키고자 하는 의도였는지 깨끗하면서 오히려 밝은 색 처리, 사교성을 나타내는 주황색의 배합은 그들이 결코 피 틔는 싸움이 아니라 무엇인가 훈훈한 느낌이 물씬 풍겨 나왔다.

전체적인 사이트가 음식이라는 메인 컨셉을 지녔다. 4개의 메뉴를 식당 메뉴판으로 구성하고 색상 또한 사교성 뿐망 아니라 시원하고 맛있게 보이기 위한 주황색으로 구성하여 다른 음식 그림이 없어도 단어 몇글자와 화면의 전반적인 느낌에서 음식에 연관을 지어나가고 있다.



● 크하 메뉴판속에 먼가가 있다~!!!

하필이면 전체적인 컨셉이 메뉴판이였을까? 왜 음식을 잡았을까?

영화를 보면 전반적으로 음식과 영화의 전체적인 스토리에서는 큰 관계가 없어 보인다. 영화내내 나오는 음식이라고 해 봤자. 술, 케잌, 불고기, 그리고.. 라면이 3번 정도.....

그들은 라면이 좋아한다는 공통점이 없다. 그져 영화를 보는 틈에 저들이 라면을 먹는군... 하는 정도 였을테니....

물론 라면을 통한 영화감독의 특별한 의도가 있었는지 몰라도 감독의 그런 의도가 사이트가 전반적으로 음식점을 연상케 하진 않았으리라...



● 푸할~ 이럴수가~!!!

분명 영화속 사건과 음식은 연관성이 없다. 그런데 메뉴판을 주메뉴로 하고.... 메뉴도.."사이다, 된장, 부침, 후다닭, 라면"로 구성했을까? (이런 난관을 어떻게 풀어 나갈려고... 자기 함정에 자기가 빠진거 아냐??!!)

푸할~ 이럴수가~!!!
개그콘서트의 개그보다, 웃찾사의 개그보다 더 진한것을 숨겨두었다.


어떻게 말하면 장난끼 섞인 기획자의 의도가 사이트를 둘러보는 내내 즐겁게 만드는 이유를.... 다른 곳에으로 이동하지 않고 처음부터 끝까지 사이트에 머물게 하는가에 충분히 납득되도록 한다.




● ㅡ.ㅜ;;; 나가기 시러

웹서핑을 하다보면.... 거의 대부분의 누리꾼(네티즌)들은 특이한 사이트라고 몇곳의 메뉴만 꾹꾹 눌러 보고는 전체적인 느낌을 다 파악하는듯 다른 곳으로 이동해 버린다. 그만큼 누리꾼의 마우스를 머물게 하기란 보통 어려운 것이 아니다.
(영화 사이트 경우 예고편 기본 스토리 정도 보는 것이 거의 대부분이라고 해도 과언이 아니다.)

파송송은 메뉴를 누른뒤부터 사용자로 하여금 마우스를 가만두게 하질 않는다....

"어~ 이거뒤에 또 다른... 먼가가.... "

인트로에서 유발되었던 호기심은 이곳저곳 둘러보는 내내 마음속에서 모락모락 피어 오른다.

"ㅋㅋㅋ~" 나즈막한 이런 웃음속에서 사용자는 사이트의 스토리를 진행해 나가도록 기획자는 충분히 고려 했을 것이다.




● 나의 마우스에서 부터...

보여주기 위한 영화사이트!! 그런 고정 관념이 무너진지 이미 오래다. 전반적인 이야기속에 사용자가 빠져 있는듯... 사용자의 마우스는 단순 화면 진행뿐만 아니라 사건의 계기를 만들어 준다.

"된장" 에서의 취조문에서....

이제 사이트의 전반적인 사건의 흐름 이제 누리꾼의 마우스에 달렸다.




● 마우스만으로 부족하다.

마우스 클릭만으로 사건을 진행하는 것도 한계가 있었다고 판단했을까?

분명 파송송의 기획자는 욕심이 많았나 보다.. 이제는 누리꾼을 사이트속에 그대로 적어들게 만들었으니.....

"부침"은 이제 사용자를 화면 그 속을 끓어다 넣어 버렸다.



● 크크 이제 우롱을 하는군... 그래그래 당해 줄꼬마~

여느 영화사이트과 별다른 것 없는 게임?!! 어느 부터 영화사이트에 간단한 플래쉬 게임 하나씩 탑재하는 것이 유행처럼 시도하고 있다. 기획자의 고질적인 병인지도 모르겠지만.... 누리꾼의 무서운 사이트 평가는 단순한 게임 하나만으로 잡아두지 못한다...

게임 몇번하다가 외면당해 버리는 것이 바로 영화사이트의 게임이다. 나름대로 노력할려는 모습은 보인다... 흔히 이벤트를 접목해서 게임을 만드니... 하지만 한줌이가 보기엔 그렇게 신통치 않은 것이 사실이다.

크하~!!! 그러나 파송송 기획자는 한줌이를 우롱했다~!
우롱당하면 당연히 기분 나빠야 할 터인데.....

"ㅋㅋㅋ~~~ 이거 잼다~!! 어이.. 조주임, 은영씨.. 일루 와봐.. 이 게임 함해봐~ "

재치있는 기획자의 엉뚱한 골탕이 밉지많은 않다. 적어도 파송송 웹사이트에서는 신통치 않은 게임 하나 달아놓고... 누리꾼의 마우스를 잡을려는 시도는 없었다. 누구도 그렇게 느끼지 않을 것이 분명하다.





● 그래 기술도 좋지만 아이디어가 더 좋다.....

파송송이는 어떤 특별한 기술이 접목된 것이 없다.. 그렇다고 복잡한 이미지로 화면 전체에 느려지기만 하는 플래쉬 모션을 사용한 것도 아니고... 화려한 디자인을 적용한 것도 아니다.

깔끔한 이미지, 누리꾼들의 마음을 이해하는 색상, 마우스을 끝까지 잡고 있는 사이트 진행 사이트를 이리저리 둘러보면.. 많은 회의를 거치고, 재미있는 일들이 참 많았을 것 같다는 생각이 든다.

분명 기획자에서 부터 팀장, 팀원까지 재미있게 신나게 프로젝트를 진행했음에 틀림이 없다.

눈을 감고 그때의 그들의 모습이 훤히 떠 오른다.

"아~~ 이건 어떨까요? ㅎㅎㅎ 이렇게 하면 어떨까요??~~ 잼나게... 신나게...."

분명 그들이 즐겁게 사이트를 만든건.... 보기만 해도 즐거운 사이트를 만든건 어떤 특별한 기술이나 기교가 아니였음이 틀림이 없다.

어디서 시작했을.... 번뜻이는 아이디어와 그것을 잡아낸 기획자에게 찬사를 보내고 싶다는 말을 하고 싶다.


물론 아쉬운 것들이 없진 않다.

영화사이트다 보니... 어느정도 제한적인 부분이 없진 않았을테고 단기성 사이트에 대한 부담도 없진 않았을 것 같다.

게시판이나 프로그램으로 처리해야 할 부분에서 조금만 신경써서 만들었으면.. 하는 아쉬움도 없진 않지만....

사용자에게 재미를 주고... 사이트의 상호작용을 충분히 응용한 개발 팀에게 박수를 보내고 싶다.

영화만큼이나 잔잔한 감동을 준 그들이 아이디어가 기술을 뛰어 넘을 수 있다는 가능성을 보여줘 고맙다고 말하고 싶다.





아..... 파송송 칭찬에 입이 아프다... 하지만 그럴만한 것이....

오래전에 팀원들에게 왜 영화사이트들이 좋아 보일까? 라는 질문을 던진적이 있었다. 그들의 대답은 이랬다.

"많은 팀원들이 함께 일하기 때문에..."
"금액이 크니깐...."
"색다른 기술이 적용되어서...."

팀원들에게 다시 물었다....
"그대들에게 이런 사이트의 메인의 자리가 주어진다면 가능할까??"

"................"

대답없는 그들에게 몇번이고 강조하고 강조하고 말하고 싶다.
특히 이번 파송송이를 보면서 그때 일이 생각나게 하는건 그때 이런 사이트가 나왔다면..... 분명 한줌이는 주먹을 쥐며 말했을 것 같다...

"너희들도 할 수 있다.!! 결코 기술이 떨어지는 것도 아니고... 실력이 없어서 그런것도 아니다.!! 할수 있다는 생각과 서로에게 힘이 되어주는 팀웍... 그리고... 알찬 아이디어만 있다면 가능하다~!!"


그렇지만 한편으로 팀장으로 기획자로써... 파송송 같은 아이디어를 생각해 내지 못하는 한줌이가 부끄럽다는 생각도 든다~!!


파송송계란탁 사이트 주소는 http://www.pasongsong.co.kr 임~!