쇼핑몰 디자인과 시각적 태도

대한민국의 인터넷 쇼핑몰 메인페이지 레이아웃은 딱 한마디로 요약할 수 있다.
“하나라도 더 팔자!”
기본적으로 장사니까 물건을 하나라도 더 팔아보겠다는 건 이해하겠지만 그처럼 요란 법석을 떨 필요가 있을까 싶기도 하다. 심한 경우에는 3000픽셀이 넘는 길이의 페이지 레이아웃을 각종 이미지와 플래시 무비로 도배하고 있으니 말이다. 다음쇼핑은 세로 길이가 4000픽셀을 넘어선다. 세로길이 1200픽셀인 21인치 모니터에서 스크롤 휠을 수도 없이 움직여야 가장 밑의 상품을 볼 수 있다. 인터파크는 약 2500픽셀 정도지만 그만큼 글씨가 작고 이미지 크기가 100픽셀을 넘는 경우가 많지 않으므로 시선이 여기저기 분산될 수 밖에 없다.

작금의 쇼핑몰 메인페이지가 가진 가장 큰 문제점은 상품을 강매하려는 수준의 시각적 위압감을 보여준다는 사실이다. 이를 단적으로 보여주는 것이 메인페이지에 나열된 링크들의 click depth이다. 대부분의 링크가 전체 사이트 구조에서 가장 깊은 곳에 위치하고 있는데 이는 순차적인 방법을 통해 약 5회이상을 클릭해야만 다다를 수 있는 페이지 깊이이다.
처음 노트북을 사기 위해 홈페이지에 들른 사람은 쉽게 개별적인 노트북 상품 하나에 대한 링크를 이용해 노트북에 대한 정보를 얻을 수 있다. 그러데 갑자기 겨울옷이 사고 싶어 졌다면? 사용자는 메인페이지로 다시 돌아와서 노트북을 찾을 때처럼 상품 하나를 클릭하고 바로 상위 구조를 브라우징 해야 한다. 한 두 제품이면 이런 노가다가 가능하다. 하지만 과연 사용자의 경험이 이런 복잡함을 참아낼 수 있을까? 당신이라면?

동굴입구에 동굴의 끝까지 한 번에 갈 수 있는 순간이동 장치가 있다. 처음에는 편리할 것이다. 동굴에서 찾는 보물이 동굴의 마지막 지점 한 곳에만 집중적으로 배치되 있다면 이만큼 편리한 것이 없다. 하지만 동굴의 종착점이 수도 없이 많다면? 순간이동 장치보다는 동굴의 각 분기점마다 종착점에 대한 자세한 설명을 곁들이고 동굴에 들어가기 전 시각적 요소를 통해 동굴의 전체 구조를 파악하게 하는 것이 훨씬 더 편리하다.

쇼핑몰도 이와 비슷한데 문제는 쇼핑몰이라는 동굴이 2차원이 아니라 3차원에 더욱 가깝다는 것이다. 이는 상품 분류의 문제에서도 나타난다. 대부분의 쇼핑몰에 도서관의 듀이분류표처럼 교과서 같은 상품 분류를 채택하고 있는데 과연 이게 편리할까? 물론, 익숙해지면 편리하다.(익숙해지면 심지어 군생활도 편하다. 말년 병장들 봐라) 적어도 대한민국 쇼핑몰에서 직관적인 레이블링을 찾아보는 것은 거의 불가능하다. 어쩌면 다들 약속이나 한듯 엄청난 량의 카테고리를 백과사전처럼 우겨넣고 있으며 그러한 것들은 그나마도 기술적으로 Internet Explore에 최적화되어 있어서 다른 브라우저에서는 확인하는 것조차 불가능할 때가 많다.

더욱 나의 심금을 울리는 건 위에서 열거한 대형 쇼핑몰의 잘못된 점들을 소형 쇼핑몰들이 그대로 따라하고 있다는 점이다. 상대적으로 적은 비용이 투자되는 중소형 쇼핑몰들이 아무런 생각없이 대형쇼핑몰들을 따라하면서 똑같은 실수를 되풀이 하고, 사용자들은 표지판도 없는 수목원에서 길을 헤메는 것처럼 코딱지 만한 정원을 헤매고 다녀야 한다. 넌센스도 이런 넌센스는 없다.

niketown.com의 예를 들어보자. 모회사의 규모를 떠나 이 사이트는 품목만으로 따지자면 중형의 전문 쇼핑몰이다. 스포츠 용품이라는 단일 용품을 취급하기 때문이다. 하지만 개별적인 상품들이 메인페이지를 가득 메우는 멍청한 짓을 하지는 않는다. 르브론 제임스나 카멜로 앤서니 같은 주력 상품이 출시된 직후에만 많은 공간을 활용하여 직접적으로 링크를 걸어준다. 그나마도 jumpman23, nikeskateboard, nikewomen 같은 전문몰을 별도로 운영하며 style guide를 통해 전체 nike 사이트와의 시각적 통일성을 유지하고 있다. 상품의 브라우징 또한 직관적 분류의 레이블링과 백과사전식의 분류를 균형적으로 사용하여 사용자가 사이트 전체 구조에 쉽게 익숙해지도록 배려하고 있다. click depth 또한 최종 페이지까지 세 번 이내인 경우가 대부분이고 상품이 소개되는 최심층부의 페이지 또한 세로 1500픽셀을 넘지 않는다.

쇼핑몰의 시각적 attitude.

앞서 말한 대형쇼핑몰들의 시각적 공통점은 무었일까? 나는 이것이 메인페이지의 레이아웃, 상품 배열의 원칙, 네비게이션 메뉴의 위치와 모션 등과 같은 시각적 현현이 아니라고 생각한다. 그러한 것들이 비슷한 예를 들자면 얼마든지 있을 수 있고 그러한 시각적 배열과 구성 자체가 잘못된 디자인을 만든다고 생각하지는 않는다. 진정한 차이는 시각적인 태도이다. 모든 디자인은 시각적 태도를 드러낸다. 개인의 노트필기에서부터 고속도로 주변의 옥외 광고판까지 모든 디자인 작업은 그가 속한 사회, 정치, 경제적 흐름(context)과 문맥에 따라 각각의 목소리를 가진다. 이것이 시각적 태도가 된다. 여기에는 자료(data)에 대한 선별기준, 정보(information)에 주체의 태도 등이 모두 포함된다.
위의 기준에 따르자면 대한민국의 대형 쇼핑몰을 꿰뚫을 수 있는 하나의 시각적 태도는 ‘강매;high-pressure salesmanship’이다. 이러한 시각적 태도가 압도적인 색과 형태의 레이아웃으로 웹페이지 전체에 영향력을 행사한다. 하나라도 더 팔기위해 집중되는 고채도의 색과 많은 양의 텍스트 자료, 통일성을 상실한 시각적 요소, 무분별한 최신기술의 사용 등 모든 것이 사용자의 입장보다 판매자의 입장을 강요하고 있다.

information and proposal

‘강매’에 기반한 시각적 구성은 삐라, 찌라시의 범주에서 벗어날 수 없다. 나는 대안적 태도로서 정보제공과 제안적 요소가 필요하다고 생각한다. 물론 좋은 제품이 항상 좋은 소비를 부르는 것은 아니다. 그런 점은 스티븐 잡스가 NeXT를 통해 잘 보여주었다. 하지만 우수한 의견과 설득력 있는 제안은 언제나 환영을 받는다. 앞서 살펴본 nike의 여러 광고 켐페인과 amazon.com의 페이지 레이아웃 등은 시각적 요소를 이용해 정보제공과 상품제안이라는 태도를 드러낸다. 사용자는 마우스의 움직임과 페이지의 시각적 요소를 기반으로 하여 판매자의 태도를 알 수가 있다.
당신이 전자상거래를 통해 물건을 판다고 생각하는 것은 정말 멍청한 일이다. 명심하라. 당신은 또 다른 종류의 정보를 판매하고 있는 것이다.

---

most-wanted
http://www.sunwalters.com/
http://www.thedrama.org/store/