섬네일 이미지 구성하는 방법(UI)

항상 디자인하는 섬네일 UI. 여러분은 어떻게 구성하시나요?

본 글은 닐슨 노먼 그룹의 <List Thumbnails on Mobile>를 바탕으로 구성했습니다.

---

요약

이미지의 중요도, 모든 항목이 이미지를 갖고 있는지, 이미지가 전달하는 정보량에 따라 이미지가 놓일 위치가 달라진다.

이미지는 필수가 아니다

-이미지가 사용자의 선택을 결정하는데 도움이 되는 지를 고려하라

(예를 들어 옷 쇼핑몰에는 썸네일 이미지가 도움이 되지만, 찻잎을 파는 경우 별로 도움이 되지 않는다.)

왼쪽 배치? 오른쪽 배치?

-시각적 이미지가 필수적인 건지 보조 도구인지 생각하라

1. 필수적인 경우: 왼쪽에 배치하여 텍스트를 볼 필요가 없이 하라

2. 보조인 경우: 텍스트 설명의 오른쪽에 배치하라

모든 목록에 넣을 수 있는 사진이 있을 때(좌) / 몇 목록에만 넣을 수 있는 사진이 있을 때(우)

(좌) 사진이 너무 큰 경우: 주의가 분산되거나 텍스트가 잘리게 된다. 로딩 시간이 오래 걸린다.

(우) 사진이 너무 작은 경우: 인식하기 어렵고 유용하지 않다.

결론

1. 이 사진이 탐색에 도움이 됩니까?  → 아니면 사진 삭제

↓

2. 모든 항목에 들어갈 이미지를 가지고 있나요? → 아니면 오른쪽 정렬

↓

3. 이미지가 텍스트보다 더 많은 정보를 전달하나요? → 아니면 오른쪽 정렬

↓

맞으면 왼쪽 정렬

예시

1. 네이버 뉴스 - 모든 뉴스에 사진이 있어서 왼쪽 배치, 대신 크기는 작은 편

2. 쿠팡 - 판매할 상품의 이미지가 더 중요하기 때문에 사진을 왼쪽에 크게 배치

네이버(좌) / 쿠팡(우)

작성자: 장유정
썸네일 이미지에도 많은 생각이 들어가야 한다는 점을 알았다. 그런데 대부분 이미지를 왼쪽 정렬하는 경우가 매우 많은 것 같다.

---

<관련 글>

여백에 양보하지 마세요.(모바일 UI)