픽셀 mm 차이 - pigsel mm chai

간단히 설명드리면....

픽셀은 웹의 단위이고,

센치미터는 문서의 단위입니다.

말씀하신 인쇄소의 용지규정이 18.2x25.7 라고 하셨는데..

이것은 문서 편집 이므로 당연히 센치겠죠...

그러면 실질적으로 픽셀은 웹의 단위이므로 똑같은 센치(cm)라도 

Resolution(dpi)를 얼마를 설정하냐에 따라서 틀려 집니다.

Resolution(dpi)란 1인치당 얼마의 점을 찍는가를 이야기 하는것 입니다.

우리가 흔히 웹은 Resolution 72 라고 합니다.

그것은 세계 표준 모니터의 해상도가 1인치당 최대해상도가 72의 점으로 구성하고 있기 때문입니다.

그러면 Resolution 72 와 Resolution 300 의 차이는 무엇일까요..

1인치에 72개의 점을 찍는것과 300개의 점을 찍는차이 입니다.

실제로 포토샵에서 배경을 열어 보시면 쉽게 알수 있습니다.

Ctrl + N 해서 폭, 높이 1인치(2.54cm) Resolution 72 와 Resolution 300 을 열어 보시면

픽셀이 Resolution 72 는 72픽셀, Resolution 300은 300픽셀이 되어 있는것을 볼수 있습니다.

그러면 말씀하신 18.2x25.7 의 문서를 편집하실려면 여백을 제외하고

18.2cm * 25.7cm  Resolution 300으로 문서를 열고 디자인을 하셔합니다.

그러면 2150px * 3035px 의 문서가 만들어 지게 되겠네요...

픽셀과 센치의 차이점은 단위의 차이라고 생각 하시면 좀더 편하실수도 있겠네요.ㅎㅎ

 cm 와 mm 의 관계와 비슷할수도 있죠

좀더 파고 들어보면

96픽셀은 = 1인치 = 2.54cm

1cm = (1 / 2.54 * 96) = 37.79 픽셀

그리고 위에 말씀 하신거는 cm를 말하는것 같네요.ㅎㅎ

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

픽셀은 디스플레이에서 가장 기본이 되는 단위입니다. 디스플레이는 수많은 픽셀들이 모여 구성됩니다. 하나의 픽셀은 일반적으로 R빨강, G초록, B파랑 세 가지의 서브 픽셀subpixel을 가지고 있습니다. 우리가 px이라고 부르는 단위는 디스플레이에서 서브픽셀이 모여 색상을 표현하는 최소 단위라 보시면 됩니다. 픽셀에 대한 자세한 이야기는 제 이전 글을 참고해 보시길 바랍니다.

Point

포인트point는 타이포그래피에서 사용하는 가장 작은 인쇄 단위로, 파이카pica를 잘게 나눈 것입니다. 즉, 포인트와 파이카 모두 글자의 크기를 측정하기 위한 단위입니다. 참고로 파이카는 18세기에 만들어진 타이포그래피의 유닛입니다. 1 pica가 정의하는 길이는 다양하지만, 현재 가장 보편적으로 사용되는 방식은 1 pica가 1/6in라고 보시면 됩니다. 이를 미터법으로 표시하면 약 4.233 mm가 됩니다. 간단히 정리하자면 다음과 같습니다.

그리고 포인트는 파이카를 12조각으로 나눈 단위입니다. 즉 1 pica는 12 pt와 같습니다. 결국 정리하면 1 pt는 다음과 같습니다.

1 pt는 몇 px일까요?

1pt는 몇 px일까요? 디자인을 하시는 분이 거나, 디자인을 코드로 구현하는 분이라면 한 번쯤 품어봤을 궁굼증일 겁니다.

포인트point와 파이카pica는 컴퓨터가 없을 때부터 있었던 개념입니다. 이 단위가 컴퓨터 디스플레이안에 들어오기 시작하면서 문제가 발생하기 시작합니다. 컴퓨터 디스플레이의 기본이 되는 픽셀의 크기가 모두 다르기 때문입니다.

글자의 크기는 디스플레이의 해상도와 실제 모니터의 사이즈에 영향을 받습니다. 픽셀의 크기는 스크린의 종류마다 제각각이기에 픽셀의 크기와 물리적 단위인 인치inch 사이에는 고정된 관계가 없습니다. 그래서 컴퓨터 상에서 글자의 크기는 논리적 단위logical unit를 통해 파악하게 됩니다.

72 pt의 글씨는 1 logical inch 크기의 글씨라고 정의됩니다. 그리고 이 logical inch는 실제 표시되는 물리적 단위physical unit인 physical inch로 변환되어 최종적으로는 픽셀로 스크린 위에 표시됩니다.

하지만 논리적 단위가 물리적 단위로 변환되는 기준은 경우에 따라 다릅니다. 이 부분에 대해 알아보기 위해 여기서 잠시 그래픽 유저 인터페이스 역사로 들어가보겠습니다.

WYSIWYG

1970년대, Xerox PARC 연구소에서는 WYSIWYG을 개발합니다. WYSIWYG은 “What You See Is What You Get”의 줄임말 입니다. 우리말로는 “보는 대로 얻는다” 라는 뜻의 내용입니다.

WYSIWYG은 컴퓨터 스크린 상에서 보이는 편집 상태의 화면이 최종 결과물 - 그 당시에는 출력물을 뜻합니다 - 과 같은 방식의 GUI 기반의 편집 툴을 일컫습니다. 우리가 현재 쓰고있는 워드프로세서나 Adobe의 Photoshop, Illustrator 등과 같은 그래픽 편집 툴이 WYSIWYG이라고 보시면 됩니다.

72 dpi

Xerox PARC 연구소는 1 point가 1/72 inch인 것에 착안하여 72 ppipixels-per-inch의 화면해상도를 가진 디스플레이를 표준으로 채택합니다. 72 ppi 해상도에서는 1 pt가 1 px이 되게 됩니다.

Apple은 72 ppi의 규격을 채용하여 OS에 적용합니다. 타자기 세대에 널리 쓰이던 10pt 크기의 글씨를 모니터 상에서 10 px로 보이게 하겠다는 의도였습니다.

참고로 ppipixels-per-inch와 dpidots-per-inch는 서로 다른 개념이지만 최근에는 차이의 구분 없이 혼용되어 쓰이고 있습니다.

Apple 72 dpi를 채택한 이유는 타자기 세대에서 널리 쓰이던 10 point 크기의 서체를 컴퓨터 스크린에서도 같은 숫자의 크기인 10 px의 크기를 갖게 하겠다는 의도였습니다. 결과적으로 Apple의 선택은 대중에 큰 호응을 얻었습니다. 그리고 Apple PC의 대중화와 함께 72 dpi는 보편화가 됩니다.

96 dpi

반면 Microsoft는 96 dpi를 표준 해상도로 채택하게 됩니다. Microsoft가 Apple과는 달리 96 dpi를 표준 해상도로 설정한 이유는 다음과 같습니다.

Microsoft는 인간이 컴퓨터 디스플레이를 볼 때는 책이나 문서를 볼 때 눈(망막)에서 책이나 문서까지의 거리보다 1/3 가량 더 멀리 본다고 주장합니다. 그래서 72 dpi 스크린에서의 글씨는 실제 편집자에 의해 의도되었던 글씨 크기보다 작게 보이기 때문에 가독성에 해를 끼친다고 판단합니다.

어디선가 본 것 같은 논리입니다.

Microsoft는 위 문제를 해결하기 위해 트릭을 씁니다. 72 dpi 해상도를 96 dpi의 해상도로 높이는데 그 이유는 다음과 같습니다. 컴퓨터 스크린은 책이나 문서를 읽을 때의 거리 보다 4/3배 이므로, 해상도도 4/3배를 하여 72 ppi의 모니터에서 글씨 크기를 키워 상대적으로 같은 글씨 크기를 만들어 가독성을 높이겠다는 의도였습니다.

Microsoft의 운영체제에서는 위의 96 dpi를 논리적인 해상도logical resolution라 부르고, 실제 디스플레이가 지원하고 실질적으로 표현되는 72 dpi의 해상도를 실제 해상도physical resolution이라 말합니다.

1 pt = ?

다시 궁금즘의 시작점으로 돌아와 1 pt는 몇 px인지에 대해 결론을 내보겠습니다. 1 inch를 표시하기 위해 Mac에서는 72px이 필요하고, Windows에서는 96 px이 필요한 셈입니다. 결국 1 pt가 정의하는 픽셀은 해상도의 상황에 따라 달라지게 됩니다.

Web Browser

하지만 웹 브라우져 상에서의 해상도는 약간 예외적입니다. (아직까지는) 가장 보편적으로 사용되고 있는 웹 브라우저인 Microsoft의 Internet Explorer는 역시 자사제품답게 96 dpi의 해상도를 가지고 있습니다. 하지만 Google Chrome이나 Apple의 Safari가 쓰는 Webkit 엔진의 경우도 72 dpi가 아닌 96 dpi의 해상도를 기준으로 삼고 있습니다. 이는 CSS가 계획될 당시 96 dpi를 기준으로 만들어졌기 때문입니다. 그러므로 웹에서의 폰트는 포인트에서 4/3배가 된 픽셀 값을 가지게 됩니다. 12 pt의 크기의 글씨는 웹 브라우져에서 16 px로 렌더링 되는 것입니다.

Display

DPI Calculator / PPI Calculator

하지만 모든 모니터의 도트피치는 다 다릅니다. 위의 링크에서 볼 수 있듯이 모니터의 ppi는 종류별로 매우 상이하죠. 위에서 예로 든 12 pt의 글씨는 웹 브라우져에서 16 px로 렌더링 되긴 하지만, 각 모니터에서 표시되는 16 px의 실제 크기는 모니터의 도트피치에 따라 다릅니다.

예를들어 1920*1200의 해상도를 가진 24 inch의 모니터는 94.34 PPIpixel-per-inch입니다. 그렇다면 위 모니터에서의 16 px의 크기는 다음과 같습니다.

하지만 제 맥북프로는 1280*800 해상도에 13 inch의 디스플레이를 탑재하고 있으므로 116.11 PPIpixel-per-inch입니다. 그러므로 16 px의 크기는 실질적으로 다음과 같이 보입니다.

1cm가 몇 픽셀?

1M 몇 픽셀?

5cm 몇픽셀?