네모칸 하나 디자인하기
작은 네모 칸 하나에 대해 남에게 알려주려면.
네모칸 하나에 글과 사진을 넣어 디자인하기. 간단한 일이다.
그런데 이 네모칸이 수백 개에서 수천 개가 되면 어떨까?
남이 디자인한 것을 보긴 쉽지만, 내가 하면 어려운 게 디자인이다.
쉽다고 생각한 것이 가장 어려운 일이 될 수 있다.
우리는 많은 상품을 사면서, 항상 상품 정보를 본다. 여기서 '상품 정보'란 쇼핑몰에 화면에서 네모로 구성되어 있는 셀을 말한다. 상품 정보는 썸네일 하나와 몇 자의 텍스트, 숫자로 구성되어 있다. 익숙하고, 단순하다.
매장을 찾아갔을 때, 상품 정보는 꼬리표를 들출 때나 보이지만, 제품을 손으로 만질 수 없는 온라인 쇼핑몰에서 이 정보는 꽤 중요하다.
쇼핑몰마다 다른
장점을 표현한다.
쇼핑몰을 접속하지 않는 사람은 드물 것이다. 그래서 내가 자주 가는 쇼핑몰의 데스크톱 버전의 상품 부분만 한 번 모아보았다. 그러자 몇 가지 변화와 상태가 동시에 존재하고 있다.
첫 번째 그룹은 올리브 영, 11번가, 쿠팡을 모아서 구분해봤다. 올리브 영과 11번가는 다양한 상품 정보 화면을 가지고 있다. 표시되는 위치와 용도에 따라 여러 가지 디자인으로 표현된다.
쿠팡의 경우는 다르다. 어떤 화면이든 유사한 형태의 디자인을 보여준다. 사진과 정보로 구성된 쿠팡은 상품의 상태와 예상할 수 있는 정보가 그룹핑되어 있고, 상품의 상태에 따라 다양한 정보가 표시된다. 쿠팡의 양식은 다음 그룹의 상품 정보에서 더 분명하게 볼 수 있다. 쿠팡의 상품 정보는 하나의 형태만 있지만, 상품이 가진 상태와 특성에 맞게 표시되는 규칙이 촘촘하게 구성되어 있는 것 같다. 쿠팡은 정보는 잘 구성되어 있지만, 디자인은 좀 부족하다.
간결한 수직 배치는 다음 그룹에서 분명하게 확인할 수 있다.
두 번째 그룹은 쿠팡처럼 사진과 정보를 분리하고, 사진의 질을 매우 높인 쇼핑몰의 상품 정보다. 사진을 가리는 요소가 적거나 최소화되어 있다. 29cm의 경우에는 다른 쇼핑몰에 비해 사진 퀄리티도 놓고, 스토리텔링도 훌륭하다.
이 그룹의 비교 대상은 '쉐프의 정육점'이다. '쉐프의 정육점'은 육류를 주로 파는데, 고화질의 육류 사진과 함께, 사진의 질만 높인 것이 아니라, 상품 사진 영역을 효과적으로 활용했다. 비슷비슷해 보이지 않게 잘 디자인되어 있다. 보통 음식 재료나 음식을 파는 쇼핑몰의 경우, 테이블을 세팅하고 고기를 표시하는 경우가 많다. 쉐프의 정육점은 프로모션으로는 다양한 고기의 모습을 보여주지만, 혼동하기 쉬운 재료의 모습과 등급 등을 확실하게 보여준다는 측면에서 놀라웠다.
홈플러스의 경우엔 독특하게 가로와 세로가 혼재되어 있다. 표시되는 위치에 따라 약간 다른데, 가격에 민감한 소비자를 위해 가격과 구매 정보를 팝업으로 표시해준다. 과도기에 있는 것 같은 디자인으로 구매 버튼 대신 구매 숫자와 장바구니 버튼이 배치되어 있다. 고화질 스크린 대응이 아직 안되어 있는 것이 안타깝다.
눈으로 보기에 단순하고, 상황에 따라 적절한 정보를 유동적으로 표현하면서 잘 정리된 사례는 내 기준으로 이마트 몰이다. 내가 자주 가는 쇼핑몰 중에서 텍스트의 형태, 상품에 배치되는 배지나 아이콘, 팝업의 표시가 디테일하고, 고해상도 스크린에도 대응할 수 있게 제작되어 선명했다. 구매 외에 많은 기능이 있지만, 크게 복잡해 보이지 않게 잘 디자인되어 있다.
굉장히 많은 노력이 들어간 상태이며, 큰 회사임에도 불구하고, 꼼꼼하게 제작되고 있다는 느낌을 받았다. 정보의 표시에 있어서는 쿠팡과 유사하지만, 쿠팡에 비해서 구체적인 부분들이 매우 잘 디자인 되어 있다. 직접 캡쳐해서 다른 쇼핑몰과 비교해보길 바란다. 퍼블리셔와 함께 보면 좋다.
주어진 정보를
정리하기.
웹사이트는 잘 만들기가 힘들다. 작은 부분이지만, 상품 정보를 잘 디자인해서 사용자에게 보여주기 위해서는 디자이너뿐 아니라 다양한 직군의 협력이 필요하다. 디자이너에게는 많은 정보를 다루는 것이 스트레스가 된다. 디자이너는 자기가 만들고 싶은 디자인에 필요한 정보만 원하는 경우가 많다.
왼쪽은 내가 보고 있던 웹사이트의 상품 정보이다. 주니어 디자이너에게 디자인과 정보에 대해 이야기 해주면서, 보고 있던 상품 정보를 예로 들었고, 즉석에서 오른쪽처럼 바꾸고, 한 번 생각해보라고 말해주었다.
구체적인 정보가 빼곡하게 주어지면, 디자이너는 당황하게 되고, 해당 정보를 어떻게든 이미지에 넣기 바쁘다. 그래서 일단 넣은 후, 진정한 상태에서 전체 화면의 모양을 생각하며 정리를 한 번 해야 한다. 하지만 복잡한 머릿속을 정리하는 방법이 필요하다.
먼저 정보를 크게 두 덩어리로 나눈 후, 그중 하나를 다시 두 부분으로 나누었다. 데이터 위주의 정보도 다시 두 부분을 나눈 후, 정보의 두 분류에서 중요한 내용의 텍스트를 진하고 굵게 표시했다.
사진과 글을 나눈다.
글에서 긴 글과 숫자만 있는 정보를 나눈다.
긴 글에서 제목과 설명을 나눈다.
짧은 글에서 가격과 나머지를 나눈다.
이런 식으로 계속 나눈 후, 중요한 것을 정한다. 그리고 중요한 것부터, 크고 굵고 진하게 배치한다.
마지막으로 내가 주니어 디자이너에게 원했던 이미지는 아래와 같았지만... 결론은 없다.
