해상도란?
화면에 표시되는 픽셀 수.
일반적으로 너비와 높이를 픽셀단위로 지정.
화면의 픽셀 수가 많을 수록 해상도가 높아지고 이미지가 더 섬세하고 선명하게 나타난다.
< 평균 > 가로 * 세로
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배수 환경에서 작업하면 파일 크기(용량)을 최소화 할 수 있기 때문에 리소스를 절약할 수 있다.
'디자인 툴 > Figma' 카테고리의 다른 글
[Figma] Auto layout / 피그마 - 오토 레이아웃 (0) | 2024.05.30 |
---|---|
[Figma] 피그마로 아이콘 만들기 (0) | 2024.05.29 |
[Figma] 피그마 사용법(2) (0) | 2024.05.27 |
[Figma] 피그마 사용법 (1) (0) | 2024.05.27 |
'노트폴리오'에서 다양한 포트폴리오 보기 (1) | 2024.05.24 |