카테고리 한 페이지 바꾸기
'원티드'에서 온라인 세미나를 듣는데, 쿠팡의 로켓 프레시에 대한 이야기를 보게 되었다. 디자인은 알고 있는 것을 다시 배우는 것이라는 부분은 인상적이었다.
강의의 자료로 로켓 프레시의 카테고리 화면을 볼 수 있었다. 원래 디자이너가 하려고 했던 디자인이 있었는데, 데이터로 검증해나가면서 현재의 모습이 되었다고 했다.
이 글은 아이콘과 사진의 사용, 한 페이지에 많은 링크나 기능을 배치할 경우에 대한 스터디다.
글자가 아주 빽빽한 경우를 만나는게 쉽지 않다. 실제 운영 중인 서비스를 모델로 삼아서 작업해보면, 배우는 것이 많다.
왼쪽은 현재 쿠팡의 카테고리 메뉴이고, 오른쪽은 로켓 프레시의 전체 카테고리다. 쿠팡의 전체 카테고리와 독립되어 디자인된 카테고리다.
로켓 프레시의 디자인은 묘하게 웹사이트의 사이트맵을 생각나게 한다. 디자인을 시작하기 전에 다른 쇼핑몰의 카테고리를 살펴보았다.
다른 앱의 카테고리를
알아보자
'예스24 도서'는 몇 가지 쇼핑몰을 봤을 때, 가장 안정된 형태라고 생각된다. 카테고리는 두 그룹으로 나누어져 있다. 강조하고 싶은 카테고리는 완성도 높은 라인 아이콘으로 디자인되어 있고, 선택할 경우, 넓어지면서 하위 카테고리가 나온다. 하위 카테고리는 다른 부분과 구별될 수 있게 색과 라인으로 구분되어 있다.
화면이 변하는 디자인이고 카테고리를 펼칠 경우, 화면이 밀려난다. 선택된 아이콘은 채색된 형태로 변하고, 전체 카테고리와 즐겨찾기 기능이 제공된다.
비교적 최근에 디자인된 '마켓컬리'의 경우도 라인 아이콘과 펼쳐지는 메뉴를 지원하고, 하위 카테고리를 색으로 구분한다. '예스24 도서'보다 간결해진 형태를 띠고 있다. 대신 상당히 많은 카테고리를 보유하고 있기 때문에 한 페이지에 모든 항목이 보이지는 않는다.
'옥션'의 경우는 한 페이지에 상위 카테고리도 보여주고, 하위 카테고리를 단계적으로 진행되게 되어 있다. 한 페이지에 모든 것을 보여주진 못하지만, 선택된 카테고리를 확실히 보여준다. 상위 카테고리를 표현하는데 아이콘을 사용하지 않고 있다.
'지마켓'의 경우는 펼쳐지는 방식과 이동하는 방식의 사례를 모두 활용하였다. 라인 아이콘을 사용하고, 펼쳐지며, 하위 카테고리를 색으로 표시하고, 더 자세한 카테고리 페이지로 이동한다.
아이콘과 썸네일을
사용할 때 주의점
쇼핑몰들은 라인 아이콘을 쓰고, 하위 텍스트는 그레이톤의 배경에 숨기는 스타일이 있는데(적어도 내 폰에 깔린 앱들의 경우는), 쿠팡의 경우는 라인 아이콘을 쓰지 않는다. 쿠팡은 쿠팡 로고의 컬러와 비슷한 톤으로 구성된 밝은 색 아이콘을 쓴다.
쿠팡의 로켓 프레시의 경우는 '프레시'라는 단어를 강조하기 위해 녹색과 사진으로 구성된 것으로 추정된다. 신선하다고 해야 하기 때문에, 상태를 보여주는 사진을 쓰는 건 아닐까라는 생각도 든다.
아이콘을 쓸 경우보다 사진을 쓰면 왠지 더 쉬울 것 같지만, 사진의 영역이 작아질수록 사진을 좀 더 섬세하게 선택해야 한다. 마켓컬리나 지마켓처럼 선을 많이 사용할수록 아이콘을 일정 크기 이상으로 줄일 경우 디자인이 어려워진다.
사진은 선택하기 좋아 보이고, 아이콘은 그리기 힘들어 보이지만, 브랜드 아이덴티티를 유지하려면, 아이콘은 제작해야 하고, 제작 전에 신중하게 생각해야 한다.
사진의 경우는 배경의 텍스쳐와 색, 주제의 형태를 잘 봐야 할 것 같다. 특히 그림자에 주의해야 한다. 쿠팡의 경우처럼 아주 작게 들어갈 수도 있기 때문이다.
디자인을 바꿔보자
모든 디자인은 스케치에서 진행했고, iPhone 11로 미러링을 하면서 진행했다.
글자 크기와 레이아웃에 집중했다.
이 카테고리 디자인은 모션도 없고, 실제 카테고리 구조를 그대로 보여준다는 장점이 있다. 사진의 작은 썸네일은 각 카테고리에서 공통적으로 사용되는 이미지다.
현재의 쿠팡 로켓 프레쉬 카테고리 디자인을 두 부분으로 나눈 후, 각 부분을 정리했다. 다른 앱의 경우는 회색이 많고, 쿠팡의 경우는 확실히 밝은 배경을 사용한다. 이 차이를 유지하기 위해 의미가 없는 회색을 통제하려고 했다.
왼쪽 부분은 글자 크기를 줄이면서 대비를 늘렸다. 이 페이지에서 카테고리 부분 선택이 대비가 애매하기 때문에, 영역을 확실하게 선택할 수 있도록 했다.
글자 크기를 크게 하고, 글자와 글자 크기의 변화를 줄였다. 오른쪽의 2번 부분에서 구분선이 2종류가 있는데, 모두 1pt로 통일했다.
사진은 제거했다. 사진이 너무 작게 들어가서 식별이 어렵다. 그리고 사진이 정렬을 방해한다. 글로 표현하면, '떡볶이의 사진 - 떡볶이의 글자'로 가는데, 이 페이지에서는 '떡볶이' 글자가 더 중요하다고 판단했다. 해석해야 하는 작은 사진보다는 문자의 명확한 표현을 선택했다.
그리고 벤치마킹한 다른 앱에서 보인 회색 화면을 만들지 않기 위해, 회색으로 만드는 영역을 최대한 줄였다.
세부적인 수정을 계속 진행한다.
오른쪽 부분을 페이지 구성을 '전체 보기 - 카테고리 구분'의 구조로 바꾸었다.
오른쪽 영역의
좌우 여백을 60% 늘리고,
영역의 높이를 8% 줄었다.
원래의 디자인에서 블릿처럼 쓰이는 썸네일 사진을 없애고, 하위 카테고리의 라인과 화살표를 없앴다. 그 결과 오른쪽 영역의 높이가 줄어들게 되었다. 라인은 하위 카테고리를 구분하데 사용했다.
왼쪽과 오른쪽의 영역을 구분해보기로 했다. 역시 회색으로 화면이 바뀌는 것을 막기 위해 채도와 명도가 높은 배경색을 사용했다.
다른 앱의 사례에서 회색을 많이 쓰기 때문에, 회색 배경 위의 검은 글자보다는 밝은 배경 위의 검은 글자가 적절하다고 판단했다.
왼쪽 탭을 해도, 비슷비슷한 화면이 계속되서 사진을 추가했다.다시 한번 작업에 들어간다.
왼쪽의 영역에서 꺽쇠 모양의 화살표는 좌우로 이동하는 의미가 있기도 하지만, 다른 앱의 사례에서 보듯이 이 자체가 '자주 묻는 질문'에서 자주 보이는 콘텐츠 영역을 접었다가 피는 기능처럼 오해할 수 있다는 생각이 들어서 확실하게 이동하는 화살표 모양으로 변경하였다. 스크롤바가 생기는 것을 고려해서, 화면 오른쪽 여백이 늘어났다.
하위 카테고리가 글자가 아니라는 표현을 하기 위해서 작은 화살표를 추가하고, 작은 화살표의 색에 맞춰서 카테고리를 구분하는 선의 색을 변경하였다. 작은 화살표를 추가한 것만으로도 전체 레이아웃은 다시 길어진다.
그리고 가장 작은 Spacing도 8pt에서 4pt로 바꾸었다.
상위 카테고리를 구분하기 위한 사진 아이콘을 추가했다. 사진 아이콘을 이렇게 작게 넣기 위해서, 사진의 그림자와 배경을 수정하였다. 사진을 넣으면서, 레이블 텍스트도 수정했다.
화살표를 뺀 후에 다시 넣는 과정을 생각해보자원래 디자인에서 마지막 디자인까지의 변화다. 별 다른 변화가 없어 보이지만, 각 심벌의 배치, 레이아웃, 색, 글자 크기 등이 변경되었다. 가장 신경을 쓴 부분은 최소 단위이다. 8배수 단위의 디자인을 많이 하는데, 텍스트가 많아지면, 최소 단위를 4로 하는 것이 조금 더 유리하다.
기존의 디자인을 바탕으로 변경은 여기까지다.
정리를 한다는 측면에서는 이 정도에서 마무리다. 근데 뭐랄까... 너무 빽빽하다.
... 다른 생각도 해보았다.
역시... 빽뺵하다...현재 서비스 중이기 때문에 사용성의 문제는 없다고 생각하고, 각 영역의 구분을 좀 더 확실하게 만들 보았다. 카드를 사용해보았는데, 구분은 확실해지지만, 글자가 많은 구조에서 할 수 있는 것은 한계가 있다. 디자인을 진행하면서 왼쪽 영역을 먼저 선택하고, 오른쪽 영역을 선택하는데, 오른쪽 디자인의 개선에는 한계가 있다.
쿠팡 로켓 프레시의 각 페이지는
화면 높이의 34%를 카테고리에 사용한다.
그래서 좀 변경을 해보기로 했다.
과감하게 오른쪽 하위 카테고리를 단순하게 표시하고 왼쪽 카테고리를 강조한 후에 다음 페이지로 보낸다.
카테고리를 모두 보여줘야 하는 데는 여러 가지 이유가 있겠지만, 그중 하나는 급속한 성장에 있다고 볼 수 있다. 품목이 급격하게 늘어나면서 변화가 많이 생길 수도 있고, 품목이 많다는 것을 보여줘야 하는 이슈도 있을 것이다. 하지만, 이렇게 디자인하다가 보면, 이 부분의 디자인은 점점 덜 보편적인 디자인이고 특별한 디자인이 된다.
그래서 각 카테고리가 있고, 많고, 눈에 띄는 글자 크기를 사용한 디자인을 만들어 보았다.
넷플릭스에서 이러한 스타일을 사용하는데, 현재 쿠팡 로켓 프레시 카테고리 메뉴는 로켓 프레시 이하 메뉴에 모두 사용되므로, 일종의 모달 혹은 오버레이로 변경하기 쉬운 디자인이라고 생각했다. 특이한 디자인을 특이한 디자인에 붙여보자.
나는 브런치에 올리는 디자인에서 '발견'을 중요하게 다룬다. 사용자가 발견할 수 있는 디자인과 콘텐츠가 의미있다고 생각한다. 발견을 하려면, 화면을 많이 통제해야 하고, 명확하게 보여줘야 한다. 사용자가 충분히 익숙하다면, 작은 글씨를 읽는 수고를 할 수 있지만, 새롭게 적용한다면, 약간의 모험이 필요할 수도 있다.
넷플릭스의 카테고리 디자인을 참조했다.많은 앱이 라인 아이콘을 사용하는데, 기존의 쿠팡 디자인 스타일과 이모지 아이콘이 비슷해서 일일이 라인 아이콘을 그리지 않고, 이모지 아이콘을 사용했다.
카테고리의 경우는 굉장히 많다. 과일은 그럴 수 있는데, 정육이 하위 카테고리가 48개나 된다는 것은 조금 놀라웠다. 그리고 점점 품목이 많아진다는 것을 표현하기 위해서 배지를 추가했다. 배지는 새로운 카테고리가 늘어나고 있다는 메시지를 전달하는 것이 목적이다.
카테고리를 살펴보니까, 신선식품과 간편식이 섞여 있어서 구분선을 추가했다. 좀 길지만, 많다는 것을 보여주기는 좋을 것 같다. 물론 이 디자인은 하위 카테고리로 이동하는 중간 페이지가 필요할 것 같다.
그러나 해당 카테고리로 이동해보면, 정보 설계가 잘 되어 있어서 하위 페이지를 표시하지는 않았다. 다음에 보게 될 페이지에서 카테고리 정보가 반복돼서 표시되기 때문이다.
마무리를 하면서
빠르게 변하는 시장에서 빠르게 성장하는 서비스의 디자인을 할 때는 뭔가를 정밀하게 만들 수가 없다. 경험하지 못한 영역으로 나갈 때는 모든 게 엉성한 상태로 나가게 된다. 하지만, 엉성해도 있기만 하면 도움이 되는 경우가 많다.
모든 걸 다 완벽하게 챙기는 것보다, 일단 있는게 먼저다. 한 세트를 대강이라도 준비해야 다른 사람들이 진도를 나갈 수 있다. 가능하다면 기본적인 규칙(글자 크기, 여백) 등은 챙겨주는 것이 좋다.
