왜 해상도와 작업사이즈를 먼저 정의해야 할까
초반에는 문제없어 보이던 시안이 중반 이후부터 계속 어긋나는 경우가 있었다.
해상도와 작업사이즈 기준을 명확하게 정하지 않은 상태에서
디자인과 퍼블리싱을 동시에 진행했기 때문이다.
해상도 기준이 흔들리면
이미지 리소스, 여백, 폰트 크기까지 연쇄적으로 불필요한 수정이 발생한다.
해상도
모니터 화면에 이미지를 나타낼 때 표시되는 네모모양의 격자(pixel)의 개수를 의미. 디스플레이의 선명한 정도
예를 들어 "1920x1080"와 같이 두 개의 숫자로 표시가 되며, 이는 너비 1920픽셀x높이 1080픽셀을 의미한다.
- 해상도가 같을 경우, 화면의 크기가 클수록 픽셀 한 칸의 크기도 커진다
- 화면 크기가 같을 경우, 해상도가 높아질 수록 픽셀 한 칸의 크기는 작아진다.
- 일반적으로 화면이 클수록 해상도가 높다.
- 면적 당 픽셀 개수가 많다면, 더 세밀하게 묘사가 가능하다.
해상도 점유율 통계 조회 확인가능
▶ 디자인 작업에서는 해상도 자체보다 이 해상도가 어떤 작업 기준(뷰포트, 리소스)에 영향을 주는지가 더 중요!!
픽셀밀도(Pixels per inch, ppi)
: 화면의 선명도를 결정하는 요소로 1인치 안에 들어가 있는 픽셀의 수를 말한다.
해상도가 높을수록 인치당 픽셀수(PPI=Pixels Per Inch)가 많고 디스플레이에서 선명도가 높아져 좀 더 자세히 볼 수 있다.
뷰포트,디바이스픽셀비율(Device Pixel Ratio, DPR)
: 실제 화면에 표시되는 픽셀과 실제 픽셀의 비율을 말하며, 이는 디자인 작업 시 이미지를 3배 크기로 작업해야 함을 의미)
최신 스마트폰의 해상도 / 뷰포트 / DPR
- 갤럭시 Z Flip : 1080x2636 / 412x1004 / 2.625
- 갤럭시 Z Fold : 1768x2208 / 884x1104 / 2
- 갤럭시 S20+ : 1440x3200 / 360x800 / 3.75
- 아이폰15 : 1179x2556 / 393x852 / 3
- 아이폰 15 pro : 1179x2556/ 393x852 / 3
- 아이폰 15 Pro Max : 1179x2556 / 4303x932 / 3
해상도 점유율 통계 조회
해상도/뷰포트 확인할 수 있는 사이트2
▶ PPI는 디스플레이의 물리적인 선명도를 나타내는 값이고,
DPR은 디자인과 퍼블리싱에서 논리 픽셀과 실제 픽셀의 변환 기준으로 사용된다.
즉, 디자인 작업에서는
PPI보다 DPR이 더 직접적인 기준이 된다.
왜 디자인 리소스를 2배·3배로 작업할까?
디자인 작업에서 이미지를 2배 또는 3배 크기로 만드는 이유는
고해상도 디바이스에서도 이미지가 깨지지 않고 선명하게 보이도록 하기 위함이다.
DPR이 3인 디바이스에서 1x 이미지(100px)를 그대로 사용하면
실제 화면에서는 300px 영역을 100px 이미지로 늘려서 표현하게 된다.
이 과정에서 이미지가 흐릿해지거나 선이 뭉개져 보이는 문제가 발생한다.
▶ 그래서 디자인 작업 시
기본 기준 사이즈의 2배 또는 3배 크기로 리소스를 제작하고,
개발 단계에서 디바이스에 맞게 스케일링해 사용한다.
이는 PPI가 디스플레이의 물리적인 선명도를 나타내는 값인 반면,
DPR은 디자인과 퍼블리싱 과정에서
논리 픽셀과 실제 픽셀을 변환하는 기준으로 사용되기 때문이다.
즉, 디자인 작업에서는
PPI보다 DPR을 기준으로 리소스를 설계하는 것이
실무적으로 더 적절하다.
작업사이즈 해상도
PC
1920*1080px : 점유율 1위
1024 -> 본문 사이즈 960px
1280 -> 본문사이즈 1140px
▶ PC 웹 작업에서는
가장 높은 점유율을 가진 해상도를 기준으로 콘텐츠 영역을 설계하는 것이 효율적이다.
모바일앱 기본단위(안드로이드와 ios의 단위 시스템)
안드로이드와 ios는 각각 다른 단위 시스템을 사용하여 디바이스의 다양한 화면 밀도에 맞추어 요소들이 동일한 크기로 보이게 합니다.
스크린의 실제 단위 px
: 화면의 전체 화면 크기와 상관없이 지정한 수치만큼 표시되는 절대적 표시 단위이므로 안드로이드에서는 px보다 DP 단위를 사용하는 것이 좋다.
▶ px는 화면 크기와 상관없이 지정한 수치만큼 그대로 표시되는 절대 단위다.
이 때문에 픽셀 밀도가 다른 디바이스에서는
같은 px 값이라도 실제 크기가 다르게 보일 수 있다.
안드로이드 : DP (density independent pixels)
Android 주요해상도
360x800
360x740
3608640
ios: PT
ios 주요해상도
390x844 (평균적으로 통용되는 디자인 해상도)
370x812 (평균적으로 통용되는 디자인 해상도)
해상도와 작업사이즈를 먼저 정리한 이유는
이후에 다룰 그리드, 여백, 컴포넌트 설계의
기준이 되기 때문이다.
