PT to PX 변환기 완벽 가이드
웹 디자인과 인쇄 디자인을 동시에 진행하다 보면, 포인트(PT)와 픽셀(PX) 단위 간의 변환이 필수적입니다. 포인트는 전통적으로 인쇄 타이포그래피에서 사용되는 단위로, 1포인트는 1/72인치에 해당합니다. 반면 픽셀은 화면 해상도에 의존하는 디지털 단위로, 모니터의 DPI(Dots Per Inch) 설정에 따라 실제 크기가 달라집니다. 가장 일반적인 웹 환경인 96 DPI 기준에서는 1PT = 1.333PX의 비율이 적용됩니다.
이 변환기는 단순한 PT-PX 변환뿐만 아니라, 다양한 DPI 환경(72, 96, 144, 192, 300 DPI 등)에서의 변환 결과를 한눈에 비교할 수 있는 참조표를 제공합니다. 디자이너가 Photoshop이나 Illustrator에서 작업한 폰트 크기를 CSS로 옮길 때, 또는 인쇄물의 타이포그래피 규격을 웹으로 변환할 때 매우 유용합니다. 특히 반응형 웹 디자인에서는 다양한 디바이스의 DPI를 고려해야 하므로, DPI별 변환 결과를 확인하는 것이 중요합니다.
PT와 PX의 변환 공식
기본 변환 공식은 다음과 같습니다: PX = PT x (DPI / 72). 여기서 72는 1인치당 72포인트라는 인쇄 기준에서 유래합니다. 따라서 96 DPI 환경에서는 PX = PT x (96/72) = PT x 1.333이 됩니다. Mac의 기본 DPI인 72 DPI에서는 1PT = 1PX로 직관적인 변환이 이루어집니다. Retina 디스플레이(192 DPI)에서는 같은 포인트 값이 두 배의 픽셀로 렌더링되므로, 고해상도 환경을 위한 이미지 준비 시 이 점을 반드시 고려해야 합니다.
실무에서의 활용
- Figma, Sketch 등 디자인 툴에서 개발자에게 전달할 CSS 픽셀 값 산출
- 인쇄용 PDF 문서의 폰트 크기를 웹용으로 변환
- 이메일 템플릿 제작 시 다양한 메일 클라이언트의 DPI 차이 대응
- 모바일 앱 개발 시 dp, sp 단위와의 호환성 확인
자주 묻는 질문 (FAQ)
Q. 웹에서 가장 많이 사용하는 DPI는 무엇인가요?
A. 대부분의 웹 브라우저는 96 DPI를 기본값으로 사용합니다. CSS의 기본 해상도 기준도 96 DPI이므로, 웹 개발 시에는 96 DPI 기준으로 변환하는 것이 표준입니다. 다만 macOS의 기본 DPI는 72이며, Retina 디스플레이는 192 DPI(2x) 또는 그 이상을 사용합니다.
Q. 왜 1PT가 정확히 1.333PX인가요?
A. 1포인트는 1/72인치입니다. 96 DPI 환경에서 1인치는 96픽셀이므로, 1PT = 96/72 = 1.3333...PX가 됩니다. 이 비율은 DPI가 바뀌면 함께 변경됩니다. 예를 들어 72 DPI에서는 1PT = 1PX, 144 DPI에서는 1PT = 2PX입니다.
Q. 디자인 툴마다 PT 기준이 다른가요?
A. 네, 일부 차이가 있습니다. Adobe 제품군은 전통적으로 72 DPI를 기준으로 하여 1PT = 1PX로 표시합니다. 반면 Windows 환경의 애플리케이션은 96 DPI를 기준으로 하는 경우가 많습니다. Figma나 Sketch 같은 현대 디자인 툴은 대부분 96 DPI 기준을 사용하므로, 작업 환경의 DPI 설정을 반드시 확인하세요.
Q. CSS에서 pt 단위를 직접 사용해도 되나요?
A. CSS에서 pt 단위를 사용할 수 있지만, 웹에서는 px, rem, em 단위를 사용하는 것이 권장됩니다. pt 단위는 인쇄 매체를 위한 것이며, 화면에서는 px 단위가 더 예측 가능한 결과를 제공합니다. 반응형 디자인에서는 rem이나 em 단위를 사용하여 접근성과 유연성을 확보하는 것이 좋습니다.