빨강만으로 ’오류’를 말하지 마라

KRDS DS-013 — 시스템 색상을 시각적 보조수단과 함께 사용하고 있다.

0. 들어가며 — 상태를 알리는 색의 책임

지금까지 색의 ’역할(Primary·Secondary·Gray)’을 다뤘는데, 7편에서 한 가지 색이 따로 빠져 있었습니다 — System 색(시스템 색상). 화면의 상시 골격이 아니라 ’특정 상황에서 켜지는 신호’라는 이유로요. 이제 그 System 색을 본격적으로 다룰 차례입니다.

System 색은 사용자에게 상태를 알립니다. “성공했어요”(초록), “오류예요”(빨강), “주의하세요”(노랑), “참고하세요”(파랑). 화면이 사용자에게 보내는 가장 중요한 피드백이죠. 그런데 이 상태 신호에는 치명적인 약점이 하나 있습니다 — 색에 너무 많이 의존한다는 것입니다.

“빨강이니까 오류”, “초록이니까 성공” — 이 직관은 색을 정상적으로 보는 사람에게만 작동합니다. 6편에서 봤듯, 20명 중 1명(남성 8%)은 빨강과 초록을 구분하지 못합니다. 이들에게 “빨간 오류 메시지”와 “초록 성공 메시지”는 똑같아 보입니다. 그래서 KRDS는 DS-013에서 못 박습니다 — System 색은 반드시 ’시각적 보조수단’과 함께 쓰라. 이번 편은 그 보조수단이 무엇이고, 왜 상태 색에서 특히 중요한지를 다룹니다.

1. 규칙 원문 — 짧지만 무거운 요구

DS-013 (디자인 스타일 > 색상) “시스템 색상을 시각적 보조수단과 함께 사용하고 있다.”

핵심은 ‘함께’ 입니다.

“시스템 색상”

상태를 전달하는 색입니다. KRDS는 네 가지로 구분합니다 — Danger(오류·위험), Warning(주의), Success (성공), Information(정보). 각각 빨강·노랑·초록·파랑 계열이 기본입니다.

“시각적 보조수단과 함께”

이 색을 색만으로 쓰지 말고, 다른 시각 단서를 함께 제공하라는 뜻입니다. 아이콘, 텍스트, 형태 같은 ’색이 아닌 신호’를 곁들여, 색을 못 봐도 상태가 전달되게 하는 것이죠. 6편의 “색만으로 정보 전달 금지” (WCAG 1.4.1)가, 상태 색이라는 가장 중요한 영역에 구체적으로 적용된 규칙입니다.

정리: 성공·오류·경고·정보를 색만으로 알리지 말고, 아이콘·텍스트 등을 함께 써라. 이게 DS-013입니다.

2. System 색상이란 무엇인가 — 네 가지 상태 신호

System 색을 먼저 정리합시다. 이들은 화면의 ’신호등’입니다.

System 색	의미	기본 색 계열	쓰임 예
Danger	오류·위험	빨강	입력 오류, 삭제 경고, 실패
Warning	주의·잠재적 위험	노랑	마감 임박, 확인 필요
Success	성공·완료	초록	신청 완료, 저장됨
Information	참고·안내	파랑	도움말, 일반 안내

이 색들은 Primary·Secondary·Gray와 성격이 다릅니다. 화면에 늘 깔려 있는 게 아니라, 특정 상황에서만 나타나 사용자에게 상태를 알립니다. 신청이 완료되면 초록 메시지가 뜨고, 입력이 잘못되면 빨강 경고가 나타나는 식이죠. 그래서 7편의 ’주요 색상(상시 골격)’에서 빠지고, 별도 규칙(DS-013~016)으로 다뤄집니다.

System 색의 가장 큰 특징은 ‘의미가 색에 강하게 묶여 있다’ 는 것입니다. 빨강=위험, 초록=안전은 거의 본능에 가까운 연상입니다. 이 강한 연상이 장점이자 — 동시에 함정입니다. 색에 의미를 너무 많이 실어서, 색을 못 보면 의미도 사라지기 때문입니다.

이 색-의미 연상은 신호등에서 비롯된 거의 보편적인 약속입니다. 빨강은 멈춤·위험, 초록은 진행·안전, 노랑은 주의. 그래서 디자이너들은 이 색들을 쓰면 ’설명 없이도 통한다’고 믿습니다. 실제로 정상 시야의 사용자에게는 즉각적으로 통하죠. 바로 이 ’너무 잘 통한다’는 점이 방심을 부릅니다 — “빨강이면 다들 위험인 줄 알겠지” 하고 텍스트나 아이콘을 생략하게 되는 것입니다.

그러나 이 약속에는 두 가지 빈틈이 있습니다. 첫째, 앞서 본 색각이상입니다. 빨강-초록 연상이 강할수록, 그 둘을 구분 못 하는 사람에게는 의미가 정반대로 전달될 위험도 큽니다. 둘째, 색의 의미는 생각만큼 절대적이지 않습니다. 문화나 맥락에 따라, 또는 같은 화면 안에서도 빨강이 ’위험’인지 ’강조’인지 ’브랜드색’인지 헷갈릴 수 있습니다. 빨간 브랜드색을 쓰는 기관이라면, 그 빨강이 오류인지 브랜드인지 더더욱 모호해집니다. 그래서 ’색이 의미를 잘 전달한다’는 믿음에 기대어 보조수단을 생략하는 것은, 가장 흔하면서도 위험한 방심입니다. 의미가 색에 강하게 묶일수록, 역설적으로 보조수단이 더 필요합니다.

3. 왜 보조수단이 ‘특히’ 중요한가

색에만 의존하지 말라는 원칙(DS-006)은 모든 색에 적용되지만, System 색에서 특히 중요합니다. 이유가 있습니다.

상태 색은 빨강-초록에 집중돼 있다

하필 System 색의 핵심인 오류(빨강)와 성공(초록)이, 색각이상자가 가장 구분하기 어려운 바로 그 조합입니다. 6편에서 봤듯 적록색맹이 색각이상의 99%입니다. 즉 System 색이야말로 색각이상자에게 가장 위험한 영역입니다. “실패했는데 성공한 줄 알고”, “오류인데 정상인 줄 아는” 일이 벌어집니다.

상태를 놓치면 결과가 심각하다

System 색이 전달하는 정보는 ’중요한 결과’입니다. 일반 텍스트를 못 읽는 것과, “결제 실패”를 “결제 성공”으로 잘못 아는 것은 무게가 다릅니다. 공공서비스에서 신청 실패를 성공으로 착각하면, 사용자는 처리된 줄 알고 기다리다 마감을 놓칠 수 있습니다. 상태 오인은 곧 실질적 피해로 이어집니다.

순간적으로 나타났다 사라진다

성공·오류 메시지는 종종 토스트(toast)처럼 잠깐 떴다 사라집니다. 이 짧은 순간에 색만으로 의미를 전달하면, 색을 못 보는 사용자는 “무언가 떴는데 뭔지 모르는” 상태가 됩니다. 그래서 더더욱 아이콘·텍스트로 의미를 명확히 박아둬야 합니다.

세 이유를 합치면 — System 색은 ‘색 의존의 위험이 가장 큰’ 동시에 ‘오인의 대가가 가장 큰’ 영역입니다. 그래서 DS-013이 보조수단을 별도 규칙으로 못 박은 것입니다.

한 장면으로 보는 위험

구체적인 장면을 그려봅시다. 적록색맹을 가진 한 시민이 세금을 온라인으로 납부합니다. 카드 정보를 입력하고 “납부” 버튼을 누르자, 화면 상단에 메시지가 잠깐 떴다 사라집니다. 그 메시지는 빨간 글씨로 “결제에 실패했습니다. 카드 한도를 확인해 주세요”라고 적혀 있었는데 — 아이콘도 없고 텍스트도 짧게 스쳐 지나갔습니다. 색약을 가진 이 시민에게 그 빨강은 평범한 글자색으로 보였고, 메시지는 너무 빨리 사라졌습니다.

시민은 납부가 됐다고 생각하고 화면을 닫습니다. 며칠 뒤 미납 안내가 날아오고, 가산세가 붙습니다. 색 하나에 실린 ’실패’라는 정보를 이 사람은 받지 못한 것입니다. 만약 그 메시지에 큰 ✕ 아이콘이 있고, “실패”라는 단어가 또렷이 강조됐고, 메시지가 사용자가 닫기 전까지 머물렀다면 — 이 일은 일어나지 않았을 것입니다.

이 장면이 보여주는 것은, System 색의 보조수단이 ’있으면 좋은 친절’이 아니라 ‘없으면 실제 피해가 생기는 필수 안전장치’ 라는 점입니다. 일반 텍스트라면 못 읽어도 다시 읽으면 되지만, 순간적으로 뜨는 상태 신호는 한 번 놓치면 끝입니다. 그래서 상태 색에는 백업 채널이 반드시 있어야 합니다. DS-013이 색상 카테고리 안에서 유독 ’접근성 안전’의 무게를 강하게 지는 이유입니다.

4. ’시각적 보조수단’이란 — 무엇을 더하나

System 색에 함께 제공해야 할 보조수단은 세 가지가 대표적입니다.

① 아이콘 — 형태로 상태를 말한다

상태마다 관습적인 아이콘이 있습니다.

Danger → ✕(엑스), ⚠(경고 삼각형), 느낌표

Warning → ⚠(삼각형 느낌표)

Success → ✓(체크)

Information → ⓘ(원형 i)

아이콘은 색 없이 형태만으로 상태를 전달합니다. 빨강을 못 봐도 ✕ 모양을 보면 “뭔가 잘못됐구나”를 압니다. 단, 아이콘의 모양이 상태마다 명확히 달라야 합니다(성공과 오류 아이콘이 비슷하면 효과 없음).

② 텍스트 — 가장 확실한 단서

가장 명확한 보조수단입니다. “오류: 이메일 형식이 올바르지 않습니다”, “신청이 완료되었습니다” 같은 명시적 문구. 색도 아이콘도 못 봐도, 글자를 읽으면 상태가 분명합니다. 특히 중요한 상태일수록 텍스트 설명이 필수입니다.

③ 형태·위치 — 보조적 단서

테두리 스타일, 배경 패턴, 메시지의 위치 등도 단서가 됩니다. 다만 이것만으로는 약하고, 보통 아이콘·텍스트와 함께 쓰입니다.

핵심은 ’색 + 아이콘 + 텍스트’를 한 세트로 제공하는 것입니다. 세 채널로 같은 정보를 전달하면, 어느 하나를 못 받는 사용자도 상태를 놓치지 않습니다.

세 채널은 ’중복’이 아니라 ’보험’이다

여기서 흔한 반론이 나옵니다. “색도 빨강, 아이콘도 경고, 텍스트도 ‘오류’ — 같은 말을 세 번 하는 거 아닌가요? 중복 아닌가요?” 맞습니다. 의도적인 중복입니다. 그리고 그 중복이 바로 핵심입니다.

이것을 ’이중화(redundancy)’라고 부르는데, 안전이 중요한 모든 시스템이 쓰는 원리입니다. 비행기에 엔진이 여럿인 이유, 중요한 데이터를 여러 곳에 백업하는 이유와 같습니다. 하나가 실패해도 다른 것이 정보를 전달하게 만드는 것이죠. 상태 정보는 사용자가 절대 놓쳐선 안 되는 것이므로, 한 채널이 막혀도(색을 못 봐도) 다른 채널(아이콘·텍스트)이 작동하도록 일부러 겹쳐 둡니다.

각 채널은 서로 다른 상황에서 빛납니다. 색은 정상 시야의 사용자에게 가장 빠르게 인지됩니다. 아이콘은 색을 못 보거나 글을 빨리 읽기 어려운 사람에게 형태로 전달됩니다. 텍스트는 스크린리더 사용자나 정확한 의미가 필요한 사람에게 확실합니다. 어떤 사용자에게는 색이, 어떤 사용자에게는 아이콘이, 또 어떤 사용자에게는 텍스트가 ’주 채널’이 됩니다. 세 개를 다 갖춰야 모든 사용자가 자기에게 맞는 채널로 정보를 받습니다. 그래서 이 중복은 낭비가 아니라, 가장 많은 사람에게 닿기 위한 정교한 설계입니다.

5. KRDS System 색의 구조 — 색만이 아니라 세트로

KRDS는 System 색을 단순히 ’빨강·초록’으로 정의하지 않습니다. 각 상태마다 아이콘·텍스트·배경·테두리 색을 한 세트로 제공합니다. 이게 DS-013을 구조적으로 뒷받침합니다.

예를 들어 ‘오류(Danger)’ 상태는 — 빨강 계열의 텍스트 색, 연한 빨강 배경, 빨강 테두리, 그리고 오류 아이콘이 한 묶음으로 정의됩니다. 디자이너가 이 세트를 그대로 쓰면, 색과 아이콘이 자동으로 함께 적용되어 DS-013이 자연스럽게 충족됩니다. 즉 KRDS는 “색만 쓰기 어렵게” 구조를 설계해 둔 것이죠.

이것이 디자인 시스템의 힘입니다. 개별 디자이너의 선의에 기대지 않고, 시스템 자체가 올바른 사용을 유도 합니다. System 색을 세트로 제공하면, 색만 떼어 쓰는 실수가 줄어듭니다. KRDS를 채택하면 이 세트가 그대로 따라오므로, DS-013을 지키기가 훨씬 쉬워집니다.

이 ’세트 제공’이라는 접근에는 더 깊은 디자인 철학이 있습니다. 규칙을 글로만 적어두면(“색만 쓰지 마세요”) 바쁜 현장에서는 지켜지지 않습니다. 사람은 가장 쉬운 길로 가기 때문에, 색만 떼어 쓰는 게 편하면 그렇게 합니다. 하지만 시스템이 처음부터 ’색+아이콘+텍스트’를 한 덩어리로 제공하면, 올바른 사용이 가장 쉬운 길이 됩니다. 디자이너는 그냥 그 세트를 가져다 쓰기만 하면 자동으로 규칙을 지키게 되죠. 좋은 디자인 시스템은 사람의 선의가 아니라 구조로 품질을 보장합니다.

반대로 말하면, System 색을 ’그냥 빨강·초록 색값’으로만 정의해 두면 위반이 쏟아집니다. 디자이너는 그 색값만 가져다 테두리에 칠하고 끝내기 쉽거든요. 그래서 자체 디자인 시스템을 만드는 기관이라면, System 색을 단순한 색이 아니라 아이콘·텍스트·배경·테두리가 묶인 컴포넌트로 설계하는 것이 DS-013을 구조적으로 지키는 길입니다. 색을 떼어 쓰기 어렵게 만드는 것 — 그것이 가장 확실한 예방책입니다.

6. 흔한 위반 패턴

DS-013 위반은 ’색만으로 상태 표시’의 형태로 나타납니다.

함정 ① 빨간 테두리만으로 폼 오류. 입력 오류를 빨간 테두리로만 표시(아이콘·텍스트 없음). 적록색맹은 오류를 인지 못 함. → 빨강 + ⚠ 아이콘 + “오류: ~” 텍스트.

함정 ② 초록 점만으로 성공. “처리 완료”를 초록 점으로만. → 초록 + ✓ + “완료” 텍스트.

함정 ③ 색 배경만으로 알림 구분. 알림 박스를 색 배경만으로 구분(성공=연초록, 오류=연빨강). 색약자는 구분 못 함. → 각 박스에 상태 아이콘·라벨 추가.

함정 ④ 상태 배지 색만. “정상/주의/위험”을 색 점만으로. → 텍스트 라벨이나 모양 구분 추가.

네 함정의 공통점 — “상태의 의미를 색 하나에 통째로 실었다.” 해법은 DS-006과 같습니다: 그 의미를 아이콘·텍스트에도 똑같이 실어라.

7. 무엇을 점검하나

DS-013은 System 색이 보조수단과 함께 쓰였는지를 봅니다.

보조수단 동반 — 오류·성공·경고·정보 표시에 아이콘·텍스트가 색과 함께 있는가.

색 단독 표시 검출 — 색만으로 상태를 구분하는 지점이 있는가.

아이콘 구분성 — 상태별 아이콘이 명확히 다른가.

흑백 검증 — 화면을 흑백으로 바꿔도 상태가 구분되는가.

폼 오류·알림·상태 표시 등에서 색 외 단서(아이콘·텍스트) 동반 여부를 검출하면 판정할 수 있습니다.

8. 누가 담당하나

역할	책임
디자이너	System 색을 아이콘·텍스트와 세트로 디자인
기획/UX	상태 메시지의 문구(텍스트 단서) 작성
퍼블리셔/개발	색+아이콘+텍스트를 함께 마크업, 보조기기용 정보 포함

DS-013은 디자인·기획·개발이 함께 책임집니다. 특히 상태 메시지의 ’텍스트’는 기획·UX 라이팅의 영역이라, 색만이 아니라 명확한 문구를 함께 설계해야 합니다.

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

적용 대상

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

상태(성공·오류·경고·정보)를 표시하는 모든 사이트 = 해당. 폼·신청·알림이 있는 공공 사이트는 거의 전부 적용됩니다.

예외(N/A)

상태 표시가 전혀 없는 순수 정보 페이지라면 예외가 될 수 있지만, 폼이나 알림이 있으면 대상입니다. 현실의 공공 사이트는 대부분 상태 표시를 갖습니다.

10. 단계별 개선 방법

Before / After

<!-- ❌ Before: 색만으로 오류 표시 --> <input style="border-color:red"> <!-- ✅ After: 색 + 아이콘 + 텍스트 --> <input aria-invalid="true" aria-describedby="err" class="input-danger"> <p id="err" class="msg-danger"> <svg aria-hidden="true"><!-- ⚠ 경고 아이콘 --></svg> 오류: 이메일 형식이 올바르지 않습니다 </p>

❌ Before: ● (초록 점) → "완료"인지 알 수 없음 ✅ After: ✓ 완료 → 체크 아이콘 + 텍스트

정비 순서

폼 오류부터 — 모든 오류에 색+아이콘+텍스트 3종 적용(가장 빈번·치명적).

알림·토스트 — 성공·오류 메시지에 상태 아이콘·라벨 추가.

상태 배지 — 색 점에 텍스트/모양 단서 추가.

흑백 검증 — 회색조로 바꿔 모든 상태가 구분되는지 확인.

11. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 폼 오류를 빨간 테두리만으로 표시하지 않나요? (아이콘·텍스트 동반?)

□ 성공·완료를 초록색만으로 알리지 않나요?

□ 상태별 아이콘(✓·✕·⚠·ⓘ)이 명확히 구분되나요?

□ 알림 박스가 색 배경 외에 라벨·아이콘으로도 구분되나요?

□ 화면을 흑백으로 바꿔도 상태가 전달되나요?

❓ FAQ

Q1. 6편(색약)과 13편이 같은 얘기 아닌가요? 원리는 같습니다(색만으로 전달 금지). 다만 6편이 일반 원칙이라면, 13편은 그 원칙을 상태 색(System) 이라는 가장 위험하고 중요한 영역에 구체적으로 적용한 것입니다. 상태 색은 빨강-초록에 집중돼 색약 위험이 가장 크고, 오인의 대가도 가장 크기 때문에 별도 규칙으로 강조됩니다.

Q2. 아이콘만 있으면 텍스트는 없어도 되나요? 아이콘은 도움이 되지만, 중요한 상태(특히 오류)에는 텍스트도 함께 주는 게 안전합니다. 아이콘 의미가 모호할 수 있고, 스크린리더 사용자에게는 텍스트가 더 확실합니다. ‘색+아이콘+텍스트’ 세트가 가장 견고합니다.

Q3. 토스트 알림처럼 잠깐 뜨는 것도요? 오히려 더 중요합니다. 잠깐 뜨는 메시지일수록 색만으로는 놓치기 쉽습니다. 짧은 순간에도 아이콘·텍스트로 의미가 분명해야 합니다. 또 보조기기 사용자를 위해 role="alert" 등으로 알림을 읽어주는 것도 좋습니다.

Q4. 빨강·초록 말고 다른 색을 쓰면 되지 않나요? 색을 바꿔도 ’색만으로 전달’하면 같은 문제입니다. 어떤 색이든 색각이상자나 흑백 환경에서는 구분이 어려울 수 있습니다. 핵심은 색 선택이 아니라 보조수단을 함께 주는 것입니다.

Q5. KRDS를 채택하면 자동으로 되나요? KRDS System 색은 아이콘·텍스트·배경·테두리가 세트로 제공돼, 그대로 쓰면 DS-013이 자연스럽게 충족됩니다. 다만 상태 메시지의 구체적 문구는 직접 작성해야 합니다.

12. 마무리 — 상태는 여러 목소리로 말해야 한다

DS-013의 메시지는 명료합니다.

중요한 상태일수록, 색 하나가 아니라 여러 채널(색·아이콘·텍스트)로 동시에 말해야 한다.

성공이냐 실패냐는 사용자가 절대 놓쳐선 안 될 정보입니다. 그 중요한 신호를 색 하나에만 맡기는 것은, 20명 중 1명에게 그 신호를 꺼버리는 것과 같습니다. 색은 직관적이고 빠른 신호지만, 그 위에 아이콘과 텍스트라는 ’백업 채널’을 둬야 모두에게 닿습니다. 상태 색은 여러 목소리로 말해야 합니다.

다음 편부터는 이 System 색을 하나씩 깊이 봅니다. DS-014 — “‘Danger’ 색상을 오류나 위험을 나타낼 때 사용하고 있으며, 빨간색 계열을 사용하여 즉각적인 주의를 전달하고 있다.” 가장 강한 상태 신호, ’위험의 빨강’을 다룹니다.

다음 편 예고 ▶ 「014. ‘Danger’ 색상을 오류나 위험을 나타낼 때 사용하고 있으며, 빨간색 계열을 사용하여 사용자에게 즉각적인 주의를 전달하고 있다.」

우리 사이트가 상태를 색만으로 알리고 있는지 확인하려면? ViewCheck는 폼 오류·알림·상태 표시에서 System 색이 아이콘·텍스트와 함께 쓰였는지를 검출하고, 색만으로 상태를 구분하는 지점을 찾아 색각이상 시야에서 상태가 유지되는지까지 진단합니다.

📚 참고 출처

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

WCAG 2.1 Understanding 1.4.1 Use of Color — https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

WebAIM — Visual Disabilities: Color-blindness — https://webaim.org/articles/visual/colorblind

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

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