이미지 DPI 정리: 72 DPI와 300 DPI는 웹에서 의미가 있을까?

빠른 결론: DPI는 웹 품질 스위치가 아니다

일반적인 웹 이미지에서 72 DPI와 300 DPI의 차이가 온라인 선명도를 결정하지 않습니다. 브라우저가 실제로 참고하는 것은 다음과 같습니다.

• 이미지의 실제 픽셀 치수(예: 1200 × 800)
• 페이지에서의 CSS 크기(예: 폭 600 px)
• srcset, sizes 같은 반응형 이미지 규칙
• 화면의 기기 픽셀 비율
• 내보낸 파일의 압축과 이미지 포맷

72 DPI 태그가 붙은 1200 × 800 JPG와 300 DPI 태그가 붙은 같은 1200 × 800 JPG는 웹페이지에서 사실상 동일하게 렌더링됩니다. 담긴 픽셀이 같기 때문이며, DPI 값은 본질적으로 인쇄용 지시입니다.

DPI가 의미를 갖기 시작하는 순간은 이미지가 물리적인 크기가 될 때입니다. 300 DPI에서 2 × 2 인치 여권 사진은 600 × 600 픽셀이 필요하고, 300 DPI에서 4 × 6 인치 인화는 1200 × 1800 픽셀이 필요합니다. 이때 비로소 DPI라는 숫자가 픽셀을 인치나 밀리미터에 연결하는 유용한 지표가 됩니다.

그래서 누군가 「300 DPI로」라고 요청할 때 가장 좋은 되물음은 이렇습니다.

인쇄를 위한 건가요, 아니면 사실은 웹용으로 픽셀이 더 많은 이미지가 필요한 건가요?

DPI, PPI, 픽셀, CSS 픽셀

DPI는 여러 의미로 뒤섞여 쓰이는 용어라서, 이에 관한 조언이 자주 엇갈립니다.

디지털 이미지 파일에는 PPI 라는 표현이 더 정확합니다. 파일 안에 잉크 도트가 담겨 있는 것이 아니라 픽셀이 담겨 있기 때문입니다. 다만 검색되는 단어는 「DPI」이고, 인화소도 「DPI」로 부르며, 클라이언트도 PPI 의미로 DPI라고 말하는 경우가 많아 이 글에서는 두 표현을 신중하게 함께 씁니다.

실용 공식은 단순합니다.

픽셀 = 인쇄 인치 × PPI
인쇄 인치 = 픽셀 / PPI

폭 3000 픽셀 사진이라면 300 PPI에서 폭 10 인치, 150 PPI에서 폭 20 인치, 72 PPI에서 폭 41.7 인치로 인쇄할 수 있습니다. 파일 자체가 좋아지거나 나빠지는 게 아니라, 같은 픽셀을 종이 위에 얼마나 촘촘히 배치하느냐를 결정할 뿐입니다.

이미지 안의 DPI 값이 실제로 하는 일

많은 이미지 포맷은 해상도나 밀도 값을 저장할 수 있습니다. 일상 소프트웨어에서는 다음처럼 보입니다.

• 72 DPI
• 96 DPI
• 240 PPI
• 300 PPI
• Photoshop의 「해상도」 필드
• JPG/PNG에 들어 있는 수평/수직 밀도 메타데이터

이 값은 어디까지나 메타데이터입니다. 해당 밀도를 존중하는 레이아웃에 이미지를 배치하거나 인쇄할 때의 권장 크기를 제안할 뿐이며, 디테일을 더해 주지는 않습니다.

3000 × 2000 사진을 예로 들어봅니다.

픽셀은 같습니다. 권장 인쇄 크기만 다릅니다.

바로 이 지점에서 많은 사람이 헷갈립니다. DPI 필드만 바꾸면 이미지를 웹용으로 리사이즈한 것도, 압축한 것도, 더 선명하게 만든 것도 아닙니다. 그저 인쇄용 라벨을 바꿔 붙였을 뿐입니다.

브라우저는 대신 무엇을 참고할까

일반적인 웹페이지 작업에서 브라우저는 파일의 픽셀 데이터와 페이지의 레이아웃 지시를 봅니다.

HTML이나 CSS가 이 이미지를 600 CSS 픽셀 폭으로 표시하라고 지시하면 브라우저는 그 자리에 600 CSS 픽셀 폭으로 배치합니다. 이 자리에 1200 픽셀 폭 원본을 제공하면 2배 밀도 고해상도 화면에 충분한 픽셀을 가진 셈이고, 400 픽셀 폭 원본만 제공하면 브라우저가 확대해야 하므로 흐릿하게 보일 가능성이 커집니다.

그래서 웹 이미지 작업은 대개 이런 대화로 진행됩니다.

• 히어로 이미지: 예상되는 최대 표시 폭 근처에서 내보내고, 필요하면 반응형 변형을 함께 준비한다.
• 블로그 이미지: 디자인이 더 큰 크기를 요구하지 않는 한 폭 1200–1600 px 정도 버전을 만든다.
• 썸네일: 실제 카드 표시 크기에 가깝게 내보낸다.
• Retina 아이콘: CSS 크기의 2배나 3배 원본 픽셀을 제공한다.
• 느린 페이지: DPI 태그가 아니라 픽셀 크기 축소와 압축으로 다이어트한다.

MDN의 naturalWidth 설명이 여기서 도움이 됩니다. 이미지 폭을 CSS 픽셀로 설명하지, 「DPI 태그에 적힌 값」이라고 설명하지 않기 때문입니다. MDN의 반응형 이미지 안내 역시 srcset과 sizes가 레이아웃과 기기 조건에 맞는 원본을 브라우저가 고르도록 돕는 장치라고 설명합니다.

기술적 미묘함도 하나 짚어 둡니다. CSS에는 실험적인 image-resolution 속성이 있고, W3C CSS Images는 이미지 해상도 메타데이터를 언급합니다. MDN은 현재 image-resolution을 실험적이라고 표기하며 프로덕션에 쓸 만한 브라우저 지원이 아직 이루어지지 않았다고 안내합니다. 일반 웹 게시에서는 JPG나 PNG의 DPI 메타데이터가 페이지 위 표시 크기를 좌우한다고 기대하지 마세요.

「웹은 72 DPI」가 민담이 된 이유

「웹은 72 DPI」라는 규칙은 대체로 물려받은 습관입니다.

초창기 데스크톱 퍼블리싱 워크플로에서는 화면 픽셀, 포인트, 인치가 지금보다 밀접하게 얽혀 있었습니다. 옛 Macintosh의 화면 관습은 인치당 72 픽셀과 흔히 연관돼 있고, Windows와 CSS의 흐름 속에서 96 DPI가 무대에 등장했습니다. W3C CSS Values는 1in = 96px 이라는 고정 관계를 정의하고, MDN의 해상도 문서는 CSS 관점에서 1dppx가 96dpi에 해당한다고 설명합니다.

그렇다고 웹 이미지를 96 DPI로 내보내야 한다는 이야기는 아닙니다.

CSS가 레이아웃 단위를 위한 기준계를 가지고 있다는 뜻에 그칩니다. 실제 웹 이미지는 여전히 표시되는 크기에 걸맞은 픽셀을 필요로 합니다. 폭 5000 px 사진은 72 DPI든 300 DPI든 폭 300 px 썸네일에는 너무 무겁고, 폭 400 px 로고는 DPI 필드가 무엇이든 폭 600 px 슬롯에서는 흐릿해질 확률이 큽니다.

웹 이미지에서 더 나은 질문은 이것입니다.

이 이미지는 레이아웃에서 몇 픽셀을 차지할까? 내가 신경 쓰는 화면들을 위해 몇 픽셀의 원본을 제공해야 할까?

Photoshop 리샘플링의 함정

Photoshop 같은 도구는 폭·높이·해상도를 같은 대화상자에 함께 보여 줍니다. 인쇄에는 편리하지만 웹 작업에서는 함정이 됩니다.

Adobe의 이미지 크기 문서는 다음을 구분합니다.

• 픽셀 수(Dimensions): 픽셀의 총 개수.
• 폭과 높이: 단위에 따라 물리 크기 또는 레이아웃 크기.
• 해상도: 인쇄 품질을 위한 1인치당 픽셀 수.
• 리샘플링: 픽셀을 더하거나 빼는 조작.

핵심 스위치가 바로 리샘플링 입니다.

리샘플링을 끄면 72 PPI에서 300 PPI로 바꿔도 같은 픽셀이 유지되고 권장 인쇄 크기만 조정됩니다. 3000 × 2000 파일은 3000 × 2000 그대로 남는 순수한 메타데이터 작업입니다.

리샘플링을 켜면 폭과 높이 입력에 따라 픽셀이 더해지거나 빠질 수 있습니다. 이미지 데이터가 변하므로 파일이 커지거나 작아지고, 선명해지거나 부드러워지며, 무리하게 키우면 보간 아티팩트가 나타납니다.

웹 용도라면 「72 DPI로 해 줘」 같은 애매한 지시는 피하고 실제 목표를 이야기하세요.

• 「폭 1600 px로 리사이즈해 줘.」
• 「320 px 썸네일을 내보내 줘.」
• 「이 JPG를 200 KB 이하로 압축해 줘.」
• 「600 CSS px 슬롯용 2배 이미지, 즉 폭 1200 px로 내보내 줘.」

DPI를 바꾸면 파일 크기가 바뀔까

대개는 바뀌지 않습니다.

DPI/PPI 메타데이터만 편집하면 파일 크기가 그대로이거나 메타데이터 몇 바이트만큼만 달라지고, 이미지 데이터는 여전히 같은 픽셀 격자입니다.

파일 크기는 다음 중 하나를 할 때 변합니다.

• 픽셀 치수를 리사이즈한다.
• 이미지 일부를 잘라낸다.
• JPG/WebP/AVIF 품질을 낮춘다.
• 다른 포맷으로 변환한다.
• EXIF 등 기타 메타데이터를 제거한다.
• 투명도를 병합한다.
• 애니메이션 프레임 수나 지속 시간을 줄인다.

사이트가 500 KB 이하 업로드를 요구한다면 300 DPI에서 72 DPI로 바꾸는 것은 잘못된 해법입니다. 이미지를 리사이즈하거나 압축하거나, 두 가지를 함께 하세요.

300 DPI가 정말로 필요한 경우

300 DPI는 가까이 두고 보는 인쇄에 대한 편리한 축약어로, 최종 출력 1인치당 300 픽셀이 확보되어 있음을 뜻합니다.

전형적인 300 DPI 사례:

• 여권과 비자 사진
• 4 × 6, 5 × 7 인치 사진 인화
• 소형 전단지와 브로슈어
• 도서나 잡지의 이미지
• 가까이서 읽는 제품 라벨
• 작은 글자나 얇은 선이 중요한 스캔

계산은 다음과 같습니다.

인쇄에서는 물리 크기가 선택 사항이 아닙니다. 「300 DPI」만 있으면 정보가 부족합니다. 2 × 2 인치 여권 사진용 300 DPI 이미지는 600 × 600 픽셀이고, A4 페이지용 300 DPI 이미지는 약 2480 × 3508 픽셀로, 같은 300 DPI라도 완전히 다른 파일이 됩니다.

300 DPI가 그다지 중요하지 않은 경우

다음 용도에서 300 DPI에 집착하는 것은 대부분 잘못된 초점입니다.

• 웹사이트 이미지
• SNS 게시물
• 이메일 첨부
• 제품 썸네일
• 블로그 스크린샷
• 앱 아이콘과 UI 그래픽
• 픽셀 치수와 파일 크기를 검증하는 온라인 폼

일부 업로드 창구는 최종 결과가 인쇄된다는 이유로 지침에 DPI를 언급합니다. 그런 경우에도 실제로는 픽셀 치수, 종횡비, 파일 크기, 색상 모드, 얼굴 위치 같은 항목을 검사하지, 메타데이터 태그 자체를 확인하지 않을 때가 많습니다. 「2 × 2 인치, 300 DPI」라고 적혀 있다면 픽셀로 환산하세요. 답은 600 × 600 입니다.

화면 용도에는 픽셀 요구 사항, 인쇄 용도에는 픽셀 요구 사항과 물리 크기를 함께 쓰세요.

Retina와 HiDPI는 「300 DPI」가 아니다

고밀도 화면은 예전 화면보다 더 많은 원본 픽셀을 필요로 하지만, 이는 파일 메타데이터를 300 DPI로 바꾸는 것과는 별개입니다.

예시:

• 디자인이 상품 사진을 600 CSS 픽셀 폭으로 표시한다.
• 1배 화면이라면 폭 600 px 원본으로 충분하다.
• 2배 화면은 폭 1200 px 원본에서 이득을 본다.
• 3배 화면은 디테일이 중요할 때 폭 1800 px 원본에서 이득을 본다.

이미지는 여전히 72, 96, 300 DPI 어느 태그로도 붙어 있을 수 있고, 레이아웃 로직 자체는 달라지지 않습니다. 관건은 원본 픽셀과 표시 CSS 픽셀의 관계입니다.

그래서 반응형 이미지는 1200w나 2x 같은 기술자를 쓰고 「300dpi」를 쓰지 않습니다. 브라우저는 렌더링되는 크기, 화면 밀도, 네트워크 상황을 감안해 픽셀 데이터가 충분한 이미지를 고를 뿐입니다.

자주 오는 요청을 번역하기

DPI 변경 요청은 사실 다른 이야기를 하려는 경우가 많습니다. 파일에 손대기 전에 요청을 번역하세요.

이 한 마디 질문이 대부분의 DPI 실수를 막아 줍니다.

PhotoTools는 DPI 관련 작업을 어떻게 다룰까

PhotoTools는 실제로 출력을 바꾸는 것, 즉 픽셀을 중심으로 설계되어 있습니다.

웹 작업의 경우:

1. 리사이즈로 실제 픽셀 치수를 정한다.
2. 파일 크기 목표가 있다면 압축을 함께 사용한다.
3. 원본은 손대지 않고 그대로 둔다.
4. hero-1600.jpg, card-600.webp처럼 용도가 드러나는 이름으로 웹 사본을 내보낸다.

여권/신분증 사진 인쇄의 경우:

1. 여권 사진 메이커를 연다.
2. 2 × 2 인치, 35 × 45 mm, 또는 사용자 정의 크기 같은 프리셋을 고른다.
3. 도구가 선택한 DPI에서 물리적 사진 크기를 픽셀로 환산한다.
4. 브라우저 안에서 4 × 6 또는 6 × 4 인치 인쇄 시트를 구성한다.
5. 실제 크기 100 %로 인쇄하고, 「용지에 맞춤」은 반드시 끈다.
6. 제출 전에 인쇄된 사진을 자로 재본다.

내부 구현은 선택한 사진 크기, 시트 크기, DPI를 사용해 픽셀 치수를 계산합니다. 예를 들어 4 × 6 인치 시트를 300 DPI로 만들면 1200 × 1800 픽셀 캔버스가 되고, 2 × 2 인치 사진 영역을 300 DPI로 만들면 600 × 600 픽셀이 됩니다.

이것이 실제 인쇄 레이아웃입니다. 작은 웹 이미지를 열어 메타데이터 필드를 300으로 바꿔 놓고 인쇄가 선명하기를 바라는 것과는 전혀 다른 방식입니다.

실용 체크리스트

누군가 DPI를 언급했다고 해서 곧바로 파일을 고치기 전에 다음을 확인하세요.

• 목적지가 웹이면 픽셀 치수와 파일 크기 상한을 물어본다.
• 목적지가 인쇄면 물리 크기와 목표 DPI/PPI를 물어본다.
• 파일이 무거우면 메타데이터가 아니라 리사이즈나 압축을 한다.
• 이미지가 흐릿하면 원본 픽셀·압축·표시 크기를 점검한다.
• 인쇄가 부드럽게 나오면 원본 픽셀이 충분한지 계산한다.
• 인쇄 크기가 잘못 나오면 프린터 스케일링과 용지 크기를 점검한다.
• 여권이나 비자 사진이라면 인쇄물을 실측하고 공식 요구 사항을 재확인한다.

핵심 한 줄. DPI는 픽셀과 종이를 잇는 것, 웹을 지배하는 것은 픽셀과 CSS.

참고한 기술 자료

이 글은 다음 자료들과 대조하여 검토했습니다.

• W3C CSS Values and Units Module Level 4: CSS 절대 단위, 해상도 단위, 1dppx = 96dpi 관계.
• W3C CSS Images Module Level 4: CSS의 이미지 해상도 정의와 image-resolution 속성.
• MDN: image-resolution: 현재 구현 노트와 CSS image-resolution의 실험적 상태.
• MDN: HTMLImageElement naturalWidth: CSS 픽셀 단위의 브라우저 이미지 크기 처리.
• MDN: img 요소 레퍼런스: srcset, sizes, 너비 기술자, 브라우저의 원본 선택 방식.
• Adobe Photoshop — 이미지 크기와 해상도: 픽셀 수·해상도·리샘플링의 구분.
• Adobe Photoshop — 크기 조정과 리샘플링: 리샘플링이 픽셀 데이터를 바꾸는 방식과, 해상도·물리 크기가 인쇄 쪽 개념인 이유.

정리하자면, DPI 태그를 만지작거리는 것은 실제 해법인 경우가 드뭅니다. 먼저 목적지를 정하고, 그 목적지가 실제로 필요로 하는 픽셀·압축·인쇄 레이아웃을 조정하세요.