버튼이 반응할 때, 같은 색이 짙어지고 옅어진다

KRDS DS-026 — 상호 작용이 있는 요소의 상태 값을 동일한 색조로 구성하고 점진적으로 증가 또는 감소하는 색상 규칙을 사용하여 표현하고 있다.

0. 들어가며 — 색상 카테고리의 마침표

색상 26개 규칙의 마지막입니다. 그리고 이 마지막 규칙은 지금까지 본 색의 모든 개념 — 팔레트, 명도 단계, 역할, 매직넘버 — 이 한데 모이는 자리이기도 합니다.

주제는 상호작용 요소의 ‘상태(state)’ 입니다. 버튼이나 링크는 가만히 있지 않습니다. 마우스를 올리면 (hover) 색이 변하고, 누르면(active) 또 변하고, 키보드 초점이 가면(focus) 표시가 생깁니다. 이 상태 변화를 사용자가 보고 “아, 내가 이 버튼에 반응을 일으켰구나”를 인지하죠. 상태 색은 화면이 사용자에게 보내는 피드백입니다.

DS-026은 이 상태 색이 어떻게 변해야 하는지를 규정합니다 — 같은 색조(hue)를 유지하면서, 점진적으로 짙어지거나 옅어지게. 버튼의 hover 색이 갑자기 빨강으로 튀는 게 아니라, 원래 파랑이 한 단계 진한 파랑이 되는 식으로요. 이번 편은 왜 상태 색이 ’같은 색조의 점진적 변화’여야 하는지를 풀어내며, 색상 카테고리를 마무리합니다.

1. 규칙 원문 — 두 개의 조건

DS-026 (디자인 스타일 > 색상) “상호 작용이 있는 요소의 상태 값을 ① 동일한 색조로 구성하고 ② 점진적으로 증가 또는 감소하는 색상 규칙을 사용하여 표현하고 있다.”

① “동일한 색조(hue)로 구성”

상태가 변해도 같은 색 계열을 유지하라는 뜻입니다. 파란 버튼의 hover·active 상태도 파랑 계열이어야지, 갑자기 다른 색(초록·빨강)으로 바뀌면 안 됩니다. ’색조(hue)’는 3편에서 본 색의 세 속성 중 ’무슨 색이냐’에 해당하죠.

② “점진적으로 증가 또는 감소”

상태에 따라 색이 점점 짙어지거나 옅어지게 한다는 뜻입니다. 기본 → hover → active로 갈수록 명도가 한 단계씩 진해지는(또는 옅어지는) 식이죠. 4편에서 본 명도 단계가 여기서 쓰입니다 — 같은 색의 다른 단계로 상태를 표현하는 것입니다.

정리: 버튼·링크의 상태(hover·active 등)는 같은 색조를 유지하며 명도 단계만 점진적으로 바꿔 표현하라. 이게 DS-026입니다.

2. 상호작용 요소의 ’상태’란

먼저 상태가 무엇인지 정리합시다. 버튼·링크 같은 상호작용 요소는 여러 상태를 가집니다.

상태	영문	의미
기본	default	평상시
마우스 올림	hover	마우스가 위에 있을 때
누름	active/pressed	클릭하는 순간
초점	focus	키보드로 선택됐을 때
비활성	disabled	사용 불가(11편)

사용자는 이 상태 변화를 보고 상호작용을 인지합니다. hover로 색이 변하면 “이건 누를 수 있는 거구나”, active로 색이 변하면 “지금 눌렀구나”를 알죠. 상태 색은 화면이 사용자의 동작에 응답하는 신호입니다. 이 신호가 명확해야 사용자는 화면이 자기 동작에 반응한다는 확신을 갖습니다. 반응이 없거나 모호하면 “눌린 건가? 안 눌린 건가?” 헷갈리죠.

3. 왜 ’같은 색조’인가 — 일관성과 인지

상태가 변할 때 색조까지 바꾸면 안 되는 이유를 봅시다.

파란 버튼에 마우스를 올렸더니 갑자기 초록으로 변한다고 상상해 보세요. 사용자는 순간 “어? 다른 버튼이 됐나? 무슨 의미지?”하고 혼란스럽습니다. 색조가 바뀌면 ’다른 것’으로 인지되기 때문입니다. 우리는 색을 통해 정체성을 인식하는데, 색조가 변하면 그 정체성이 흔들립니다.

반면 같은 파랑이 한 단계 진해지면, 사용자는 “같은 버튼이 반응하고 있구나”를 자연스럽게 인지합니다. 정체성은 유지된 채(같은 파랑), 강도만 변한 것(진해짐)이니까요. 마치 같은 사람이 목소리를 조금 높인 것처럼, ’같은 것의 다른 상태’로 읽힙니다. 그래서 상태 변화는 색조를 유지하고 명도만 바꿔야 일관되고 직관적입니다.

이 원리는 7편(역할 색)과도 연결됩니다. 버튼의 색조는 그 버튼의 ‘역할’(Primary 등)을 나타냅니다. 상태가 변한다고 색조가 바뀌면 역할 정보까지 흔들립니다. 색조는 역할을 지키고, 명도 단계는 상태를 표현 — 이렇게 역할을 분담하면 화면의 색 언어가 명료해집니다.

4. 왜 ’점진적’인가 — 강도의 위계

상태 변화가 점진적이어야 하는 이유도 있습니다. 상태마다 ’강도’가 다르기 때문입니다.

기본 < hover < active 순으로 사용자의 개입 강도가 커집니다. 그냥 보는 상태(기본), 관심을 보이는 상태 (hover), 실제로 누르는 상태(active). 이 강도의 차이를 색의 점진적 변화로 표현하면, 사용자는 색의 진하기만 보고도 “지금 내 동작이 어느 단계인지”를 인지합니다. hover에서 살짝 진해지고, active에서 더 진해지는 식으로 강도가 색에 매핑되는 것이죠.

이때 명도 단계(4편)가 강도의 눈금이 됩니다. 예를 들어 Primary 버튼이 — 기본 primary-50, hover primary-60, active primary-70 — 이렇게 한 단계씩 진해지면, 점진적 강도 변화가 명확히 표현됩니다. 단계가 정의돼 있으니 (DS-004), 상태 색도 그 단계에서 골라 일관되게 만들 수 있습니다. 상태 색이 ’감각으로 아무렇게나’가 아니라 ’정해진 단계의 점진적 이동’이 되는 것이죠.

이 점진성은 예측 가능성도 줍니다. 한 버튼의 상태 변화 규칙(예: hover는 한 단계 진하게)이 사이트 전체에 일관되게 적용되면, 사용자는 모든 버튼이 같은 방식으로 반응할 것을 예측합니다. 버튼마다 상태 변화가 제각각이면 (어떤 건 진해지고, 어떤 건 다른 색으로 변하고) 사용자는 매번 새로 파악해야 합니다. 점진적·일관된 상태 색은 화면 전체의 상호작용을 예측 가능하게 만듭니다.

5. 색의 모든 개념이 모이는 자리

DS-026은 색상 카테고리의 마지막답게, 앞서 본 개념들이 한데 모입니다.

팔레트(DS-001) — 상태 색도 팔레트 안에서.

명도 단계(DS-004) — 점진적 변화는 명도 단계로.

역할 색(DS-007) — 색조는 역할을 유지.

대비(DS-002·020) — 모든 상태에서 글자·테두리 대비 유지.

비활성(DS-011) — disabled는 투명도 아닌 전용 색으로.

즉 DS-026은 ’상태’라는 주제로 색의 여러 규칙을 통합합니다. 버튼 하나의 상태 색을 제대로 만들려면 — 팔레트 색을(001), 명도 단계로 점진적으로(004), 색조는 역할대로 유지하며(007), 각 상태에서 대비를 지키고 (002·020), 비활성은 전용 색으로(011) — 이 모든 규칙을 함께 적용해야 합니다. 색상 26개 규칙이 따로 노는 게 아니라 하나의 체계임을 보여주는 마무리인 셈입니다.

KRDS를 채택하면 이 상태 색 체계가 컴포넌트에 이미 구현돼 있습니다. 버튼·링크 등의 hover·active·focus 상태 색이 같은 색조의 점진적 단계로 정의돼 있어, 그대로 쓰면 DS-026이 충족됩니다.

6. 흔한 위반 패턴

DS-026 위반은 이렇게 나타납니다.

함정 ① 상태마다 다른 색조. hover에서 색조가 바뀜(파랑→초록) → 사용자 혼란. → 같은 색조 유지, 명도만.

함정 ② 비점진적 변화. 상태 색이 단계 없이 제각각(기본 연함, hover 갑자기 매우 진함) → 강도 위계 불명확. → 점진적 단계 변화.

함정 ③ 상태 변화 없음. hover·active에 색 변화가 없어 반응 인지 안 됨. → 상태별 명도 변화 부여.

함정 ④ 일관성 없는 규칙. 버튼마다 상태 변화 방식이 달라 예측 불가. → 사이트 전체 상태 규칙 통일.

핵심: 상태 색은 ‘같은 색조 + 점진적 명도 변화’ 라는 한 규칙을 사이트 전체에 일관되게 적용해야 합니다.

7. 무엇을 점검하나

DS-026은 상호작용 요소의 상태 색이 일관된 규칙을 따르는지를 봅니다.

색조 유지 — 상태가 변해도 같은 색조(hue)를 유지하는가.

점진적 변화 — 상태에 따라 명도가 점진적으로 변하는가.

상태 인지성 — hover·active 등 상태 변화가 충분히 보이는가.

규칙 일관성 — 사이트 전체 상호작용 요소가 같은 상태 규칙을 따르는가.

8. 누가 담당하나

역할	책임
디자이너	상태 색을 같은 색조·점진적 단계로 설계
퍼블리셔/개발	hover·active·focus 상태 색을 토큰으로 일관 구현
디자인 시스템 담당	상태 색 규칙 표준 정의(또는 KRDS 채택)

9. 우리 사이트에 해당될까?

적용 대상

기관 유형	DS-026 적용
중앙행정기관(대표)	✅ 필수
중앙행정기관(운영)	✅ 필수
공공기관	✅ 필수
지방자치단체	✅ 필수

버튼·링크 등 상호작용 요소가 있는 모든 사이트 = 해당. 사실상 모든 웹이 적용 대상입니다.

예외(N/A)

상호작용 요소가 전혀 없는 순수 정적 문서가 아니라면 모두 대상입니다.

10. 단계별 개선 방법

Before / After

/* ❌ Before: hover에서 색조가 튐 */ .btn { background: var(--blue-50); } .btn:hover { background: var(--green-50); } /* 색조 바뀜! */ /* ✅ After: 같은 색조 + 점진적 명도 변화 */ .btn { background: var(--blue-50); } .btn:hover { background: var(--blue-60); } /* 한 단계 진하게 */ .btn:active { background: var(--blue-70); } /* 더 진하게 */ .btn:focus { outline: 2px solid var(--blue-50); }

정비 순서

색조 통일 — 상태별로 색조가 튀는 곳을 같은 계열로.

점진적 단계 — 기본<hover<active 순으로 명도 단계화.

상태 인지성 — 변화가 안 보이면 단계 차를 키움.

사이트 통일 — 모든 상호작용 요소에 같은 상태 규칙 적용.

11. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 버튼 hover 시 같은 색조가 진해지나요, 다른 색으로 튀나요?

□ 기본<hover<active 순으로 점진적으로 변하나요?

□ hover·active 상태 변화가 눈에 보이나요?

□ 모든 버튼이 같은 방식으로 반응하나요?

□ 상태 색이 팔레트 단계로 관리되나요?

❓ FAQ

Q1. 왜 hover에서 다른 색으로 바꾸면 안 되나요? 색조가 바뀌면 ’다른 것’으로 인지돼 혼란을 줍니다. 같은 색이 진해지면 ’같은 버튼이 반응한다’로 자연스럽게 읽힙니다. 색조는 정체성(역할), 명도는 상태 — 이렇게 분담해야 명료합니다.

Q2. 진해지는 게 좋나요, 옅어지는 게 좋나요? 규칙은 ’점진적 증가 또는 감소’로, 둘 다 가능합니다. 보통 밝은 배경에선 hover 시 진해지고, 어두운 배경에선 밝아집니다. 중요한 건 방향이 일관되고 점진적인 것입니다.

Q3. focus는 어떻게 표현하나요? focus는 키보드 사용자에게 현재 위치를 알리는 중요한 표시라, 보통 테두리(outline)를 함께 씁니다(2편). 색 변화만이 아니라 또렷한 외곽선으로 표시하면 색을 못 보는 사용자도 인지합니다.

Q4. disabled도 이 규칙을 따르나요? disabled는 점진적 변화가 아니라 별도의 전용 색을 씁니다(11편). 활성 상태(기본·hover·active)는 같은 색조의 점진적 변화를, 비활성은 투명도 아닌 전용 불투명 색을 적용하세요.

Q5. KRDS를 채택하면 자동인가요? KRDS 컴포넌트는 버튼·링크의 상태 색이 같은 색조·점진적 단계로 정의돼 있습니다. 그대로 쓰면 DS-026이 충족됩니다.

12. 마무리 — 색상 26개 규칙을 마치며

DS-026의 메시지로 색상 카테고리를 닫습니다.

상태가 변할 때 색은 정체성을 지키며 강도만 바꾼다 — 같은 색조로, 점진적으로.

상태 색은 화면이 사용자의 동작에 보내는 응답입니다. 그 응답이 같은 색조의 점진적 변화일 때, 사용자는 ’같은 요소가 반응한다’를 직관적으로 인지하고 화면을 예측 가능하게 다룹니다. 그리고 이 규칙은 색상의 모든 개념 — 팔레트·단계·역할·대비 — 이 모이는 자리이기도 합니다.

여기까지 색상 26개 규칙을 모두 마쳤습니다. 팔레트 우선 사용에서 시작해(DS-001), 명도 대비와 단계 설계, 역할과 비율, 상태 색과 시스템 색, 깊이와 모드별 대비를 거쳐, 상태 색의 일관성(DS-026)으로 마무리 했습니다. 색을 ’감각’이 아니라 ’시스템’으로 다루는 법 — 이것이 색상 26개 규칙이 관통하는 하나의 메시지였습니다.

다음 편부터는 디자인 스타일의 두 번째 분류, 타이포그래피(16개 규칙) 로 넘어갑니다. DS-027 — “국문과 영문 모두 Pretendard GOV 서체를 기본으로 사용한다.” 정부 서비스의 글꼴, 그 첫 번째 이야기입니다.

다음 편 예고 ▶ 「027. 국문과 영문 모두 Pretendard GOV 서체를 기본으로 사용하고 있다.」

우리 사이트의 상태 색이 일관된지 확인하려면? ViewCheck는 버튼·링크의 hover·active·focus 상태 색이 같은 색조를 유지하며 점진적으로 변하는지, 사이트 전체가 일관된 상태 규칙을 따르는지를 진단합니다.

📚 참고 출처

KRDS 색상(Color) 스타일 가이드 (상태 색·상호작용) — https://www.krds.go.kr/html/site/style/style_02.html

KRDS 디자인 토큰 가이드 — https://www.krds.go.kr/html/site/style/style_07.html

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

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