픽셀 밀도(Pixel Density)에 대한 설명
픽셀 밀도란 무엇이며, 어떻게 작동하고, 이것이 디자인에 미치는 영향.
(출처 :[Pixel Density, Demystified – Peter Nowell – Medium]의 기사를 번역 및 가공한 콘텐츠입니다.)
이 애니메이션 영상은 기사의 대부분의 내용이지만 더 자세한 설명이 필요하다면 이 기사가 도움이 될 것입니다.
픽셀 밀도(Pixel Density)는 물리적 공간 (1인치) 안에 얼마나 많은 픽셀이 들어가는지를 나타냅니다.
1세대 Mac의 경우 1 인치당 72 픽셀이 사용되었습니다. 당시 그래픽은 이런 거대한 픽셀을 가지고 있었습니다.
오리지널 맥에서의 픽셀, designed by Susan Kare.그 뒤로 디스플레이 기술은 대폭 진화했으며, 심지어 가장 기본적인 컴퓨터 화면조차도 115 ~ 160 ppi (pixel per inch-인치당 픽셀 수) 범위에 있게 되었습니다.
픽셀의 새 시대는 2010년에 Apple이 레티나 디스플레이의 iPhone을 선보였을 때 시작되었습니다.
레티나 디스플레이는 인치당 픽셀을 두 배로 늘려서 출력하는 매우 선명한 화면으로, 우리가 이제까지 본 어느 그래픽보다 훨씬 더 선명한 그래픽을 구현했습니다.
아이콘과 텍스트에서 선명도가 차이납니다.레티나 디스플레이에서 사용자 인터페이스(User interface, UI)가 기존과 동일한 물리적 크기를 유지하게 하려면 디자이너들은 픽셀 크기를 두 배로 키워서 디자인해야 합니다.(일반 화면에서 44px의 높이처럼 보이게 하기 위해 레티나 디스플레이에서는 88px로 키워서 디자인을 해야 합니다.)
레티나 디스플레이를 수용하기 위해 디자이너들은 원래 버전인 “1x”배율과 새로운 버전인 “2x”배율로 그래픽을 제공합니다.
그러나 이는 또 다른 문제를 불러일으켰습니다.
디자이너들이 더 이상 “이 버튼의 높이는 44px이야”라고 말할 수 없게 된 것입니다.
레티나에서는 88px이 44px로 보이기 때문에 픽셀 값이 상대적인 개념이 되었기 때문입니다.
이런 상황에서 해결책은 "Points"또는 "pt”가 될 수 있습니다.
1pt는 레티나 전 세대의 디스플레이에서 1px이며, 2x 인 레티나 디스플레이에서는 2px과 동일합니다.
디자이너가 "이 버튼은 44pt의 높이여야 해”라고 말하면 해당 숫자의 pt를 디스플레이가 가진 자체 픽셀 밀도의 비율로 곱해서 해당 px이 몇 px인지 알 수 있습니다.
(44pt의 경우 - 레티나 전 디스플레이 : 44px (1x) / 레티나 디스플레이 : 88px (2x) / 애플의 플러스 사이즈 아이폰 : 132px)
PT & DP
이 현상은 애플의 기기뿐 아니라, 데스크톱이나 모바일 등 모든 운영체제에서 높은 ppi(pixel per inch) / dpi (dots per inch) 화면을 지원하는 모든 기기에 대한 이야기입니다.
Google은 안드로이드에 대해 자체적으로 밀도 독립적 픽셀의 개념을 정의했습니다.
그들은 "pt(point)"라고 부르지 않으며, 밀도 독립적 픽셀을 나타내는 "DIPs(Density-independent Pixels)”라고 불립니다. (약자는 "dp"입니다.)
dp는 iOS의 pt와 동일하지는 않지만 근본적 원리는 동일합니다.
이는 보편적으로 널리 쓰이는 측정 단위이며 장치의 배율 (2배, 3배 등)을 사용하여 픽셀로 변환할 수 있습니다.
UI 디자이너가 기기별 화면 해상도에 대해 걱정할 필요는 없습니다.
디바이스 제조업체가 해당 디바이스에 적합한 픽셀 밀도를 결정하면 그에 따라 1 배, 2 배, 3 배 또는 다른 비율로 디자인 에셋을 준비하면 됩니다.
이 글을 읽으며 아마 1pt의 물리적 크기에 대해 궁금할 수도 있습니다.
애플 기기에서는 인치와 pt사이의 상수 변환은 없습니다.
즉, 1pt를 나타내는 단일 픽셀 밀도는 없으며, 이것은 디바이스별로 다릅니다. (기사 하단 부분 참조)
iOS에서 pt는 1인치당 132pt에서 163pt까지 다양합니다.
Android에서 DIP(Density-independent Pixels)는 항상 160 ppi(pixel per inch)를 기반으로 합니다.
고해상도의 카오스
위의 개념들을 현실에 적용해 보겠습니다.
고해상도 모바일 디바이스 초기 픽셀 밀도는 1x 또는 2x로 간단했습니다. 그러나 이제는 지원해야 할 픽셀 밀도의 종류가 다양해졌습니다.
안드로이드는 완벽한 예입니다. 이 기사를 쓰는 현재, 각기 다른 디바이스 제조업체에서 6 가지 공통으로 사용되는 픽셀 밀도가 있습니다.
즉, 이 모든 화면에서 동일한 크기로 나타나는 아이콘에는 실제로 6 개의 다른 사이즈의 아이콘이 필요합니다.
벡터에서의 디자인, 1x로 디자인하라
이 모든 것을 해결할 수 있는 방법이 있습니다.
1. 다양한 해상도를 지원하려면 벡터 베이스로 디자인해야 합니다.
벡터 베이스로 디자인하면 UI, 아이콘 및 그래픽을 어떤 크기로도 확장할 수 있습니다.
2. 1x 스케일로 디자인해야 합니다.
1x로 디자인하면 모든 아이콘의 사이즈를 재고 그에 맞는 디자인을 하거나, 한 아이콘을 각 디바이스의 사이즈에 맞게 여러 번 스케일 조정할 필요가 없습니다.
1x 스케일로 디자인 한 뒤 최종 픽셀 치수(2x, 3x 등)로 내 보낼 때 다양한 고밀도 픽셀로 확장하면 됩니다.
그렇다면 2x 그래픽을 기준으로 50%, 150% 단위로 스케일을 변경하면 어떨까요?
3x 그래픽을 생성하기 위해 2x 그래픽을 150% 확장하면 경계선이 흐리고 오프셋 된 그래픽이 나오기 때문에 1x 그래픽을 200% 및 300%로 스케일을 조정하는 것이 시각적인 선명도를 유지하는 좋은 방법입니다.
표준 크기의 iPhone 용 목업은 실제로 표시되는 해상도인 750 × 1334가 아닌 375 × 667이어야 합니다. 375px을 레티나 디바이스에서 750px로 렌더링 하기 때문에 원래 픽셀은 375px이지만 목업 사이즈가 750px로 표시되는 곳이 종종 있습니다. 이는 위에서 말한 픽셀이 상대적인 개념이 된 문제 상황 중 하나입니다.
또한, 750px로 디자인할 경우 다른 디바이스를 지원할 때 2x그래픽을 기준으로 50%, 150% 단위로 스케일을 변경하는 것과 동일하기 때문에 이는 좋은 선택이 아닙니다.
대부분의 디자인 툴은 포인트를 픽셀과 구별하지 않습니다 (Flinto는 내가 알고 있는 유일한 예외입니다).
포인트로 디자인 한 뒤 픽셀을 적용하는 것은 디자이너의 몫입니다.
1x로 디자인하면 다양한 배율로 변형할 수 있을 뿐 아니라 선명도를 유지하는 px값을 가진 그래픽들을 내보낼 수 있습니다.
정확하지 않은 픽셀밀도
이것은 좀 더 고급 기술이지만 알아두면 좋습니다. 때로는 디바이스의 픽셀 밀도가 정확하지 않습니다.
아이폰 플러스는 px대 pt비율이 3x인 척하지만 실제로는 2.61x이고 이미지는 편의상 3x로 스케일 됩니다.
아이폰 플러스의 그래픽 칩은 실시간으로 스케일링을 수행하여 3x 일 때, 1242 × 2208의 인터페이스를 축소하여 1080 × 1920 화면에 맞춥니다
(역주 : 1x로 디자인된 414px의 이미지를 3x크기의 iPhone Plus용 1242px이미지로 변환해서 iPhone Plus에 넣으면, iPhone Plus는 이 이미지의 크기를 1080px로 변환함).
아이폰 플러스는 3x의 이미지를 87 % 확장합니다.이미지가 조금만 축소(87%)되기 때문에 이는 문제가 없는 것처럼 보입니다.
그리고 내부 정보는 없지만, 앞으로 Apple은 진짜 x3 iPhone Plus를 출시할 가능성이 있습니다. 현재의 아이폰 플러스는 아마 그것을 만들 때까지 가짜 x3를 사용할 것입니다.(Bruce Wang은 iPhone 6 Plus 스크린에 관한 훌륭한 기사를 썼습니다.)
안드로이드 또한 표준 px 대 pt 비율을 달성하기 위해 스케일링을 사용하지만, 일부 안드로이드 디바이스는 그렇지 않습니다.
디테일한 스케일링이 아닌, x2나 x3 같은 정수로 퉁치는 스케일링으로 접근해도 괜찮을까요?
궁극적으로, 이런 스케일링은 우리가 그래픽을 어떻게 느끼냐에 달려있습니다.
이렇게 스케일을 조정하는 것은 바람직하지 않을 수 있습니다.
스케일 조정(즉, 1 픽셀 라인이 1.15 픽셀이 됨)으로 인해 특정 스케일에서 선명하고 픽셀이 완벽하도록 디자인된 모든 것이 흐려지기 때문입니다.
우리가 광적으로 완벽한 픽셀을 좋아하지는 않아도, 디자인 요소가 선명하게 보이기 위해서는 요소들이 픽셀 크기에 맞게 정렬되어야 한다는 것은 부인할 수 없는 사실입니다.
픽셀 밀도가 4x 이상으로 증가함에 따라 비 정수 스케일링으로 인한 흐려짐을 감지하기 어려워지고 있습니다.
시간이 갈수록 디바이스 제조업체는 스케일 조정에 여러 가지 접근법을 더 많이 사용할 것으로 예측됩니다.
눈의 스케일 인식
잠시 픽셀 밀도를 제쳐 놓고 우리는 또 다른 중요한 질문을 해봐야 합니다.
디바이스에서 버튼이 항상 동일한 물리적 크기를 유지해야 할까요?
물론 버튼을 예제로 사용하고 있지만 아이콘이나 텍스트 또는 툴바도 포함하는 이야기입니다.
이 모든 요소들이 모든 장치에서 일정한 크기여야 할까요?
그 답은 "장치에 따라 다르다"일 것입니다.
UI의 크기는 다음의 요소들에 따라 달라집니다.
입력 방법의 정밀도 (즉, 손가락 vs 커서)
화면의 실제 크기.
화면과의 거리.
마지막 두 항목은 서로 비슷합니다.
태블릿이 휴대전화보다 큰 화면을 가지고 있기 때문에 더 멀리 놓고 볼 수 있습니다.
그런 다음 랩탑, 데스크톱, TV... 화면 크기에 따라 거리가 늘어납니다.
TV 화면의 버튼은 실제로는 핸드폰 크기 일 수 있습니다.
태블릿의 앱 아이콘은 휴대전화의 아이콘보다 커야 하며 두 가지 방법으로 크게 만들 수 있습니다
1. 더 낮은 픽셀 밀도를 사용하는 것
2. 버튼의 크기를 변경하는 것
더 낮은 픽셀 밀도
멀리서 사용하는 대형 화면은 픽셀 밀도가 낮아지는 경향이 있습니다.
일반적인 TV를 시청할 때 TV는 인치당 40 픽셀 정도로 밀도가 낮을 수 있습니다.
아이패드의 레티나 디스플레이는 약 264 ppi(pixel per inch)이고, 아이폰의 레티나 디스플레이는 326 ppi(pixel per inch)입니다.
같은 픽셀이라도 아이패드의 픽셀이 아이폰의 픽셀보다 더 크기 때문에 (화면의 밀도가 낮아짐) 전체 인터페이스가 약간 커집니다.
이를 통해 동일거리에서 아이폰의 아이콘보다 아이패드의 아이콘이 더 잘 보이는 현상을 설명할 수 있습니다.
크기의 변경
그러나 낮은 픽셀 밀도를 사용하는 것만으로는 충분하지 않습니다.
때로는 디자인 요소가 디바이스의 공간에 맞춰 더 커질 필요가 있습니다.
이런 현상은 아이패드의 앱 아이콘에서 발생했습니다.
아이폰의 경우 아이콘의 크기가 60x60이지만 아이패드의 큰 화면은 더 많은 공간을 제공하므로 76x76 앱 아이콘을 사용할 때 더 실용적(및 시각적)인 효과가 있습니다.
서로 다른 장치에 대해 요소의 치수를 변경하면 디자이너가 더 많은 작업을 해야 할 수 있습니다.
이는 Apple 기기가 Android 기기보다 더 많은 크기를 요구하는 몇 가지 시나리오 중 하나입니다.
다행히도 앱 아이콘 영역 외에서는 요소의 크기를 변경하는 경우가 흔하지 않습니다.
우리는 이미 존재하는 복잡성에 대해서만 논의했고, 다행히도 이런 주제는 템플릿을 사용하면 도움이 됩니다. 다음은 이러한 주제에 대한 리소스 목록입니다.
리소스 목록
모든 종류의 기기 (Android, iOS, Mac, Windows 등)에 대한 사양 목록입니다. 화면 크기, 픽셀 밀도 및 장치가 사용자의 눈으로부터 유지되는 대략적인 거리까지도 얻을 수 있습니다. ScreenSiz.es도 비슷한 리소스입니다.
매우 포괄적인 디자인 템플릿 (모든 주요 디자인 소프트웨어에서 사용 가능)입니다. Android, iOS, macOS, tvOS, watchOS, Windows, Windows Phone 등의 최신 사양에 대한 실제 및 참고 자료로 유용합니다.
Sebastien Gabriel의 광범위한 가이드는 Android 및 iOS 디자이너를 위한 더 자세한 내용과 실제 워크 플로를 다루고 있습니다.
감사합니다.
