해상도란?
해상도는 화면에 표시되는 픽셀 수. 일반적으로 너비와 높이를 픽셀 단위로 나타냄.
화면에 픽셀 수가 많을수록 해상도가 높아지고 이미지가 더 섬세하면서도 선명하게 나타남.
- PC : 1920px * 1080px
- Teblet : 834px * 1194px
- Mobile : 390px * 844px
배수(Scale Factor)의 개념
디스플레이 기술 발전으로 인해 같은 면적 안에 더 많은 픽셀을 담을 수 있게 되었고, 이에 따라 고밀도 디스플레이가 등장했다. 이러한 디스플레이에서는 픽셀 밀도가 증가하면서 배율도 2x, 3x와 같이 증가했다.
UI디자인을 할 때 다양한 픽셀 밀도를 가진 기기에 올바르게 디자인 표시되도록 다양한 배율로 에셋을 내보내는 것이 중요하다.
예를 들어, 아이콘 이미지가 jpg, png일 때 1배수로 디자인된 아이콘을 그대로 내보내고 적용하면 고밀도 디스플레이에서는 이미지가 흐르게 보일 수 있다. 이러한 문제를 해결하기 위해 jpg, png 파일을 내보낼 때는 항상 에셋이 사용되는 환경에 맞게 2배수, 3배수와 같은 배율의 에셋을 함께 내보내거나, svg와 같은 벡터기반 확장자를 사용하는 것이 좋다. 이렇게 하면 다양한 디스플레이에서 이미지가 선명하게 표현될 수 있다.
- 배수 표현 : @1x - 1배수 / @2x - 2배수 …… “@”는 생략 가능
물리적 해상도와 논리적 해상도
모바일 기기의 해상도에는 물리적 해상도(Physical Resolution)와 논리적 해상도(Logical Resolution)의 두가지 개념이 있다.
-
물리적 해상도 : 스마트폰이나 태블릿과 같은 모바일 기기의 드스플레이가 실제로 가지고 있는 픽셀 수를 말함. 이 값이 높을수록 선명하고 높은 화질을 제공함.
-
논리적 해상도 : 디자인 작업에서 사용하는 기준 픽셀을 의미하며, 물리적 해상도를 배율로 나눈 값이다. 예를들어, 아이폰14의 물리적 해상도가 1170 2532 인 경우. 픽셀 밀도가 3배라면 논리적 해상도는 물리적 해상도를 3으로 나눈 390 844가 된다. 이런 식으로 논리적 해상도를 구할 수 있다.
피그마 디자인에서 논리적 해상도(1배수)를 기준으로 하는 이유
- 일관성 : 1배수 환경에서 디자인을 시작하면 폰트나 아이콘 같은 디자인 요소를 표준화 하여 일관성을 유지할 수 있다.
- 확장성 : 작업을 2배수, 혹은 3배수 환경에서 진행하면 더 낮은 픽셀 밀도에 대응하는 것보다, 1에 다른 배수를 곱하여 더 큰 픽셀 밀도에 대응하는 것이 더 쉽기 때문에 아이콘 같은 디지털 에셋을 관리하기가 더 편함.
- 파일 최적화 : 1배수 환경에서 작업하면 파일 크기나 용량을 최소화할 수 있기 때문에 리소스를 절약할 수 있다.
