한 번 켜면 화면 전체가 바뀐다

KRDS DS-107 — 선명한 화면 모드로 전환되었을 때, 색상 팔레트에 정의된 규칙에 따라 일괄 전환되게 적용하고 있다.

0. 들어가며 — 디자인 스타일의 마지막 분류, ‘선명한 화면 모드’

색상·타이포·형태·레이아웃·아이콘·엘리베이션을 마치고, 이번엔 디자인 스타일의 마지막 분류 — 선명한 화면 모드(14개 규칙) 입니다. 5편에서 처음 소개한 고대비 접근성 모드를, 전용 카테고리로 깊이 다룹니다.

선명한 화면 모드는 저시력·고령 사용자를 위해 대비를 극대화한 별도 모드입니다(5편). 지금까지 여러 카테고리 에서 이 모드의 개별 규칙(글자 대비 21편, 입력칸 23편, 아이콘 25편 등)을 봤는데, 이제 모드 자체의 작동 방식을 규정하는 14개 규칙을 다룹니다. 그 첫 주제는 전환 — 모드를 켜면 화면 전체가 색상 팔레트 규칙에 따라 일괄 전환되어야 한다는 것이죠. 이번 편은 모드 전환의 일관성을 풀어냅니다.

1. 규칙 원문 — 일괄 전환

DS-107 (디자인 스타일 > 선명한 화면 모드) “선명한 화면 모드로 전환되었을 때, 색상 팔레트에 정의된 규칙에 따라 일괄 전환되게 적용하고 있다.”

모드를 켜면 화면의 모든 요소가 정의된 규칙에 따라 한꺼번에 선명한 화면 모드로 바뀌라는 뜻입니다.

정리: 선명한 화면 모드 전환 시 화면 전체가 팔레트 규칙대로 일괄 전환되게 하라. 이게 DS-107입니다.

2. 왜 일괄 전환인가

모드를 켰는데 일부만 바뀌고 일부는 안 바뀌면 어떻게 될까요? 화면이 뒤죽박죽이 됩니다 — 배경은 어두워졌는데 어떤 카드는 여전히 밝거나, 글자는 강화됐는데 아이콘은 그대로면, 화면이 깨진 것처럼 보이죠. 그래서 모드 전환은 화면의 모든 요소가 동시에, 일관되게 바뀌어야 합니다.

이것이 가능하려면, 색이 팔레트 규칙(디자인 토큰)으로 관리되어야 합니다(DS-001·005). 모든 색이 토큰을 참조하면, 토큰의 모드별 값을 한 번 바꾸는 것으로 화면 전체가 일괄 전환되죠. 반대로 색이 화면 곳곳에 하드 코딩돼 있으면, 모드를 켜도 그 하드코딩된 색은 안 바뀌어 일부만 전환되는 사고가 납니다. 그래서 DS-107은 ’색상 팔레트에 정의된 규칙에 따라’를 명시합니다 — 토큰 기반이어야 일괄 전환이 가능한 것이죠.

이는 지금까지 본 선명한 화면 모드 규칙들(글자·입력칸·아이콘·깊이)이 모두 함께 작동하기 위한 토대입니다. 각 요소의 모드별 값이 토큰으로 정의돼 있고, 전환 시 일괄로 바뀌어야, 화면 전체가 일관된 고대비 모드가 되죠. DS-107은 그 일괄 전환을 보장하는 규칙입니다. 모드는 ‘부분 보정’이 아니라 ’화면 전체의 동시 전환’ 이어야 합니다(19편·21편의 ‘함께 설계’ 원리).

3. 점검 / 개선

무엇을 점검하나

일괄 전환 — 모드 전환 시 모든 요소가 동시에 바뀌는가.

토큰 기반 — 색이 팔레트 토큰으로 관리되는가(하드코딩 없음).

일관성 — 일부만 전환되어 화면이 깨지지 않는가.

Before / After

/* ✅ 토큰 기반 일괄 전환 */ :root { --bg: var(--gray-0); --text: var(--gray-90); } :root[data-mode="high-contrast"] { --bg: var(--gray-100); --text: var(--gray-5); } /* 모든 요소가 토큰 참조 → 모드 전환 시 일괄 변경 */ body { background: var(--bg); color: var(--text); }

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

역할	책임
디자인 시스템 담당	모드별 팔레트 토큰 정의
퍼블리셔/개발	토큰 기반 일괄 전환 구현, 하드코딩 제거

기관 유형	DS-107 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (선명모드 제공 시)

선명한 화면 모드를 제공하는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모드 전환 시 화면 전체가 일괄로 바뀌나요?

□ 일부만 전환되어 화면이 깨지지 않나요?

□ 색이 토큰으로 관리되나요(하드코딩 없음)?

❓ FAQ

Q1. 왜 일괄 전환이 중요한가요? 일부만 바뀌면 화면이 뒤죽박죽 깨집니다. 모든 요소가 동시에 전환되어야 일관된 고대비 모드가 됩니다. Q2. 어떻게 일괄 전환하나요? 색을 디자인 토큰으로 관리하고, 모드별 토큰 값을 정의하면 됩니다. 토큰을 참조하는 모든 요소가 자동으로 함께 바뀝니다. Q3. 하드코딩된 색이 있으면요? 그 색은 모드 전환 시 안 바뀌어 일부만 전환됩니다. 모든 색을 토큰화해야 일괄 전환이 보장됩니다. Q4. KRDS를 채택하면 자동인가요? KRDS는 모드별 토큰을 정의해 일괄 전환을 지원합니다.

6. 마무리

DS-107의 메시지:

한 번 켜면 화면 전체가 바뀐다 — 토큰 기반 일괄 전환으로 일관된 고대비 모드를.

모드 전환은 화면의 모든 요소가 동시에 일괄로 바뀌어야 일관됩니다. 이것이 가능하려면 색이 팔레트 토큰으로 관리되어야 하죠. 하드코딩이 있으면 일부만 전환되어 화면이 깨집니다. DS-107은 일괄 전환의 토대입니다.

다음 편은 배경색 상태 규칙을 다룹니다. DS-108 — “선명한 화면 모드에서도 텍스트·아이콘 아래 배경색은 일관된 색상 상태 규칙을 사용한다.”

다음 편 예고 ▶ 「108. 선명한 화면 모드에서도 텍스트, 아이콘 아래 영역의 배경색은 일관된 색상 상태 규칙을 사용하고 있다.」

ViewCheck는 선명한 화면 모드 전환 시 화면 전체가 토큰 규칙대로 일괄 전환되는지를 진단합니다.

📚 참고 출처

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

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

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