이미지 리스트는 어떻게 디자인 해야할까

썸네일 이미지 리스트 디자인에 대한 탐구

스마트폰이 주류가 되며 사용자들이 이미지를 찾거나 보거나 관리하는 습관이 많이 바뀌게 되었습니다. 저도 어떤 이미지를 찾기 위해 휴대폰으로 검색을 해본다거나, 아니면 내 취향의 새로운 멋진 이미지가 있는지 찾아보거나, 아니면 이전에 찍었던 사진을 다시 보거나 하는 일을 종종, 일상적으로 하게 되었습니다. 그리고 이런 패턴에 맞추어 여러 이미지 관련 앱들에서 썸네일 이미지(이하 썸네일) 리스트를 표시하는 방식도 다양해지고 있습니다. 그래서 어떤 사용 맥락에 어떤 썸네일 리스트 표시 방식이 적합할까 알아보려고 합니다. 

이전에 블로그에서 유사한 주제로 pxd 무이님이 '하이브리드 이미지 검색'라는 글을 쓴 적이 있으니 관심 있으신 분들은 함께 보면 좋을 것 같습니다.

1. 썸네일 이미지 리스트의 종류

먼저 썸네일 리스트 방식을 '고정-가변'으로 분류해보았습니다. 요즘은 훨씬 더 다양하고 부분적으로 다른 방식들이 많이 있지만 가장 큰 대비를 가진 두 개의 방식을 대표로 설정했습니다.

1-1. 고정영역 방식 

'고정영역 방식'을 설명하기 전에 썸네일은 줄이기(Shrink)와 자르기(Crop)의 두가지 형태로 나누어 볼 수 있습니다. 줄이기는 원본 이미지를 단순히 축소하는 방식이고, 자르기는 원본 이미지를 일정한 크기로 축소한 뒤 서비스가 설정한 영역 외의 부분을 없애버리는 방식입니다.

*추가. '줄이기-자르기'는 사진인화에서의 '이미지풀-페이퍼풀', 영상에서의 '레터박싱-풀스크린'과 비슷한 의미로 생각하면 이해가 쉬울 것 같습니다. 의견 주신 김충환님, 무이님 감사합니다.

위의 이미지와 같이 '고정영역 방식'에서 썸네일은 줄이기를 사용하기도 하고 자르기를 사용하기도 합니다. 이 방식으로 썸네일 리스트를 표시하면 정렬이 깔끔하게 되어 리스트를 읽기 쉽고, 다음 시선을 어디로 옮겨야 할지 예상하기도 쉽습니다. 대신 줄이기로 하면 이미지가 작게 표시되고 여백이 많이 생기거나, 자르기를 하면 이미지 전체를 볼 수 없는 문제가 생깁니다. 기존의 스마트폰 앱에서는 작은 화면에 썸네일 리스트를 표현하기 위해서 고정영역-자르기 방식을 많이 사용했었습니다.

1-2. 가변영역 방식

두번째로 줄이기를 사용한 '가변영역 방식'이 있습니다. 사실 가변영역이라고 했어도 최소한의 기준이 필요한데요, 가로나 세로축을 기준으로 놓고 정렬을 하는 방식이라고 볼 수 있습니다. 이 방식으로 썸네일을 표시하면 한 방향으로만 정렬을 해서 가로세로 모두 맞춘 '고정영역 방식'과 비교했을 때 상대적으로 정렬이 덜 되어 보이는 문제가 있습니다. 대신 자르기가 아닌 줄이기방식을 사용하기 때문에 썸네일을 통해 이미지 전체를 훑어볼 수 있고 '고정영역 방식'에서의 줄이기보다는 쓸모없는 여백이 적고 공간 활용이 높다는 장점이 있습니다. 

2. 맥락에 따라 어떤 방식이 유용할까?

사실 사용 맥락만이 아니라 앱의 기획 의도에 따라 달라질 수 있는 부분이지만 사용자의 관점에서 어떤 방식이 유용할지 생각해보았습니다. 제가 생각한 기준은 탐색(Browse)과 발견(Discover)입니다. 물론 이 이분법은 분류를 위해 설정한 것이기 때문에 부가기준이 생략되거나 약간의 억지가 있을 수 있습니다.

2-1. 탐색(Browse), 고정영역 방식

여기서의 탐색은 자신이 가지고 있는 이미지들 중 특정 이미지를 '훑으며 찾는' 과정을 의미합니다. 즉, 이미 썸네일 리스트의 이미지들은 어렴풋이 사용자의 머릿속에 있는 것들이고 빠르게 훑으면서 원하는 이미지를 찾는 과정입니다. 따라서 이 경우 하나하나의 이미지가 정확하게 보이는 것 보다 리스트가 잘 정리되어 전체를 읽기 쉬운 것이 유리합니다. 결국은 썸네일을 통해 그 이미지를 판단하기보다 그 이미지를 통해 다음 행동(원본보기, 공유하기, 삭제하기 등)을 하기 위한 과정이죠.

예를 들어, 아이폰의 '사진'앱은 썸네일 이미지가 작은 대신 많이 표시되고, 어느 지점에 가서 이미지를 선택(원본보기)한 뒤, 좌우 플리킹을 통해 전후 사진들을 쉽게 볼 수 있습니다. 6월 15일에 한강 공원에 가서 찍은 사진들을 보려고 한다면 리스트를 스크롤 하다가 한강공원 사진 뭉치가 보이면 하나를 선택하여 크게 본 뒤 좌우 플리킹으로 그 날 찍은 사진들을 쉽게 볼 수 있죠. 이 경우 썸네일은 '대략'의 의미를 가지고 있습니다.

2-2. 발견(Discover), 가변영역 방식

발견의 경우에는 가변영역 방식이 유리합니다. 여기서 발견은 자신의 이미지를 썸네일 리스트 단계에서 훑으며 감상하거나 모르는 이미지를 찾아보는 과정을 의미합니다. 따라서 이 경우에는 썸네일에서 내용을 정확히 보여주는 것이 중요합니다. 사용자는 썸네일 리스트를 보는 것이 최종 단계였을 수도 있고, 썸네일 리스트에서 이미지의 내용을 정확히 파악해야 다음 행동(원본보기, 수집하기, 공유하기 등)을 하기 때문이죠. 

Pinterest의 예가 가장 적절한데, Pinterest는 썸네일 리스트가 메인화면이며 가장 중요한 단계입니다. 사람들은 썸네일만으로 이미지를 감상하는 경우가 많고 그 중 정말 마음에 드는 이미지가 있으면 원본보기(상세보기)로 들어가 '하트'를 누르거나 자기 보드로 스크랩합니다. 따라서 썸네일만으로 내용 전달이 가능하도록 설계되어 있고 다른 서비스보다 상대적으로 썸네일이 큽니다. 

'발견' 맥락에서 한눈에 대비되는 적절한 예, 부적절한 예를 찾아보자면 아래 Google과 Yahoo의 이미지 검색결과 화면이 될 것 같네요.

마치며

간단하게 사용 맥락에 따라 어떤 썸네일 리스트 방식이 적합한지 알아보았습니다. 하지만 어디까지나 일반적으로 이렇게 생각해볼 수 있다는 것이고, 기획 의도나 상황에 따라 다르게 쓰일 수 있습니다. 그리고 비슷하지만 부분적으로 다른 방식들이 워낙 많아서 고려해야할 것들이 더 많고요. 

하지만 썸네일의 존재 이유는 글(원본 이미지)의 제목(썸네일)처럼 사용자가 전 단계에서 구분하고 인식할 수 있도록 짧고(작게) 의미있게 제공하는 것이기 때문에, 탐색에서든 발견에서든 사용자에게 의미있는 내용을 가진 이미지여야 하는 것은 잊지 말아야겠습니다. 이미지 검색결과의 예 처럼요. 이 부분도 썸네일을 사용하는 다양한 상황을 통해 흥미롭게 다뤄볼 수 있을 것 같은데요, 기회가 된다면 정리해보도록 하겠습니다 :)

* 이 글은 제가 2013년 pxd story에 쓴 글입니다. 이와 비슷한 UI 디테일에 관한 탐구나, UX디자인 전반에 관심이 있으시다면 pxd story 블로그를 찾아가 보세요!