brunch

라이킷 293 댓글 13

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by maus x maus Jun 12. 2016

이해하기 쉬운 픽셀 밀도

픽셀 밀도가 무엇이며 디자인에 어떤 영향을 주는가

본 포스트는 UX 코스 중 일부인 Sketch Master 내용을 발췌한 것입니다.

*디바이스: 안드로이드 폰, 아이폰, 태블릿, 스마트워치 등의 장치

동영상은 본 포스트 내용의 대부분의 내용을 다루고 있습니다.

픽셀 밀도란 공간(대부분 inch에서 사용)에 픽셀이 들어가는 물리적인 수치를 말합니다.

첫 번째 맥킨토시 컴퓨터는 인치당(inch) 72픽셀이었습니다. 수치만 보면 밀도가 높아 보이질도 모르지만 실제론 큰 사이즈의 픽셀들로 구성되어야 했습니다.

오리지널 맥 아이콘 디자인 made by Susan Kare.

Susan Kare 웹 사이트

이후 디스플레이 기술은 엄청나게 발전했습니다. 오늘날 대부분의 컴퓨터 모니터는 115에서 160ppi로 구성되어있습니다.

이 이야기의 새로운 챕터는 애플이 2010년 inch 당 픽셀을 두배로 올려 엄청나게 선명한 레티나 디스플레이를 소개하면서 시작합니다. 그 결과는 우리가 지금까지 본 어떠한 것보다 훨씬 더 선명 그래픽이었습니다.

ppi(pixel per inch) 1inch에 들어가는 픽셀 개수

메일 아이콘의 봉투와 텍스트 레이블의 선명함이 차이가 난다.

UI를 위한 물리적으로 동일한 크기를 유지하기 위해 픽셀 면적이 두배가 되면 44px 크기의 버튼은 88px이 됩니다. 각기 다른 디바이스에 적용하기 위해선 아이콘을 예를 들면 디자이너는 원래 x1 크기 제작은 물론 x2 크기로 제작할 필요가 생겼습니다. 그러나 그러한 과정에서 문제가 있습니다.

이제는 "이 버튼은 44px 크기야"라고 말할 수 없습니다. 왜냐하면 다른 디바이스에서는 88px 이기 때문입니다. 수치 측정 단위엔 픽셀 밀도를 측정하는 독립적인 단위가 없습니다.

이에 따른 해결책은 "Point(pt)"이었습니다. 1pt는 비레티나에서 1px로 계산되고 레티나에서는 2px 계산되고 이는 동일한 수치로 해석됩니다. 그래서 디자이너가 "이 버튼은 44pt 크기야"라고 한다면 각 디바이스 픽셀 밀도 비율에 맞춰 적용하면 됩니다. x1, x2, x3 등..

PT와 DP

물론 pt는 애플 디바이스만을 위한 단위는 아닙니다. 최근에는 데스크톱 혹은 높은 수치의 ppi/dpi의 모바일 폰을 지원합니다.

구글은 density-independent unit for Android라는 구글만의 측정 단위의 정의를 내렸습니다. 그리고 구글이 정의한 측정단위는 'pt'라고 부르지 않고 'DIPs(density-independent pixels)'라고 부르고 이를 줄여서 'dp'라고 부릅니다. dp는 iOS의 pt와 동일한 수치 값을 가지지는 않지만 개념은 동일합니다.

둘 다 디바이스의 배율을 사용하여 픽셀 단위로 변환될 수 범용적 수치 측량 단위입니다.

*안드로이드(폰)을 위한 독립 밀도 단위

그렇다면 pt의 물리적 크기가 어떤지 궁금하실 거 같은데 디바이스 각각의 변화폭을 최소한의 제어로 통제가 가능하기 때문에 UI 디자이너가 크게 걱정할 부분은 없습니다.

그래서 디자이너는 디바이스 제조사가 적합한 픽셀 밀도를 제대로 구현한 것으로 신뢰할 수밖에 없습니다.

1배, 2배, 3배, 또는 다른 비율로 디자인 에셋을 대비하는 것에 집중해야 합니다.

그러나 정말로 pt수치 크기가 궁금해도 애플 디바이스는 inch와 pt사의에 일정한 변환 값이 없습니다.

디바이스에 따라(아랫부분 스케일 개념 참조) 수치 값이 매번 다르기 때문에 1pt가 나타내는 단일 픽셀 밀도는 없습니다. iOS에서 포인트(pt)는 inch 당 132pt에서 163pt의 변화 폭을 가지고 있는 반면 안드로이드의 DP(DIPs)는 160ppi 기준으로 계산됩니다.

제어 가능한 복잡함

실제 제작을 위해 준비를 해볼까요? 초창기 시절 모바일 고해상도 모바일 디스플레이에는 픽셀 밀도를 간단하게 x1, x2로 제작하면 되었지만 지금은 다양한 픽셀 밀도의 디스플레이가 있어서 그리 쉽게 해결되지 않습니다.

안드로이드가 가장 접합한 예가 되겠는데:

아래 이미지를 보면 서로 다른 제조사에서 만든 6개의 다른 픽셀 밀도를 가진 디바이스가 있습니다. 그 뜻은 만약 6개 디바이스에 동일한 크기로 보일 아이콘을 제작한다고 하면 6개의 각각 다른 사이즈가 필요하게 된 것입니다. 애플의 경우엔 2~3개의 크기가 다른 아이콘이 필요할 것입니다.

x1 크기의 벡터로 만들기

이 모든 문제를 해결할 몇 가지 실용적인 사례가 있습니다.

첫 번째는 디자인을 벡터로 작업하는 것입니다. 그렇게 하면 인터페이스, 아이콘 그리고 그래픽을 어떠한 크기로 확장 가능할 수 있습니다.

두 번째는 모든 디자인 요소를 x1 비율로 디자인하는 것입니다. 다른 말로는 모든 측정 단위를 pt 기준으로 하여 디자인 에셋을 '내보내기(export)' 할 때 디바이스의 최종 픽셀 밀도(x1, x2, x3 등)로 보다 더 다양한 픽셀 밀도까지 확장할 수 있습니다. 왜냐하면 x2크기의 그래픽을 150%에서 300%로 내보내게(export) 되면 결과물이 뿌옇게 보이는데 x1 그래픽을 200%, 300%로 늘려도 선명함을 유지하게 됩니다.

그래서 표준 크기의 아이폰 목업은 750×1334px이 아닌 실제로 보이는 375×667px로 제작되어야 합니다.

대부분의 디자인 소프트웨어 (제가 알고 있는 유일한 예외는 Flinto)는 pixel에서 pt를 구분하지 않기 때문에 x2, x3 크기로 내보내는 유연함은 실제 pt를 pixel 단위로 작업하는 디자이너 개개인에 달려있습니다.

들킬 때까지 속여라

이 부분은 약간 어려운 테크닉인데 알면 좋을 거 같아 적어봅니다. 가끔 어떤 디바이스는 눈속임을 합니다.

px과 pt의 비율이 동일하다고 하는데 예를 들어 x3의 경우에 실제로 크기를 확인해 보면 편의를 위해 x2.61 임에 불구하고 x3이라고 합니다. 실제로 아이폰 6 플러스가 이러한데 아이폰 플러스는 인터페이스를 1242×2008px에서 1080×1920 화면으로 강제로 줄여(그래픽 칩이 실시간으로 화면을 줄여줌) 버립니다.

아이폰6 플러스는 x3 크기임에 불구하고 87% 크기를 줄여버림. 대충 맞네 뭐..

이미지가 87% 정도 조금 줄였는데도 스크린에 표시되는 결과는 그래도 좋아 보입니다- 거의 x3 크기의 화면임에 불구하고 1px 라인 조차 무척 깨끗하고 선명하게 보입니다. 제가 애플의 아이폰 플러스에 대한 정보는 전무하지만 아마 애플은 가까운 시일 내에 진정한 x3 크기의 아이폰 플러스를 출시할 것입니다.

현재 판매되고 있는 아이폰 플러스는 아마도 들키기 전까진 눈속임을 하고 있는 것일 겁니다.

(Bruce Wang 이 쓴 아이폰6 플러스 화면 포스트 참조)

이렇게 정수가 아닌데도 크기를 늘리는 것은 적합한 걸까요? 궁극적으로 이에 대한 증거는 푸딩(디저트 한 종류) 안에 있습니다. 눈에 보이지 않을 만큼 미묘한 크기 변화인지?

수많은 안드로이드 폰들 역시 pixel에서 pt비율로 표준 크기 방식을 사용합니만 아쉽게도 몇몇 폰은 어설프게 구현되고 있습니다. 이러한 크기 방식이 별로인 게 어떤 경우에는 픽셀이 딱 맞아떨어지듯 선명하게 보여도 몇몇 크기를 키우면 1px 라인이 1.15px 이 되는 등, 뿌옇게 보이는 결과를 가져다줍니다.

여러분이 저처럼 픽셀을 수놓듯 하나하나 정확히 작업하는 픽셀 장인이 아니다 할지라도 디자인 요소가 우리 눈에 선명하게 표시하기 위해 전체 픽셀을 정렬해야 한다는 사실을 부정할 수 없을 겁니다.

아쉽게도 픽셀 밀도가 x4 이상의 범위로 넘어가면 소수(예: x2.61)로 크기 확장되어 나타나는 흐릿하게 보이는 현상이 그래픽을 보는데 더욱 어렵게 만들 것입니다. 그래서 저는 디바이스 제조사도 시간이 지남에 따라 x1 제작 방식을 따를 거라 예상해봅니다.

사람이 보는 크기의 인식

픽셀 밀도에 관해서는 잠시 접어두고 다른 것에 대해 생각해 보시죠.

디바이스를 통틀어 모든 아이콘, 버튼, 텍스트, 툴바 같은 것들은 하상 물리적으로 같은 크기가 되어야 할까요? 모든 장치에서 같은 크기를 유지하는 게 맞나요? 일반적인 합의는 경우에 따라 다를 것입니다.

입력 방식에 따른 정확도 (터치 vs 마우스커서)

실제 경험하는 디바이스 화면 크기

사용자와 화면과의 거리

마지막 두 개는 서로 긴밀한 내용인데 왜냐하면 태블릿은 폰보다는 큰 화면을 가지고 있고 약간은 거리를 두고 보기 때문입니다.

그리고 노트북, 데스크톱 그리고 TV를 생각해보면 스크린 사이즈는 거리가 멀수록 크기가 커집니다.

gif가 깨지네요..

https://cdn-images-1.medium.com/max/2000/1*FRI5CAE7hYQ6APitVDXApw.gif

TV 화면에서 버튼 크기는 멀리서 보는 것을 감안하고 만들었기 때문에 여러분이 가진 폰과 같은 크기일지도 모릅니다.

여기 가장 현실적인 사례가 있습니다. 태블릿에서의 앱 아이콘은 폰보다 크기가 커야 합니다 그렇게 하기 위해 두 가지 방법으로 구현할 수 있는데 하나는 픽셀 밀도는 낮추는 것이 있고 다른 하나는 버튼 크기를 바꾸는 것이 있습니다.

픽셀 밀도 낮추기

거대한 스크린은 멀리서 보기 때문에 보통 낮은 픽셀 밀도를 가지고 있습니다. 일반적으로 TV는 생각보다 아주 낮은 인치당 40픽셀을 가지고 있습니다. 아이폰 레티나는 326ppi인 반면 아이패드 레티나는 대략 226ppi 정도의 픽셀 밀도를 가지고 있습니다. 아이패드의 큰 픽셀(스크린은 덜 빽빽함)이 인터페이이스를 약간 크게 보이게 해줍니다. 아이패드 스크린과 사용자와의 거리를 계산한것이도 합니다.

크기 바꾸기

픽셀 밀도를 낮추는 것만으로는 충분하지 않습니다. 경우에 따라 특정 디자인 요소들은 큰 크기로 만들어야 하기도 합니다. 아이패드 앱 아이콘에서 이러한 경우가 발생하는데 아이폰에서는 앱 아이콘이 60x60 크기인데 아이패드의 큰 스크린은 더 많은 공간을 필요로 합니다 그래서 76x76 크기의 앱 아이콘을 사용하여 매우 현실적인(시각적으로도) 개선이 됩니다.

각 디바이스에서 디자인 요소의 크기를 변경하게 되면 디자이너는 더 많은 작업을 하게 됩니다.

이러한 것은 애플 디바이스가 안드로이드보다 더 많은 사이즈 제작을 필요로 하는 몇 안 되는 상황입니다만 운 좋게도 실제 앱 아이콘 세상에선 그리 자주 일어나는 일은 아닙니다.

재확인?

오늘 이해하기 쉽게 이미 공하나는 복잡함에 대해 많은 얘기를 했습니다만 다행히 인터페이스 디자인은 단순히 pt 혹은 dp 같은 독립 수치 단위의 밀도만 계산하면 해결되는 문제입니다. 앱 아이콘 관련해서 정말 복잡하고 확인해야 할 항목들이 많지만 쉽게 제작하기 위한 템플릿도 많이 있습니다.