픽셀 밀도와 PT 개념
쉽게 설명하는 디스플레이 단위(1편)
이전 편에서 픽셀에 대한 개념과 함께 해상도 단위인 픽셀 밀도를 언급했었다. 이번 편에서는 픽셀 밀도를 쉽게 설명해보려 한다. 프로덕트 디자이너(Product Designer)라면, 해상도 단위가 iOS와 aOS에서 어떻게 사용되는지 알아야 다음과 같은 문제들을 해결할 수 있다.
레이아웃 및 디자인 호환성 - 다양한 디바이스 크기와 해상도에 호환되는 레이아웃으로 디자인
이미지 및 아이콘 & 폰트 및 텍스트 크기 조정 - 운영체제(iOS, aOS)에 따른 해상도 단위를 사용한 제작
그래픽 리소스 관리 - 운영체제(iOS, aOS)에 따른 그래픽 리소스 관리를 통해 앱의 용량 관리
+ 추가) 그래픽 리소스 관리에 대해서는 이해를 돕기 위해 예시를 보자. 고해상도 디바이스에서는 더 크고 선명한 이미지가 필요하다. 이런 이미지는 파일 크기가 크고 많은 저장 공간을 차지한다. 그래서 리소스를 관리할 때 고해상도와 저해상도의 이미지를 따로 준비해서, 디바이스의 해상도에 맞게 적절한 이미지를 쓰도록 만드는 것이다. 그러면 저해상도 디바이스에서는 고해상도 디바이스에서 사용하는 이미지를 똑같이 사용하지 않으므로, 앱의 용량과 버벅임을 줄일 수 있다. 정리하면 고해상도 디바이스와 저해상도 디바이스에 각각 맞는 이미지를 준비해 리소스를 효율적으로 관리하는 것이다.
픽셀 밀도(Pixel Density)란?
1인치 크기의 물리적 공간 내에 들어가는 픽셀의 수
픽셀 밀도는 해상도를 표현하는 단위로 이미지에 들어가는 픽셀의 수를 의미한다. 1인치 내에 픽셀이 많을수록 픽셀 밀도가 높아서 이미지가 선명하고, 1인치 내에 픽셀이 적을수록 픽셀 밀도가 낮아서 이미지가 흐릿하다.
픽셀 밀도의 단위(PPI, DPI)
픽셀 밀도는 2가지 단위가 있다. PPI(Pixels per Inch)와 DPI(Dots per Inch)이다.
두 단위 모두 이미지의 가장 최소 단위인 픽셀(Pixel) 혹은 점(Dot)이 1인치 안에 들어가는 수를 의미한다. 여기서 DPI는 Pixel이 아닌데 왜 픽셀 밀도라고 표현할까? PPI와 DPI는 그래픽 표현의 차이, 그러니까 용도의 차이가 있지만 1인치 안에 존재하는 최소 단위(Pixel or Dot)의 수를 표현하는 역할은 동일하기 때문에 일반적으로 둘 다 픽셀 밀도라고 표현하는 것이다. 두 단위의 그래픽 표현(용도)는 다음과 같다.
PPI(Pixels per Inch) : iOS 디바이스에서 출력되는 이미지 해상도를 표현하는 단위
DPI(Dots per Inch) : aOS 디바이스 혹은 인쇄물에서 출력되는 이미지 해상도를 표현하는 단위
결국 디자인할 때 디스플레이의 아이콘을 제작하든, 포토샵에서 출력을 위한 이미지를 제작하든 해상도 단위인 PPI와 DPI는 (거의) 같은 개념이라 생각하면 된다.
픽셀 밀도와 작업 변화
디자인 작업할 때 픽셀 밀도가 미치는 영향
픽셀 밀도는 디스플레이 기술과 함께 발전한 개념이다. 2006년에 출시한 1세대 Mac의 디스플레이는 72ppi로 제작되었다. 그래서 아이콘 같은 이미지가 1인치당 72픽셀로 구성되어 선이 매끄럽게 표현되지 않았다. 하지만 디스플레이가 72 ppi 해상도만 지원하기 때문에 디자이너들은 72ppi 해상도에 맞춰 개발자에게 전달해야 했다.
Macintosh 오리지널 픽셀, designed by Susan Kare(맥 아이콘 개발자)초기에 낮았던 픽셀 밀도는 2010년 Apple이 레티나 디스플레이(Retina Display) 기술을 공개하고 디자이너들의 작업에 큰 변화가 생겼다. 이 기술은 인치당 픽셀을 두 배로 높여 이미지와 텍스트를 기존보다 훨씬 더 선명하게 표현하기 시작했다. 즉 이미지나 텍스트 요소를 자동으로 보정해서 고해상도 디스플레이에서도 선명하게 표현하는 것이다. 이러한 기술 발전으로 디바이스의 해상도가 높아지고 다양해지기 시작(여러 기업들이 해당 기술을 이용해 고밀도 디스플레이 제품을 제작)하면서, 44px 크기인 버튼을 제작했을 때 다른 디바이스에서는 88px 크기로 나타나는 현상이 발생했다. 다시말해, 각기 다른 디바이스에 적용하기 위해 아이콘을 여러 크기로 제작해야 하는 것이다. 이는 각 디바이스의 픽셀 밀도와 해상도 차이때문에 발생하는 문제였다.
새로운 단위(pt) 체계 출현
각기 다른 디바이스의 픽셀 밀도와 해상도 차이를 일관되게 표현하는 시초, pt*포인트(point)
이 문제를 해결하기 위해 마련한 방안이 바로 포인트(point)*줄여서 pt 단위 체계이다. 일부 글에서는 디스플레이에서 작업한 디자인이 실제 인쇄물과 동일한 크기로 보이기 위해 pt 단위가 도입되었다고 얘기한다. 그러나 포인트(pt) 단위가 디자인 작업물과 인쇄물 간의 차이를 맞추기 위해 도입된 것은 아니다. 포인트(pt) 단위는 원래부터 글꼴 크기를 측정하기 위해 사용되었고, 디지털 디자인 시 글꼴 크기와 UI 요소 크기를 일관되게 유지하는 데 도움을 주기 위해 글자 단위의 체계를 반영했을 뿐이다.
인쇄물에서의 pt(point) : 1인치의 1/72 = 1인치를 72로 나눈 값*0.3528mm
디지털에서의 pt(point) : 1인치에 72px이 존재 = 72ppi
→ 1pt : 1px = 1 : 1
이와 같은 논리로 초기에 72ppi로 제작된 iOS에서는 pt 단위로 작업하여, 여러 해상도의 디바이스에서도 UI 요소를 일관된 크기로 유지할 수 있다.
1pt = 1인치의 1/72
72ppi = 1인치당 72px
→ 72ppi에서 1px = 1pt
72ppi에서 1px이 1pt와 같으므로, '144ppi에서 2px', '216ppi의 3px'은 모두 1pt이기 때문이다. 그래서 디자인 작업을 할 때 pt 단위로 1배수를 작업하고 2x, 3x, 4x.. 이런 식으로 배수 단위로 UI 요소를 추출한다. 그러면 10pt 크기의 작업물을 디바이스에 적용할 때, 해상도가 72ppi인 디바이스는 10px만큼이 1배수로 설정되어, 144ppi인 디바이스는 2배인 20px, 216ppi인 디바이스는 3배인 30px로 처리된다.
피그마(Figma)에서 디자인 요소를 추출할 때 배수 설정을 확인할 수 있다.디자이너로 일하다보면 가끔 포토샵이나 일러스트를 사용해 화면을 디자인하는 사람을 볼 수 있다. 혹은 미드급 경력인데 Figma로 같은 화면을 모든 디바이스마다 작업하는 사람도 있다. 이 글을 읽었다면 그들이 왜 그렇게 작업하는지 이해가 될 것이다. Figma, Xd, Sketch 등의 인터페이스 디자인 전용 앱이 나오기 전, 기술 발전으로 픽셀 밀도 개념이 발전하기 전에는 그 작업 방식이 최선이었기 때문이다. 그래서 지금의 디자인 개념들이 어떻게 발전되었는지를 아는 것은, 디자인 세대 간 소통을 돕고 개발자와 협업할 수 있는 작업물을 만들 수 있다. 다음 편에서는 pt와 함께 많이 쓰이는 dp에 대해 알아보자.
정리
1. 픽셀 밀도 정의 : 1인치 안에 존재하는 픽셀(Pixel) 수
2. 픽셀 밀도는 PPI와 DPI가 있다.
❶ PPI(Pixels per inch) : iOS 디바이스에서 출력되는 이미지 해상도 단위
❷ DPI(Dots per inch) : aOS 디바이스 혹은 인쇄물에서 출력되는 이미지 해상도 단위
❸ PPI와 DPI는 (거의) 같은 개념이다.
3. DPI는 Pixel이 아닌데 픽셀 밀도라고 부르는 이유
→ 1인치 안에 존재하는 최소 단위의 수를 표현하는 역할이 동일하기 때문
4. 픽셀 밀도는 레티나 디스플레이(Retina Display) 기술과 함께 발전
❶ 레티나 디스플레이 기술 : 인치당 픽셀을 두 배로 높여 이미지와 텍스트를 선명하게 표현
❷ 레티나 디스플레이 기술이 공개되면서 고해상도 디바이스가 발전
❸ 각기 다른 디바이스에 적용하기 위해 디자인 에셋을 여러 크기로 제작하는 문제 발생
❹ 디자인 에셋을 일관되게 표현하기 위해 pt*포인트(point) 단위 체계 도입
5. pt 개념 정리
❶ pt*포인트 : iOS에서 사용하는 디스플레이 단위
❷ 1pt : 1px = 1 : 1 → 1pt = 1px
❸ pt 단위를 이용해 디자인 에셋을 1개 제작 → 여러 디바이스 대응 가능
