brunch

라이킷 26 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 우잉 Sep 20. 2022

반응형 웹에서 이미지를 모바일로 변경할 때 주의점

닐슨 노먼 그룹 모바일 UX 스터디 (4)

들어가기에 앞서….

이 아티클은 닐슨 노먼 그룹의 <모바일 UX : 학습 가이드>의 '반응형 웹 디자인(Responsive Web Design)' 카테고리 '작은 화면의 큰 그림 : 제거, 크기 조정 또는 재구성(Big Pictures on Small Screens: Remove, Resize or Reorganize)' 기사를 요약한 내용입니다.

Big Pictures on Small Screens

When using large-screen images on smaller screens, remove images that don’t add information. Then, pay close attention to cropping, scaling and placement.

www.nngroup.com

(기사가 2017년 5월에 작성되었기 때문에 내용 및 수치가 오늘날과 다를 수 있음을 미리 말씀드립니다.)

이미지 콘텐츠는 웹사이트에서 많은 부분을 차지합니다. 페이지 전체를 관통하는 풀사이즈 이미지부터 제품을 설명하는 아이콘 등 그 종류 또한 매우 다양합니다. 그러나 다루는 서비스가 태블릿, 모바일 등 여러 장치에서 제공된다면 디자이너는 일종의 딜레마에 빠지게 됩니다. 큰 화면의 이미지가 작은 화면에서 유의미한 의미를 가지지 못하거나 부적절하게 크롭되어 불필요한 스크롤 유발하기 때문입니다. (이는 작은 화면의 이미지가 큰 화면에서 보일 때도 마찬가지입니다) 따라서 큰 화면의 이미지가 작은 화면에서 유의미하게 작동하기 위해선 추가적인 조치가 필요합니다. 닐슨 노먼 그룹은 작은 화면의 장치에서 이미지 크기 조정과 관련해 세 가지의 일반적인 문제 상황을 제기하고 이에 대한 솔루션을 제안하고 있습니다.

1. 일반적인 문제 요소들

1) 이미지의 선명도와 오버레이 텍스트의 가독성 이슈

많은 사이트에서 이미지 내에 텍스트를 포함하거나 이미지 위에 텍스트를 배치합니다. 이러한 구성은 텍스트와 이미지 사이의 색상 대비가 적절하지 않은 이상 앞서 말한 모든 장치에서 까다로운 디자인 요소로 작용합니다. 특히 축소된 화면에서는 이미지와 텍스트가 들어갈 공간이 더 적습니다. 텍스트가 이미지 내에 포함되어 있을 경우 작은 화면에서는 잘 보이지 않을 것이며 텍스트가 이미지의 일부가 아닐 경우에도 줄바꿈이 되거나 기존에 의도한 이미지 영역을 가리는 등 선명도와 가독성에 악영향을 끼칩니다.

'Chicago Ideas'의 웹사이트 이미지는 텍스트가 인물을 가리고 있지 않지만, 모바일에서는 이미지의 핵심 영역(인물 얼굴)을 침범하고 있습니다.

2) 이미지의 잘못된 크롭 및 크기 조정 이슈

웹은 가로 방향의 레이아웃이 주를 이루는 반면 모바일은 세로 방향의 레이아웃이 주를 이룹니다. 이 때문에 결과적으로 웹에서 사용한 이미지는 태블릿이나 모바일 장치에서 제대로 작동하지 않을 가능성이 높습니다. 의도에 맞지 않는 이미지 크롭은 결국 콘텐츠의 의미를 희석시킵니다.

'Fifth Third Bank'의 웹사이트 이미지는 모바일에서 동일한 컨텍스트를 가지지 않습니다.

'Sydney.com'의 웹사이트 상단에 위치한 배너형 이미지는 모바일에서 동일 비율로 축소되어 기존 의도와 다르게 상대적으로 작은 임팩트를 갖게 되었습니다.

3) 과도하고 불필요한 스크롤이 발생하는 이슈

웹의 이미지는 모바일에서 페이지를 더 길게 만들기도 합니다. 웹에서는 스크롤 없이 볼 수 있었던 콘텐츠가 모바일에서는 노출되는 영역이 좁아져 스크롤을 해야 볼 수 있기 때문입니다. 이는 서비스와 사용자 간 상호작용 비용을 증가시키고 콘텐츠의 위아래 정보를 기억해야 하기 때문에 직관적인 이해를 어렵게 만듭니다. 또한 웹에서는 수직 수평(상하좌우)으로 관련 정보를 의도적으로 배치할 수 있지만 모바일에서는 단일 방향 즉, 수직(상하)으로만 정보를 배치할 수 있어 콘텐츠 맥락에 대한 이해가 낮아질 수 있습니다.

'Field Museum'의 웹사이트 콘텐츠는 2행 3열 그리드로 구성되어 있지만, 모바일의 경우 단일 열로 구성되어 있어 추가적인 스크롤을 요구합니다.

'Avaya'의 웹사이트 아이콘은 가로로 배치되어 있어 제공하는 솔루션에 대한 직관적인 이해가 가능하지만, 모바일의 경우 세로로 배치되어 있어 직관적인 이해가 어렵습니다.

2. 그렇다면, 어떻게 해결할 수 있을까?

1) 이미지 제거하기

이는 태블릿이나 모바일 장치에서 이미지를 없애야 함을 강요하는 게 아닙니다. 오히려 의미 있는 이미지가 있어야 함을 뜻합니다. 즉, 큰 장치에서 작은 장치로 이미지를 옮겨야 할 때 이미지 정보에 대한 가치를 고려해야 함을 말합니다. 따라서 사용된 이미지가 서비스에 유의미하지 않다면 과감히 제거하는 편이 좋습니다. 닐슨 노먼 그룹은 다음과 같은 경우 작은 장치에서 이미지를 제거하는 것을 추천합니다.

- 작은 장치에서 이미지의 의미가 불분명해질 때
- 이미지가 의미는 있지만 크롭 시 올바르게 자를 수 없을 때
- 오버레이 된 텍스트가 이미지를 가리고 있을 때
- 페이지의 스크롤 양이 지나치게 많아질 때

(이러한 불필요한 이미지를 제거하면 페이지 로드 시간을 줄일 수 있다는 장점이 존재합니다)

'LogMeIn.com'의 웹사이트 이미지는 서비스 이해를 돕는 용도로 사용되고 있지만, 모바일의 경우 단색 배경으로 버튼 선택을 유도하는 목적을 명확히 했습니다.

'Sylvan'의 웹사이트 이미지는 각 캐러셀마다 포함되어 있지만, 모바일의 경우 이를 아코디언으로 변경하고 이미지는 일부만 유지하도록 구성했습니다.

2) 이미지 크기를 조정하거나 크롭하기

이미지가 서비스를 이해하는데 의미가 있고 사용자에게 제공되는 명확한 목적이 있다면 이미지 크기를 조정하거나 크롭하는 것이 좋습니다. 특히나 직관적인 이해를 위해 요약된 일러스트나 아이콘의 경우 과도한 스크롤이 발생하지 않도록 크기를 조정해 인라인 형태로 배치한다면 동일한 효과를 발휘할 수 있습니다.

'Fifth Third Bank'의 웹사이트는 원 안에 아이콘을 배치해 핵심 기능을 강조하고 있지만, 모바일에서는 원을 제거하고 아이콘 옆에 텍스트를 붙여 직관적 선택이 가능하도록 했습니다.

3) 이미지와 연관성이 높은 텍스트를 편집하거나 이동하기

때로는 이미지를 편집하는 것만으로 충분하지 않을 수 있습니다. 이럴 경우 이미지와 관련된 텍스트를 함께 변경하는 것이 좋습니다. 예를 들어 텍스트의 양을 적게 할 경우 작은 장치에서 스크롤을 최소화하고 이미지 내외의 영역에서 보다 쉽게 배치할 수 있습니다. (이미지 위에 텍스트가 배치되어 있을 경우는 여전히 적절한 위치를 고려해야 하기 때문에 보다 세심한 주의가 필요합니다)

'BMOHarris'의 웹사이트 이미지는 상단 영역에 텍스트를 오버레이 해 사용했지만, 모바일의 경우 알맞게 이미지를 크롭한 뒤 의미 있는 텍스트만을 포함해 이를 이미지 아래로 옮겼습니다.

'FitStar'의 웹사이트의 경우 모바일과 동일한 이미지를 사용했지만 이미지를 다르게 자르고 텍스트를 왼쪽에서 위로 이동해 모바일 최적화를 했습니다.

3. 글을 마무리하며….

몸을 담고 있는 회사가 두 가지 이상의 장치로 서비스를 제공하고 있다면 디자이너에게 하나 이상의 장치를 고려한 설계는 숙명과도 같을 것입니다. 이는 비단 이미지뿐 아니라 설계된 모든 요소를 고려해야 되는 것으로 적어도 2번 이상 동일 작업을 반복해야 하는 번거로운 일입니다. 하지만 저희는 사용자를 위해 존재하는 사람입니다. 다양한 채널을 통해 유입되는 사용자에게 장치와 별개로 좋은 경험을 전달할 의무가 있습니다.

그렇다면 국내에선 어떤 서비스가 데스크톱과 모바일 장치의 특성을 잘 이해하고 활용하고 있을까요? 저는 쿠팡을 말씀드리고 싶은데요. 그 이유는 웹 환경과 모바일 환경에서 경험 전략을 달리하고 있기 때문입니다. 웹사이트의 경우 탐색 경험에 초점이 맞춰져 있고 모바일의 경우 빠른 구매에 초점이 맞춰져 있습니다. 대표적으로 홈 화면의 경우 웹은 '오늘의 발견', '오늘의 쇼핑 제안' 등 쿠팡이 큐레이션 한 상품을 위주로 레이아웃을 달리해 노출하고 있습니다. 반면 모바일의 경우 '자주 산 상품', '재구매 추천 상품' 등 지난 구매 기록과 검색 기록을 바탕으로 유저 맞춤형 상품을 추천하고 있습니다.

이러한 특성은 앞선 닐슨 노먼 그룹이 제안한 각 장치의 설계가 달라야 하는 시사점이 고도화된 모습으로 볼 수 있습니다. 따라서 디자이너는 서비스의 특성뿐 아니라 장치의 특성 또한 잘 파악할 필요가 있습니다. 이를 통해 어떤 가치와 경험을 전달할 것인지 보다 심도 깊은 고민이 선행되어야 합니다. 반응형 웹 디자인과 관련된 긴 글 끝까지 읽어주셔서 감사합니다. 저는 다음 스터디 글로 찾아뵙도록 하겠습니다. :)