MAC 에서의 포인트(pt)와 픽셀(px)의 관계!

안녕하세요 :) Zedd입니다.

오늘은 MAC에서의 포인트와 픽셀의 관계에 대해 한번 찾아보게 되었어요.

포인트와 픽셀을 잘 알아놓으시면, <MAC Xcode xcassets 크기? (1x, 2x, 3x)>를 읽으실 때 도움이 되실거에요 :)

시작할게요!

먼저, MAC에서 constraint나 constant값을 줄 때의 숫자값들은 모두 포인트단위입니다.

point와 pixel의 개념에 대해 설명해드릴게요.

point는 pt로 나타내고, pixel은 px로 나타낸다는 것 아시죠?

---

point

포인트는 '절대적인' 값이에요. 

1인치를 72로 나눈 값이 1point라고 합니다.

즉 1pt = 1/72 inches = 25.4⁄72 mm = 약 0.3527 mm

(1 inches = 25.4  mm)

pixel

픽셀은 '상대적인' 값이에요. 

모니터의 해상도를 나타낼 때 쓰인다고 하네요. 

픽셀은 많이 들어보지 않으셨나요? 

컴퓨터 모니터나 인쇄물에서 볼 수 있는 모든 디지털 이미지들을 

아주 크게 확대하면, 그림의 경계선들이 연속된 곡선이 아니라 

작은 사각형들이 붙어서 마치 계단같이 보이는 것을 보신 적 있으신가요?


이처럼 디지털 이미지들은 더 이상 쪼개지지 않는 

(주로)네모 모양의 작은 점들이 모여서 전체 그림을 만들게 되는데,

이 때 이미지를 이루는 가장 작은 단위인 이 네모 모양의 작은 점들을 

'픽셀(Pixel)'이라고 해요. 

픽셀은 영어로 그림(picture)의 원소(element)라는 뜻을 갖도록 만들어진 합성어에요. 

그래서 우리말로는 '화소(畵素)'라고도 불린답니다.


따라서 화소의 수가 많을수록 해상도가 높은 영상을 얻을 수가 있겠죠? 

같은 면적 안에 픽셀, 즉 화소가 더 조밀하게 많이 들어 있을수록 

그림이 더 선명하고 정교하기 때문이에요.

"이 그림은 해상도가 640픽셀 ×480픽셀이다."라는 말은 이 그림 속에 작은 사각형 점(즉, 화소=픽셀)이 

640 × 480 = 30만 7200개 들어 있다는 뜻이됩니다.

---

자 그러면 포인트와 픽셀의 개념은 대충 아시겠나요?

그러면 포인트와 픽셀의 관계에 대해서 알아볼게요.

Q : 1pt는 1px 일까요?

답은 WINDOW기반인지, MAC기반인지에 따라 다릅니다.

WINDOW에서는 9pt = 12px라고 하네요. 

하지만 MAC에서는 9pt = 9px입니다. 

이렇게 차이가 나는 이유는 WINDOW와 MAC의 화면 해상도 차이에 기준합니다. WINDOW에서의 화면 해상도는 96 dpi를 사용하지만, 

MAC에서의 화면 해상도는 72 dpi를 사용하기 때문입니다.
즉, 1 inch 당 96개의 점이 있는 것과 72개의 점이 있는 것에 대한 차이점이죠.

그럼  "MAC에서는 1pt랑 1px랑 똑같은데 왜 pt단위를 쓰지?"라는 궁금증이 생기실 수도 있으실 것 같아요.

저도 궁금해서 찾아봤는데,

 

먼저 iOS에서 포인트 개념은 

iPhone 4S에 도입 된 Retina Display에서 도입되었습니다.

이전의 Retina가 아닌 디스플레이의 경우, 픽셀과 포인트가 동일한 크기(1pt = 1px)라고

Apple에서 결정하였으므로 모든 이전 방식의 화면 레이아웃을 여전히 사용할 수 있었어요.

 하지만 새 Retina 디스플레이에서는 

1 포인트가 2 픽셀이라고 Apple이 정의하였으므로, 

각 방향마다 픽셀 수가 2배 많아졌습니다.

이 사진을 보시면 이해가 잘 가실 것 같아요!! 

레티나에서는 화면의 크기는 변함이 없고, 픽셀이 두배로 늘어난 것(해상도가 2배로 늘어난 것) 보이시나요? 

이렇게 레티나가 2배로 픽셀이 적용이 되고 나서, 만약  Apple이 픽셀단위를 사용한다고 생각해봅시다. 

레티나는 픽셀을 각 방향으로 2배를 주어야 하는데..또 레티나가 아닌 사람들도 생각해야하고..이러면서 개발자들은 혼란이 오겠죠? 

그래서 Apple은 개발자의 혼란을 피하기 위해 포인트의 개념을 도입했습니다. 

이것은 레티나, 또는 non-레티나 디스플레이 모두에 대해 개발을 원활하게 할 수 있겠죠? 

그냥 모든 점에서 포인트를 사용하면, iOS는 자동으로 포인트를 각 픽셀에 적용해준답니다. 

그러면 위에서 MAC에서는 1pt = 1px 라는 것은 레티나가 아닌 디스플레이에서만 말이 되네요. 

레티나 디스플레이 환경에서는 1pt = 4px 라고 생각하시면 될 것 같아요 ㅎㅎ

+추가

아이폰 6세대 부터 최근에 나온 아이폰7세대는 

레티나 디스플레이가 아닌 

레티나 HD 디스플레이를 사용합니다. 

이 레티나 HD 디스플레이는 3배로 픽셀을 적용해주는데요,

즉 1pt = 9px

입니다. 

http://beageek.biz/points-vs-pixels-in-ios/

http://m.blog.naver.com/yuzin22/90036587979

http://terms.naver.com/entry.nhn?docId=73815&cid=43667&categoryId=43667를 참고하였습니다.