brunch

You can make anything
by writing

C.S.Lewis

by Newtudy Sep 14. 2022

모바일 디자인을 데스크톱에 옮길 때 겪는 문제 해결하기

스크린이 커지면서 생기는 디자인 문제와 해결책 알아보기

본 글은 닐슨 노먼 그룹의 <Small Pictures on Big Screens>를 바탕으로 구성했습니다.


요약

여러 페이지 크기에 맞게 디자인할 때는 방향, 종횡비, 크기 및 주변 요소들과의 관계를 신중하게 고려해야 한다. 3가지 문제와 해결책에 대해 공부해보자.


[문제 1. 너무 큰 이미지 형성]

모바일 화면을 큰 화면으로 늘리면 불균형적으로 큰 사진이 생성될 수 있다.

A. 정보 밀도가 낮아진다.

B. 스크롤을 계속해야 한다.

C. 이미지 품질이 떨어진다.


[해결법]

- 비율 조절과 자르기를 신경 써 결과 이미지의 크기, 의미가 유지되며 화면 크기에 적절한지 확인한다.

- 화면 크기가 커지면 사진은 같은 디자인, 같은 높이, 가로로 넓어진다.

- 사진이 너무 커져 의미 있는 부분이 가려지면 이미지의 높이를 늘린다.

영상을 재생해보세요.



[문제 2. 잘못된 이미지 크랍]

- 사진의 높이는 건드리지 않고 넓이를 확장하는 경우가 있다. 이미지를 잘못 자르면 정보 전달이 어렵다.


[해결법]

-같은 사진이지만 다양한 크기와 종횡비로 보일 수 있는 사진을 사용한다.

이미지를 고를 때 다음 3가지를 고려해보자.

1. 이미지가 다양한 종횡비로 보일 수 있는가?
2. 이미지가 충분히 큰가?
3. 이미지의 크기가 바뀌어도 사진에서 계속 보여야 하는 특성이 있는가?



[문제 3. 잘못된 위치 변경]

화면이 커지며 사진도 함께 커져 요소가 변경된다. 이때 내용이 겹쳐 의미나 효과를 잃을 수 있다.


[해결법]

이미지가 제대로 작동하지 않는다면 이미지의 크기를 제한한다. 이미지의 크기를 최대로 늘려도 빈 공간이 생긴다면 공백이나 콘텐츠를 넣는다.

(미리 지정한 최대 크기에 도달하면 회색 프레임이 생긴다.)


결론

- 화면 크기에 따라 다른 이미지를 선택할 수 있다.

- 최적의 사진을 찾을 수 있다면 다른 사진을 사용해라.

- 단일 모니터에서만 디자인을 하지 말자.


[국내 예시]

1.H&M

해결책 3번과 같이 최대한 이미지의 크기를 키운 뒤 공백에 색을 채워 프레임을 만들었다.


2.Threetimes

결론의 내용과 같이 화면 크기에 따라 다른 이미지를 사용해 너비에  맞는 이미지를 선택했다.


작성자: 장유정
모바일과 데스크톱 화면을 각각 만들어야 하는 것인지 처음 알게 됐다. 비율을 고려해서 알맞은 크기의 사진을 넣는 것이 중요한 것 같다.




<관련 글>


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari