모바일 디자인 기초 내용

[해상도]

:화면에 표시되는 픽셀 수. 일반적으로 넓이와 높이를 픽셀단위로 나타냄

화면에 픽셀수가 많을 수록(=밀도가 높을수록) 해상도가 높아짐

 

[보통 해상도]

pc : 1920*1080 px

teblet : 834*1194 px

mobile : 390*844 px

 

[배수 표현]

@1x - 1배수 / @2x - 2배수 

 

[물리적 해상도 / 논리적 해상도]

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

 

-물리적 해상도: 스마트폰이나 태블릿과 같은 모바일 기기의 디스플레이가 실제로 가지고 있는 픽셀 수를 말함

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

 

-논리적 해상도: 디자인 작업에서 사용하는 기준 픽셀을 의미, 물리적 해상도를 배율로 나눈 값

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

 

=모바일에선 배수 디자인을 하고, 모바일에선 배수로 줄어들어 본다

 

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

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

 

2. 확장성: 작업을 2배수,혹은 3배수에서 진행하면 더 낮은 픽셀 밀도에 대응하는 것보다, 1에 다른 배수를 곱하여 더 큰 픽셀 밀도에 대응하는 것이 더 쉽기 때문에 아이콘 같은 디지털 에셋을 관리하기가 더 편하다.

 

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