 |
.gif) |
->Client : ㈜위즈위드 -> URL: http://www.wizwid.com ->펜타브리드 ->수행기간: 4개월 ->주 사용 프로그램: ASP, Flash ->프로젝트 성격: 인터넷 쇼핑몰 |
| 위즈위드 쇼핑몰 웹사이트 프로젝트 | |
.gif) |
 |
 |
| 트렌드 리더들의 해외 쇼핑 구매대행 사이트, 위즈위드(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)라는 하나의 브랜드로 목소리를 낼 수 있어야 한다는 것이었으므로 세부적 내용에 치중하여 연계에 대한 부분을 놓치지 않도록 하는 것이었다. |
.gif) |
 |
 |
 |
| 위와 같은 과정을 통해 설정 된 방향에 대한 보다 구체적인 실행예측 결과를 위한 시안이 아래와 같이 제시되었다. |
.gif) |
| 제안과 더불어 놓칠 수 없는 것 중의 하나는 제안을 도출하기까지의 논리적인 과정을 일목요연하게 전달하는 Presenter의 Communication 역할이다. WIZWID의 경우 실제로 디자인 시안을 처음 접했을 때와 Presentation을 받고 난 후의 시안에 대한 반응이 보다 호의적으로 바뀌기도 하였다. |
.gif) |
 |
 |
| 위즈위드(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이 디자인 되었다. |
 |
 |
.gif) |
| 소비자들이 믿고 구매대행을 맡길 수 있게끔 유도하기 위해 신뢰감과 안정감을 상징하는 그린계열의 컬러를 사용하였고, MD가 추천하는 사이트 바로 가기의 위치를 크게 배치하는 레이아웃 구조를 가지고 있다. |
 |
 |
| 위즈위드 쇼핑에서 가장 매출이 높고 기존에 사용자들이 가장 사용빈도가 높기 때문에 대표컬러인 버번디 컬러를 사용하였고, 레이아웃 구조도 기존의 WIZ Shop과 크게 벗어나지 않게 디자인 되었다. |
.gif) |
 |
| 위즈위드에서 새로 추진하는 사업으로써 참신함과 깨끗한 느낌을 주는 블루계열의 색상을 사용하였고, 입점 브랜드를 강조하기 위한 브랜드 배너를 메인 비쥬얼 비롯하여 화면 곳곳에 배치하는 형태의 레이아웃구조를 가지고 있다. |
 |
.gif) |
| 아직도 많은 디자이너들이 플래시와 데이터의 연동에 대해서 어려워하고 쉽게 접근하지 못하는 경우가 많다. 플래시에서 외부데이타를 이용하는 방법은 많지만 이번에 위즈위드에서 사용한 방법은 가장 간단한 방법 중에 하나이다. 위즈위드에서는 DB에 저장된 상품의 데이터들-상품이미지와 상품명, 가격이나 상품설명 같은 값을 가져와서 플래시에서 사용하게 된다. 플래시가 데이터를 받은 다음 그것을 사용하는 것은 보통의 플래시와 전혀 다르지 않다. 그러므로 이번에는 위즈위드의 상품전시플래시에서 데이터를 얻어오는 부분을 이야기하도록 하겠다. HTML에서 플래시를 삽입할 때 들어가는 태그 중에 태그가 있다. 이 태그를 사용하면 플래시가 로딩될 때 브라우저가 가진 데이터를 플래시로 넘길 수 있다. 위의 태그는 main01.swf라는 플래시를 HTML에 삽입하면서 사용된 들이다. 이중에 주목할 것은 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이라는 변수값으로 사용할 수 있게 되는 것이다. 위의 예는 특정한 변수에 특정한 데이터 값을 정의해서 플래시로 넘겨주는 것이고, 실제 위즈위드에서는 상품데이타를 태그를 사용하여 넘기면서 HTML이 아닌 ASP구문을 사용하여 DB에서 받아온 값을 적절히 넣어주도록 되어 있다. 이것은 아주 간단한 응용으로서 과 같은 형식으로 사용하면 된다. 여기서 value값에 필요한 값을 넣어주면 되는데, 쿠키에서 얻어온 값을 넣을 수도 있고 DB의 데이터가 들어갈 수도 있고 또한 이전 페이지의 링크에서 넘어온 데이터를 지정해 줄 수도 있다. 이것은 필요에 따라 사용하면 되는 것으로 여러 부분에 다양하게 적용되어질 수 있다. <% MemberID = Request.Cookies("MemberID ") WebID = Request.Cookies("WebID") MemberNM = Request.Cookies("MemberNM") MemberPoint = Request.Cookies("MemberPoint ") %> _________________________________________________________________ 이것은 실제 메가박스에 적용된 것과 같은 내용인데, 쿠키에서 유저의 정보를 얻어와서 PARAM태그에 적용시키는 구문이다. 위와 같이 다양하게 응용한다면 여러 분야에 유용하게 사용할 수 있다. |
 |
 |
 |
| 오랜 기간 동안 클라이언트와 제작진들이 하나가 되어 만든 프로젝트인 위즈위드 쇼핑몰은 작년 12월 17일 고객들에게 새 모습을 선사하였으며, 2004년 1월 위즈몰을 선보였다. 해외 구매 대행을 전문적으로 다뤄온 위즈위드(WIZWID)가 리뉴얼을 통해 고객 중심의 서비스 강화를 비롯해 상품군을 국내에 유통되는 명품 브랜드까지 확대 강화한 것이다. 특히 이번 리뉴얼은 통합 아이덴티티 강화와 더불어 타 사이트들과 차별화된 서비스로 주목을 받는다. 먼저 위즈위드(WIZWID)안의 My Wiz Style과 Hot trend, 관리자가 실시간 제어 가능한 템플릿은 인터넷 쇼핑몰로서 새로운 웹트렌드를 제시한 것과 같다. 이외에도 신설된 코너인 '위즈피플(WIZ People)' 메뉴와 사진으로 보는 쇼핑정보 '포토 갤러리', 고객 사용후기를 엄선한 '베스트 상품평' 코너 등은 현 웹 트렌드인 커뮤니티 강화를 반영하였다. 이같이 위즈위드는 쇼핑몰로서의 역할과 목적을 여러 가지 기능을 통해 만족시켰다. 이 모든 과정을 이룰 수 있었던 비결은 4개월 동안 함께 동고동락(同苦同樂)하며, 프로젝트에 최선을 다 해준 위즈위드 담당자 분들과 펜타브리드 가족들의 노력의 결실이다. |
.gif) |
|
첫째, 클라이언트의 요구사항은 처음부터 끝까지 염두해 두어라.
아무리 좋은 기획이라도 클라이언트의 요구사항을 반영하지 못하면, 그 기획은 무용지물이다. 상점에서 잘 팔리는 제품들은 소비자의 소비형태와 필요에 의해 탄생한 제품이다. 웹 기획도 마찬가지이다. 이 부분이 벗어나지 않도록 기획해라. 둘째, 사용자는 곧 “나”라는 생각으로 기획해라. 사용성을 고려하지 않은 기획은 보기 좋은 비주얼을 가졌다 해도 지속적인 방문을 유도하지 못할 것이다. 누구나 쉽게 정보를 찾을 수 있도록 기획해라. 셋째, 모든 매체에 민감하게 반응하여 신속하게 대처해라. 웹기획자는 모든 매체의 트렌드를 파악할 줄 알아야 한다. 온라인 매체는 매우 민감한 속도로 변한다. 기업들이 1년마다 사이트 리뉴얼을 하고 연간 운영을 에이전시에게 위탁하는 이유는 이에 대처하기 위함이다. 따라서 기획자는 모든 매체를 아이디어 원천으로 삼고 신속하게 대처해야 한다. 출처 - |
