픽셀 변환기

픽셀 변환기란?

픽셀 변환기는 디지털 픽셀과 실제 길이 단위(밀리미터, 센티미터, 인치) 사이를 사용자가 선택한 모든 DPI에서 변환합니다. CSS 픽셀은 기본적으로 96 DPI를 가정하지만, 인쇄 작업에서는 300 DPI를 사용하고 사진 인쇄는 600 DPI에 이를 수 있습니다 — DPI 값이 다르면 같은 픽셀 수가 매우 다른 물리적 크기에 매핑됩니다. 네 가지 단위 중 어느 곳에든 값을 입력하고 상황에 맞는 DPI 프리셋을 선택하면 나머지 세 단위가 실시간으로 갱신됩니다. 모든 결과는 클릭 한 번으로 클립보드에 복사할 수 있습니다.

픽셀 변환기 사용 방법

1. 입력 필드에 변환할 값을 입력합니다 — 예를 들어 100.
2. 값의 단위를 선택합니다: 픽셀, 밀리미터, 센티미터, 인치 중 하나.
3. DPI 프리셋을 선택합니다 — 웹은 96 DPI, 인쇄는 300 DPI, 또는 "사용자 지정"을 선택해 직접 입력합니다.
4. 아래 결과 패널에서 나머지 세 단위로 변환된 값을 확인합니다.
5. 결과 옆의 복사 버튼을 클릭해 클립보드에 담거나, URL을 공유하세요 — 입력값은 쿼리 매개변수로 유지됩니다.

픽셀 변환기를 사용하는 사람

• 학생: 픽셀-밀리미터 변환이 포함된 수학 및 물리 숙제, 그리고 컴퓨터 그래픽 강의의 화면 해상도 연습 문제.
• 웹 및 UI 디자이너: 물리적 목업 측정값(mm)을 적절한 기준 DPI의 CSS 픽셀로 변환해 아이콘, 패딩, 컴포넌트의 크기를 정합니다.
• 인쇄 디자이너: 인쇄소에 보내기 전에 Photoshop 또는 Figma의 픽셀 출력값을 300 DPI에서 밀리미터와 인치로 변환합니다.
• 사진작가: 카메라 출력값으로부터 실제 인쇄 치수를 계산합니다(예: 4000 × 3000 px를 300 DPI로 인쇄하면 13.3 × 10 인치).
• 개발자: 제품 또는 접근성 사양에 명시된 물리적 크기에 대해 CSS 픽셀 값을 검증합니다.

이 변환기를 선택하는 이유

• 입력하는 동안 네 가지 단위(픽셀, 밀리미터, 센티미터, 인치)가 모두 실시간으로 갱신됩니다.
• 내장된 5가지 DPI 프리셋이 일반적인 사례를 모두 다룹니다 — 96 DPI 웹, 72 DPI Mac 레거시, 인쇄용 150/300/600 DPI.
• 비표준 디스플레이(Retina, 고해상도 모니터)와 특수 인쇄 워크플로를 위한 사용자 지정 DPI 입력.
• 공유 가능한 URL — 값, 원본 단위, DPI가 쿼리 매개변수로 유지됩니다.
• 100% 브라우저 기반: 가입 불필요, 결과 패널에 광고 없음, 계산식은 오픈 소스로 공개.

변환기는 얼마나 정확한가요?

변환기는 표준 인치당 25.4 밀리미터 비율과 사용자가 지정한 DPI를 사용하며, IEEE 754 배정밀도로 계산합니다. 결과는 부동소수점 반올림 범위 내에서 정확합니다(상대 오차 ≤1×10⁻⁶). 실제 부정확성의 유일한 원인은 DPI 값 자체입니다 — 디스플레이가 가정한 DPI로 실제 동작하지 않는다면 먼저 Screen Ruler 도구로 교정하세요.

자주 묻는 질문

픽셀이란 무엇인가요?

픽셀은 디지털 디스플레이 또는 이미지의 가장 작은 개별 단위입니다. 물리적 크기는 고정되어 있지 않으며 화면의 픽셀 밀도(DPI)에 따라 달라집니다. 96 DPI 웹 디스플레이에서는 1픽셀이 정확히 1/96 인치(약 0.265 mm)이고, 300 DPI 인쇄에서는 1픽셀이 1/300 인치(약 0.085 mm)입니다.

DPI란 무엇이며 왜 중요한가요?

DPI(인치당 도트)는 픽셀과 물리적 길이 사이의 변환 계수입니다. 같은 100 px가 96 DPI에서는 26.46 mm로 매핑되지만 300 DPI에서는 8.47 mm에 불과합니다. 변환이 물리적으로 의미 있으려면 대상 매체 — 화면, 인쇄물 또는 내보내기 — 의 DPI를 사용해야 합니다.

픽셀을 밀리미터로 어떻게 변환하나요?

픽셀 수를 DPI로 나누어 인치를 구한 다음 25.4를 곱해 밀리미터를 얻습니다: mm = (px / DPI) × 25.4. 96 DPI에서 100 px의 경우: 100/96 × 25.4 ≈ 26.46 mm. 변환기가 이 작업을 실시간으로 수행합니다.

웹에서는 72 DPI와 96 DPI 중 어떤 것을 사용해야 하나요?

96 DPI를 사용하세요. CSS, 브라우저, 운영체제는 1990년대에 인치당 96 기준 픽셀로 표준화되었습니다. 72 DPI 값은 초기 Apple 타이포그래피의 잔재(1픽셀 = 1포인트)이며, 특정 Mac 시대 자산에만 유용합니다 — 현대의 웹 작업은 96을 가정합니다.

인쇄에는 어떤 DPI를 사용해야 하나요?

고품질 잡지 및 도서 인쇄에는 300 DPI를, 초안 교정쇄와 대형 인쇄에는 150 DPI를, 사진 인쇄, 정밀 선화, 강한 확대로 보는 텍스트에만 600 DPI를 사용하세요. 일반 작업에서 300 DPI를 초과하면 대부분의 종이에서는 눈에 띄는 개선 없이 파일 크기만 증가합니다.

Retina/고해상도 디스플레이는 변환에 어떤 영향을 미치나요?

Retina 및 기타 고해상도 디스플레이는 CSS 픽셀 1개당 물리적 픽셀 2~3개를 렌더링합니다. 변환기는 기본적으로 CSS 픽셀로 작동하므로, 96 DPI에서 100 CSS px는 어떤 고해상도 화면에서도 정확합니다. 물리적 픽셀 수가 필요하다면 디바이스 픽셀 비율(브라우저의 window.devicePixelRatio)을 곱하세요.

내 웹 디자인이 4K 모니터에서 더 작아 보이는 이유는 무엇인가요?

대부분의 운영체제는 4K 모니터를 150~200% 배율로 실행해 CSS 픽셀이 1080p 디스플레이와 시각적으로 비슷하게 유지되도록 합니다. 배율이 꺼져 있으면 같은 픽셀 수가 더 적은 실제 인치를 덮기 때문에 디자인이 물리적으로 더 작게 보입니다. OS 설정에서 DPI 배율을 조정하거나 고정 px 대신 rem 또는 퍼센트 단위를 사용하세요.

DPI 심화 — 한 번에 올바른 숫자를 고르기

모든 픽셀-길이 변환은 하나의 등식입니다: 길이 = 픽셀 ÷ DPI. 어려운 부분은 결과물이 자리 잡을 매체에 맞는 DPI를 고르는 일입니다. 잘못된 DPI는 오류를 내지 않습니다 — 수학적으로는 정확하고 물리적으로는 틀린 숫자를 조용히 만들어 냅니다. 아래 프리셋이 실무의 95%를 다룹니다.

웹 작업 — 항상 96 DPI

CSS, 브라우저, 운영체제는 1990년대 후반 1인치당 96 참조 픽셀로 표준화되었고 이 수치는 그 후로 움직이지 않았습니다. 모든 현대 브라우저는 물리 디스플레이와 무관하게 1 CSS 픽셀을 1/96인치로 취급합니다. Retina와 4K 모니터는 더 높은 물리 밀도로 렌더링하지만 OS가 CSS 픽셀을 96 DPI 참조로 다시 스케일하므로 계산은 유효합니다. 72 DPI는 레거시로 취급하세요 — OS X 이전 Mac에서 자산을 가져오는 경우에만 의미가 있습니다.

인쇄 작업 — 150, 300, 또는 600 DPI

대부분의 잡지, 책, 소비자 사진 인쇄는 300 DPI를 사용합니다. 시청 거리가 해상도 손실을 가려주는 시안 인쇄와 대형 포맷 작업에서는 150 DPI로 낮추세요 — 파일 크기가 절반이 되고 1미터 거리에서도 여전히 선명하게 보입니다. 가까이서 검사할 인쇄물에만 600 DPI로 올리세요 — 정밀 라인 아트, 기술 도면, 코팅지 위의 작은 글자 등. 600 DPI를 넘기면 가시 품질은 거의 향상되지 않고 디스크만 잡아먹습니다.

Retina와 HiDPI — CSS 픽셀로 작업하기

Retina 디스플레이는 CSS 픽셀 하나당 두세 개의 물리 픽셀을 렌더링하지만 OS는 이를 코드로부터 숨깁니다. 레이아웃 계산은 CSS 픽셀(96 DPI)을 고수하세요. 실제 물리 픽셀 수가 필요하면 — 예컨대 모든 기기에서 또렷해야 할 비트맵 자산을 배포할 때 — 런타임에 window.devicePixelRatio를 곱하고 @2x 또는 @3x 변형을 함께 제공하세요. 픽셀 변환기는 기본적으로 입력을 CSS 픽셀로 취급합니다; 알려진 디스플레이의 물리 픽셀 밀도를 실측했을 때만 사용자 정의 DPI를 체크하세요.

자주 쓰는 변환 패턴

몇몇 픽셀 값은 너무 자주 나와서 외워둘 가치가 있습니다. 아래 표는 100 px, 1000 px, 그리고 일반적인 풀 HD 너비(1920 px)가 가장 흔한 네 가지 DPI에서 어떻게 환산되는지 보여줍니다.

개발자를 위한 실용 팁

먼저 DevTools에서 검증

변환을 믿기 전에 콘솔에 window.matchMedia('(min-resolution: 96dpi)').matches를 입력해 브라우저가 96 참조 DPI를 보고하는지 확인하세요. 올바르게 구성된 시스템에서는 true를 반환합니다. false가 반환되면 OS 스케일링이나 줌 레벨이 기본값이 아니며 변환을 조정해야 합니다.

항상 목표 DPI로 내보내기

Photoshop, Figma 및 대부분의 디자인 도구는 기본적으로 캔버스 DPI로 내보냅니다. 내보내기 전에 캔버스 DPI를 목표 매체로 설정하세요 — 96 DPI 캔버스를 300 DPI로 내보내도 이미지가 업샘플되지 않습니다. 메타데이터만 다시 표시되고 의도한 물리 크기의 1/3로 인쇄됩니다.

진실 기준을 위해 화면을 보정

작업이 물리적 정확도에 의존한다면 — 손에 든 물체를 화면에 대고 재거나, 알려진 신용카드 너비에 아이콘 크기를 맞추는 경우 — 먼저 Screen Ruler 도구를 열어 실제 신용카드로 보정하세요. 화면의 실제 DPI가 사양 시트와 일치하는 경우는 드뭅니다; 보정은 변환을 물리적 현실에 고정합니다.