[UX] 구글 머티리얼 디자인 – 3.3.머티리얼 기초(Material foundation) – 레이아웃(Layout): 화소 밀도 (Pixel density)
머티리얼 기초 중 레이아웃에서 화면의 화소 밀도(Screen pixel density)와 해상도(Resolution)는 플랫폼에 따라 다양할 수 있습니다. 화소 밀도는 픽셀 밀도나 픽셀 퍼 인치(Pixels per inch, PPI) 등의 용어로도 사용됩니다. 이 단위는 장치의 스크린 해상도를 측정하는데 사용됩니다.
출처: 원문보기
1. 화소 밀도 (Pixel density)
화소 밀도(Pixel density)는 1인치에 들어가는 화소의 숫자로 정의됩니다. 추가 설명을 하면 1인치 박스 안에 몇개의 화소가 들어가는지를 기준으로 하는 개념입니다.
1.1. 화면의 화소 밀도와 콘텐츠 출력 (Screen density variations)
고화소 밀도를 가진 스크린은 단위 당(1인치) 더 많은 픽셀을 갖습니다. 그 결과, 같은 픽셀 사이즈를 갖는 UI 요소는 저화소 밀도를 가진 스크린에서 더 크게 표현됩니다. 반대로 고화소 밀도를 가진 스크린에서 더 작게 표현됩니다.
실무를 하다보면 이 부분에 대한 이해를 의외로 잘 못하는 분들을 위해 아래 이미지로 설명을 해보겠습니다.
위와 같이 가로, 세로 각각 1픽셀(px, Pixel) 사이즈를 갖는 즐겨찾기 아이콘이 있다고 가정합시다. 아이콘은 1 픽셀 화소 블록(1 ea of pixel)에 정확하게 들어가는 사이즈를 의미합니다.
픽셀은 디자인을 하는 과정에서 길이를 나타내는 단위로 흔히 사용되지합니다. 하지만 픽셀은 인치, 센티미터와 같이 절대적인 길이를 나타내는 단위가 아닙니다. 이 부분 때문에 이해에 혼선이 많이 생기는 듯 합니다.
우리가 흔히 알고 있는 스크린은 눈에 잘 보이지 않지만 스스로 빛을 내는 발광 다이오드들(빛을 내는 작은 LED 램프)로 구성이 되어 있습니다. 1픽셀은 이 발광 다이오드 1개의 크기인 것입니다.
이 내용을 조금 더 설명하면 왼쪽 휴대폰 스크린에는 이 다이오드(램프)가 총 60개가 있는 것이고, 오른쪽 휴대폰에는 총 15개가 있는 것입니다. 설명을 단순화 하기 위해 예시를 든 것이고, 실제로 휴대폰 스크린에는 당연히 더 많은 다이오드를 갖고 있습니다.
위에서 화소 밀도(Pixel density)는 1인치의 물리적 스크린 크기에 포함된 픽셀의 숫자라고 하였습니다. (여기서 물리적 스크린 크기는 우리가 실제로 사용하는 휴대폰의 스크린 크기를 나타내는 것으로 인치, 센티미터와 같이 절대적인 크기인 것입니다.)
위의 그림에서 왼쪽 휴대폰과 오른쪽 휴대폰 스크린에 포함된 다이오드의 숫자는 다르지만 실제 제품의 스크린 사이즈는 가로 1.5 inch, 세로 2.5 inch로 동일합니다.
고화소 밀도라는 의미는 실제 제품의 스크린 크기 내에 얼마나 많은 픽셀(다이오드)이 포함되었는지를 의미하는 것입니다. 그래서 왼쪽 휴대폰이 오른쪽 휴대폰보다 당연히 고화소 밀도를 가진 스크린으로 보는 것입니다.
왼쪽 휴대폰의 화소 밀도(Pixel density)는 4PPI이고, 오른쪽 휴대폰의 화소 밀도(Pixel density)는 2PPI입니다. (붉은색 박스 영역은 1인치 크기를 나타내고, 이 박스 안에 포함된 픽셀의 숫자가 화소 밀도(Pixel density)를 의미하는 것입니다.)
여기서 화소 밀도(Pixel density)의 계산은 1인치 스크린에 가로, 세로로 들어가는 픽셀의 숫자를 의미합니다. 즉, 왼쪽 휴대폰 스크린 1인치에 가로로 4개, 세로로 4개의 픽실이 들어간다는 것을 화소 밀도가 의미하고 있다는 것입니다.
이런 이유로 위의 설명에서 저화소 밀도를 가진 스크린에서 동일한 크기의 사이즈를 갖는 UI 요소가 더 크게 출력된다는 것을 이야기 한 것입니다.
위의 그림에서 1픽셀의 블록(1ea of pixel)에 딱 맞게 출력되는 아이콘(가로, 세로 1px인 아이콘)이 있다고 가정하면, 오른쪽 휴대폰 스크린의 픽셀 블록이 더 크기 때문에 여기에 딱 맞게 출력되는 아이콘의 크기가 더 크게 출력되는 것을 볼 수 있습니다.
다시 한번 말하지만 픽셀은 센티미터, 인치 단위처럼 물리적으로 절대적인 길이를 나타내는 단위가 아닙니다.
또한 이러한 이유 때문에 저화소 밀도 스크린이 같은 콘텐츠를 더 선명하게 보여주지 못하는 겁니다. 위의 그림에서도 같은 아이콘의 선예도가 더 떨어지는 것을 볼 수 있습니다.
1.2. 화소 밀도 계산하기 (Calculating pixel intensity)
화소 밀도는 다음과 같이 계산할 수 있습니다. 업무상 화소 밀도를 직접적으로 계산할 일이 많지는 않겠지만 개념을 이해하는 정도로 참고하고 계시면 될 것 같습니다.
- 스크린 밀도(Screen density) = 스크린 가로 또는 세로에서의 픽셀 수 / 스크린 가로 또는 세로의 총 인치(Inch)
2. 밀도 독립성 (Density independence)
밀도 독립성(Density independence)이란 서로 다른 밀도를 가진 스크린에서 UI 요소들을 동일하게 출력하는 것을 의미합니다. 말이 조금 어렵지만 스크린 마다 밀도가 각기 다를 수 있는 것에 대응하기 위해 이후 설명할 단위인 dp 개념을 설명하기 위한 것입니다.
2.1. 밀도 독립 픽셀 (Density-independent pixels)
밀도 독립 픽셀(Density-independent pixels)는 우선 dp라고 축약해서 사용하며, dips로 발음합니다.
dp는 어떤 스크린에서든 균일하게 사용할 수 있는 유연한 단위입니다. dp는 서로 다른 이기종 플랫폼에서도 디자인을 적용하기 위한 유연한 방법이기도 합니다.
위의 그림에서처럼 dp는 서로 다른 밀도의 스크린에서 동일한 UI 요소를 출력할 수 있게 하는 길이 단위입니다. 검은색 점은 서로 다른 화소 밀도를 가진 스크린에서도 dp로 UI 요소의 크기를 지정하면 동일한 크기로 출력된다는 것을 설명하는 그림입니다.
1.1에서 설명한 바와 같이 UI 요소를 픽셀 단위로 적용을 하면 스크린의 화소 밀도에 따라서 크기가 다르게 출력되는 문제가 발생하게 됩니다.
이를 보완하기 위해 머티리얼 시스템은 각 휴대폰의 스크린의 화소 밀도를 분석합니다 이후 해당 스크린의 화소 밀도에 따라 동일한 UI 요소를 출력하기 위한 길이 단위로 변환을 한 것이 dp의 개념인 것입니다.
픽셀이 절대적 길이 단위가 아님에 따라 UI 요소가 동일하게 출력되지 않는 것을 해결하기 위해서 스크린의 화소 밀도 대비 동일한 UI 요소를 출력하기 위한 별도의 절대적 길이 단위를 만들었다고 이해하면 되겠습니다.
다시 말해 고밀도 휴대폰 스크린에서의 4px은 조금 더 낮은 밀도를 가진 휴대폰 스크린에서의 3px와 동일하고, 이보다 조금 더 낮은 밀도를 가진 휴대폰 스크린에서의 2px과 동일한 길이라는 것을 머티리얼 시스템에서 자동으로 변환을 해주는 개념인 것입니다. (1.1에서 설명한 것과 같이 같은 픽셀 사이즈의 UI 요소는 고밀도 스크린에서 더 작게 표현되기 때문에 동일한 사이즈로 출력하려면 고밀도 휴대폰 스크린일수록 픽셀값은 더 커져야 하는 것입니다.)
고밀도, 저밀도는 xxxdpi, xxdpi와 같은 단위로 사용하며, 보통 최고 해상도인 xxxdpi에서 사용하는 1dp(4px)을 기준으로 머티리얼 디자인을 먼저 하고, 별도의 프로그램을 통해서 각 밀도의 스크린에 맞도록 UI 요소들을 변환하는 방식이 실무에서 사용되고 있습니다.
3. 안드로이드에서 화소 밀도 (Pixel density on Android)
안드로이드 앱 개발 시, 서로 다른 밀도를 가진 스크린에서 균일한 UI 요소를 출력하기 위해 dp를 사용합니다.
2.1. Dps와 스크린 밀도 (Dps and screen density)
아래 표는 스크린의 물리적 길이, 스크린 화소 밀도, 픽셀사이즈, dp를 각각 비교한 것입니다. dp를 계산하는 방식은 다음과 같습니다.
- dp = 1.5인치 스크린의 물리적 길이를 기준, 포함된 픽셀수 x 160 / 스크린 화소 밀도
공식을 일일이 설명하기 보다는 아래 표를 참고해주시면 됩니다. 대부분의 스크린 규격은 아래와 같이 분류됩니다. (예: ldpi, mdpi)
각 스크린 규격에 따른 dp와 픽셀 크기를 참조하시면 머티리얼 디자인 작업에 활용하기가 편합니다. 다시 말해, 가장 밀도가 큰 xxxdpi로 디자인을 구성하고, 디자인한 콘텐츠는 별도의 소프트웨어를 통해서 하위 밀도의 스크린에 적합한 콘텐츠를 변환하는 것을 추천합니다.
작은 콘텐츠를 디자인하여 큰 콘텐츠로 변환을 하면 픽셀이 깨질 수가 있기 때문에 가장 큰 밀도의 스크린 규격에 적합한 콘텐츠를 디자인하여 작은 밀도의 스크린 규격에 맞는 콘텐츠로 변환하는 것을 추천하는 것입니다.
결론적으로 말하면 4px을 1dp로 하여 디자인을 한다고 생각하면 된다는 뜻입니다.
| 스크린 규격 | dp | px |
|---|---|---|
| ldpi | 1 | 0.75 |
| mdpi | 1 | 1.00 |
| hdpi | 1 | 1.50 |
| xhdpi | 1 | 2.00 |
| xxhdpi | 1 | 3.00 |
| xxxhdpi | 1 | 4.00 |
2.2. Scalable pixels (sp)
sp는 dp의 개념과 같이 픽셀 밀도에 따라 크기가 다르게 출력되는 것을 보완하기 위한 개념의 단위입니다. 단, 위에서 픽셀(px) 단위를 dp로 변환한 것처럼 폰트(pt) 단위를 sp로 변환한 것이라고 생각하면 되겠습니다.
또한 sp 단위는 시각 장애인 등을 위한 접근성 설정 시, 글자의 크기를 일괄적으로 변환해 주는 개념으로 사용됩니다.
3. iOS에서 화소 밀도 (Pixel density on iOS)
iOS는 각 유닛의 포인트(Point) 단위로 측정한 논리적 해상도를 사용하여 화소의 밀도를 결정합니다. 우선 이 부분에 대한 자세한 내용은 향후 별도로 다루는 게 맞을 것 같습니다.
개념을 이해하기 위해 적용하는 방식을 간단히 설명해보면, 우선 UIKit Size가 포인트(Point)로 정의됩니다. 이것을 스크린의 가로 픽셀 크기에 맞춰서 늘이고 줄이는 방식으로 적용이 되는 듯 합니다. 작업자는 먼저 타깃이 되는 디바이스에 따른 UIKit Size를 확인하고, 이에 따라 작업을 진행합니다.
| Device | Native Resolution (Pixels) | UIKit Size (Points) | Native scale factor | UIKit scale factor |
|---|---|---|---|---|
| iPhone X | 1125 x 2436 | 375 x 812 | 3.0 | 3.0 |
| iPhone 8 Plus | 1080 x 1920 | 414 x 736 | 2.608 | 3.0 |
| iPhone 8 | 750 x 1334 | 375 x 667 | 2.0 | 2.0 |
| iPhone 7 Plus | 1080 x 1920 | 414 x 736 | 2.608 | 3.0 |
| iPhone 6s Plus | 1080 x 1920 | 375 x 667 | 2.608 | 3.0 |
| iPhone 6 Plus | 1080 x 1920 | 375 x 667 | 2.608 | 3.0 |
| iPhone 7 | 750 x 1334 | 375 x 667 | 2.0 | 2.0 |
| iPhone 6s | 750 x 1334 | 375 x 667 | 2.0 | 2.0 |
| iPhone 6 | 750 x 1334 | 375 x 667 | 2.0 | 2.0 |
| iPhone SE | 640 x 1136 | 320 x 568 | 2.0 | 2.0 |
| iPad Pro 12.9-inch (2nd generation) | 2048 x 2732 | 1024 x 1366 | 2.0 | 2.0 |
| iPad Pro 10.5-inch | 2224 x 1668 | 1112 x 834 | 2.0 | 2.0 |
| iPad Pro (12.9-inch) | 2048 x 2732 | 1024 x 1366 | 2.0 | 2.0 |
| iPad Pro (9.7-inch) | 1536 x 2048 | 768 x 1024 | 2.0 | 2.0 |
| iPad Air 2 | 1536 x 2048 | 768 x 1024 | 2.0 | 2.0 |
| iPad Mini 4 | 1536 x 2048 | 768 x 1024 | 2.0 | 2.0 |
예를 들어, 타깃 디바이스가 iPhone 8이라면 UIKit Size가 375 x 667이고, 이를 적용하면 iPhone 8와 디바이스 해상도가 다른 iPhone 6 Plus, iPhone 6 Plus에도 동일한 디자인 적용이 가능하고, 해상도가 동일한 iPhone 7, iPhone 6s, iPhone 6에도 동일한 디자인을 적용할 수 있다는 것을 의미하는 것입니다.
iOS에서도 역시 안드로이드 시스템에서 dp를 적용한 것처럼 픽셀이 아닌 별도의 규격을 이용하여 서로 다른 디바이스의 화소 밀도에 따라 이를 시스템에서 자동으로 변환하는 개념이 포인트(Point)라고 이해하고 넘어가면 되겠습니다.
4. 웹에서의 화소 밀도 (Pixel density on the web)
4.1. 논리적 해상도 (Logical resolution)
각 디바이스에서 설정한 해상도에 따라서 콘텐츠는 크기를 늘이고, 줄이고 하여 출력됩니다. 여기서 논리적 해상도라는 말이 조금 생소할 수 있는데, 실제 스크린의 최대로 출력가능한 물리적 해상도가 있고, 사용자가 OS에서 변경할 수 있는 논리적 해상도가 있을 수 있습니다.
즉, 스크린의 최대 해상도가 1920 x 1080라고 해도 사용자가 Windows에서 1600 x 900으로 설정을 하면 실제로 출력되는 해상도는 1600 x 900에 맞춰서 출력이 된다는 것을 설명하는 개념입니다.
4.2. 웹에서의 디자인 단위 (Units for the web)
웹을 위해 디자인을 하는 경우, dp 단위를 픽셀(px)로 대체하여 사용합니다. 웹에서는 안드로이드의 dp나 iOS의 포인트(point)와 같이 시스템이 개별 스크린의 화소 밀도에 따라 자동으로 변환을 해주는 개념의 단위가 없습니다. 실제 단위는 픽셀(px)로 디자인을 해야 된다는 것을 의미하는 것입니다.
이는 웹에서 디자인을 할 때 화소 밀도가 다른 스크린에서 UI 요소의 크기가 다르게 출력되는 것을 방지할 수 없다는 것을 의미합니다.
5. 마무리
머티리얼 기초 중 레이아웃에서 화소 밀도(Pixel density)를 이해하는 것은 머티리얼 디자인의 사이즈를 구성하는데 중요한 내용입니다. 많은 작업자가 이 개념을 이해하지 못하여 기존에 디자인 개념인 픽셀(px, Pixel)과 혼동하는 일이 많이 발생합니다.
이 개념에 대한 이해는 여러 디바이스에서 균일한 디자인을 표현하기 위해 중요한 것이며, 개발자와 커뮤니케이션을 하기 위한 측면에서도 매우 중요합니다. 혹시라도 내용에 대한 이해가 잘 안 된다면 댓글로 질문을 해주시면 추가로 부연설명을 할 수 있도록 하겠습니다.
다음 내용은 반응형 레이아웃 격자(Responsive layout grid)에 대해서 다루도록 하겠습니다. 그럼 다음 시간에 뵙겠습니다.
댓글
댓글 쓰기