UI·UX 디자이너를 위한 가이드 - DP·SP와 디스플레이

 

 

 

이 게시글은 공부하면서 정리한 내용입니다.

잘못된 정보는 제보해주시면 매우 감사드리겠습니다.

 

***

 

고밀도 디스플레이

초기 PC 디스플레이는 72 ppi로 제작되었다.

인쇄된 글자가 화면에서도 똑같은 크기로 보이도록 글자 단위(포인트*)의 체계를 반영한 값이다.

1 pt는 1 inch의 1/72로, 바꿔 말하면 1 인치가 72 pt이므로 똑같이 1 인치에 72 px을 담았다는 말이다.

그래서 72 ppi 디스플레이에서 1pt와 1px은 1:1로 같다.

 

*포인트(point): 줄여서 pt. 금속활자 시대부터 인쇄물의 글자, 획 등을 표현하는 단위로 쓰이고 있다. 

1 pt는 1 inch의 1/72이며, 계산하면 대략 0.0139 in, 환산하면 0.3528mm이다.

현재 아이폰 OS(IOS)에서는 논리적 픽셀 단위로 쓰인다.

그러나 논리적 픽셀로서의 pt는 기존에 정의된 값(1pt=1/72 inch)과 다르다.

 

디스플레이 기술이 발전하면서 애플에서 ppi가 2배인 고밀도 디스플레이 제품을 출시하였다. 

망막으로 구분하지 못할 정도로 픽셀의 밀도가 높다 하여 "레티나 디스플레이"라 홍보했다.

이때부터 여러 회사에서 고밀도 디스플레이 제품을 제작하게 되었다. 

논리적 픽셀

고밀도 디스플레이 기술로 디바이스마다 해상도가 높아졌고, 픽셀 밀도도 다양해졌다.

픽셀 밀도가 다양해지니 개별 픽셀의 크기도 천차만별이었다.

디바이스별 개별 픽셀의 크기에 따라 같은 이미지가 다른 위치, 크기로 보이는 문제가 발생했다.

 

 

그래서 어떤 디바이스에서든 같은 이미지가 동일하게 보이도록 논리적 픽셀*을 도입했다. 

 

 

*논리적 픽셀: css에서 표현하는 픽셀로, 물리적 픽셀의 토대 역할을 한다.

즉, 디스플레이 픽셀이 몇 개든 css 픽셀 컨텐츠가 구현된다.

보통 논리적 픽셀을 기준으로 디자인한 것을 디바이스 밀도에 맞게 몇 배로 곱한다.

논리적 픽셀 단위는 안드로이드 OS에서 DP*와 SP*, 아이폰 OS에서 PT*가 있다.

 

*물리적 픽셀(px): 최종적으로 디바이스 화면에 출력되는 픽셀이다.

우리가 보는 디바이스의 실제 해상도를 이루는 픽셀이라 할 수 있다. 

 

*DP: 밀도 독립적 픽셀(Density Independent Pixel)이란 뜻으로, 안드로이드 OS의 논리적 픽셀이다.

1 dp는 mdpi(160 dpi) 디스플레이에서 1px이며, DPI에 따라 2px이나 3px, 또는 4px이 되기도 한다.

보통 디자인 툴에서 1dp는 1px로 설정되어 있고, 디자이너는 1dp로 디자인한 후 렌더링한다.

dp를 px로 변환하는 식은 px = dp * (dpi / 160)이다.

 

다양한 밀도의 dp 예시: 1 dp를 기준으로 픽셀의 밀도가 다름을 알 수 있다. 2배, 3배, 4배..로 디자인 에셋을 추출해야하는 원리이다.

 

*SP: 크기 독립적 픽셀(Scale Independent Pixel)이란 뜻으로, 안드로이드 환경의 폰트 단위이다.

기본적으로 DP와 같은 크기지만, DP와 달리 SP는 시스템 폰트 설정 값에 영향을 받는다.

즉, 사용자가 안드로이드 시스템 설정에서 폰트 크기를 조절하면 SP 단위가 적용된 폰트도 조절된다.

높은 연령대의 사용자들은 시스템 폰트를 크게 설정하기 때문에, 높은 연령대를 고려한다면 sp를 사용하는 것이 좋다.

 

*PT(Point): 아이폰 OS의 논리적 픽셀로, DP와 같은 역할을 한다.

 

논리적 픽셀이 일련의 과정을 거쳐 최종적으로 물리적 픽셀로 변환되는데, 이를 래스터화라 한다.

이 래스터화는 벡터 그래픽이 래스터 그래픽으로 변환되는 것을 뜻하며, 논리적 픽셀의 래스터화 과정은 다음과 같다.

 

*래스터화 과정: 논리적 픽셀 → (n배수로 렌더링) → 렌더링 된 픽셀 → (다운/업샘플링) → 물리적 픽셀 →물리적 디바이스

 

래스터화 예시(이미지에 사용된 수치는 아이폰 6+, 7+, 8+를 참고한 것이다)

 

*다운샘플링: 렌더링 된 픽셀 해상도가 물리적 디바이스의 해상도보다 높으면 크기를 낮춘다.

*업샘플링: 렌더링 된 픽셀 해상도가 물리적 디바이스의 해상도보다 낮으면 크기를 높인다.

 

샘플링 과정에서 해상도를 강제로 키우거나 줄이므로 픽셀이 열화될 수 있다.

 

*아이폰 해상도 변환 가이드: www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

*모든 단위 변환 웹사이트: https://pixplicity.com/dp-px-converter/

 

고밀도 디스플레이와 단위에 대해 알아보았다.

안드로이드, 아이폰 OS의 고밀도 기준은 다음의 포스팅을 참고하면 된다.

 

mesign.tistory.com/11

UI·UX 디자이너를 위한 가이드 - AOS와 IOS 밀도