모바일 디자인을 데스크톱에 옮길 때 겪는 문제 해결하기
스크린이 커지면서 생기는 디자인 문제와 해결책 알아보기
본 글은 닐슨 노먼 그룹의 <Small Pictures on Big Screens>를 바탕으로 구성했습니다.
요약
여러 페이지 크기에 맞게 디자인할 때는 방향, 종횡비, 크기 및 주변 요소들과의 관계를 신중하게 고려해야 한다. 3가지 문제와 해결책에 대해 공부해보자.
[문제 1. 너무 큰 이미지 형성]
모바일 화면을 큰 화면으로 늘리면 불균형적으로 큰 사진이 생성될 수 있다.
A. 정보 밀도가 낮아진다.
B. 스크롤을 계속해야 한다.
C. 이미지 품질이 떨어진다.
[해결법]
- 비율 조절과 자르기를 신경 써 결과 이미지의 크기, 의미가 유지되며 화면 크기에 적절한지 확인한다.
- 화면 크기가 커지면 사진은 같은 디자인, 같은 높이, 가로로 넓어진다.
- 사진이 너무 커져 의미 있는 부분이 가려지면 이미지의 높이를 늘린다.
[문제 2. 잘못된 이미지 크랍]
- 사진의 높이는 건드리지 않고 넓이를 확장하는 경우가 있다. 이미지를 잘못 자르면 정보 전달이 어렵다.
[해결법]
-같은 사진이지만 다양한 크기와 종횡비로 보일 수 있는 사진을 사용한다.
이미지를 고를 때 다음 3가지를 고려해보자.
1. 이미지가 다양한 종횡비로 보일 수 있는가?
2. 이미지가 충분히 큰가?
3. 이미지의 크기가 바뀌어도 사진에서 계속 보여야 하는 특성이 있는가?
[문제 3. 잘못된 위치 변경]
화면이 커지며 사진도 함께 커져 요소가 변경된다. 이때 내용이 겹쳐 의미나 효과를 잃을 수 있다.
[해결법]
이미지가 제대로 작동하지 않는다면 이미지의 크기를 제한한다. 이미지의 크기를 최대로 늘려도 빈 공간이 생긴다면 공백이나 콘텐츠를 넣는다.
(미리 지정한 최대 크기에 도달하면 회색 프레임이 생긴다.)
결론
- 화면 크기에 따라 다른 이미지를 선택할 수 있다.
- 최적의 사진을 찾을 수 있다면 다른 사진을 사용해라.
- 단일 모니터에서만 디자인을 하지 말자.
[국내 예시]
1.H&M
해결책 3번과 같이 최대한 이미지의 크기를 키운 뒤 공백에 색을 채워 프레임을 만들었다.
2.Threetimes
결론의 내용과 같이 화면 크기에 따라 다른 이미지를 사용해 너비에 맞는 이미지를 선택했다.
작성자: 장유정
모바일과 데스크톱 화면을 각각 만들어야 하는 것인지 처음 알게 됐다. 비율을 고려해서 알맞은 크기의 사진을 넣는 것이 중요한 것 같다.
<관련 글>
