[웹디자인] 브라우저, 해상도, dp/pt/px, mdpi/xhdpi/..., 이미지 크기

• " 목차 "

 

01. 사이트 로딩속도 체크

3G 환경에서 체크. 사이트 로딩속도가 10초 이상이 되면 고객 이탈률이 급격히 높아진다.
( 해외에서는 5초내외, 우리나라는 1-2초 내외면 최고 )

 

02. 브라우저 점유율 (2024.12 기준)

• 크롬 54.3%
• 삼성전자 인터넷 16%
• 애플 사파리 14%
• 마이크로소프트 엣지 7.18%
• 네이버 웨일 6.71%

03. PPI, DPI

• PPI(Pixels Per Inch) : 1인치(2.54cm) 당 픽셀 수, 디지털 화면에 주로 쓰임
• DPI(Dots Per Inch) : 1인치 당 점(dot) 수, 인쇄물 출력에 주로 쓰임

PPI와 DPI는 모두 화면이나 인쇄물의 '해상도'와 관련된 단위이다.

PPI는 디스플레이의 선명도를 의미한다.
72ppi 는 옛날 웹 기준의 저해상도, 96ppi 는 기본 윈도우 모니터 해상도, 300ppi 는 '레티나급' 또는 고해상도 화면(스마트폰 맥북 등)을 말한다. ppi가 높을 수록 1인치 안에 많은 픽셀이 들어가 더 선명하고 디테일한 이미지 표현이 가능한 것이다.

DPI는 인쇄 장비가 1인치에 찍을 수 있는 점의 개수를 말한다. 
300dpi 는 보통 인쇄용 이미지 해상도 기준이고, 600dpi는 고품질 인쇄, 72dpi는 웹용 이미지로 보통 인쇄에는 적합하진 않다. ppi와 마찬가지로 dpi 또한 수가 높을 수록 더 선명한 인쇄 결과물이 나온다.

웹 작업에서는 ppi만 신경쓰면 되지만 미디어 쿼리에서 고해상도 디바이스를 구분할 때 @media (min-resolution:192dpi){ } 와 같이 dpi가 등장하기도 한다. 

 

04. Retina display / DP, PT, PX

• 1DP = 1PT = 2px

사람이 디스플레이를 보는 거리를 보통 50~60cm 정도라고 할 때, 거리에 비례하여 300ppi를 인지한계점에 도달한 최소 ppi라고 한다.(dpi도 마찬가지)

Retina display는 애플에서 2010년도에 326ppi로 등장한 액정 디스플레이 기술로, 
스크린에서 픽셀이나 도트와 같은 망점이 보이지 않는 고해상도 디스플레이다.
해상도가 높아진다는 것은 같은 크기 안에 들어가는 픽셀의 수가 많아지고 작아졌다는 것을 의미하는데,
이는 기존 1px과 Retina display의 1px이 단어는 같지만 다른 크기를 가졌다는 것을 의미한다.

이러한 기존 픽셀과 Retina display의 픽셀의 차이를 구분하기 위해 기존 픽셀을 구글은 DP로 애플은 PT로 명칭을 바꿔 부르기 시작했다.
현재 거의 모든 기기가 고해상도 이기 때문에 자연스럽게 px을 사용하고 있지만 모바일기기 같은 단위를 잘 보면 px이 아닌 DP 나 PT로 되어있는 것을 확인할 수 있다.
예를들어, 아이폰 7의 넓이를 확인해보면 375PT로 되어있는데 이는 750px을 의마한다. 

 

05.  mdpi, xhdpi, xxhdpi, xxxhdpi

• mdpi : 1DP = 1px 인 디자인(72ppi)
• xhdpi : 1DP = 2px 인 디자인(326ppi)
• xxhdpi : 1DP = 3px 인 디자인(400ppi 이상)
• xxxhdpi : 1DP = 4px 인 디자인(500ppi 이상)

06. 사이트에 들어가는 이미지 용량 크기

웹/앱 디자인을 할 때 이미지 경량화 작업은 무조건 필수이다.
이미지의 크기가 크고 많을 수록 사용하는 데이터와 로딩속도가 달라지기 때문이다.
이미지 경량화 사이트(https://tinypng.com/) 등을 사용하여 용량은 kb로 맞추는 것이 좋다.

고해상도 화면이나 화면 크기가 다른 여러 디바이스에서 다양한 이미지 사이즈를 불러오고 싶을 때, <img> 태그의 srcset 속성을 사용한다. 

<!-- 화면 크기 기반 srcset (w 단위 + sizes) -->
<img
  src="img-800.jpg"
  srcset="
    img-400.jpg 400w,
    img-800.jpg 800w,
    img-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="예시 이미지"
/>​

400w, 800w, 1200w는 이미지의 가로 너비(px)을 의미한다.
sizes는 실제로 이미지가 브라우저에 표시될  크기를 알려주는 힌트이다. 
(max-width: 600px) 100vw = 뷰포트가 600px 이하일 땐 100% 너비, 50vw = 그 외에는 50% 너비
브라우저는 뷰포트 크기와 sizes를 고려하여 가장 적절한 이미지 파일을 선택한다.

<!-- 해상도 기반 srcset (x단위) -->
<img
  src="image@1x.jpg"
  srcset="image@1x.jpg 1x, image@2x.jpg 2x"
  alt="예시 이미지"
/>

 

1x는 일반 해상도용 이미지, 2x는 고해상도(레티나 등) 디바이스용 이미지로 브라우저는 디바이스의 픽셀 비율(dpr)을 보고 자동으로 적절한 이미지를 선택하여 사용한다.

위와 같이 이미지 사이즈를 화면에 맞게 불러올 경우 고해상도에서 흐릿하지 않은 이미지를 제공하면서, 불필요한 용량 낭비를 줄여 성능을 최적화하고 브라우저가 자동으로 선택하기 때문에 개발자가 조건문을 넣지 않고도고 자동으로 이미지 제공이 가능하다. 

* MDN - srcset 설명