네모칸에 대한 생각
생각의 깊이에 따라 모든 것이 달라진다.
이번에도 네모칸 이야기다.
액자처럼 보이는 하나의 상품 정보는 그 자체로 사진 액자 같지만, 실제로는 문이다.
상품을 구매하기 위해서 통과해야 의미가 생긴다.
상품 정보를 고민하는 과정을 통해 본질과 심플함에 대해 생각해본다.
시작하기
마켓 컬리는 독특한 쇼핑몰이다. 물류 시스템에 투자를 많이 하는 회사이면서 보라색의 개성 있는 아이덴티티를 가지고 있다. 가격대도 다양하고, 많은 상품을 판매하고 있다.
링크와 기능들이 연결되어 있는 상품 정보는 심플하게 디자인되어 있다.
색
브랜드 컬러와 무채색, 브랜드 컬러를 분리하고 텍스트의 색상 비중을 살펴보았다. 텍스트와 컬러의 비중으로 봤을 때, 할인, 장바구니, 가격을 중요하게 생각했다고 추정할 수 있다.
높이와 면적
높이로 보면, 가장 밑에 텍스트가 있고, 그 위에 사진이 있고, 사진 위에 장바구니 아이콘과 할인 정보가 있다. 장바구니 아이콘보다 할인 정보가 더 진하기 때문에 더 위에 있다고 판단했다.
면적으로 보면, 사진이 가장 큰 비중을 차지하고 있고, 상품명이 그다음 순위라고 추정할 수 있다. 가격 영역의 비중은 6% 정도지만, 이 영역은 보라색으로 표시된다. 여기서 맨 마지막 문구는 아마도 구매 의도를 자극하는 장치로 사용된 듯 하다.
콘텐츠
세부 구성 요소를 살펴보았다. 할인 정보와 장바구니 아이콘, 브랜드와 상품명, 가격과 홍보 문구를 볼 수 있다. 사진과 텍스트 부분으로 나눌 수 있고, 사진은 Z패턴, 텍스트는 F패턴을 볼 수 있다.
글로 쓰면 이렇게 된다.
15% 돈을 아낄 수 있습니다. 아이스크림들입니다. 장바구니에 담을 수 있습니다. 브랜드는 '[스키니 피그]'이며, 상품의 이름은 스키니 칼로리 아이스크림 6종입니다. 원래는 8,500원인데, 7,225원에 살 수 있습니다. '자꾸 퍼먹게 되는 놀라운 풍미'가 있습니다.
정리해보면,
사진이 중요하다.
보라색 컬러가 쓰인 부분의 면적은 적지만 중요해 보인다.
할인은 중요하다.
가장 하단에 표시되는 카피 문구는 독특해 보인다
이제 다른 쇼핑몰과 비교한다. 스타일과 콘텐츠를 분리해서 다른 쇼핑몰의 형식에 적용해 본다.
다른 쇼핑몰과 비교하기
표시되는 정보가 다르지만, 형식을 분석하여 내용을 넣어보았다. 작업 과정에서 쇼핑몰의 차이점과 특징이 좀 더 보이기 시작한다.
29cm는 사진과 할인이 중요해 보인다.
29cm는 사진의 면적이 매우 크다. 사진이 중요하고, 텍스트는 작게 표시되지만, 할인과 가격은 강조해서 표시한다. 할인 전 가격을 표시한다.
색과 폰트의 사용이 절제되어 있다.
이마트몰은 배송과 가격, 장바구니가 중요해 보인다.
이마트몰은 3개의 쇼핑몰 중 사진의 비중은 중간 정도이다. 사진 위에 배지를 올리고, 배송을 강조한다. 배지의 표시 방식이 다른데, 화면 오른쪽으로 몰려 있어서 사진이 배지보다 먼저 보인다.
텍스트는 3개의 쇼핑몰 중 색과 굵기, 크기의 변화가 다양하지만, 변화의 폭은 크지 않다.
원본에는 장바구니 기능을 제공하는 기능이 상품 썸네일에 숨어 있다.
쿠팡은 다양한 배송 방식 안내와 가격, 마일리지 적립이 중요해 보인다.
쿠팡은 3개의 쇼핑몰 중 사진의 비중이 가장 작고, 배송에 대한 정보를 많이 표시한다. 가격을 강조하고, 구매 후, 마일리지 적립 부분도 강조하고 있다. 할인을 표시한다.
상품의 경우에 따라 사진보다 텍스트 영역이 크다.
마켓 컬리와 다른 쇼핑몰의 다른 부분이 하나 있는데, 그것은 카피 문구다. 다른 쇼핑몰은 이런 메시지가 없다. 마켓 컬리에서는 할인이 표시되지만, 다른 쇼핑몰에서는 비중이 높아 보이지 않는다. 단, 가격은 모든 쇼핑몰에서 중요하다.
또 다른 쇼핑몰은 글자 크기의 폭이 차이가 별로 크지 않다.
재구성을 해보자
다른 쇼핑몰에서 배운 점,
글자 크기와 색은 다양하게 변할 수 있지만, 변화의 폭은 작다.
글자의 크기가 작다.
상품 사진을 가리지 않는다.
사진을 크게 하면 배송정보, 마일리지 적립 정보, 기타 텍스트의 비중을 적게 가져가야 한다.
할인과 가격, 할인 전 가격을 표시하는 것은 일반적이다.
다른 쇼핑몰과 비교하며 마켓 컬리에 대해 알게 된 점,
상품 한줄평에 가까운 카피 문구가 있다.
할인을 강조하고 싶은 것 같다.
상품을 빠르게 브라우징 하며, 장바구니를 채우게 하고 싶은 듯하다.
할인 배지(기능이 없다.)와 장바구니 아이콘(장바구니를 호출한다.)을 같이 두고 있다.
3개의 쇼핑몰과 비교해보면서 배운 점을 적용해서 기본 형태를 만들고, 한 가지씩 강조해보기로 했다.
브랜드와 상품명:
다른 쇼핑몰처럼 브랜드 이름과 상품명을 강조하고 나머지를 배치한다. 할인율과 장바구니는 눈에 안 띄게 했다. 평범하다. 그냥 목록처럼 보인다.
할인과 가격:
뭔가 쇼핑몰 같다. 할인 배지를 원래 구성처럼 왼쪽 상단에 배치했다. 기존보다 모양을 줘서 눈에 띄게 해 봤다. 텍스트 부분에서 할인 정보과 가격을 한 번 더 표시했다.
장바구니와 카피:
짧게 쓰여 있는 카피는 누군가 고생을 해서 생각한 것이고, 그걸 크게 해 보면 어떨까 하는 생각이 들었다. 실제로 카피 내용은 제품의 특징적인 일면을 한줄평으로 표현하고 있다. 장바구니 아이콘과 함께 배치하고 할인 정보를 배제했다.
이렇게 보니까 이마트몰처럼 썸네일 안에 장바구니를 숨기는 것보다 썸네일에 표시하는 것도 좋은 선택 같다.
개별 요소들을 모아서 시안을 만들고 비교해 본다.
다른 콘텐츠에 적용해 본다.
결론
모든 쇼핑몰에서 중요하게 보는 정보는 사진 > 할인> 가격 > 배송이다.
특히 상품 정보는 하나만 존재하는 것이 아니라 한 화면에 여러 개가 함께 배치된다. 그래서 사진이 중심이 되고, 텍스트는 보조적으로 사용된다. 사진을 크게 배치하는 경우, 사진과 다른 콘텐츠는 분리하는 것이 좋고, 부득이 하게 사진을 가리는 경우는 왼쪽과 상단은 피하는 것이 좋다.
가격은 작게 표시되지만, 다른 텍스트에서 분리되어 보이게 디자인한다. 그리고 할인은 꼭 필요한 정보다. 배송은 경쟁이 일어나고 있어서 큰 이슈로 보인다.
하지만 배송의 차이는 줄어들고 있어서 차이를 만들려면, 사진과 다른 정보를 분리하고, 사진을 중심으로 구매단위나 관리를 위한 기능을 강조하는 것이 중요해질 듯 하다.
사진, 할인, 가격 정보를 전달하지 못하면, 상품을 사용자에게 전달할 수 없고, 구매 단계에 도착할 수 없다. 구매 단계에 도착하려면, 배송 정보도 알려줘야 한다. 그리고 재방문을 유도하려면, 마일리지나 회원 등급에 대한 정보도 표시하면 좋고, 상품을 여러 개 사는 경우를 위해 이 정보를 관리하기 위한 기능도 표시해야 한다.
한 걸음 물러나서 정리하면,
1. 선택하기 전에 무엇인지 알려줘야 한다.
2. 선택하면 어떤 이득이 있는지 알려줘야 한다.
3. 선택하고 나면 어떻게 되는지 알려줘야 한다.
쇼핑몰에서는 비주얼 디자인을 간과하면, 1번을 시작도 할 수 없다.
할인 배지와 가격 표시가 촌스럽다고 마케팅이나 MD의 요구를 무시하면, 2번을 만족시키기 힘들다.
개발자가 만드는 기능적인 면을 간과하면, 3번을 보장할 수 없다.
상품 정보가 보이는 작고 단순한 네모칸은 사진을 표시하는 ‘면’과 글자의 조합이 아니다. 전체 흐름과 맥락에서 사용자와 정보가 끊임없이 흘러간다.
UI 디자이너는 정보를 사용자가 인지할 수 있게 전달해야 한다. 인지하고 선택하게 구성하는 과정은 보는 위치에 따라 달라질 수 있고 관점의 차이에 따라 결과가 달라진다.
여러 가지로 시도하고 비교하면서 찾아보려는 경험을 통해, 다양한 관점을 유지하는 것이 중요하다.
이전 글
https://brunch.co.kr/@pliossun/112
https://brunch.co.kr/@pliossun/113
