벡터 이미지는 토큰으로 자동 전환

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

0. 들어가며 — 벡터 이미지의 모드 전환

지난 115편(래스터는 별도 버전)에 이어, 이번 116편은 벡터 이미지(SVG) 의 모드 전환입니다 — 디자인 토큰 색상 규칙으로 자동 적용.

래스터는 별도 버전이 필요했지만(115편), 벡터(SVG)는 다릅니다. SVG는 코드로 색을 제어할 수 있어, 디자인 토큰을 참조하면 모드 전환 시 자동으로 색이 바뀝니다(75편의 SVG 이점). DS-116은 벡터 이미지가 토큰 규칙에 따라 모드 전환되게 구현하라고 규정합니다. 이번 편은 벡터 이미지의 토큰 기반 전환을 풀어냅니다.

1. 규칙 원문 — 토큰 기반 적용

DS-116 (디자인 스타일 > 선명한 화면 모드) “선명한 화면 모드로 전환되었을 때, 디자인 토큰의 색상 규칙에 따라 백터 이미지가 적용될 수 있도록 구현하고 있다.”

벡터 이미지(SVG)의 색을 디자인 토큰으로 연결해, 모드 전환 시 토큰 규칙대로 자동 적용되게 하라는 뜻입니다.

정리: 벡터 이미지는 디자인 토큰 색상 규칙에 연결해 모드 전환 시 자동 적용되게 구현하라. 이게 DS-116입니다.

2. 왜 벡터는 토큰으로 자동 전환인가

벡터 이미지(SVG)는 도형을 코드로 그리므로, 색을 CSS·토큰으로 제어할 수 있습니다(75편). SVG의 색을 디자인 토큰(--color-icon 등)에 연결하면, 모드 전환 시 그 토큰 값이 바뀌면서 SVG 색도 자동으로 바뀌죠. 래스터 처럼 별도 버전을 만들 필요가 없습니다.

이것이 SVG(벡터)가 아이콘·도표에 권장되는 핵심 이유입니다(75편). 모드 전환에서 — 래스터는 모드별 이미지를 따로 만들고 교체해야 하지만(115편), 벡터는 토큰 하나로 일괄 전환(107편)에 자연스럽게 포함됩니다. 관리가 훨씬 쉽고, 일관성도 보장되죠.

핵심은 SVG의 색을 ‘하드코딩하지 않고 토큰으로’ 연결하는 것입니다. SVG 안에 색을 직접 박으면(fill=“#000”) 모드 전환이 안 되지만, fill="currentColor"나 토큰 변수로 연결하면 모드에 따라 자동으로 바뀝니다. 107편 (일괄 전환)의 토큰 원리가 벡터 이미지에 적용된 것이죠. 그래서 가능한 그래픽은 벡터로 만들고 토큰에 연결 하면, 모드 전환이 자동이고 일관됩니다 — 래스터의 번거로운 별도 버전 관리(115편)를 피할 수 있습니다.

3. 점검 / 개선

무엇을 점검하나

토큰 연결 — 벡터 이미지 색이 디자인 토큰에 연결됐는가.

자동 전환 — 모드 전환 시 벡터 색이 자동으로 바뀌는가.

하드코딩 없음 — SVG에 색이 직접 박혀 있지 않은가.

Before / After

<!-- ❌ 색 하드코딩 (모드 전환 안 됨) --> <svg><path fill="#000000"/></svg> <!-- ✅ currentColor/토큰 연결 (자동 전환) --> <svg style="color: var(--color-icon)"><path fill="currentColor"/></svg>

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

역할	책임
퍼블리셔/개발	벡터 이미지 색을 토큰에 연결 구현
디자이너	벡터 이미지 색 토큰 정의

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 벡터 이미지 색이 토큰에 연결됐나요?

□ 모드 전환 시 벡터 색이 자동으로 바뀌나요?

□ SVG에 색이 하드코딩되지 않았나요?

❓ FAQ

Q1. 115편(래스터)과 다른가요? 래스터는 색 고정이라 별도 버전(115), 벡터는 토큰으로 자동 전환(116)입니다. 형식에 따라 모드 전환 방식이 다릅니다. Q2. currentColor가 뭔가요? SVG가 부모의 글자색(color)을 따르게 하는 값입니다. 토큰으로 color를 바꾸면 SVG도 함께 바뀝니다. Q3. KRDS를 채택하면 자동인가요? KRDS 벡터 아이콘은 토큰 기반 색으로 제공돼 모드 전환이 자동입니다.

6. 마무리

DS-116의 메시지:

벡터 이미지는 토큰으로 자동 전환 — 래스터의 별도 버전 관리를 피할 수 있다.

SVG는 색을 토큰에 연결하면 모드 전환 시 자동으로 바뀝니다(107편의 일괄 전환에 포함). 래스터처럼 별도 버전을 만들 필요가 없어 관리가 쉽고 일관되죠. 가능한 그래픽을 벡터로 만드는 것이 모드 전환에 유리합니다.

다음 편은 화면 이동 시 일관성을 다룹니다. DS-117 — “화면 이동·서비스 채널 변경 시 모드 일관성을 유지한다.”

다음 편 예고 ▶ 「117. 한 화면에서 다른 화면으로 이동하거나 서비스 채널이 변경될 때 모드 일관성을 유지하고 있다.」

ViewCheck는 벡터 이미지가 토큰 규칙으로 모드 전환되는지를 진단합니다.

📚 참고 출처

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

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

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