List vs. Grid View 어떻게 사용할까?
[번역] 모바일에서의 리스트와 그리드 뷰, 장단점에 대하여
이 문서는 UX Movement의 Anthony 가 작성한"List vs. Grid View: When to Use Which on Mobile"을 번역한 글입니다. 아마추어 번역가입니다. 문의사항이나 오류사항은 byeondoris@gmail.com으로 보내주세요.
List vs. Grid View : 언제 어떻게 모바일에서 사용될 수 있는가?
모바일 디바이스에서 콘텐츠 레이아웃을 짜는 것은 어려운 일이다. 데스크톱 디바이스는 넓은 스크린을 제공하지만, 모바일에서는 스크린 공간의 제약이 참 많다. 유저는 스크롤을 하기 전까지는 한 번에 정해진 양의 콘텐츠만 볼 수 있다.
그래서 우린 항상 어떤 레이아웃이 효과적일지 고민한다. 리스트(list) 형식을 써야 하는가, 그리드(grid) 형식을 써야 하는가? 당신의 결정은 유저들이 얼마나 빠르고 쉽게 정보를 찾을 수 있을 것인지에 영향을 미칠 것이다.
List vs. Grid View
리스트 형식은 한 세로 단에 모든 콘텐츠를 나열한다. 텍스트가 많고 이미지는 없다. 더 추가해봤자 텍스트 옆에 작은 아이콘이나 썸네일 정도일 것이다. 유저는 텍스트를 보고 무엇을 읽을지 선택한다.
그리드 형식은 이미지와 함께 두 가지 이상의 세로줄이 있다. 이미지가 대부분의 공간을 차지하고 텍스트는 최소한으로 한다. 유저는 이미지를 보고 선택한다.
리스트 뷰(List view)는 오버스크롤링을 줄여준다
많은 디자이너들은 보기 좋기 때문에 그리드 뷰를 선택하곤 한다. 하지만 그리드 뷰의 문제는 유저에게 너무 많은 스크롤을 하게 만든다는 것이다.
그리드 뷰는 페이지를 늘리는 이미지들을 포함하기 때문에, 유저들이 전체 옵션을 보기 위해서는 스크롤을 너무 많이 해야 한다. 이는 유저에게 부담을 주는 스크롤링이다.
리스트뷰는 페이지를 더 짧게 만들어 위와 같은 오버스크롤링을 방지한다. 이미지 제외는 한 화면에 더 많은 옵션을 넣게 해 준다. 같은 화면에 아코디언 (accordions)을 통해 서브 옵션으로 레이어를 더 추가할 수 있는 기능을 마련해준다. 유저는 텍스트 라벨을 훑어보고 자신이 원하는 정보를 찾는다.
그리드뷰: 유저는 전체 옵션을 보기 위해 스크롤을 많이 해야한다 리스트뷰: 유저는 오버스크롤없이 전체 옵션을 볼 수 있다리스트 뷰는 선택의 신중도를 높여준다
그리드 형식은 유저가 스크롤을 더 하도록 만들 뿐 아니라 선택을 서두르게 만들기도 한다. 유저는 제일 이목을 이끄는 첫 번째 이미지 옵션을 선택해버릴 수도 있기 때문이다.
이는 종종 유저들이 찾고 있지 않았던 섹션을 누르게 하기도 한다. 유저는 다시 뒤로 가서 더 스크롤을 해 야하게 된다. 너무 많은 자극적인, 흥미를 일으키는 이미지들은 유저를 방해하고 잘못 인도하는 경우가 있다. 리스트 뷰는 유저가 이러한 급한 선택을 하는 것을 방지해준다. 텍스트는 유저가 원하는 정보를 찾을 수 있도록 간단하고 충분한 정보를 제공하기도 한다. 옵션을 다 읽은 후 자신이 찾고 있던 가장 알맞은 정보를 선택하게 된다.
그리드 뷰는 구체적인 정보를 찾을 때 가장 유용하다
그리드 뷰는 예뻐 보인다는 것 외에 유저가 구체적인 정보를 찾고 있을 때에 유용하다. 예를 들어서 유저가 셔츠를 사려고 할 때에는 구체적인 종류가 있을 것이다. 이처럼 그리드 뷰는 유저가 이미 목적을 가지고 어떤 콘텐츠를 선택할지 알고 있을 때 가장 효과적이다.
몇 개의 셔츠 종류와 셔츠가 아닌 종류의 여러 가지 옷들 나열된 그리드 뷰는 아마 유저를 돕기보다는 혼란에 빠뜨릴 것이다. 유저가 관심 없는 이미지들을 알아서 걸러내려면 스크롤을 내려야 하기 때문이다.
하지만 유저가 자기가 원하는 “셔츠”라는 카테고리 내에서의 다양한 셔츠를 그리드 뷰로 본다면 이는 유저의 목적과 연관성이 높을 것이다. 유저는 이제 마음 편히 둘러보며 자신이 원하는 디테일을 가진 셔츠를 찾을 수 있을 것이다.
그리드 뷰: 이미지는 자극을 주어 급한 선택을 하게 만들 수도 있다 리스트 뷰: 두드러진 텍스트는 유저가 신중한 선택을 할 수 있게 만든다마지막으로
대부분의 유저는 모바일에서 소비하는 시간이 한정되어있다. 그들이 원하는 콘텐츠를 빠르게 찾을 수 있어야 하고, 이는 당신의 레이아웃에 달렸다.
데스크톱에서야 조금 더 융통성이 있겠지만, 모바일에서는 당신의 선택이 정말 많은 영향을 끼칠 수 있다. 그리드 뷰이던 리스트 뷰이던, 유저에게 더 많은 콘텐츠를 보여주면서도 더 적은 노력을 기울일 수 있게 만드는 뷰가 승자일 것이다.
