셀러·소상공인웹 개발이미지

홈페이지 로고·배너가 흐릿하게 보이는 이유: 레티나 화면과 2배 이미지

2026-09-18 · 3분 읽기

모바일과 최신 노트북에서 이미지가 흐려지는 원인

웹사이트를 제작하거나 블로그를 운영할 때 분명히 선명한 로고 이미지를 올렸는데 스마트폰이나 고해상도 노트북 화면에서 글자 경계선이 뿌옇게 흐려 보이는 현상을 자주 겪습니다.

이는 화면 표시 규격인 CSS 픽셀과 모니터 패널의 물리 픽셀이 1:1로 일치하지 않기 때문에 발생합니다. 과거 표준 모니터는 1 CSS 픽셀당 1개의 물리 픽셀을 사용했습니다.

그러나 애플의 레티나 디스플레이를 비롯한 고해상도 패널은 1 CSS 픽셀 공간에 가로·세로 각각 2배 또는 3배의 물리 픽셀을 촘촘하게 배치하는 고밀도(HiDPI) 방식을 채택하고 있습니다. 기기 픽셀 비율(Device Pixel Ratio, DPR)이 2.0 또는 3.0에 달하는 환경이 일반화되었습니다.

200px 영역에 400px 이미지를 올려야 하는 원리

웹페이지 레이아웃 상에서 가로 200px, 세로 50px로 표시되는 헤더 로고 영역이 있다고 가정해 봅니다.

만약 이 영역에 정확히 200×50 픽셀 크기의 이미지 파일을 그대로 업로드하면 DPR 2.0 환경의 화면에서는 400×100개의 물리 픽셀 공간에 200×50 픽셀의 작은 이미지를 강제로 늘려서 채우게 됩니다. 이 과정에서 브라우저의 보간 연산이 들어가며 글자나 로고의 얇은 선이 뭉개지고 번지게 됩니다.

따라서 화면에 200×50 픽셀 크기로 보여줄 요소라면 원본 그래픽 파일은 가로·세로 2배수인 400×100 픽셀 해상도로 제작해야 합니다. 400 픽셀의 원본 데이터를 200 CSS 픽셀 공간에 축소하여 매핑할 때 레티나 패널의 미세한 물리 픽셀들이 촘촘하게 채워지며 인쇄물 수준의 또렷한 경계면이 유지됩니다.

용량 증가를 억제하는 WebP 변환과 압축 기준

가로·세로 해상도를 2배로 늘리면 전체 픽셀 수는 4배로 증가합니다. 이는 PNG나 JPG 파일의 용량이 급격히 커지는 원인이 되며, 웹페이지 로딩 속도를 저하시킬 수 있습니다.

이 문제를 해결하는 가장 실용적인 방법은 차세대 이미지 포맷인 WebP를 활용하고 적정 품질로 압축하는 것입니다. 같은 화질에서 WebP는 PNG보다 약 26%, JPG보다 25~34% 작습니다.

400×100 픽셀 크기의 로고 파일이라면 품질 85% 내외의 WebP 포맷으로 변환했을 때 20~30KB 이하의 가벼운 용량으로 고선명도를 유지할 수 있습니다.

이미지 변환·압축 에서 최대 너비를 400으로, 형식을 WebP로 지정하면 그래픽 프로그램 없이 브라우저에서 바로 최적화된 이미지를 얻을 수 있습니다.

반응형 코드 없이 2배수 이미지를 적용하는 실무 방법

HTML이나 CSS의 반응형 문법인 srcset 속성을 빠짐없이 다루기 어려운 환경이라면 다음과 같은 최소한의 원칙만 적용해도 충분합니다.

로고나 아이콘, 텍스트가 포함된 핵심 배너는 화면 표시 목표 크기보다 정확히 가로·세로 2배 큰 해상도로 디자인하여 저장합니다. 크기 조절이나 포맷 변환이 필요할 때는 이미지 변환·압축 와 같은 도구로 화질 손실을 최소화하며 크기를 맞출 수 있습니다.

웹사이트 빌더나 에디터에 이미지를 업로드한 뒤 이미지의 표시 속성(HTML width 값 또는 CSS 스타일)을 1배수 기준(예: width: 200px; height: auto;)으로 고정합니다.

복잡한 코드 수정 없이 표시 규격만 절반으로 지정해 두면 브라우저가 고해상도 소스를 자연스럽게 다운샘플링하여 선명하게 렌더링합니다. 이 간단한 규칙만 지켜도 모바일과 데스크톱 고해상도 환경 전반에서 시각적 완성도를 크게 높일 수 있습니다.