사진형 이미지는 모드별로 따로 준비

KRDS DS-115 — 기본 모드와 선명한 화면 모드 각각 별도 버전으로 래스터 이미지(JPEG, PNG, GIF 등)를 적용하고 있다.

0. 들어가며 — 모드 전환과 이미지

지금까지 색·외곽선·링크의 모드 전환을 봤습니다. 이번 115편은 이미지의 모드 전환입니다 — 래스터 이미지는 모드별 별도 버전으로.

이미지에는 두 종류가 있습니다 — 벡터(SVG, 75편)와 래스터(JPEG·PNG·GIF). 벡터는 코드로 색을 바꿀 수 있지만 (다음 편 DS-116), 래스터(픽셀 이미지)는 색이 고정돼 코드로 못 바꿉니다. 그래서 선명한 화면 모드용 래스터 이미지는 별도 버전을 따로 준비해야 하죠. 이번 편은 래스터 이미지의 모드별 처리를 풀어냅니다.

1. 규칙 원문 — 별도 버전

DS-115 (디자인 스타일 > 선명한 화면 모드) “기본 모드와 선명한 화면 모드 각각 별도 버전으로 래스터 이미지(JPEG, PNG, GIF 등)를 적용하고 있다.”

래스터 이미지(픽셀 이미지)는 모드별로 각각 다른 버전을 준비해 적용하라는 뜻입니다.

정리: 래스터 이미지는 기본 모드용·선명한 화면 모드용 별도 버전을 준비하라. 이게 DS-115입니다.

2. 왜 래스터는 별도 버전인가

래스터 이미지(JPEG·PNG·GIF)는 픽셀로 색이 고정된 이미지입니다. 코드(CSS)로 색을 바꿀 수 없죠. 그래서 모드를 전환해도 래스터 이미지의 색은 그대로입니다.

문제는 기본 모드(밝은 배경)에 맞춰 만든 래스터 이미지가 선명한 화면 모드(어두운 배경)에서는 어색하거나 안 보일 수 있다는 것입니다. 예를 들어 흰 배경에 맞춰 만든 도표·아이콘 이미지가 어두운 배경에 놓이면, 흰 부분이 눈부시거나 경계가 안 맞죠. 색이 고정이라 자동 전환이 안 되니까요.

그래서 래스터 이미지는 모드별로 별도 버전을 만들어, 모드에 맞는 이미지를 보여줘야 합니다. 기본 모드 에서는 밝은 배경용 이미지, 선명한 화면 모드에서는 어두운 배경용 이미지로 교체하는 것이죠. 이는 107편(일괄 전환)의 예외 영역입니다 — 색이 토큰화된 요소는 일괄 전환되지만, 래스터 이미지는 토큰화가 안 되므로 별도 버전 교체가 필요합니다.

다음 편(DS-116)에서 보겠지만, 벡터 이미지(SVG)는 토큰으로 색을 바꿀 수 있어 별도 버전이 필요 없습니다. 그래서 가능하면 아이콘·도표는 벡터로 만드는 것이 모드 전환에 유리하고(75편), 사진처럼 벡터로 못 만드는 래스터는 별도 버전을 준비하는 것이죠. 이미지 형식에 따라 모드 전환 방식이 다릅니다.

3. 점검 / 개선

무엇을 점검하나

별도 버전 — 래스터 이미지가 모드별 별도 버전으로 준비됐는가.

모드 전환 — 모드 전환 시 적절한 이미지로 교체되는가.

벡터 우선 — 가능한 이미지는 벡터(SVG)로 만들었는가.

Before / After

<!-- ✅ 모드별 래스터 이미지 교체 --> <picture> <source srcset="chart-dark.png" media="(prefers-contrast: more)"> <img src="chart-light.png" alt="통계 도표"> </picture>

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

역할	책임
디자이너	모드별 래스터 이미지 제작
퍼블리셔/개발	모드별 이미지 교체 구현

기관 유형	DS-115 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (선명모드 + 래스터 이미지 사용 시)

선명한 화면 모드를 제공하고 래스터 이미지가 있는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 래스터 이미지가 모드별 별도 버전인가요?

□ 선명모드에서 이미지가 어색하거나 안 보이지 않나요?

□ 가능한 이미지는 벡터(SVG)로 만들었나요?

❓ FAQ

Q1. 왜 래스터만 별도 버전인가요? 래스터는 색이 고정이라 코드로 못 바꿉니다. 벡터(SVG)는 코드로 색을 바꿀 수 있어 별도 버전이 불필요합니다(DS-116). 형식에 따라 다릅니다. Q2. 사진도 별도 버전인가요? 사진은 모드와 무관하게 보일 수 있으나, 배경에 맞춰야 하는 도표·일러스트는 모드별 버전이 필요합니다. 어두운 배경에서 어색한 이미지가 대상입니다. Q3. KRDS를 채택하면 자동인가요? KRDS 가이드는 모드별 이미지 처리 방식을 제시합니다. 래스터는 별도 준비가 필요합니다.

6. 마무리

DS-115의 메시지:

사진형(래스터) 이미지는 모드별로 따로 준비 — 색이 고정이라 자동 전환이 안 되니까.

래스터 이미지는 색이 고정돼 코드로 못 바꾸므로, 모드별 별도 버전을 준비해 교체합니다. 색이 토큰화된 요소는 일괄 전환되지만(107편), 래스터는 예외라 별도 처리가 필요하죠. 가능한 이미지는 벡터로 만드는 것이 유리합니다.

다음 편은 벡터 이미지를 다룹니다. DS-116 — “선명한 화면 모드 전환 시 디자인 토큰 색상 규칙에 따라 벡터 이미지가 적용되게 구현한다.”

다음 편 예고 ▶ 「116. 선명한 화면 모드로 전환되었을 때, 디자인 토큰의 색상 규칙에 따라 백터 이미지가 적용될 수 있도록 구현하고 있다.」

ViewCheck는 래스터 이미지가 모드별 별도 버전으로 적용됐는지를 진단합니다.

📚 참고 출처

KRDS 선명한 화면 모드 가이드 — https://www.krds.go.kr/html/site/style/style_02.html

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

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