쇼핑몰 디자인에서도 마찬가지다.

보통 패션 사이트에서 자주보던 올 플래쉬 동영상은 화려하지만 상품을 사고 싶다는 끌림이 없다.  온갖 멋있는 이미지와 화려한 액션으로 디자인를 구성하지만 그것은 상품을 팔기 위한 감각적인 센스나 치열함 보다는 그냥 멋있는 폼에 가깝다. 진짜 멋이 아닌 그냥 겉멋이라는 거다.

쇼핑몰이 겉멋에 빠지지 않으려면 다시 말해 소비자들이 겉멋이라고 생각하지 않게끔 하려면, 동의가 있어야 한다.


예를 들어 "pureblacksunshine.com" 의 같은 경우가 그렇다. 물건 파는 쇼핑몰에서 가장 꺼리는 올 동영상 플래쉬로 작업을 했지만 대단히 흥미로운 설정과 독특한 발상이다. 여지껏 이렇게 상품을 구매하는 과정이 길고 화려한데 상품을 사고 싶다는 쇼핑몰은 본 적이 없다. 




또 한 곳은 일본의 철판 볶음 전문 레스토랑 사이트다. 이 곳 역시 화려하지만 화면을 보면서 어딘지 모르지만 한번쯤 가보고 싶다는 생각이 들게 한다.







다음은 화이트 보드 쇼핑몰이다. 판매하는 상품의 비주얼을 화려하게 살려 좋은 느낌을 주고 있다.


 

마케팅의 기본 프레임에 "3C"라는 것이 있다. Company (자사) Competitor (경쟁사), Consumer (소비자). 물건을 팔고 난 뒤의 소비자들이 펼쳐가는 세상을 두개의 "C"를 더 포함한다면 하나는 커뮤니케이션 (Communication). 또 하나는 헌신 (Commitment) 이다.

가끔 쇼핑몰을 둘러보면 상품은 별로인거 같은데 정말 뛰어난 상품페이지 디자인을 만나는 경우가 있다.

그럴땐 나도 모르게 상품을 구매하는 경우가 있다. 그들의 디자인은 철학적이며 감각적이고 센스가 넘쳐난다. 뛰어난 마케터 뛰어난 UI 디자이너, 뛰어난 Web 디자이너. 결국, 그들의 시선은 단순히 "시장"이나 "소비자"가 아니라 물건을 팔고 난 뒤의 "인간"이라는 본질을 향하고 있다는 점이다.   



아래는 개인적으로 뛰어나다고 생각하는 상품페이지 디자인이다. 




1. 위메이크 프라이스 wemakeprice.com

최근 가장 이슈화되고 있는 소셜커머스 사이트. 매일 매일 바뀌는 전혀 다른 상품의 컨셉에 따라 상품페이지 디자인도 가장 잘 어울리는 모습으로 바뀐다. 

하루 수십만명을 대상으로 처음 선보이는 상품을 판매하는 상품페이지 임에도 내용이 복잡하거나 길지 않으며 군더더기 없이 보여줄 것만 딱 보여주고 있다. 사람이 원하는 것은 필요한 것이지, 필요 없는 것은 아니란 걸 제대로 아는 디자이너다.










2. 거성라이프 geosunglife.com

온라인에서 상품을 판매한다는 건 고객과의 '신뢰적 관계'를 형성하는 일이라고 생각한다. 하지만 '관계'는 마음만 먹으면 누구나 만들 수 있지만 '신뢰'를 형성하기란 절대 쉽지 않다. 특히 신선 식품의 경우 더욱 그렇다. 그래서 신선식품의 상품페이지 구성은 무엇보다 '신뢰'가 형성될 수 있도록 구성하는 것이 중요하다.

거성라이프의 서해안 꽃게 상품페이지는 아마 여기에 대한 해답을 제대로 제시해주는 게 아닐까 싶을 정도로 구성이 잘 되어있다. 우선, 꽃게를 잡는 현장, 꽃게의 모습, 꽃게를 손질하는 팁, 꽃게 요리 등 기승전결이 뚜렷하다. 그리고 소비자들이 보고 싶어 하는 부분에만 적절하게 퍼센티지를 배분해 상품페이지가 전혀 지루하지 않고 현장의 생동감이 그대로 느껴진다.

온라인에서 식품을 판매하는 입장에서 정말 탐나는 상품페이지 디자이너다.










3. 펀샵 funshop.co.kr

어른들을 위한 장남감이라는 타이틀로 유명한 펀샵의 상품페이지 디자인은 예전부터 최고의 퀄리티를 자랑해왔다. 우선 상품 하나하나에 대한 디자이너의 애정어린 시선이 돋보인다. 그냥 지나칠 수도 있는 부분도 섬세하게 집어내어 보여주려고 한다. 

상품의 기능이나 설명을 텍스트가 아닌 이미지로 사용하기 때문에 가독성이 뛰어나고 짧은 시간에도 쉽게 판독이 가능하다.

지난 10년간 펀샵의 흰색바탕에 상품을 구성하는 상품페이지 디자인 방식은 다른 많은 분야의 디자이너들에게 영향을 미쳤으며 국내 상품페이지 디자인의 행간을 이루고 있다. 











4. 펀펀걸 funfungirl.biz

여성의류 쇼핑몰 펀펀걸의 상품페이지 디자인은 국내 여성의류 상품페이지의 정석을 보여주는 곳이다. 국내 여성의류 쇼핑몰 상품페이지는 거의 이런 형태라고 보면 된다. 하지만 모두 비슷비슷 해 보이는 구조에서 유독 펀펀걸의 상품페이지가 눈에 들어오는 이유는 컷 하나하나가 매우 감성적으로 잘 표현 되었기 때문이다.

상품페이지 구성이 단순히 옷 자체를 전달하기 보다는 상황이나 느낌이나 구도 등을 통해 최대한 옷을 살려주고 있다. 다른곳과 비교해 보면 차이를 확연히 느낄 수 있을 정도다.









5. 텐바이텐 10x10.co.kr

오랜 역사를 자랑해 온 디자인 소품 쇼핑몰 텐바이텐의 상품페이지는 세월의 노하우가 그대로 스며들어 있다. 10~20대 여성들이 주 고객층인 디자인 소품의 특성상 스크롤을 최대한 길게 만드는 것에 중점을 두었으며 아기자기한 텍스트와 심플한 사진으로만 상품페이지를 구성하였다. 







-
혹 평소 괜찮다고 생각한 상품페이지 디자인이 있다면 댓글이나 mepaystory@gmail.com 으로 메일 주시면 추가할 생각이다.

 

특히, 인증받은 오가닉 코튼을 재활용하거나 친환경 소재인 옥수수로 만든 섬유 PLA등을 사용해 옷을 만든다. 그리고 매출의 2%를 환경 단체에 기부한다. 일반적으로 이익의 1%나 많으면 매출의 1%정도가 기부가 상식인데 Nau는 전체 매출의 2%를 기부한다. 꽤 많은 퍼센티지라 할 수 있다.



사실 이 회사가 주목 받는 이유는 또 있다. Nau는 웹 마케팅를 제대로 실천하고 있는 브랜드이기 때문이다. 브랜드 출시 1년 전부터 블로그에 브랜드 컨셉과 진척상황을 공개했다. 그리고 2007년 웹기반으로 상품을 판매하자마자 웹상에서 큰 화제가 되었다.

그 후 너무 공격적인 사업확장으로 한차례 문을 닫았다가 업계의 도움을 받아 다시 도매업으로 시작해서 지금에 이르렀다는 뭐 그런 스토리가 있지만 사실 이 글을 쓰는 진짜 이유는 Nau의 "상품상세페이지"가 심플하고 절제되어 있으며 기능적으로도 매우 뛰어나다는 인상을 받았기 때문이다.



판매 여부와 상관 없이 개인적으로 이렇게 사진 한장에 깔끔한 구성을 좋아하는데 의류쇼핑몰을 운영했던 경험이 있어서 그런지 더욱 그런지도 모르겠다.
 
자연스럽게 확대되는 zoom 기능은 상품페이지 전체를 더욱 고급스러워 보이도록 만들었다. 무엇보다 왼쪽 탭으로 가격 정보나 색상 정보를 숨기고 있다가 해당 의류을 누르면 정보를 한움큼 물고 있다 토해내는 것처럼 펼쳐지는데 상품페이지 전체를 심플하고 단아하게 만들어주고 있다.
 




사이즈와 색상 수량 등을 선택하고 장바구니에 넣으면 페이지가 바뀌는게 아니라 현재 보고 있는 페이지에서 장바구니에 상품이 담겼다는 걸 보여주기 때문에 소비자는 혼란스럽지 않다.

 
 
상품 상세페이지뿐만 아니라 전체적인 쇼핑몰 설계가 잘되어 있다. 감각적인 패션디자인 회사라 그런지 웹사이트 설계 역시 군더더기 없이 매우 아릅답게 잘 만들어낸 것 같다. 


http://www.nau.com/

쇼핑몰에서 최적화된 상품페이지 UI 구성은 디자이너들에게 늘 연구 대상이었다. 단순히 이쁘고, 보기에 좋게만 제작된 상품페이지는 고객들의 경험적인 욕구를 채워주지 못한다.

이제 상품페이지는 가장 효과적인 사용자 인터페이스는 물론 보기에도 좋고 꼭 사야할 이유까지 만들어내야 한다. 웹 환경의 변화로 '플랙스'나 'AJAX' 등 다양한 웹 기술과 소셜미디어 채널을 활용한 기술적, 기능적 활용이 늘어나고 있다. 몇가지 상품 상세페이지 유형을 소개해보고자 한다.





1. http://www.freepeople.com/

감각적인 여성의류 쇼핑몰 '프리피플'은 각종 웹 디자인 관련 블로그에서 "전세계 디자이너들에게 최고의 영감을 주는 웹 사이트"로 매번 이름을 올리는 곳이다. 상세페이지는 사용자들이 상품이미지를 보다 쉽고 편하게 볼 수 있도록 마우스를 상품사진에 올리면 오른쪽 화면 비어 있는 곳(사용자가 상품 사진을 보고 있을때 오른쪽은 상품 사진과 아직은 상관이 없음으로 비어있다는 생각.)에 확대된 이미지가 자연스럽게 뜨도록 설계되어 있다.  

무엇보다 관련 상품을 클릭했을때 창이 바뀌거나 새창이 떠서 본 상품의 집중도를 흐트려뜨리는게 아니라 레이어 팝업으로 현재 보고 있는 페이지에서 관련 상품을 볼 수 있도록 되어있다.







 
2. http://www.47club.jp/

일본 지방신문기자 연합에서 각 지역 특산물들을 소개하고, 판매하는 '47클럽' 쇼핑몰은 상세페이지 구성이 기존 쇼핑몰들과 전혀 다른 UI 와 레이아웃으로 구성되어 있다. 유니클로(UNIQLO켈린더), 뮤인양행(playmuji) 등 혁신적인 웹 디자인 제작으로 유명한 'THA.JP' 에서 제작한 47클럽 상세 페이지는 가격, 옵션, 결제 등 기존 쇼핑몰 오른쪽에 있어야 할 영역을 페이지 상단으로 올려놓았다.

그리고 인증서, 생산자, 생산지를 보여주는 영역이나 이 상품을 추천한 기자 혹은 MD들의 코멘트, 리뷰, 상품평 등 쇼핑에서 구매를 결정하는 중요한 요소들을 상품 설명 오른쪽에 배치했다. 판매자 입장에서 상품을 설명하는 부분과 사용자들의 입장과 의견을 상하로 분리하지 않고, 좌우로 함께 배치해 가독성과 신뢰도를 동시에 높였다.
 







3. http://www.whiteandwarren.com/

패션 디자이너 수잔 화이트와 바바라 워렌이 공동으로 설립한 "whiteandwarren"은 뉴욕 패션계에서 유명한 명품 브랜드다. 특히, 여성들의 권익(유방암 퇴치 운동 등)과 친환경 소재를 이용한 제품 생산은 그 가치를 더 높여주고 있다. 쇼핑몰 상세페이지는 군더더기 없이 간결하게 제작되었으며 상품사진 자체에서 확대와 축소가 가능하도록 설계되었다. 









4. http://jaqkcellars.com/

2009 미국 월드시리즈 공식 와인이기도 했던 '잭셀러'는 유명인사들이 즐겨 찾는 와인 브랜드라고 한다. 그래서 그런지 공식 쇼핑몰 상세페이지 역시 매우 고급스럽게 디자인되었다. 특히 와인병을 360도 돌려 볼 수 있는 기능은 기술적으로 어떨지 모르겠으나 다른 곳에서 쉽게 보기 어려운 고급스러운 장면이다.  









5. http://allopop.com/

국내 디자인 티셔츠 전문 브랜드 "알루팝"은 대형 의류 업체들이 자본과 물량으로 시장을 잠식하는 동안. 참 끈질기게 오랫동안 버티고 살아남은 국내에 몇 안남은 온라인 토종 브랜드다. 이들의 혁신은 티셔츠 자체 디자인 뿐만 아니라 쇼핑몰 상세페이지 역시 혁신적이다.

사용자 눈에 쉽게 들어오는 전체적인 페이지 구성과 상품이미지를 넘길때 빠른 속도감은 매우 인상적이다. 다만 커뮤니티 RSS나 미투데이, 트위터 등 공유와 단문 메시지 채널를 좀 더 적극적으로 활용했으면 하는 아쉬움은 남는다.








6. http://www.williams-sonoma.com

미국의 이케아라고 불리는 미국 최고의 홈 주방 소매 업체 윌리암스 소노마는 1956년 창업되었다. 주로 주방용품과 생활용품을 사무용품등을 취급한다. 쇼핑몰 상세페이지는 간단한 설명과 심플한 사진 몇장이 전부다. 그러나 오랫동안 카달로그 영업을 해와서 그런지 소셜네트워크 채널을 활용한 입소문 영역은 확실히 신경을 쓴 부분이다.

동영상을 하단으로 위치해 사진과 동영상을 분리 시켜 배치한것은 인상적이다.











7. http://www.qimonya.com/ 

'쿠이몬야'는 일본 큐슈 지역에서 생산되고, 유통되는 먹거리를 온라인으로 판매하는 지역형 오픈마켓 쇼핑몰이다. 이 곳 상세페이지를 자세히 들여다보면 현재 주문이 들어오는 현황을(주문 날짜, 주문 번호, 주문 지역, 주문 금액) 실시간으로 볼 수 있다.   

그리고 또 한가지 흥미로운 점은 상세페이지 하단에 뉴스, 블로그, 웹페이지 등에서 이 상품과 관련된  키워드를 검색해 자동으로 나열해 보여주고 있다는 것이다.








8. http://www.digitalmesh.com/

'디지털메쉬'라는 인도회사에서 제작된 와인 쇼핑몰이다. 플랙스를 활용해 드래그 앤 드랍의 인터페이스로 상세페이지를 구성했다. 한 페이지에서 모든  기능이 가능하기 때문에 조금 익숙해지면 플랙스만큼 쇼핑몰에서 편한 기술도 없다. 

그러나 사용자들이 익숙해지는데 걸리는 로딩속도가 너무 길다.





--
 

"이 글은 웹 2.0 쇼핑몰 숄류션 X2soft 팀블로그에 동시에 연재된 글입니다. -by mepay"

소비재를 다루는 쇼핑몰에서 한번쯤 참조할 만한 유기농 느낌이 나는 패키지 디자인 17선을 소개해본다.





1. 곡물 과자 포장 패키지 디자인

영국 남부에 위치한 (dorsetcereals.co.uk/)사에서 디자인한 친환경 느낌이나는 곡물 과자 포장 패키지 디자인. 색감이나 디자인으로 곡물마다 각각의 느낌과 특성을 잘 살려냈다.









2. 유기농 목욕 제품 친환경 패키지 디자인

욕실 제품이라면 그것도 유기농 관련 제품이라면 흔히, 하얀색이나 아이보리색으로 느낌을 낼 거라고 생각하기 쉽지만 (pangeaorganics.com)사는 전혀 다른 시각으로 접근했다.







3. 고대 유기농 빵 패키지 디자인

호주에 위치한 POD라는 빵 제조 전문 회사는 고대 전통 방식으로 만든 빵을 출시했다. 이 패키지의 핵심은 소비자들이 내용물을 확인 할 수 있는 투명 비닐 위치를 포장 좌측에 넣은것이라고 한다.

이 패키지 디자인은 같은 호주에 위치한 (attsdesign.com.au/)사 이다.








4. 프레리 농장 옥수수 유기농 보드카 술병 디자인

미국 중서부에 위치한 미네소타 지역 5개 농장에서 연합해 영농 조합을 설립하고 유기농으로 키운 옥수수을 가지고 보드카를 만들었다. 술병이 담긴 박스안에 옥수수를 채워 넣은것이 인상적이다.

이 패키지를 만든 곳은 같은 미네소타에 위치한 (OLSON.com)사 이다.








5. 칠면조 친환경 패키지 디자인

노르웨이에 위치한 'homlagarden' 작은 농장에서 생산된 유기농 칠면조 고기 패키지 디자인이다. 농장을 운영하는 농부(비욘나 페데르센)의 전직은 이상주의자이면서 동시에 예술가였다. 그의 따뜻한 성격과 자연 친화적인 배경이 칠면조 패키지 디자인을 통해 반영되었다. 

아름다운 노르웨이의 자연과 환경, 그리고 Homlagarden 농장에서 행복하게 키운 칠면조의 이야기를 패키지로 만들어 냈다. 이 디자인은 February 2009 세계 패키지 디자인에 뽑히기도 했다.

이 패키지를 만든 곳은 같은 노르웨이에 위치한 (reaktor.no)사 이다. 









6. 유기농 식품 패키지 디자인

세계적인 패키지 디자이너 '이갈 호드리커 (Igal Hodirker)'가 만든 벌브사(유기농 과일, 야채, 식품등을 전문으로 취급하는 브랜드)의 식품 패키지 디자인이다. 최소한의 텍스트와 색감만으로 굉장히 혁신적인 디자인을 탄생시켰다. 내용물의 간단한 정보는 포장에 붙은 라벨로 알려주고 있지만, 사실 라벨이 없어도 독특한 질감으로 만든 패키지 때문에 사용자들은 내용물을 확인 할 수 있다.







7. 매일 상하목장 유기농 우유 패키지 디자인

코카콜라의 S라인 병을 연상케 하는 우유병 디자인은 한눈에 봐도 전혀 새롭다. 우유의 흰색 바탕에 유기농을 상징하는 진한 초록색, 갈색 텍스트는 최소한의 일러스트와 멋진 조합을 만들어 냈다. 디자인 덕분에 꽤 비싼 가격임에도 불구하고, 몇번 샀던 경험이...

매일 상하목장 유기농 우유(maeil.com)








8. 유기농 커피 패키지 디자인

Ihrmarke 커피는 대만의 유기농 제품을 생산하는 회사의 브랜드다. 간단한 일러스트와 선으로 갓 볶은 유기농 커피의 패키지 디자인을 완성시켰다.

이 패키지는 (프랑수아 클레르)의 작품이다.









9. 유기농 오이 패키지 디자인

영국의 hendricks 농장에서 생산되는 유기농 오이는 귀한 대접을 받는다. 오이 하나하나에 고급스런 얇은 종이를 싸고 그 위에 이 농장에서 생산된 확인 스티커를  붙이기 때문이다. 하나의 나무 상자에 6개의 오이가 들어간다.

유기농 오이 패키지 디자인은 (heredesign.co.uk)에서 제작 했다.






10. 씨앗 패키지 디자인

영국 학생들이 공모전을 통해 만든 씨앗 패키지 디자인이다. 내용물의 사진과 텍스트만으로 디자인 된 씨앗 포장지는 단순하면서도 직관적이다.








11. 100% 재활용 골판지를 이용한 CD 케이스

넥서스 프로덕션(Nexus Productions)은 종이 재질의 DVD 패키지를 만들었다. 이 음반 회사는 고전적인 플라스틱 케이스를 버리고, 100% 재활용 골판지를 이용해 DVD 케이스를 만들었다.
 








12. 강대인 생명의 쌀 패키지 디자인

전남 벌교에서 30년간 유기농만 고집하며 키운 강대인 생명의 쌀 포장 패키지다. 최소 단위로 쌀을 포장 했으며 한지 바탕에 붓글씨로 휘갈겨 쓴 타이포는 전체적으로 친환경 느낌을 준다.

관련 글은 행복이 가득한 집 (http://happy.design.co.kr/)










13. 감자 전분으로 만든 일회용 접시

패키지 디자이너 '안드레아(andrea ruggiero)'에 의해 만들어진 일회용 접시의 이름은 U.F.O 다. 이 접시의 재료는 식물의 씨앗, 감자 전분, 해초처럼 자연에서 얻은 것들로 만들어졌다. 사용된 접시는 아래 사진처럼 아무 곳에나 버려도 괜찮다. 새들의 먹이가 될 수도 있고, 자연에서 근방 썩어 없어지기 때문이다. 









14. 유기농 화장품 케이스 디자인

유기농 화장품은 만들기도 어렵지만 병 속에 내용물을 밖으로 표현해내기도 어렵다. 오가닉 케어(organicare)는 병 속에 들어 있는 내용물을 밖으로 표현해내기 위해 파격적이고, 스타일리쉬한 패키지 디자인을 선택했다. 또한 포장의 15% 수력 발전과 85%를 풍력 발전을 사용하는 시설에서 생산되었으며 포장의 사용된 재료중 80%는 재활용된 재료를 사용하였다.  

자세한 내용은 'Skincare products get green packaging'









15. 바나나 잎을 포장지로 사용

이 멋진 디자인은 이스라엘 디자이너 "탈 마르코"에 의해 탄생되었다. 바나나 잎으로 만든 이 포장지는 빠르게 유통되는 식품 산업에 알맞는 특성을 가지고 있다. 또한 음식물에 많은 물기와 기름기에 바나나 잎 표면은 완벽한 처리 능력을 나타낸다. 국내에서는 구하기 힘든 재료이긴 하지만 이와 비슷한 천연재료를 식품 포장으로 사용한다면 비용이나 활용면에서 좋은 결과를 만들어 낼 수 있을것이다.








16. 달걀 포장 같은 화장품 패키지 디자인

고급스러운 천연 화장품 포장을 달걀 패키지 처럼 디자인했다. 천연 화장품 'jurlique' 브랜드는 100% 재활용 용지로 겉 포장 케이스를 만들었다. 겉모습은 이렇지만 내용물은 오스트레일리아 농장에서 모든 식물과 꽃에서 만든 최고급 천연 화장품이다.








17. 유기농 계란 패키지 디자인

마지막으로 개인적으로 만든 12층 높이에서 던져도 안깨지는 '하늘과 계란' 패키지 디자인. 재활용이 가능한 100% 골판지와 종이로만 만들었다. 




--

"이 글은 웹 2.0 쇼핑몰 숄류션 X2soft 팀블로그에 동시에 연재된 글입니다. -by mepay"

쇼핑몰 인터페이스와 디자인적 부분은 직접 보고 느끼는 것이 가장 좋기 때문에
각 쇼핑몰에 관한 부연 설명은 생략했다. (아..이 귀차니즘..-0- )


주로 미국과 일본 유럽 캐나다 쇼핑몰 디자인들이며 국내 쇼핑몰은 굳이 소개 하지 않더라도
자주 볼 수 있기 때문에 따로 소개 하지 않는다.

• 이미지를 누르면 새창으로 뜬다.
  
• 해외쪽 쇼핑몰이라 새창이 뜨는데 조금 걸릴 수도 있다.

2009 쇼핑몰 메인 디자인 트랜드 51선 




1.erotokritos.com

웹사이트나 쇼핑몰에서 '수평적 레이아웃'의 관점은 사용자들의 익숙하지 않음과 수직적 구조에 편입되지 않으려는 피카소의 추상화와 비슷하다. 웹 공간의 정형화된 공간을 깨고, 파격적이고, 역동적인 레이아웃은 기본적으로 정교한 디자인과 알찬 컨텐츠를 기반으로 한다.

그리고, 의외로 "수평 레이아웃" 으로 디자인 된 웹사이트가 많다. 몇가지 해외 사례를 소개해 본다.  다양한 관점과 아이디어로 전체는 아니더라도 부분적으로나마 쇼핑몰에서 참조하길 기대해 본다.
 

 

http://suiepaparude.ro/

http://www.sonido.com.br/

http://www.ericryananderson.com/

http://www.hasrimy.com/

http://www.peter-pearson.com/

http://deanoakley.com/

http://www.visuall.be/

http://tyler.squarespace.com/

http://www.thehorizontalway.com/

http://www.handmadeinteractive.com/jasonlove/

http://lukelarsen.com/

http://www.lovebento.com.au/

http://www.webfellowforhire.com/

http://inside.nile.ru/#years-2008/

http://www.snoarc.no/

http://www.miguelperez.es/

http://album.alexflueras.ro/

http://blog.cnc-costumenational.com/

http://www.publicidadeviva.com/

http://www.neu-e.de/

http://www.jansochor.com/photo-essay/contraband.html

http://www.wallswaps.com/

http://www.clholloway.co.za/

http://sursly.com/

http://www.exit10.com/

http://lucuma.com.ar/

http://www.nanadc.com/Summer06/nana.html

http://synth.tc/

http://www.vanityclaire.com/

http://www.180degrees.co.uk/

http://www.eoloperfido.com/portfolio.htm

http://www.fashionphotographer.it/

http://graphictherapy.com/index2.html

http://www.bluevertigo.com.ar/bluevertigo.htm

http://www.workatplay.com/

http://www.faub.org/

http://www.gavincastleton.com/

http://swearwords.com.au/

"수평 레이아웃"으로 웹사이트나 쇼핑몰을 제작한다는 것.. 바둑을 예로 들어보자.

누군가가 상대방에게 "이렇게 둬야해 저렇게 둬야해" 라고 말하는 것은 한마디로 바둑이 아니다. 그건 기본적인 예의에 어긋난 행위인 것이다.

바둑은 기본적으로 자신의 논리대로 한판을 둘 자유가 있고, 그래야 의미 있는 게임이다. 웹사이트나 쇼핑몰을 구성할 때도 마찬가지다. '수평 스크롤'을 쓰느냐 '수직 스크롤'을 쓰느냐는 게임이 끝나봐야 어떤게 옳은지 아는 것이다. 그리고, 그건 틀린게 아니라 다를 뿐이다.


--
전부 훑어 보면서 느끼는 건데.. 사용하다 보니 '수직 스크롤'보다 약간  편한 것 같기도...

--
확인 결과 , 링크가 한칸씩 밀렸습니다. 수정해야 하는데.. 도저히 엄두가 안나는군요.


--

"이 글은 웹 2.0 쇼핑몰 숄류션 X2soft 팀블로그에 동시에 연재된 글입니다. -by mepay"

그러나 문제는 디자인이 아니다. 쇼핑몰에서 디자인이란 부분은 아주 작고 사소한 문제에 불과하다.

하지만, 쇼핑몰 운영하는 사업자분들을 만나면 쇼핑몰 디자인 때문에 매출도 나지 않고, 방문객도 오지 않는다고 하소연 한다. 메인을 조금 바꿔보면 나아지지 않을까 .. 메뉴 스타일을 바꿔보면 나아지지 않을까.. 또 그렇게 바꾸고, 수정에 수정을 거듭한다. 

보고 있노로라면 사실 좀 안타깝다.

사실 소호 쇼핑몰에서 물건을 구매하는 고객들은 디자인에 크게 신경 쓰지 않는다. 한 예로 참거래 농민장터의 메인 디자인은 누가 봐도 복잡하고 약간 촌스럽기까지 하다. 그러나, 1000명 방문하면 300~400명이 물건을 구매 할 정도로 구매 전환율면에서 30~40%에 달하는 알짜배기 쇼핑몰이다.

당장 한사람의 방문객이라도 유치하기 위해 쇼핑.. 쇼핑 그자체에 무게를 두어야 한다.  적어도 우리 쇼핑몰만큼은 본질에 충실하고 직관적이길 바란다.

물론, 어느정도 쇼핑몰이 자리가 잡히면 디자인 추세에 맞게 디자인에 신경을 쓰는것도 중요한 일이다. 현재 세계적인 쇼핑몰 디자인 추세는 자연에서 나오는 재료(나무,풀,벌레,꽃등) 느낌과 손으로 그린듯한 손글씨다. 그리고, 자사의 블로그와 각 메타 사이트의 북마크, RSS 구독등을  좀더 유기적으로 쉽게 연동 할 수 있도록 디자인 한것이다.

아래 소개하는 해외 쇼핑몰 40개는 smashingmagazine.com 에 소개된 Design Showcase Of Creative Online-Shops 이다. 쇼핑몰을 처음 기획하는 분들이나 디자인 자체가 아닌 구성자체를 독특하고 창의적으로 만들어 보고 싶다면 참고해 볼 만하다.



==

1. shopcomposition.com

상단에 있는 초록색 작은 버튼을 누르면 쇼핑몰 부분이 미닫이 문처럼 닫혔다 열렸다 슬라이딩 된다. 소비자는 쇼핑을 하고 싶으면 shop쪽을 상품과 관련된 정보를 얻고 싶으면 블로그를 상품을 판매하는 판매자를 보고 싶으면 판매자를 빠르게 볼 수 있도록 디자인 되었다.   








2. feelthepower.biz

플레시 기반으로 옷이 뜨는데 까지 약간의 시간이 필요하다. 하지만 역동적인 에니메이션을 통해 상품 선택이 쉽고 인지가 빠르다. 클릭을 하면 상세페이지가 열리고, 종류별로 색깔이 구분되어 있다.







3. yellowoodstore.com

스노우 보드를 판매하는 쇼핑몰이다. 디자인 추세에 맞게 뒷 배경을 목재 스타일로 어둡게 꾸며 상품을 돋보이게 만들었다.






4. ushops.com

오픈마켓 개념의 쇼핑몰이다. 메뉴는 크게 선물, 일반, 도매, 판매 세가지로 나눠져 있고, 태그 기반으로 상품을 선택 할 수 있다. 






5.freepeople.com
10후반에서 20초반 여성 고객층을 경냥한 쇼핑몰이다. 손글씨 텍스트가 인상적이다.






6.sourcebits.com

아작스(ajax) 기반의 음반 쇼핑몰이다. 어두운 백그라운드에 활기가 넘치는 메뉴 그리고 역동적인 자바 스크립트 효과는 쇼핑뿐만 아니라 보는 즐거움도 함께 한다.








7.perfectorder.jp





8.klassiker-in-acryl.de

독일 자동차 포스터 쇼핑몰이다. 포스터 디자인을 직접 할 수 있다. 마음에 드는 자동차 디자인을 선택한 다음 색깔을 칠하고 쇼핑몰에 보증금을 걸게 된다. 그 다음 쇼핑몰에서 작업을 해서 몇 주내로 보내주게 된다.
 




9.simpletreasures.com.au

호주 악세사리 쇼핑몰이다. 가독성이 좋아 클릭이 쉽고 빠르다.

http://www.simpletreasures.com.au/

10.habitatshoes.com




11.shoeguru.ca

슈즈구루의 상품 검색은 수평으로 검색 할 수 있다는 특징이 있다.





11.cosmicsoda.com

코믹소다라는 쇼핑몰의 이름처럼 디자인이 독특하고 재밌다. 공책위에 파란색 삽화와 수십개로 이뤄진 점선 박스가 흥미롭다.





12.etsy.com

웹 2.0 쇼핑몰 소개중 자주 언급되는 etsy.com 이다. etsy.com 은 색깔별, 시간별, 재질별, 지역별등등 상품 고르기가 가능하다. 각각의 카테고리속 디자인은 굉장히 역동적이고, 멋지다.




13.threadless.com

손으로 갈겨쓴 필기체는 최근 쇼핑몰 디자인적 경향이다. 이곳은 글씨가 아닌 전체적인 느낌이 흰색 도화지에 손으로 그린것 같다.







14.tastebook.com

레시피 북을 판매하는 쇼핑몰이다. 전체적인 구성이나 색감이 포근하고 안정적이다.





15.loworks-store.org





16.ladybugspicnic.net

설명에 따르면 고객인 엄마들의 클릭을 가장 잘 이끌어낸 디자인이라고 한다.






17.uniquemartique.com








18.intlstore.mozilla.org

파폭으로 유명한 모질라 재단의 쇼핑몰. 파폭의 느낌을 잘 살린 디자인이다.








19.podshop.com

일전에도 소개한 픽토그램을 잘 활용한 쇼핑몰






20.rockpillars.cz






21.rotofugi.com








22.chopshopstore.com







23.pinkkoifish.com







24.akachanwear.com







25.tshirtaxid.com






26.a-better-tomorrow.com






29.babywit.com







30.dirtycoast.com





31.foxcubs.com





32.hollyhue.com







33.jacobijayne.co.uk






34.kidsmodern.com







35.lekmer.se









36.generalrobots.de






37.serviceisgood.com








38.soundprovisions.net






39.soiakyo.com





40.teetonic.com




덧,
나중엔 귀찮아서 설명을 빠트렸음.  -_-;;