본문 바로가기
디자인 툴/Figma

모바일 디자인 기초, 해상도와 배수의 개념

by yerica 2024. 5. 27.

해상도란?

화면에 표시되는 픽셀 수.

일반적으로 너비와 높이를 픽셀단위로 지정.

화면의 픽셀 수가 많을 수록 해상도가 높아지고 이미지가 더 섬세하고 선명하게 나타난다.

< 평균 > 가로 * 세로
PC : 1920 px * 1080 px
Teblet : 834 px * 1194 px
Mobile : 390 px * 844 px

배수(Scale Factor)

디스플레이 기술의 발전으로 인해 같은 면적 안에 더 많은 픽셀을 담을 수 있게됨. (고밀도 디스플레이)

이러한 디스플레이에서는 픽셀밀도가 증가하면서 배율도 2x, 3x 와 같이 증가한다.

그렇기 때문에, UI 디자인을 할때 여러 기기에 올바른 디자인이 표시되기 위해 다양한 배율로 에셋을 내보내는 것이 중요하다.

 

예를 들어, 아이콘 이미지가 jpg, png 일 때 1배수로 디자인 된 아이콘을 그대로 내보내고 적용하면 고밀도 디스플레이에서는 이미지가 흐리게 보일 수 있다.

이러한 문제를 해결하기 위해 jpg, png 파일을 내보낼 때는 해당 에셋이 사용되는 환경에 맞게 2배수, 3배수와 같은 배율의 에셋을 함께 내보내거나, svg 와 같은 벡터 기반 확장자를 사용하는 것이 좋다.

이렇게 하면 다양한 디스플레이에서 이미지가 선명하게 표현 될 수 있다.

 

배수 표현 : @1x - 1배수 @2x - 2배수

* 모바일에서는 배수를 높게 설정. 글자크기가 작으면 잘 보이지 않음.


물리적 해상도논리적 해상도 

모바일 기기의 해상도에는 물리적 해상도(Physical Resolution)와 논리적 해상도(Logical Resolution) 두 가지 개념이 있다.

 

* 물리적 해상도(Physical Resolution)

: 스마트폰이나 태블릿과 같은 모바일 기기의 디스플레이가 실제로 가지고 있는 픽셀 수.

  값이 높을수록 선명하고 높은 화질을 제공함.

 

* 논리적 해상도(Logical Resolution)

: 디자인 작업에서 사용하는 기준 픽셀. 물리적 해상도를 배율로 나눈 값이다.

 

예를 들어, 아이폰 14의 물리적 해상도가 1170*2532 인 경우 픽셀 밀도가 3배라면 논리적 해상도는 물리적 해성도를 3으로 나눈 390*844 가 된다. 이런식으로 논리적 해상도를 구할 수 있다.

애초에 큰 사이즈로 배율만 맞춰서 디자인을 해놓고 실제 볼 때는 정비율로 줄어들면서 볼 수 있게 모바일 디자인은 배율 디자인을 한다.


피그마 디자인에서 논리적 해상도(1배수)를 기준으로 하는 이유

 

1. 일관성

: 1배수 환경에서 디자인을 시작하면 폰트나 아이콘 같은 디자인 요소를 표준화하여 일관성을 유지할 수 있음.

 

2. 확장성

: 작업을 2x, 3x 환경에서 진행하며 더 낮은 픽셀 밀도에 대응하는 것 보다, 1에 다른 배수를 곱하여 더 큰 픽셀 밀도에 대응하는 것이 더 쉽다. 아이콘 같은 디지털 에셋을 관리하기 용이하다.

 

3. 파일 최적화

: 1배수 환경에서 작업하면 파일 크기(용량)을 최소화 할 수 있기 때문에 리소스를 절약할 수 있다.