UI 디자인 가이드 : List vs Grids
목록 타입 : 리스트와 그리드
list vs grids
검색 결과 혹은 아이템 목록의 형태를 가진 UI 구성, 가장 대표적인 두가지 타입의 뷰 모드를 알아봅니다.
리스트 모드와 갤러리뷰, 카드뷰라고도 불리는 그리드 모드입니다.
서비스의 어디에서나 사용할 수 있겠지만 주로 검색 결과, 아이템 카탈로그 및 뉴스 피드를 중점적으로 살펴보겠습니다. 이 선택을 통해 사용자가 우리의 콘텐츠와 상호 작용하는 방식과 사용자가 수행할 작업이 결정됩니다.
페이지 요약
1. 소개
1.1 그리드 뷰와 리스트 뷰의 차이
1.2사용자는 어떤 모드에 있고 가장 중요하게 여기는 건 무엇인가요?
1.3 이미지 사용
1.4 인지 부하
2. 그리드 뷰(Grid view)
2.1 그리드 뷰의 형태
2.2 일반적인 그리드(Standard grid)
2.3 수직 벽돌쌓기 그리드(Masonry grid)
2.4 수평 벽돌쌓기 그리드 (Justified grid)
2.5 그리드 뷰 모범 사례
3. 리스트 뷰(List view)
3.1 리스트 뷰의 형태
3.2 기본 리스트 (Sinple list)
3.3 가로 스택이 있는 리스트 (List with horizontal stacking)
3.4 수직 스택이 있는 목록 (List with vertical stacking)
3.5 리스트 뷰 모범 사례
4. 결과 or 아이템 목록 스타일(Result or item styles)
4.1 입체형 카드 : 스큐어모픽/엘리베이트 등 (Skeuomorphic/elevated cards)
4.2 아웃라인 카드 (Outlined cards)
4.3 플랫 형태 (Flat)
4.4 복합적인 구성 (Mix)
5. 마무리
1. 소개
1.1 그리드와 리스트의 차이
리스트 보기와 그리드 보기의 차이는 무얼까에 대한 설명은 우선 아래 그림을 참고해주세요.
리스트의 각 항목은 서로 위아래로 배치됩니다. 그리드 보기의 각 항목은 수직과 수평으로 배치됩니다.
list view (left) and grid view (right).하지만 사용자 경험의 차이는 무엇일까요? 하나는 대체로(항상 그렇지는 않지만) 데스크톱에 적합하고, 다른 하나는 모바일에 적합합니다. 하나는 이미지에 더 좋고, 다른 하나는 텍스트에 더 좋습니다. 하나는 이미지를 비교하기 위해 더 좋고, 다른 하나는 텍스트를 비교하기 위해 더 좋다는 점입니다.
1.2 사용자는 어떤 작업중이며, 사용자에게 가장 중요한 것은 무엇입니까?
UI에 표시할 정보를 결정할 때 사용자가 수행하고있는 작업이 무언지 가장 중요한 정보가 무엇인지 확인하세요. 기존 패턴을 항상 추측하거나 사용할 수 있지만, 이것은 사용자 리서치를 할 수 있는 좋은 기회일 수도 있습니다.
먼저 사용자가 현재 진행중인 작업이 순수한 검색(Sesrch)인지, 검색(Sesrch)과 탐색(Browse)의 조합인지 확인을 해야합니다. 만약 이 답을 알고 있다면, 이제 사용자가 어떤 정보를 찾고 있는지 확인해야 합니다.
사용자가 탐색 작업중인 경우 사용자가 원하는 건 엔터테인먼트일 가능성이 높습니다.
즉, 이미지(Instagram, Pinterest), 이슈/현황(Twitter, 뉴스 사이트) 또는 둘 다(Facebook)의 조합에 초점을 맞출 수 있습니다. 그게 맞다면, 사용자가 보고싶어 하는 것을 먼저 보여주면됩니다.
사용자가 검색(Search)작업 중인 경우 일부 탐색 동작도 지원하지만, 사용자가 다른 항목(중요하지 않은 항목)을 스치듯 확인하거나 각 결과를 비교하는 방법에도 집중해야합니다. 사용자가 아이템들을 비교하기 위해 사용하는 항목(별점, 가격, 커뮤니티 참여량, 이미지, 인증 등)을 식별할 수 있도록 해줍니다.
* 검색과 탐색에 관한 차이에 관해서는 아래 글을 참고해주세요.
1.3 리스트에서 이미지(Feature images/Thumnails)를 다룰 때
Working with images
리스트를 구성할 때에는 이미지(Feature images/Thumnails)에만 너무 의존하지 않도록 주의할 필요가 있습니다. 그 이유는 아래와 같습니다.
A) 지나치게 유사한 이미지 사용은 비교가능한 정보 제공에 도움이 안됩니다.
목록에 표시되는 이미지가 모두 비슷한 경우, 사용자에게 유용한 시각적 정보가 제공되지 않습니다.
예를 들어 어떤 온라인 수업 과정의 리스트라고 하면, 사용자는 이미지만 가지고는 각 과정을 비교하기 힘들 수 있습니다. 컨텐츠 이미지의 특징이 더 유사해질수록 목록에서 이미지가 가진 역할의 중요도도 낮아집니다.
B) 사용자가 직접 좋은 퀄리티의 이미지를 올릴 수도 있다는 것을 믿어야 합니다.
(특히 소셜 플랫폼 서비스인 경우)
사용자가 자신의 이미지를 업로드할 수 있도록 허용하면, 사용자는 더욱 어울리는 이미지를 올릴 것입니다.
예를 들어 가족 모임 사진을 찍는다고 생각해 보면, 엄마가 사진을 찍는 데 얼마나 걸렸는지를요.
a) 초점이 맞춰져 있고, b) 모든 사람이 그 안에 있고, c) 기타 셋팅이 적절한지 등등을 고려했을겁니다.
인스타그램(그리고 덜하긴 하지만, 페이스북 같은)은 사용자들이 매력적인 사진을 찍기 위해 많은 노력을 기울이고 있다는 것을 알고, 보여줍니다. 물론 모든 사용자가 양질의 컨텐츠를 올리는 건 아니기에 여전히 조심스럽기도 합니다.
1.4 사용자 인지 부하
인지 부하란 뇌가 정보를 계산하는 데 걸리는 시간을 나타냅니다. 예를 들자면, 아래와 같은 겁니다.
1개의 단일 이미지 = 낮은 인지 부하
10개 이미지 = 높은 인지 부하
여러분의 집중력을 첫 번째 컴퓨터의 메모리(RAM)이라고 생각해보세요. 적은 메모리로 더 많이 집중해야 할수록, 그것은 덜 효율적으로 작동하게 되겠죠.
그런데, 인지 부하가 높으면 사용자의 '집중력'이 떨어진다지만, 그걸 장점으로 사용하는 경우가 있습니다. 단지 엔터테인먼트적 요소를 추구할 때 처럼요. 그 땐 가장 중요한 건 '집중력'이 아니거든요. 아래를 보세요.
인스타그램(Mobile)의 장점 : 한 장의 '#소금빵(#SaltButterBread)'사진에 집중할 수 있다는 것
Pinterest의 장점 : 동시에 많은 '소금빵 레시피' 이미지를 찾아볼 수 있다는 것
결국 어떤 UI 디자인 패턴을 사용할지 선택할 때에는 사용자가 한 번에 얼마나 많은 항목을 비교하기를 원하는지 고려해보세요. 일반적으로는 탐색(Browsing)할 때 한 번에 더 많은 항목을 표시하고, 검색(Search)할 때엔 한 번에 더 적은 수의 항목을 표시합니다. 대신 보여지는 데이터는 더욱 정교할 필요가 있습니다.
그러나 이런 규칙조차 계속해서 변경되고 있다는 점도 염두해두시길 바랍니다. (Instagram & online stores 처럼요.)
2. Grid view (그리드 보기)
그리드 보기는 이미지를 강조 진열할 때 효과적이고, 동시에 여러 아이템을 나란히 표시할 수도 있습니다. 사용자가 여러 다른 아이템을 시각적으로 비교하는 데 도움이 됩니다. 단점은 텍스트 정보를 위한 공간이 많지 않다는 점입니다.
a grid2.1 그리드 뷰의 형태
그리드는 주로 제품 목록에 사용되기 때문에 그 아래에 텍스트와 함께 큰 이미지로 구성되는 경향이 있습니다. 표시되는 텍스트는 일반적으로 제품 이름과 가격, 그리고 한두개의 세부 정보 정도입니다.
다양한 유형의 그리드가 있지만 가장 일반적인 것은 컨테이너별 높이와 너비가 동일한 일반형 그리드입니다. 또한 우리는 Masonry/ Justified 그리드도 살펴보기로 합니다.
사용자 지정 그리드를 사용하는 좋은 검색 결과를 아직 찾지 못했기 때문에 여기에 사용자 지정 그리드를 포함하지 않았습니다. 그리드에 대해 더 알고 싶다면 이 링크를 참고하세요.
| 그리드 보기 사용을 추천하는 경우
결과 항목의 이미지가 사용자에게 가장 중요한 경우
사용자가 항목을 시각적으로 비교할 수 있어야 하는 경우(예: 신발 비교)
검색 결과에 별도의 설명이 필요하지 않은 경우
2.2 Standard grid(일반형/격자형 그리드)
일반형(격자형) 그리드는 말 그대로 모든 항목의 크기를 같게 구성하는 경우입니다. 이 패턴은 온라인 소매 사이트를 운영하는 데 가장 흔하게 사용됩니다. 모든 아이템을 비슷한 시각적 구조로 깔끔하게 유지하여 사용자가 항목별로 더 쉽게 비교할 수 있게 합니다.
standard grid| 사용 고려 대상 (Who should consider using it)
온라인 리테일 사이트, 포트폴리오 사이트(아티스트, 일러스트레이터 등).
| 장점(Why is it good)
사용자가 제품 이미지와 가격을 쉽게 비교할 수 있습니다.
| 사용 예(Who uses it)
Walmart, Amazon, Esty, 대부분의 온라인 쇼핑몰 등
2.3 Masonry grid (수직 벽돌쌓기형 그리드)
Masonry grid의 가장 대표적인 예시로 Pinterest를 들 수 있습니다. 일반형 그리드와 다른 점은 일반 그리드의 각 썸네일이 균일한 높이를 가진 것과 달리 높이를 다양하게 구성한다는 것입니다. 각 썸네일은 동일한 너비를 가지지만, 높이는 다양하게 구성됩니다. 이미지를 정해진 크기로 잘리게 하지 않고 원래 비율대로 표시할 수 있습니다.
그렇다보니 이미지의 높이가 길어지면 더 많은 세로 공간을 사용하게 됩니다. 많은 Pinterest 마케터는 이 방법을 활용하여 사용자가 스크롤하는 동안 더 많은 'screen time(사용 시간)'을 얻기 위해 정말 긴~~이미지를 만들기도 합니다.
경험상, 대부분의 Masonry(벽돌쌓기) 그리드는 '탐색 행위'를 촉진합니다. 굳이 예외를 고르자면, 조금은 목적이 분명한 개인 아티스트의 온라인 상점과 스톡 사진 사이트정도를 들 수 있습니다.
*스톡사진 사이드의 경우 기본적으로 탐색행위이긴 하지만, 목적이 분명한 검색행위라고 볼 수 도 있습니다.
masonry grid| 사용 고려 대상 (Who should consider using it)
관심사 및 포트폴리오 사이트 등
| 장점(Why is it good)
사용자가 계속 스크롤하도록 유도합니다.
| 단점 (Cons)
아이템 별 비교는 다소 어렵습니다.
| 사용 예(Who uses it)
Unsplash, Tumblr, Pinterest 및 일부 아티스트/디자이너 포트폴리오 사이트
2.4 Justified grid(수평 벽돌쌓기형 or 양쪽 맞춤 그리드)
대표적으로 Google의 이미지 검색 결과에 사용되고 있는 그리드 방식입니다. 혹은 블로그와 사진 사이트에서도 사용됩니다.
Masonry grid와 석조 격자와 다른 점은 수직이 아닌 수평으로 구성된다는 겁니다. 열이 아닌 행에 적당히 맞도록 이미지의 크기를 조정합니다. 기본적으로 그리드를 매우 깔끔하게 보이게 하지만, 스크롤은 줄어들게 됩니다.
* 표현이 맞을지 모르겠지만 굳이 적어보자면, Scroll-more-iness라는 표현정도겠네요. 적은 스크롤로 빠르게 더 다양한 컨텐츠를 볼 수 있다는게 장점이라는 뜻입니다.
justified grid| 사용 고려 대상 (Who should consider using it)
주로 이미지 사이트
| 장점(Why is it good)
대량으로 빠른 비교를 해야하는 경우 적은 스크롤로 탐색이 가능합니다.
| 사용 예(Who uses it)
Shutterstock, Google 이미지, Flickr.
2.5 Best practices for grids (그리드 보기 모범 사례)
다음은 그리드를 스타일링할 때 참고할 수 있는 몇 가지 사례입니다.
제품 이미지(Product images)
잠재적 구매자를 장려하기 위해 제품을 더 쉽게 비교할 수 있는 다음과 같은 방법을 고려하세요.
각 이미지에 동일하거나 비슷한, 일관성이 있는 배경색을 사용합니다. 대부분의 온라인 상점은 흰색 또는 일반 배경을 많이 사용합니다.
옷을 판매하는 경우, 모델이 익숙한 자세를 취하도록 하세요.
제목의 길이(Title length)
제품 제목에 가장 적합한 길이는 얼마인가요? 일반적으로 그리드의 경우 열(Column) 수에 따라 글자 공간이 부족할 수 있으므로 되로록 짧은 것이 좋습니다. 그리고 한 단어로 된 긴 열을 갖는 것은 좋지 않습니다. 아이템 타이틀당 최대 문자 수(가로 공간, 글꼴 크기 및 줄(Line) 양에 따라)를 결정하고 콘텐츠 작성자에게 해당 가이드에 맞추도록 요청하는 것이 좋습니다.
그리고 초점이 되는 주요 대상(이미지)에서 주의를 딴 데로 돌리는 설명이나 다른 것은 피하도록 하세요.
Shutterstock과 같은 타이틀 없이도 벗어날 수 있는지...
열의 수량(Amount of columns)
화면당 많은 결과가 예상되는 경우(예: Big retailer) 더 많은 열이 있어야 합니다. 한 화면에 몇 개의 결과만 표시하기를 원하는 경우(예: Boutique retailer) 더 큰 이미지와 함께 더 적은 수의 열을 사용할 수 있습니다.
즉, 다양한 제품을 판매하는 다이소 같은 경우 많은 제품을 진열하는 선반이 있을 거고, 편집숍과 같은 경우에는 몇 가지의 상품만 행거에 걸려 있는 것 처럼요.
모바일의 경우(Grids on mobile)
대부분의 사이트는 모바일에서 그리드를 유지하고 두 개의 열로 구성합니다. 단, 목록 보기로 이동한 Amazon은 예외입니다. 두 개의 열을 사용하고, 하나일 때보다 더 작은 이미지를 사용하면 사용자가 한 번에 더 많은 항목을 볼 수 있고 비교가 쉬워집니다. 전반적으로 모바일용 레이아웃을 변경할 필요가 없다면 굳이 하지 마세요.
3. List view(목록 보기)
목록 보기는 콘텐츠나 설명이 사용자에게 더 중요한 경우에 사용됩니다. 이미지는 있을 수도 있고 없을 수도 있으며, 있을 경우 추가적이거나 조금 더 많은 정보 제공을 위해 사용됩니다.
목록 보기는 목록처럼 읽히는 동시에 사용자가 다른 텍스트 항목과 쉽게 비교해볼 수 있도록 합니다.
목록 항목이 전체 수직 공간을 차지하기 때문에 화면에 동시에 표시되는 결과가 더 적을 수 있습니다. 이 부분은 좋지 않은 것처럼 보일 수도 있지만 사용자가 결과를 훑어보는 경우, 한 페이지에 더 적은 수의 결과가 있으면 인지 부하를 줄이는 데 도움이 되고 더 쉽게 비교할 수 있는 장점도 됩니다.
list view| 목록 보기를 사용하는 경우
결과에 설명 텍스트와 같은 디스크립션이 필요한 경우.
(괜찮은) 이미지가 있는 결과를 기대할 수 없는 경우.
이미지가 모두 비슷해서 구별하기 위한 설명이 필요한 경우.
강조 표시해야 하는 특정 텍스트 항목이 있는 경우.
일부 사용자가 '검색 모드'에 있을 것으로 예상되는 경우.
사용자가 항목별로 비교를 위한 사용성이 필요한 경우.
3.1 Simple List (기본 목록형)
기본 목록형의 아이템에는 표시되는 정보가 적습니다. 일반적으로는 헤드라인(Title)과 설명(Discription)만 표시되며, 게시된 날짜 정도가 추가됩니다. 이러한 간단한 레이아웃으로 사용자는 헤드라인과 설명을 쉽게 훑어보고 비교할 수 있습니다.
simple list| 사용 고려 대상 (Who should consider using it)
검색 엔진 및 뉴스 사이트 등
| 장점(Why is it good)
특정한 정보 항목에 의존할 필요가 없습니다.
| 단점 (Cons)
너무 간단하기 때문에 디자인에 대한 고민없이 만들어진 것처럼 보일 수 있습니다.
| 사용 예(Who uses it)
Google Search, 대부분의 뉴스 사이트
3.2 Horizontally stacked items(수평 나열 항목형 리스트)
가로로 정보 항목이 쌓인 리스트의 경우, 더 많은 정보를 표시할 수 있으므로 요소를 훨씬 더 쉽게 비교할 수 있습니다.
그럼 어떤 레이아웃이 좋을까요? 우선 데이터 테이블 항목 스캔을 생각하고 동일한 원칙을 사용합니다. 왼쪽에서 오른쪽으로 수평으로 나열한 항목의 표준 레이아웃은 다음과 같습니다.
이미지
왼쪽 정렬 제목 및 설명
오른쪽 정렬된 별점(등급) 및 가격 정보
판매하는 제품에 따라 '회사 이름', '포함 수량', '인원 수', '거리 표시(기준점에서의)' 등과 같은 더 많은 요소가 있을 수도 있습니다. 이러한 테이블과 비슷한 구조를 통해 사용자는 찾고 있는 요소를 쉽게 훑어볼 수 있습니다.
가급적 물리적 제품보다는 온라인 제품(예, 온라인 과정, 주택 임대 등)에 대해서 이 레이아웃을 권장합니다. 물리적으로 존재하는 제품(신발이나 옷의 구매 등)의 경우 사용자는 시각적 정보 비교를 중요하게 생각하는 경향이 있기 때문입니다. 이런 경우에는 그리드 보기를 추천합니다.
list with horizontally stacked items.| 사용 고려 대상 (Who should consider using it)
디지털 제품을 판매하는 온라인 소매업체, 부동산 회사, 관광업 및 기타 비물리적 서비스 또는 제품.
| 장점(Why is it good)
정보를 훑어보고 비교하기에 편리합니다.
| 사용 예(Who uses it)
Airbnb(PC), Udemy, Bookings.com, Amazon(일부), 일부 뉴스 사이트
*데이터 테이블 설계에 관해서는 아래 글을 참고해주세요.
3.3 Vertically stacked items(수직 나열 항목형 리스트)
'Mobile-First'로 디자인된 경우 일반적으로 수직으로 쌓인 항목을 가긴 경우가 많습니다. 작은 디바이스에서 컨텐츠를 잘 표현하기 때문입니다. 때에 따라 일부 서비스 사이트는 두가지(세로로 쌓인 목록과 가로로 쌓인 목록)를 복합적으로 사용하기도 합니다.
예를 들어, 에어비앤비(Airbnb)는 데스크톱에선 가로로 쌓이고, 모바일에서는 세로로 쌓아 보여줍니다.
list with vertically stacked items.| 사용 고려 대상 (Who should consider using it)
SNS(소셜 네트워크)
| 장점(Pros)
일부 결과에 이미지가 없는 경우에도 잘 동작합니다.
| 단점 (Cons)
화면(데스크톱)에서는 더 적은 수의 항목밖에 볼 수 있습니다.
| 사용 예(Who uses it)
Airbnb(mobile), 인스타그램, 트위터, 페이스북
3.4 Best practices for lists (리스트 보기 모범 사례)
수평 나열형 리스트를 사용할 때 이상적인 행 길이
사용자는 검색할 때 정보를 스캔하고 훑어볼 수 있기를 원합니다. 행당 문자 수가 너무 적으면 사용자가 모든 단어를 읽고 줄바꿈 때마다 중지해야 합니다. 한 줄에 너무 많은 문자가 있으면 어딜 읽고있는지 조금 혼란스러울 수 있습니다. 이상적인 길이는 아래와 같다고 합니다.
(덧, 이 부분은 영문 기준이며, 때에 따라 다를거라고 생각됩니다.)
Baymard에 따르면 : 행당 50–60 characters
Web Typography에 따르면: 행당 45–75 characters
모바일(Mobile)
수직 나열형 목록은 모바일에서 가장 잘 동작합니다. 가로로 쌓인 그리드가 있다면 모바일에서는 수직으로 쌓을 수 있도록 재구성하는 걸 고려해보세요. 표현하려는 정보 목록이 단순하다면 모바일은 필수 고려대상입니다.
대체 이미지(Fallback image)
이미지(Feature images/Thumnails)가 존재하는 목록임에도, 그리드가 아닌 리스트 보기를 사용했다는 건 아래와 같은 경우일 겁니다.
a) 사용자의 이미지 업로드에 의존하고 있거나,
b) 정보 우선순위가 텍스트에 있는 경우(이미지가 텍스트 콘텐츠만큼 중요하진 않은 경우)
이런 경우 디자인할 때에 따라서 이미지가 누락된 경우를 대비한 Default/No 이미지로 불리는 대체 이미지를 준비해두어야 합니다.
4. 결과
검색 결과 및리스트 항목에 많이 사용되는 디자인 스타일을 살펴봅니다.
4.1 Skeuomorphic/elevated cards(스큐어모픽 및 입체형)
이 카드 패턴은 플랫폼에 깊이를 부여하고 콘텐츠를 명확하게 통합할 수 있도록합니다. 이 패턴은 카드디자인이 데스크톱보다 모바일에서 조금 더 '리얼'함이 강조되기 때문에 모바일에서 더 자주 사용됩니다.
Google Search가 데스크톱이 아닌 모바일에서 이 패턴을 사용하고 있습니다.
스타일에 대해 조금 더 자세히 보고 싶다면, 카드 구성 요소에 대해 잘 가이드 되어있는 구글의 머터리얼 디자인(Material Design)에서 확인하세요.
elevated cards이 패턴의 카드를 사용할 때 불편함을 느끼는 지점은 실물의 경험을 가져온다는 겁니다.
즉, 사용자가 카드를 클릭하면서 기존 실물카드인 것처럼 '전체 카드 영역'이 하나의 링크로 이동할 것으로 예상하게 됩니다. 특히 카드 전체에 Hover 상태 효과가 적용되어있는 경우 더욱 그렇게 느껴집니다.
만약 즐겨찾기 버튼, 작성자 페이지 링크, 기타 등등을 원한다고 가정해보면 다른 링크(전체 카드에 해당하는 )위에 또 다른 링크(버튼링크들)를 한번 더 강제로 표시하는 것처럼 느껴질 수 있습니다.
이 구조는 UX를 복잡하게 만들기 때문에 권하지 않습니다. 그래서 한 카드형태에는 하나의 링크만 연결하는 것이 사용성에 더 좋습니다.
| 장점(Pros)
각 카드가 하나의 유닛처럼 통일되어 보입니다.
| 단점 (Cons)
하나의 카드에 여러 링크가 연결되어야하는 경우 불편합니다.
| Designer notes
그림자만으로는 선명한 대비 효과가 어려우니, 카드의 색상과 배경의 색상을 다르게 구성하세요.
| 사용 예(Who uses it)
Google Search (mobile), Sky News (2020.5 기준)
4.2 Outlined cards(아웃라인 타입)
이 패턴은 입체형 카드와 동일한 방식으로 동작하면서, 로딩 속도를 조금 더 빠르게할 수 있는 장점이 있습니다.
outlined cards.| 장점(Pros)
Elevated card만큼 스큐어모픽은 아니기 때문에 사용자는 그정도로 카드가 단일 유닛처럼 동작할 것으로 기대하지 않을 수 있어 결과적으로 더 많은 링크를 넣기에 용이합니다. Bookings.com을 참고하세요.
| Designer notes
카드의 색상과 배경의 색상을 약간 다르게 하는 걸 고려하세요.
| 사용 예(Who uses it)
Facebook(PC), Bookings.com (2020.5 기준)
4.3 Flat (플랫 형태)
깔끔하고 단순하며 로딩이 빠르고 디자인보다 컨텐츠에 주목하는 패턴으로 많이 사용됩니다.
'각 아이템(서로 다른 결과)'을 분리하는 데에는 두 가지 옵션이 있습니다.
공백과 일관된 디자인 요소를 사용해서 분리된 느낌을 줄 수 있습니다. 인스타그램처럼요.
희미한 선을 사용하여 분리를 표시할 수 있습니다. 에어비앤비/트위터 처럼요.
results in a flat style* 왼쪽에는 선이 없는 경우 예시이고, 오른쪽은 구분선을 사용하는 예시입니다.
| 장점(Pros)
클리어하고, 단순하며 컨텐츠에 집중할 수 있는 레이아웃입니다.
| 단점 (Cons)
가끔은...적절한 고민 없이 그냥 디자인을 적게 한 걸로 여겨질 수 있어서 디테일이 중요합니다.
AirBnb와 Amazon(리스트)을 비교하여 확인해보세요. 둘 다 그래픽, 구분 선, 별표 리뷰 등이 있지만 AirBnb가 조금 더 세련되어 보이기도 합니다.
| Designer notes
배경과 글꼴 색상을 선택할 때 주의가 필요합니다. #000 및 #fff 기본값은 눈을 피로하게 할 수 있으니 피하는 게 좋겠네요. ( 참고 )
4.4 Mix (복합 구성)
중요한 결과 항목 강조를 위해 그 부분에만 다른 스타일을 적용하고, 나머지 항목에 플랫 레이아웃을 사용하여 혼합하는 방법도 가능합니다.
mixed styles.| 사용 예(Who uses it)
Google News(App) (2020.5 기준)
5. 마무리
이해 관계자와 함께 문제를 해결해나가는 방법
처음 이 주제에 관심을 갖게 된 이유는 함께 일하고 있는 팀이 온라인 학습 플랫폼의 검색 페이지에 그리드 디자인을 사용하기를 원했기 때문입니다. 그리드가 예쁘고, 이미지가 예쁘니까, 텍스트는 보기에 좋지 않다는 이유로요.
하지만, 우리는 그보다 문제에 대한 접근 방식과 각 패턴에 대한 장단점을 설명하는 논리 여정을 통해 서비스에 왜 이런 방식을 적용해야하는지 팀 혹은 클라이언트에게 조금 더 객관적으로 설명할 수 있어야 할겁니다.
그럼, 이제 다음과 같은 질문으로 시작해보는건 어떨까요?
사용자가 어떤 모드로 사용중인가요? 검색/탐색 아니면 둘다?
검색 모드에 있는 경우 결정을 내리는 데 도움이 되는 건 무엇일까요?
탐색 모드에 있는 경우 사용자를 즐겁게 하는 것은 무엇입니까?
사용자가 검색/탐색할 때 가장 중요하게 생각하는 순서대로 요소를 나열합니다.
경쟁 서비스는 어떤 디자인 패턴(목록 또는 그리드)을 사용하고 있으며 어떤 요소를 강조하고 있나요? (때로는 경쟁자의 작업을 보는 것이 무료 사용자 리서치를 받는 것과 같을 수 있습니다.)
어떤 플랫폼이 우리와 비슷한 문제를 해결하고 있으며 어떤 패턴(목록 또는 그리드)을 사용하고 있나요?
사용자의 니즈에 가장 잘 부합하는 디자인 패턴(목록 또는 그리드)은 무엇일까요?
* 원본 자료의 글을 번역 및 가공한 글입니다. 일부 표현은 수정된 내용이 있을 수 있습니다.
