픽셀 밀도

픽셀 밀도는 화면의 물리적인 공간에 픽셀이 얼마나 촘촘히 들어 있는지를 나타냅니다. 보통 인치당 픽셀(PPI)로 측정하며 화면에서 글자와 이미지가 얼마나 선명하게 보이는지에 영향을 줍니다.

Related workflow terms: Retina 스크린샷.

픽셀 밀도와 화면 선명도

픽셀 밀도는 일반적인 시청 거리에서 픽셀 하나씩이 눈에 보이는지를 좌우합니다. 오래된 데스크톱 모니터에서 흔한 약 100PPI의 저밀도 화면은 픽셀이 보이고 글자 가장자리가 거칠게 느껴집니다. 200PPI 이상의 고밀도 화면에서는 픽셀을 구분하기 어려워져 글자가 부드럽고 이미지 세부 정보가 선명합니다.

Apple은 일반적인 거리에서 픽셀을 구분하기 어려운 밀도의 화면을 'Retina'라고 널리 알렸습니다. 팔 길이 정도 떨어져 보는 노트북은 대략 200PPI, 얼굴 가까이 드는 스마트폰은 대략 300PPI가 기준에 가깝습니다. 최신 주요 스마트폰은 400PPI를 넘어 맨눈이 구분하기 어려운 수준입니다.

시각적 차이는 큽니다. 220PPI 노트북에서 그린 글자는 같은 글자를 110PPI 외장 모니터에서 볼 때보다 눈에 띄게 선명합니다. 곡선이 부드럽고 가는 선이 또렷하며 작은 글자도 안티앨리어싱 흔적 없이 읽기 쉽습니다.

픽셀 밀도가 스크린샷에 미치는 영향

스크린샷은 화면에 렌더링된 물리 픽셀을 모두 담습니다. 110PPI 표준 모니터에서 너비 1440픽셀인 뷰포트는 너비 1440픽셀 스크린샷이 됩니다. 220PPI인 2x Retina 화면에서 같은 뷰포트를 찍으면 가로와 세로에 각각 픽셀이 두 배 들어가 너비 2880픽셀, 전체 픽셀 수 네 배인 스크린샷이 됩니다.

고밀도 화면의 스크린샷은 가로·세로 크기와 파일 용량이 더 크지만 세부 정보도 훨씬 많습니다. 논리적 크기인 1x로 줄여 표시하면 화면 영역보다 픽셀이 많아 매우 선명하게 보입니다.

서로 다른 원본 화면에서도 결과 크기를 일정하게 맞춰야 한다면 자동 캡처 도구에서 호스트 화면과 관계없이 기기 픽셀 비율을 지정할 수 있습니다. 1x 모니터와 3x 스마트폰에서 만든 스크린샷을 비교 가능한 결과로 정규화합니다.

기기 픽셀 비율

기기 픽셀 비율(DPR)은 픽셀 밀도와 소프트웨어가 보는 화면을 연결합니다. 논리적 CSS 픽셀 하나에 물리 픽셀이 몇 개 대응하는지 나타냅니다. DPR 1은 CSS 픽셀 하나가 물리 픽셀 하나이고, DPR 2는 CSS 픽셀 하나가 2x2인 물리 픽셀 네 개가 되는 뜻입니다.

운영체제와 브라우저는 DPR로 인터페이스 크기를 조절합니다. 너비 100CSS 픽셀인 버튼은 2x 화면에서 물리 픽셀 200개 너비로 렌더링됩니다. 사용자는 같은 논리적 크기로 보지만 세부 정보는 두 배입니다.

스크린샷의 출력 크기도 DPR이 정합니다. 가장 선명해야 하는 마케팅 에셋인지, 파일을 관리하기 쉬워야 하는 문서인지에 맞춰 목표 DPR을 알아야 알맞은 해상도로 캡처할 수 있습니다.

여러 기기에서 캡처를 모으는 순간 픽셀 밀도가 중요해집니다. 1x 외장 모니터, Retina MacBook, 모바일 에뮬레이션을 섞어 쓰는 팀은 DPR을 의도적으로 통일하지 않으면 에셋 크기가 들쭉날쭉해집니다.

흔한 실수

• 픽셀 밀도와 DPI를 혼동합니다. PPI는 화면의 인치당 픽셀, DPI는 프린터의 인치당 점을 뜻해 서로 다른 대상을 측정합니다. 스크린샷에서 중요한 값은 픽셀 크기와 캡처한 화면의 PPI입니다.
• 모든 스크린샷의 해상도가 같다고 생각합니다. 같은 웹페이지도 1x 모니터와 3x 스마트폰에서 찍으면 이미지 크기가 크게 다릅니다. 여러 기기의 스크린샷을 비교하거나 일괄 처리할 때 DPR을 고려하세요.
• 목적 없이 축소합니다. 2x 스크린샷을 1x 크기로 줄이면 세부 정보 절반을 버립니다. Retina 웹이나 인쇄처럼 고해상도를 지원하는 곳이라면 원래 해상도를 유지하세요.
• 파일 크기 영향을 무시합니다. 3x 스크린샷은 1x 캡처보다 픽셀이 아홉 배 많습니다. 압축하지 않으면 파일도 그만큼 커집니다. 캡처 뒤 목적에 맞게 이미지를 최적화하세요.