'픽셀' 제대로 알고가자
픽셀이 무엇인지 픽셀의 밀도는 무엇인지 정확히 알고 있자!
디자이너라면 매일 지겹도록 '픽셀'이라는 단어를 듣게 될 것입니다. 처음 디자인할 때는 픽셀과 픽셀의 밀도가 왜 중요한지 모르고 그냥 '웹디자인은 1920x1080 사이즈에 72 ppi로 디자인하면 된다'라고만 알고 있을 뿐 왜 그래야 하는지 그 요소들은 무엇을 의미하는지 알지 못하였습니다.
기초가 튼튼하지 않은 건물은 쉽게 무너지듯 디자인을 하면 할수록 기본적인 요소들을 모르면 UI 디자인을 하면서 이해하지 못하는 것이 많아질 것입니다. 웬만한 디자이너분들은 다 알고 계시겠지만 제대로 알지 못하는 분들을 위해서 기본적인 픽셀과 픽셀의 밀도에 간해서 간략하게 설명해드리려 합니다.
1. PX (Pixel)
픽셀은 'Picture Element'의 단축어로 우리말로는 '화소'라고 한다. 픽셀이라는 것은 화면의 이미지를 구성하는 최소의 단위를 말합니다. 사격형으로 이루어져 있으며 해상도를 나타내고 있으며 픽셀의 수가 많아질수록 고해상도의 이미지라고 말합니다.
Pixel은 일반적인 물리적인 크기로 나타낼 수 없습니다. 간혹 가다 가로세로 100 pixel짜리의 아이콘을 만들었는데 그래서 그게 몇 cm, mm인데 라고 물어보는 사람이 있는데 픽셀은 논리적인 크기로 1 Pixel에 정확한 크기는 PPI를 어떻게 지정했는지에 따라 픽셀의 크기는 달라집니다.
픽셀 이미지 (사진출처 - Pexels.com)2. PPI (Pixel per inch)
PPI는 'pixel per inch'의 약자로 1인치당 몇 개의 픽셀로 이루어져 있는지를 나타내는 디스플레이의 해상도 밀도 단위입니다. 10 ppi는 정사각형의 한 면 1inch(2.54cm)에 10개의 픽셀이 있고, 총 10x10 = 100개의 픽셀로 이루어진다는 뜻입니다.
포토샵에서 맨 처음 도큐먼트 설정을 하는 창이 나오게 됩니다. 이때 도큐먼트의 가로세로 사이즈를 지정한 후 Pixel/inch라는 설정값이 나옵니다. 이때 사용하는 것이 바로 PPI설정값입니다. 일반적으로 아트웍이나 사진 편집의 설정값은 300 ppi이며 웹&모바일은 72 ppi로 설정하여 사용합니다.
아트웍 및 프린트 디자인의 기본 PPI 설정값
웹&모바일 디자인의 기본 PPI 설정값
같은 이미지의 72 ppi와 300 ppi의 100% 화면
위의 예시 사진을 보여드리면 아까 제가 Pixel에 대해서 설명드릴 때 Pixel의 크기는 물리적 단위가 아닌 논리적 단위기 때문에 유동적이라고 말씀드렸는데 사진의 크기가 다른 게 보일 것입니다.
포토샵에서는 PPI가 조정되면 모니터 화면 속에서 Pixel의 Inch대비 개수 변화이므로 PPI설정을 다르게 할 때 출력 시에 크기 변화는 없지만 모니터 화면 속에서는 사진 크기의 변화가 있습니다.
쉽게 설명하자면 픽셀은 유동적이지만 모니터는 Pixel이 고정되어있으니 웹이나 포토샵에서 inch당 픽셀 개수에 맞게 줄어드는 것입니다.
또한 우리가 포토샵에서 이미지를 늘리거나 줄일 때 이미지의 주변에 안티앨리어싱이라고 하는 계단현상이 일어나게 되는데요. 이러한 이유는 비트맵 기반이기 때문에 일어나는 현상으로 픽셀과 픽셀의 밀도에 영향이 있습니다.
저해상도의 사진을 크게 늘리려면 채워야 할 픽셀의 개수가 부족하므로 주변부 픽셀과의 평균값으로 표현하기 때문에 계단현상이나 블러가 들어가기 때문입니다.
(벡터 기반인 일러스트는 점과 선으로 이루어져 있기 때문에 이러한 현상이 일어나지 않아 일반적으로 아이콘을 제작할 때 일러스트로 제작합니다)
3. DPI (Dots per inch)
DPI는 'dots per inch'의 약자로 가로 세로 각각 1인치의 정사각형 안에 들어가는 점(Dot)의 수를 말합니다. 흔히 프린터의 성능 등 출력물에 대한 해상도를 나타낼 때 사용하는 단위이며 10 DPI는 정사각형의 한 면 1inch(2.54cm)에 10개의 점이 있고, 총 10x10 = 100개의 점으로 이루어진다는 뜻입니다.
PPI와 비슷한 의미지만 dpi는 인쇄 시에 사용하는 단위로 ppi와 같다고 생각해서는 안됩니다. 우리가 디자인용으로는 RGB를 사용하고 인쇄용으로는 CMYK를 사용하는 것처럼 다른 개념이라고 생각하시면 더 이해하기 쉬울 것입니다.
4. DP (Device Independent Pixel)
안드로이드 사이즈 단위, PPI가 다른 디바이스에서 px로 표기하면 밀도가 클수록 작게 보입니다. 그렇기 때문에 화소의 밀도에 따라서 변하지 않는 DP를 사용합니다. 즉 픽셀과 상관없이 어떠한 디바이스에서도 같은 비율을 유지한다는 의미입니다.
이러한 DP를 사용하게 된 건 2010년 애플이 레티나 디스플레이의 아이폰을 선보이면서 시작되었습니다. 레티나 디스플레이는 인치당 픽셀을 두배로 늘려 출력하므로 선명한 화면을 보여줍니다.
하지만 픽셀을 ppi에 따라 유동적으로 변하므로 1 배율에서 48px의 사이즈의 버튼을 레티나 디스플레이에서 같은 사이즈로 보여주게 하기 위해선 96px 사이즈의 버튼으로 제작해야 했습니다. 이러한 상황에서 나온 것이 iOS에서는 'PT' 안드로이드에서는 'DP'입니다.
DP를 사용한 각 디바이스 대응 예시5. PT (Point)
iOS 사이즈의 단위입니다. 구글에서 지정한 DP와 근본적인 원리는 동일하지만 'DP'처럼 비율로 늘어나는 게 아닙니다. 그러한 이유는 가변 영역과 고정 영역이 존재하기 때문입니다.
가변, 고정 영역이란 디바이스 사이즈에 따라서 빈 공간이 나타나지 않게 고정 영역(변하지 않는 영역)과 가변 영역(비율에 따라 변하는 영역)을 지정하여 모든 디바이스에 대응하는 방식입니다.
1pt는 1px과 달리 물리적 크기입니다. 애플 기기에서는 인치와 pt사이의 상수 변환이 없습니다. 즉 1pt를 나타내는 픽셀 밀도는 없고 디바이스별로 다릅니다.(하지만 안드로이드에서는 1DP는 160 ppi를 기반으로 합니다.)
DP와 PT를 사용하여 기기별 해상도를 대응할 필요 없이 스케치나 피그마 같은 백터를 기반으로 한 UI 디자인 툴에서 각 배율에 맞게 Export 해서 1x, 1.5x, 2x, 3x, 4x 각 비율로 Export 하여 굳이 2 배율을 사용하지 않고 1 배율로 디자인할 수 있게 되었습니다.
스케치 화면에서 좌측 하단의 Export option 예시이렇게 UI 디자인을 하기 위해선 다양한 용어들을 공부하고 그에 맞는 활용법을 알아야 합니다. 현재 많은 디자이너는 모바일 디자인에서 각배 율마다 정수로 떨어지게 하기 위해 1 배율로 8포인트 그리드 시스템을 사용하는데 이러한 이유는 다음 포스팅에서 '1 배율로 디자인해야 하는 이유'와 '8포인트 그리드 시스템을 사용해야 하는 이유'를 자세히 설명드리도록 하겠습니다.
