티스토리 뷰

안녕하세요 :) 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를 참고하였습니다. 




댓글
  • 프로필사진 hj 좋은자료입니다! 새로운 사실을 알았네요 2017.01.12 12:12
  • 프로필사진 Bro 좋은 정보 감사합니다. 도움이 많이 되었어요 ^^ 2017.11.16 18:26
  • 프로필사진 Favicon of https://zeddios.tistory.com BlogIcon Zedd0202 감사합니다:) 2017.11.16 20:32 신고
  • 프로필사진 kimpubl 12px 는 항상 12개의 점 갯수만큼의 크기를 가집니다.
    9pt 는 dpi 에 따라 가지는 점 갯수가 다릅니다.

    포토샵에서 20cm x 30cm 의 캔버스를 만들때 72dpi 와 300dpi 로 각각 만들게 되면
    포토샵 캔버스상 px 환산 가로x세로 크기는 각각 다르나, 종이 출력물은 같습니다. (출력 품질 차이만 있음.)

    이때 72dpi 와 300dpi 에 각각 9pt 의 글씨를 써보면 모니터상에서의 크기는 다르나, 출력물에서의 크기는 같음.(a4크기는 고정)

    따라서..

    포인트는 dpi 에 대해 상대적 크기를 가지고 있고, 픽셀은 dpi 에 대해 절대적 크기를 가지고 있습니다.

    괜한 참견 죄송합니다...
    2018.01.26 10:45
  • 프로필사진 Favicon of https://zeddios.tistory.com BlogIcon Zedd0202 아니에요!! 그럼 포인트가 절대적인 값을 가지고 있는게 아닌건가요? ㅠㅠㅠ 지적 감사드려요 2018.01.26 10:47 신고
  • 프로필사진 kimpubl 제 설명도 오류가 있네요.

    애초에 비교가 좀 애매한 단위입니다.

    pt는 인쇄용 출력 크기를 나타내는 단위 (결과물)
    px는 화면 기본 단위 (구성)

    두개 중 뭐가 절대적 단위냐, 상대적 단위냐는 비교대상이 아닌거 같아요
    둘다 절대적 단위 같습니다.

    px는 구성 단위 중 가장 기본 단위이므로 (cm와 같은 단위) 1000px 은 픽셀 1000개로, 상대적으로 2000개가 되거나 500개가 되지 않으므로 절대적입니다.
    pt는 dpi 의 크기와는 상관없이 출력 결과물에서 1/72(dpi) 의 크기를 가집니다. 0.0352777777777778mm

    둘다 절대적인거네요. 각자의 분야에서요;;
    2018.01.26 11:53
  • 프로필사진 kimpubl https://material.io/devices/

    여기도 참고해보시면 좋을것 같습니다.
    2018.01.26 11:54
  • 프로필사진 Favicon of https://zeddios.tistory.com BlogIcon Zedd0202 감사합니다!!! XD 2018.01.26 11:55 신고
  • 프로필사진 kimpubl 결국, 웹 작업이라면 px단위로 통일하는것이 좋고
    반응형 등등에서 종종 사용하는 가변형 디자인에는 em 단위가 좋은거 같습니다.
    이미지는 px로 고정해두고 폰트만 pt로 사용한다면, 이미지는 ppi 기준으로 출력되고(density 배율 감안..) 폰트는 dpi 기준으로 출력되므로
    이미지 대비 폰트 크기가 디바이스별로 제각기가 되어버려 보기가 좋지 못하니다.

    가변형으로 제작한 웹이라면 상관없겠지만요..

    어플개발자가 아니라서 잘 모르겠습니다만... 어플이라면 dp 단위로 통일하는것이 좋아보입니다 (구글 검색으로 공부한 바로는요..)
    2018.01.26 11:59
  • 프로필사진 Favicon of https://zeddios.tistory.com BlogIcon Zedd0202 아하 em단위는 처음들어보네요!! iOS에서는 포인트 단위로만 주면 알아서 해줘서... 2018.01.26 12:01 신고
  • 프로필사진 tadkim 관련해서 프로젝트를 진행중인데, 이 부분이 쉽지 않네요ㅠㅠ 정리 감사합니다. 2018.11.28 23:16
  • 프로필사진 레몬그라스 시작부분에서 1인치를 71로 나누면 0.0138이 나오는데.. 그럼 1pt는 약 0.0138인치가 아닌가요? 2020.03.04 09:24
  • 프로필사진 Favicon of https://zeddios.tistory.com BlogIcon Zedd0202 제가 글을 이상하게 써놨네요;
    1pt = 1/72 inches = 25.4/72 mm = 0.3527 mm
    로 나오는 것입니다.
    (1 inches = 25.4 mm)
    2020.03.04 10:32 신고
댓글쓰기 폼
Total
3,401,655
Today
121
Yesterday
3,443