물리적 해상도와 논리적 해상도, point, pixel

포인트에 대한 간략한 정리.
활자 크기를 재는 단위로 파이카라는게 있습니다.
1파이카는 1/6인치이며 우리가 쓰는 폰트 12포인트에 해당합니다.
여기에서 유래하여 타이포그래피에서 사용하는 가장 작은 인쇄 단위로 포인트를 쓰게 됐습니다.
옛날에 애플에서 9인치 72dpi모니터에 1대1 대응하는 144ppi프린터 (1도트=2픽셀) 프린터를 만들면서 데스크탑 인쇄에 혁명을 가져오며 출판에 주도권을 애플이 가져오게 됐다는 전설입니다.

그럼 시작하겠습니다.

iphone 해상도에 대해

물리적 해상도와 논리적 해상도

레티나 이후 아이폰의 사이즈가 다양해지면서
반응형 디자인에 가장 큰 문제점이 이 차이때문에 발생합니다.

애플이 처음 아이폰을 만들때, 아이폰 화면과 정확히 일치하는 1.0비율에서 포인트point라는 단위를 썼습니다.
포인트는 전통적으로 인쇄물, 특히 폰트 사이즈에 적용하는 단위로 1 포인트=1/72 인치입니다.
포토샵이나 그래픽 툴 폰트사이즈로 나오는 사이즈 단위가 이겁니다.

폰트 사이즈를 여러 단위로 끊어 놓은 것은 금속활자를 프레스기에 집어넣어 인쇄하던 시절, 용도별로 활자의 사이즈를 정해놓았는데 그 때 결정되었습니다. 본문은 10pt, 제목은 18pt, 헤드라인은 72pt와 같은 자주 쓰는 규격을 정해놓은거죠.

72ppi(Pixcel Per Inch)환경 즉, 웹 환경에서 1pt = 1px입니다.

이 역사적인 단위 변환을 결정한건 바로 애플입니다.
이 72ppi 웹 환경은 애플이 처음 맥킨토시를 만들 때, 72ppi해상도의 9인치 디스플레이로 만든 것에서 비롯합니다. 왜 72냐면 애플의 ImageWriter 프린터가 144ppi의 해상도로 인쇄하도록 설계됐는데 스크린의 정확히 2배의 화소이기 때문입니다.

그러면 설계상 디스플레이와 인쇄물의 시각적인 사이즈가 정확히 일치하게 할 수 있습니다. 이것 때문에 맥킨토시가 인쇄물의 혁명을 일으킨거죠. 스크린에서 보는 디자인이 인쇄물과 같게 나오니까요.
이렇게 결정되기 이전에는 사실상 스크린상의 포인트라는 단위는 가상의 단위였습니다.

different_pixels

여기서 포인트는 현실 세계의 길이 단위였는데, 이걸 기계의 픽셀이라는 점 단위로 표현하면서 문제가 발생합니다.
포인트가 픽셀로 렌더링 되는 과정을 레스터라이제이션 Rasterization이라고 합니다. 포토샵에서 벡터 이미지를 비트맵으로 전환할 때 사용하는 그 기능 맞습니다.
여기서 1x, 2x, 3x등의 비율로 전환되는데, 큰 이미지는 많은 디테일을 필요로하기 때문에 배율이 달라집니다. 1:1의 비율을 사용하게 되면, 위의 이미지처럼 선명하지 않게됩니다. 이를 막기 위해서 더 큰 두배, 세배의 사이즈로 늘린 다음 다운샘플링을 해서 밀도를 높이는 겁니다.

anau4

여기서 아이폰 6플러스를 만들 때 3x보다 작은 물리적 화면을 만들었기 때문에, 3x(1240* 2208)를 1.15배 작게 만들어(1080*1920) 우겨넣게 됩니다. 여기서 물리적 픽셀이 중요해집니다. 실제 디바이스가 지원할 수 있는 것보다 많은 픽셀을 가진 이미지의 경우, 다운 샘플링 되어 나오는 겁니다. 그 반대라면 업 샘플링이 되는거죠.

이게 논리적 픽셀과 물리적 픽셀의 차이입니다.

mblogthumb4-phinf-naver-net

이 픽셀들을 실제 디바이스 화면에 표시하면 PPI(Pixcel Per Inch)라는 개념이 나옵니다. 우리말로는 화소밀도라고 표현합니다. 1인치당 얼마나 많은 픽셀이 몰려있냐는 말인데, 결국 PPI가 높으면 이미지가 선명하게 보입니다.

device-pixel-ratio

디바이스 픽셀 비율은 여기서 보듯이, 각 디바이스의 ppi가 다르기 때문에 생기는 갭입니다.
초록색은 css pixel 이니 논리적 픽셀. 흰 칸은 디바이스 픽셀입니다.

이제 디바이스가 나타낼 수 있는 픽셀 단계가 논리적 픽셀보다 더 위에 있습니다.
때문에 이제 그래픽 툴에서는 0.72px, 0.5px단위의 선까지 지원합니다.
폰트도 Hairline이라는 극도로 얇은 라인을 이용한 폰트가 생겼죠.

2lato-hairlinea

사실 이렇게 디스플레이의 수치가 복잡해지면 소프트웨어의 관리가 힘들어지기 때문에 애플이 엄격하게 제품군을 관리한 이유입니다. 이미지의 해상도가 기기별로 달라보인다는건 큰 문제니까요. 또, 상위 제품위주로 개발을 하면 아직 하위 제품군을 쓰는 사용자에게는 용량과 속도의 문제로 소프트웨어를 최적화 시키기 어려워집니다.

%ec%8a%a4%ed%81%ac%eb%a6%b0%ec%83%b7-2017-02-02-%ec%98%a4%ed%9b%84-7-54-22%ea%b7%b8%eb%a6%bc1%ec%8a%a4%ed%81%ac%eb%a6%b0%ec%83%b7-2017-02-02-%ec%98%a4%ed%9b%84-7-56-35%ec%8a%a4%ed%81%ac%eb%a6%b0%ec%83%b7-2017-02-02-%ec%98%a4%ed%9b%84-7-56-47%ec%8a%a4%ed%81%ac%eb%a6%b0%ec%83%b7-2017-02-02-%ec%98%a4%ed%9b%84-7-57-00

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중