이름으로 알 수 있듯이 그뜻은 그저 1배 2배 3배이다. 그러나 이것들이 iOS디자인에서 어떤 의미를 갖는지?
1x
- 기준이 되는 해상도
2x
- 1x의 2배 해상도로서 Retina 디스플레이를 가진 기기를 위한 것이다.
3x
- 더 높은 해상도의 디스플레이(plus, pro ...)
최근 iOS기기의 표준 해상도는 2x이다. 특히 Retina디스플레이에 최적화되어있고 1x나 3x로 스케일링하기가 쉬운 점, 많은 디자인 도구들이 2x를 기본 설정으로 사용하는 점 때문에 2x를 기본으로 작업한다.
*Retina - 과거에는 디지털화면을 디자인할 때에 픽셀 단위만 고려하면 그만이었지만 2010 apple이 레티나 디스플레이의 iphone을 선보였다 . 레티나는 인치당 픽셀을 두 배로 늘려 출력하는 매우 선명한 화면이다.
다양한 해상도의 기기가 존재하게 되고 retina디스플레이의 기기도 생기면서 절대적인 픽셀 수 보다 상대적인 크기 단위를 사용하는 것이 중요해졌다.
그러기 위해서 쓸 수 있는 방법들은
auto layout
: 기기의 화면 크기에 따라 유연하게 조절되는 레이아웃size classes
: 기기 특성에 따라 다른 레이아웃 적용이 가능하다. 컴팩트(Compact), 레귤러(Regular) 등의 클래스로 구분SF symbols사용
: 애플이 제공하는 확장가능한 아이콘세트 활용벡터이미지
: 가능하다면 svg, pdf형식의 벡터이미지를 사용하여 모든 해상도에 선명하게 표시될 수 있도록 한다Asset Catalog
: 카탈로그를 사용하여 다양한 해상도의 이미지 관리상대적 단위 사용
: 픽셀 대신에 포인트(pt)나 비율을 사용하여 ui요소 크기를 지정한다와 같은 방법들을 적절히 조합하여 다양한 사이즈의 기기에 대응할 수 있다.