List vs. Grid View
When to Use Which on Mobile
리스트와 그리드 뷰 : 모바일에서 언제 무엇을 사용해야 할까?
모바일 디바이스에서는 콘텐츠의 레이아웃을 잘 고려하여 보여줘야 한다. 데스크톱에서는 콘텐츠를 보여줄 공간이 충분하지만, 모바일 디바이스에서는 제한된 화면 공간 안에서 보여주어야 한다. 사용자는 스크롤하기 전까지는 한 번에 작은 양의 콘텐츠만 볼 수 있다.
여기서는 리스트 뷰와 그리드 뷰 중 어떤 방법이 가장 효과적인지에 대해 다룰 것이다. 어떤 방식을 적용하느냐에 따라 사용자가 찾는 정보를 빠르고 쉽게 찾을 수 있도록 해 줄 것이다.
List vs. Grid View
리스트뷰는 콘텐츠를 1열의 리스트로 보여준다. 텍스트로만 이루어져 있고 이미지는 없다. 아이콘이나 썸네일을 텍스트 옆에 보여줄 수는 있다. 사용자는 정보를 읽어서 선택해야 한다.
그리드 뷰는 이미지를 2개 이상의 열로 보여준다. 이미지가 화면이 대부분을 차지하고 있고, 텍스트는 짧게 적용되어 있다. 사용자는 이미지를 보고 선택을 한다.
리스트 뷰는 과도한 스크롤을 방지한다.
그리드 뷰가 눈에 보기 좋기 때문에 많은 디자이들이 그리드뷰를 사용한다. 하지만 문제는 그리드 뷰가 사용자에게 스크롤을 많이 하게 만든다는 것이다. 그리드뷰의 이미지는 페이지를 매우 길게 만든다. 사용자는 모든 선택지를 보기 위해 스크롤을 많이 해야 한다. 이 레이아웃은 손가락을 많이 움직이게 만든다.
리스트 뷰는 페이지를 짧게 만들어 과도한 스크롤을 방지한다. 이미지를 제거함으로써 한 화면에 더 많은 선택지를 보여줄 수 있게 해준다. 한 화면에서 서브 옵션을 가지고 있는 레이어를 적용하는 어코디언 방식의 UI도 적용할 수 있다. 사용자는 텍스트 레이블을 스캐닝하여 원하는 정보를 찾을 수 있다.
리스트 뷰는 성급하게 선택하는 것을 방지해 준다.
그리드 뷰는 더 많이 스크롤하게 할 뿐만 아니라, 선택을 성급하게 하게 만든다. 사용자는 이미지에 자극을 받고 가장 눈에 띄는 것을 선택하게 된다.
이러한 성급함은 사용자가 찾고 있던 정보가 없는 곳에서 길을 잃게 만든다. 그리고 사용자는 다시 돌아가서 스크롤을 더 하게 된다. 자극적인 이미지가 많으면 사용자는 방해를 받고 잘못 선택하기 쉽다.
리스트 뷰는 성급한 선택을 하지 않게 해준다. 텍스트는 충분히 정확한 정보를 제공해 주고 사용자가 원하는 콘텐츠를 찾을 수 있도록 해 준다. 사용자는 모든 옵션을 읽은 후 가장 좋은 선택을 할 수 있다.
리스트 뷰에 텍스트가 너무 많다면, 시각적인 흥미를 끌 수 있는 아이콘이나 썸네일을 추가할 수 있다. 이러한 균형잡힌 접근이 사용자를 자극하지도 않고 텍스트를 읽기 힘들게 만들지도 않기 때문에 그리드뷰 보다 좋다.
그리드 뷰는 세부정보를 확인할 때 좋다.
그리드 뷰는 미적으로 아름다운 것 말고도 사용자가 자세한 형태를 확인할 수 있게 해준다. 예를 들면, 사용자가 셔츠를 쇼핑할 때 특정 형태를 마음속에 두고 있을 것이다. 그리드뷰는 사용자가 특정 카테고리를 선택하여 볼 때 효과적이다.
카테고리를 선택하지 않고 그리드뷰로 볼 때는 이미지들 중 일부만 셔츠이기 때문에 원하는 셔츠를 찾는데 방해를 받을 수 있다. 사용자는 스케닝을 하며 상관없는 이미지를 거르기 위해 스크롤을 많이 해야 한다.
그러나 사용자가 셔츠 카테고리 안에 있다면, 찾고 있는 셔츠와 관련이 있는 이미지들만 나올 것이다. 사용자는 셔츠들만 보면서 찾고 있는 디테일한 형태를 쉽게 스켄할 수 있을 것이다.
적은 노력으로 많은 콘텐츠를 볼 수 있게 하라.
대부분의 사용자는 모바일 디바이스를 사용할 때 시간이 많지 않으며 원하는 정보를 빨리 찾고 싶어 한다. 적합한 레이아웃을 적용해야 원하는 것을 빨리 찾을 수 있게 해줄 수 있다.
데스크톱에서는 훨씬 자유롭게 레이아웃을 적용할 수 있으나, 모바일에서는 당신이 선택하는 레이아웃이 중요하다. 사용자가 노력을 적게 들이면서 많은 콘텐츠를 소비할 수 있게 하는 뷰가 승자이다.
원문 출처 : https://uxmovement.com/mobile/list-vs-grid-view-when-to-use-which-on-mobile/
