iOS /해상도가 다양한 기기들에 대응하기 위한 방법

임혜정·2024년 9월 10일
2
post-custom-banner

1x, 2x, 3x

이름으로 알 수 있듯이 그뜻은 그저 1배 2배 3배이다. 그러나 이것들이 iOS디자인에서 어떤 의미를 갖는지?

1x - 기준이 되는 해상도
2x - 1x의 2배 해상도로서 Retina 디스플레이를 가진 기기를 위한 것이다.
3x - 더 높은 해상도의 디스플레이(plus, pro ...)

최근 iOS기기의 표준 해상도는 2x이다. 특히 Retina디스플레이에 최적화되어있고 1x나 3x로 스케일링하기가 쉬운 점, 많은 디자인 도구들이 2x를 기본 설정으로 사용하는 점 때문에 2x를 기본으로 작업한다.



*Retina - 과거에는 디지털화면을 디자인할 때에 픽셀 단위만 고려하면 그만이었지만 2010 apple이 레티나 디스플레이의 iphone을 선보였다 . 레티나는 인치당 픽셀을 두 배로 늘려 출력하는 매우 선명한 화면이다.





절대적인 픽셀 수의 의미가 퇴색되었군요

다양한 해상도의 기기가 존재하게 되고 retina디스플레이의 기기도 생기면서 절대적인 픽셀 수 보다 상대적인 크기 단위를 사용하는 것이 중요해졌다.
그러기 위해서 쓸 수 있는 방법들은

  1. auto layout : 기기의 화면 크기에 따라 유연하게 조절되는 레이아웃
  2. size classes : 기기 특성에 따라 다른 레이아웃 적용이 가능하다. 컴팩트(Compact), 레귤러(Regular) 등의 클래스로 구분
  3. SF symbols사용 : 애플이 제공하는 확장가능한 아이콘세트 활용
  4. 벡터이미지 : 가능하다면 svg, pdf형식의 벡터이미지를 사용하여 모든 해상도에 선명하게 표시될 수 있도록 한다
  5. Asset Catalog : 카탈로그를 사용하여 다양한 해상도의 이미지 관리
  6. 상대적 단위 사용 : 픽셀 대신에 포인트(pt)나 비율을 사용하여 ui요소 크기를 지정한다

와 같은 방법들을 적절히 조합하여 다양한 사이즈의 기기에 대응할 수 있다.

profile
오늘 배운걸 까먹었을 미래의 나에게..⭐️
post-custom-banner

0개의 댓글