작은 화면, 느린 망을 배려하라

KRDS CP-204 — [모바일] 사용자의 화면 크기, 접속 환경을 고려하여 이미지를 사용하고 있다.

0. 들어가며 — 데스크톱 대형 이미지를 모바일에 그대로

이번 324편은 모바일 사용자의 화면 크기와 접속 환경을 고려하여 이미지를 사용하라는 규칙입니다.

데스크톱용 대형 이미지(예: 1920px 폭, 수 MB)를 모바일에 그대로 내려보내면 — 작은 화면에 비해 과하게 무거운 파일이 느린 모바일 망에서 로딩을 지연시키죠. 데이터도 낭비됩니다. CP-204는 화면 크기·접속 환경에 맞는 적정한 이미지를 제공하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 화면 크기·접속 환경 고려

CP-204 (컴포넌트 > 이미지) [모바일] “사용자의 화면 크기, 접속 환경을 고려하여 이미지를 사용하고 있다.”

모바일 등 다양한 화면 크기와 네트워크 환경에 맞춰, 적정한 크기·용량의 이미지를 제공해 로딩 부담과 데이터 낭비를 줄이라는 뜻입니다.

정리: 화면 크기·접속 환경에 맞는 적정 이미지를 제공하라. 이게 CP-204입니다.

2. 왜 화면 크기·접속 환경을 고려하나

이미지는 페이지에서 가장 무거운 리소스인 경우가 많습니다(효율성 영역, Web Vitals의 LCP에 직결). 그래서 이미지 크기·용량은 성능에 큰 영향을 주죠. 데스크톱과 모바일은 화면 크기와 네트워크 환경이 크게 다른데, 같은 이미지를 무차별 제공하면 문제가 생깁니다.

① 화면 크기 불일치 — 과한 해상도. 데스크톱 대형 화면용 이미지(예: 1920px 폭)를 모바일 작은 화면(예: 390px 폭)에 그대로 내려보내면 — 모바일은 그 큰 이미지를 작게 줄여 표시할 뿐입니다. 즉 화면에 필요한 것보다 훨씬 큰 파일을 받아 낭비하죠. 390px 화면에 1920px 이미지는 5배 과한 데이터입니다. 보이는 결과는 같은데 다운로드 부담만 큰 거죠.

② 접속 환경 — 느린 망·데이터 비용. 모바일은 종종 데스크톱보다 느린 네트워크(셀룰러, 약한 와이파이)를 씁니다. 무거운 이미지는 — 로딩이 느려 사용자가 빈 화면을 한참 기다리고(LCP 악화), 데이터 요금제 사용자에게는 데이터 비용 부담을 주죠. 공공 사이트는 다양한 사용자(고령·저사양 기기·느린 망)를 포용해야 하므로 이 배려가 중요합니다.

그래서 CP-204는 — 화면 크기·접속 환경에 맞는 적정한 이미지를 제공하라고 합니다. 핵심 기법은 반응형 이미지(responsive images) 입니다:

srcset·sizes — 같은 이미지를 여러 크기로 준비하고, 브라우저가 화면 크기·해상도에 맞는 버전을 선택해 받게 합니다. 모바일은 작은 버전, 데스크톱은 큰 버전을 받죠.

<img srcset="small.jpg 480w, large.jpg 1920w" sizes="(max-width:600px) 480px, 1920px" src="large.jpg" alt="...">

<picture> — 화면 조건(미디어 쿼리)이나 포맷에 따라 다른 이미지 소스를 제공. 모바일/데스크톱용 다른 이미지(아트 디렉션)나 포맷 분기에 씁니다.

차세대 포맷 — WebP·AVIF 같은 효율적 포맷으로 같은 품질을 더 작은 용량으로 제공.

압축·최적화 — 이미지를 적절히 압축해 불필요하게 무겁지 않게.

지연 로딩(lazy loading) — loading="lazy"로 화면 밖 이미지는 필요할 때 로딩해 초기 부담 감소.

이렇게 하면 — 모바일 사용자는 작고 가벼운 이미지를 받아 빠르게 보고 데이터를 아끼며, 데스크톱 사용자는 선명한 큰 이미지를 받죠. 각 환경에 최적화됩니다.

이 규칙은 이미지의 ’성능·포용성’을 담당합니다 — CP-202(목적에 맞게)로 불필요한 이미지를 줄이고, CP-204(반응형) 로 필요한 이미지를 환경에 맞게 최적화하면, 이미지가 성능을 해치지 않으면서 제 역할을 하죠. 다양한 사용자 (느린 망·저사양·데이터 제한)를 배려하는 보편적 접근성의 한 축이기도 합니다.

정리하면 — 이미지는 무거운 리소스이므로, 화면 크기·접속 환경에 맞는 반응형 이미지·최적화로 적정 크기·용량을 제공해 로딩 부담과 데이터 낭비를 줄여야 합니다.

3. 점검 / 개선

무엇을 점검하나

반응형 제공 — 화면 크기에 맞는 이미지 버전이 제공되는가(srcset/<picture>).

용량 최적화 — 이미지가 적절히 압축·최적화됐는가(과한 용량 없음).

모바일 부담 — 모바일에서 과한 해상도·용량의 이미지를 받지 않는가.

개선 방향

srcset/sizes·<picture>로 화면별 적정 이미지 제공.

WebP/AVIF 포맷·압축·loading="lazy" 적용.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
퍼블리셔/개발	반응형 이미지·포맷·압축·지연로딩 구현
디자이너	화면별 이미지 크기·아트 디렉션 정의

기관 유형	CP-204 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (모바일 지원 + 이미지 사용 시)

이미지를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 화면 크기에 맞는 이미지 버전이 제공되나요(srcset/<picture>)?

□ 이미지가 적절히 압축·최적화됐나요(과한 용량 없음)?

□ 모바일에서 과한 해상도·용량의 이미지를 받지 않나요?

❓ FAQ

Q1. 같은 이미지를 모두에게 주면 안 되나요? 모바일은 작은 화면에 큰 이미지를 받아 낭비하고 로딩이 느려 집니다. 화면별 적정 버전이 좋습니다. Q2. 반응형 이미지를 어떻게 구현하나요? srcset/sizes로 여러 크기를 제공하면 브라우저가 화면에 맞는 걸 선택합니다. <picture>로 조건별 분기도 가능하죠. Q3. 포맷도 바꾸나요? WebP·AVIF 같은 효율적 포맷은 같은 품질을 더 작은 용량으로 제공해 도움이 됩니다.

6. 마무리

CP-204의 메시지:

작은 화면, 느린 망을 배려하라 — 화면 크기·접속 환경에 맞는 이미지를 제공하라.

이미지는 무거운 리소스라 성능에 직결됩니다. 데스크톱 대형 이미지를 모바일에 그대로 주면 데이터 낭비와 로딩 지연이 생기죠. 반응형 이미지(srcset/<picture>)·최적화로 환경에 맞는 적정 이미지를 제공해 빠르고 포용적 이게 합니다. 다음 편은 대체 텍스트 제공입니다.

다음 편 예고 ▶ 「325. (CP-205) 장식용 이미지를 제외한 모든 이미지에 대체 텍스트를 제공하고 있다.」

ViewCheck는 이미지가 화면 크기·접속 환경을 고려해 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 이미지(Image) 가이드 — https://www.krds.go.kr/html/site/component/component_19.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준