빨강과 노랑은 다르다

KRDS DS-015 — ‘Warning’ 색상을 잠재적 위험이나 주의가 필요한 상황을 나타낼 때 사용하고 있으며, 눈에 잘 띄는 노란색 계열을 사용하여 사용자에게 경고의 의미를 전달하고 있다.

0. 들어가며 — 빨강과 초록 사이의 색

지난 14편에서 가장 강한 상태 신호인 빨강(Danger)을 다뤘습니다. 이번엔 그보다 한 단계 약한 신호 — Warning(주의), 노랑입니다.

신호등을 떠올려 보세요. 빨강은 ‘멈춤’, 초록은 ‘진행’, 그리고 그 사이에 노랑이 있습니다. 노랑은 ’곧 바뀌니 주의하라’는 신호죠. 화면의 상태 색도 똑같습니다. 빨강이 ’이미 문제가 생겼다(오류)’라면, 노랑은 ’아직 괜찮지만 주의가 필요하다(잠재적 위험)’입니다. 이 미묘하지만 중요한 차이를 구분하는 것이 DS-015의 첫 번째 핵심입니다.

그리고 노랑에는 다른 상태 색에 없는 숨은 함정이 하나 있습니다. 노랑은 밝은 색이라, 흰 배경 위에서는 글자가 거의 안 보일 만큼 대비가 약합니다. “눈에 잘 띄는 노랑”이라는 규칙의 표현과 달리, 노랑을 잘못 쓰면 오히려 가장 안 보이는 색이 될 수 있습니다. 이번 편은 빨강과 노랑의 차이, 그리고 노랑을 다룰 때의 이 특별한 주의점을 함께 파헤칩니다.

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

DS-015 (디자인 스타일 > 색상) “‘Warning’ 색상을 ① 잠재적 위험이나 주의가 필요한 상황을 나타낼 때 사용하고 있으며, ② 눈에 잘 띄는 노란색 계열을 사용하여 경고의 의미를 전달하고 있다.”

① “잠재적 위험이나 주의가 필요한 상황”

Warning의 용도입니다. 핵심 단어는 ‘잠재적(potential)’ — 아직 문제가 터진 건 아니지만, 그대로 두면 문제가 될 수 있는 상황입니다. 빨강(이미 발생한 오류)과 결정적으로 다른 지점입니다.

② “눈에 잘 띄는 노란색 계열로 경고 전달”

Warning의 색은 노랑 계열이고, 목적은 경고(주의 환기) 입니다. 노랑은 빨강만큼 강력하진 않지만, 충분히 눈에 띄어 “여기 한 번 보세요”를 전달합니다.

정리: 노랑은 ‘아직 괜찮지만 주의가 필요한’ 상황에 쓰고, 눈에 띄게 경고하라. 이게 DS-015입니다.

2. Warning과 Danger의 차이 — ‘주의’와 ’위험’

DS-015를 제대로 쓰려면 노랑(Warning)과 빨강(Danger)을 명확히 구분해야 합니다. 둘을 혼동하면 상태 신호 전체가 흐려집니다.

구분	🟡 Warning (노랑)	🔴 Danger (빨강)
의미	주의·잠재적 위험	오류·이미 발생한 위험
시점	사전(문제 예방)	사후(문제 발생)
강도	중간(주목 유도)	강함(즉각 주의)
사용자 행동	“확인하고 진행하세요”	“멈추고 고치세요”
예시	“마감이 3일 남았습니다”, “비표준 형식입니다”	“결제 실패”, “필수 항목 누락”

핵심은 시점입니다. 노랑은 문제가 터지기 전에 미리 알려 예방을 돕고, 빨강은 문제가 이미 터진 뒤 즉시 알려 해결을 재촉합니다. 노랑은 “조심하세요”, 빨강은 “잘못됐어요”입니다.

이 구분이 중요한 이유는, 둘을 섞어 쓰면 사용자가 심각성을 판단할 수 없기 때문입니다. 사소한 주의에 빨강을 쓰면 과하게 긴장시키고(14편의 경고 피로), 심각한 오류에 노랑을 쓰면 위험을 과소평가하게 합니다. 상태의 ’온도’에 맞는 색을 써야, 사용자가 적절히 반응합니다. 노랑과 빨강의 구분은 그 온도 조절입니다.

구체적인 장면으로 보면 이 온도 차이가 분명해집니다. 사용자가 긴 신청서를 작성하다가 주민번호 칸에 형식이 조금 어긋난 값을 넣었다고 합시다. 이걸 빨강으로 “오류!”라고 강하게 띄우면, 사용자는 큰 잘못을 한 것처럼 위축됩니다. 사실은 그냥 형식을 한 번 더 확인하면 되는 가벼운 일인데도요. 이럴 때는 노랑으로 “입력 형식을 확인해 주세요”라고 부드럽게 주의를 주는 것이 적절합니다. 반대로, 사용자가 제출 버튼을 눌렀는데 서버에서 처리가 실패했다면 — 이건 노랑으로 “주의”라고 하면 안 됩니다. 이미 실패가 발생했으니 빨강으로 “제출에 실패했습니다, 다시 시도해 주세요”라고 분명히 알려야 합니다.

이처럼 같은 폼 안에서도 상황의 온도에 따라 노랑과 빨강이 갈립니다. 이 구분을 잘하는 서비스는 사용자에게 ’적절한 긴장’을 줍니다 — 가벼운 일엔 가볍게, 심각한 일엔 심각하게 반응하게 하죠. 반대로 모든 것을 빨강으로 처리하는 서비스는 사용자를 늘 긴장 상태로 몰아넣어 피로하게 만들고, 모든 것을 노랑으로 처리하는 서비스는 진짜 위험조차 가볍게 보이게 만듭니다. 노랑과 빨강을 구분하는 것은 단순한 색 선택이 아니라, 사용자의 감정을 상황에 맞게 조율하는 섬세한 배려입니다.

3. 왜 노랑인가 — ’주의’의 보편 신호

노랑이 주의를 뜻하는 것도 빨강처럼 보편적인 약속입니다.

신호등의 노랑(곧 멈춤, 주의), 공사장의 노란 안전 표지, 미끄럼 주의 표지판, 도로의 중앙선 — 노랑은 ’조심하라’는 신호로 일상 곳곳에 쓰입니다. 빨강이 ’멈춤·금지’라면 노랑은 ’주의·경계’입니다. 이 연상 덕분에 노란 경고는 설명 없이도 “조심해야 할 무언가”를 직감하게 합니다.

노랑은 색 자체로도 주의를 끄는 성질이 있습니다. 자연에서 노랑·검정 조합(벌, 일부 독성 생물)은 경고색으로 쓰이고, 사람의 눈도 밝은 노랑에 민감하게 반응합니다. 그래서 빨강만큼 긴급하진 않지만, 충분히 시선을 끄는 ’중간 강도’의 경고 신호로 적합합니다. 빨강과 초록 사이에서 노랑은 ’아직 괜찮지만 주의’라는 미묘한 온도를 정확히 표현합니다.

4. 언제 Warning(노랑)을 쓰나

노랑이 어울리는 자리는 ‘잠재적·예방적’ 상황입니다.

마감·기한 임박 — “신청 마감이 3일 남았습니다.”

확인이 필요한 입력 — “입력하신 형식이 일반적이지 않습니다. 확인해 주세요.” (틀린 건 아니지만 점검 권유)

비표준·예외 상황 — “이 항목은 일반적인 경우와 다릅니다.”

되돌릴 수 있는 주의 — 아직 실행 전이라 사용자가 재고할 수 있는 경우.

부분적 문제 — 전체는 정상이나 일부 주의가 필요한 상태.

이들의 공통점은 — 사용자가 ’인지하고 판단’하면 되는, 아직 치명적이지 않은 상황입니다. 빨강처럼 “당장 멈춰”가 아니라 “한 번 보고 가세요” 수준이죠. 노랑은 사용자를 멈춰 세우기보다, 잠깐 주의를 환기시키고 스스로 판단하게 합니다.

특히 공공서비스에서 노랑이 빛나는 자리는 ‘예방적 안내’ 입니다. 사용자가 실수하기 전에 미리 알려주는 것이죠. 예를 들어 신청 기한이 다가오면 “마감이 3일 남았습니다”라고 노랑으로 알려, 사용자가 미루다 놓치는 일을 막습니다. 또는 사용자가 입력한 정보가 흔치 않은 형식일 때 “확인해 주세요”라고 부드럽게 짚어, 오타로 인한 반려를 예방합니다. 이런 예방적 노랑은 사용자가 빨강(오류)을 만나기 전에 미리 손을 내미는 친절입니다. 잘 쓴 노랑은 빨강이 등장할 일을 줄여줍니다.

다만 노랑도 절제가 필요합니다. 모든 입력칸마다, 모든 단계마다 노란 주의를 띄우면 — 빨강이 그렇듯 — 노랑도 무뎌집니다. 사용자가 정말 주의해야 할 것과, 그냥 진행해도 되는 것을 구분해 주어야 노랑의 ‘주의’ 신호가 의미를 갖습니다. 노랑은 빨강보다 약하지만, 그렇다고 아무 데나 흩뿌려도 되는 색은 아닙니다. 모든 상태 색은 ’필요한 곳에만’이라는 원칙을 공유합니다.

5. 노랑의 함정 — 가장 안 보일 수 있는 색

DS-015에서 가장 중요하고, 가장 자주 간과되는 부분입니다. 규칙은 “눈에 잘 띄는 노랑”이라고 했지만, 노랑은 잘못 쓰면 가장 안 보이는 색이 됩니다. 왜일까요?

노랑은 너무 밝다

노랑은 명도가 매우 높은(밝은) 색입니다. 그래서 흰색·연한 배경 위에서는 대비가 극도로 약합니다. 노란 글씨를 흰 배경에 쓰면 거의 안 보입니다. 2편(명도 대비)에서 본 4.5:1 기준을 한참 밑돌죠. “눈에 띄라고” 노랑을 썼는데 정작 안 보이는 역설이 벌어집니다.

이건 노랑의 물리적 특성 때문입니다. 사람의 눈은 색마다 밝기를 다르게 느끼는데, 그중 노랑·초록 계열을 가장 밝게 지각합니다(2편에서 본 명도 공식에서 초록의 가중치가 가장 큰 것과 같은 맥락입니다). 그래서 순수한 노랑은 흰색에 가까울 만큼 밝게 느껴집니다. 흰 배경과 노란 글자는 둘 다 밝아서, 대비비가 1.1:1 수준까지 떨어지기도 합니다 — 거의 안 보이는 수준이죠. 빨강이나 파랑은 어두워서 흰 배경에 글자로 써도 어느 정도 읽히지만, 노랑은 그게 불가능합니다. 같은 System 색이라도 노랑만 유독 다루기 까다로운 이유입니다.

이 함정은 의외로 자주 발생합니다. 디자이너가 “경고는 노랑”이라는 규칙만 알고, 노란 글씨나 노란 작은 아이콘을 흰 배경에 그냥 올리는 것이죠. 시안에서는 디자이너의 좋은 모니터로 어렴풋이 보이니 통과되지만, 실제 사용자의 화면, 특히 밝은 야외나 저가 모니터에서는 완전히 사라집니다. “분명히 경고를 넣었는데 사용자가 못 봤다”는 일이 여기서 생깁니다. 노랑은 ’눈에 띄는 색’이라는 통념과 ’글자로 쓰면 안 보이는 색’이라는 현실 사이의 간극이 가장 큰 색이고, 이 간극을 모르면 반드시 사고가 납니다.

그래서 노랑은 ’글자색’으로 쓰면 안 된다

노랑의 이 성질 때문에, 노랑은 보통 글자색이 아니라 배경·테두리·아이콘·강조 면으로 씁니다. 노란 배경에 진한 글자(검정·진회색)를 얹는 방식이죠. 공사장 표지가 노란 바탕에 검은 글씨인 것과 같습니다. 노랑을 바탕으로, 글자는 어두운 색으로 — 이래야 대비가 확보되고 노랑의 경고 효과도 살아납니다.

KRDS도 이를 반영한다

그래서 KRDS의 Warning 색 세트는 단순히 ’노란 텍스트’가 아니라, 노란 배경·테두리·아이콘과 그 위의 어두운 텍스트가 한 묶음으로 설계됩니다. 노랑을 어떻게 써야 대비가 보장되는지를 시스템이 미리 풀어둔 것이죠. KRDS를 채택하면 이 함정을 자동으로 피할 수 있습니다.

핵심: “눈에 잘 띄는 노랑”은 노란 글자가 아니라 ‘노란 바탕 + 어두운 글자’ 로 구현됩니다. 노랑을 텍스트 색으로 쓰는 순간 대비가 무너진다는 것 — 이게 DS-015를 다룰 때 반드시 기억할 점입니다.

6. 노랑도 보조수단과 함께 (DS-013 연계)

13편에서 본 원칙은 노랑에도 그대로 적용됩니다. 노란 경고도 색만으로 쓰면 안 됩니다. 게다가 노랑은 앞서 본 대비 문제까지 겹쳐, 색에만 의존하면 더 위험합니다.

노란 주의 표시에는 경고 아이콘(⚠ 삼각형 느낌표)과 텍스트를 함께 줘야 합니다. ⚠ 기호는 노랑과 짝을 이루는 가장 관습적인 주의 아이콘이라, 색을 못 봐도 “주의”를 전달합니다. 그리고 “마감 임박”, “확인 필요” 같은 명확한 문구로 무엇을 주의해야 하는지 알립니다. 색·아이콘·텍스트 세 채널이 함께해야, 노랑의 경고가 모두에게 닿습니다.

7. 흔한 위반 패턴

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

함정 ① 노란 글자(대비 붕괴). 흰 배경에 노란 텍스트로 경고 → 거의 안 보임. → 노란 바탕 + 어두운 글자.

함정 ② 주의에 빨강 사용. 사소한 주의·기한 안내에 빨강을 써서 과하게 긴장시킴. → 잠재적 위험은 노랑으로.

함정 ③ 오류에 노랑 사용. 심각한 오류(실패)에 노랑을 써서 위험을 과소평가하게 함. → 발생한 오류는 빨강으로.

함정 ④ 노랑만으로 주의 표시. 아이콘·텍스트 없이 노란 색만 → 색약자·대비 약자 모두 놓침. → 보조수단 함께.

노랑 위반의 절반은 ‘대비’ 문제이고, 나머지 절반은 ‘빨강과의 혼동’ 입니다. 이 둘만 잡으면 노랑을 제대로 쓸 수 있습니다.

8. 무엇을 점검하나

DS-015는 노랑(Warning)이 올바른 상황에, 충분한 대비로 쓰였는지를 봅니다.

용도 적합성 — 잠재적 위험·주의 상황에 노랑이 쓰였는가(오류엔 빨강).

대비 확보 — 노랑이 텍스트가 아니라 바탕으로 쓰이고, 그 위 글자가 충분한 대비인가.

빨강-노랑 구분 — 주의(노랑)와 오류(빨강)가 명확히 구분되는가.

보조수단 동반 — 노랑이 ⚠ 아이콘·텍스트와 함께 쓰였는가.

9. 누가 담당하나

역할	책임
디자이너	Warning(노랑)을 바탕·아이콘으로 쓰고 대비 확보
기획/UX	‘주의’ 상황과 ‘오류’ 상황을 구분, 경고 문구 작성
퍼블리셔/개발	노란 바탕+어두운 글자로 구현, 대비 검증

DS-015는 특히 대비 검증이 중요합니다. 노랑은 대비 함정이 큰 색이라, 구현 단계에서 노란 요소 위 글자의 명도 대비를 반드시 확인해야 합니다.

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

적용 대상

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

주의·경고 표시가 있는 모든 사이트 = 해당. 마감 안내, 확인 요청, 주의 메시지가 있으면 적용됩니다.

예외(N/A)

Warning 성격의 표시가 전혀 없다면 부분적으로 예외일 수 있으나, 대부분의 서비스는 기한·확인 등 주의 상황을 갖습니다.

11. 단계별 개선 방법

Before / After

/* ❌ Before: 노란 글자 (흰 배경에서 안 보임) */ .warn { color: #FFD000; background: #fff; } /* ✅ After: 노란 바탕 + 어두운 글자 + 아이콘 */ .warn { background: var(--warning-bg); /* 연한 노랑 */ color: var(--gray-90); /* 진한 글자 (대비 확보) */ border-left: 4px solid var(--warning); /* 노란 강조 테두리 */ } /* 메시지: ⚠ 마감이 3일 남았습니다 */

정비 순서

노란 글자 제거 — 노란 텍스트를 ’노란 바탕+어두운 글자’로 전환.

주의/오류 분리 — 잠재적 주의는 노랑, 발생한 오류는 빨강으로 재분류.

대비 검증 — 노란 요소 위 글자의 명도 대비 확인.

보조수단 추가 — ⚠ 아이콘·텍스트 동반.

12. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 노랑을 글자색으로 써서 안 보이게 만들지 않았나요?

□ 노란 경고가 바탕+어두운 글자로 대비를 확보했나요?

□ ’주의(노랑)’와 ’오류(빨강)’를 구분해 쓰나요?

□ 사소한 주의에 빨강을 남용하지 않나요?

□ 노란 경고에 ⚠ 아이콘·텍스트가 함께 있나요?

❓ FAQ

Q1. 노랑과 빨강, 헷갈리면 어떻게 구분하나요? 시점으로 판단하세요. 이미 문제가 터졌으면 빨강(오류·실패), 아직 안 터졌지만 주의가 필요하면 노랑 (기한 임박·확인 권유). “멈추고 고쳐야 하면 빨강, 보고 판단하면 되면 노랑”입니다.

Q2. 노랑이 안 보인다면서 왜 ’눈에 잘 띈다’고 하나요? 노랑 자체는 주의를 끄는 색이 맞습니다. 다만 글자색으로 쓸 때만 안 보입니다. 노랑을 바탕·아이콘·테두리로 쓰면 잘 띕니다. “노란 바탕에 검은 글씨”가 정답입니다. 공사장 표지를 떠올리세요.

Q3. 주황색은 Warning인가요 Danger인가요? KRDS는 Warning을 노란색 계열로 규정합니다. 주황은 노랑과 빨강 사이라 맥락에 따라 쓰일 수 있지만, 표준을 따르려면 주의는 노랑 계열로 통일하는 것이 명확합니다. 색을 늘리기보다 의미를 분명히 하는 게 우선입니다.

Q4. 노란 배경 위 글자는 무슨 색이 좋나요? 진한 색(검정·진회색)이 좋습니다. 노랑이 밝으므로 어두운 글자라야 대비가 나옵니다. 흰 글자를 노란 바탕에 쓰면 둘 다 밝아서 안 읽힙니다. 명도 대비(2편)를 반드시 확인하세요.

Q5. 경고가 여러 개면 다 노랑인가요? 주의 성격이면 노랑으로 통일하되, 그중 정말 위험으로 번질 수 있는 것은 빨강으로 승격할 수 있습니다. 다만 한 화면에 노랑이 너무 많으면 그 역시 무뎌지므로, 정말 주의가 필요한 것에 한정하세요.

13. 마무리 — 노랑은 ’온도’와 ’대비’의 색

DS-015의 메시지는 두 가지입니다.

노랑은 ’주의’라는 정확한 온도를 가진 색이며, 동시에 대비에 가장 취약한 색이다.

첫째, 노랑은 빨강과 다릅니다. ’아직 괜찮지만 주의’라는 미묘한 온도를 표현하죠. 이 온도를 정확히 써야 사용자가 상황의 심각성을 올바로 판단합니다. 둘째, 노랑은 밝아서 글자색으로 쓰면 안 보입니다. ’노란 바탕 + 어두운 글자’가 노랑을 다루는 철칙입니다. 이 두 가지 — 온도와 대비 — 를 지키면 노랑은 훌륭한 주의 신호가 됩니다.

다음 편은 마침내 긍정의 색입니다. DS-016 — “‘Success’ 색상을 성공을 의미하는 상황을 나타낼 때 사용하며, 녹색 계열을 사용하여 안정감과 긍정적인 피드백을 제공한다.” 빨강·노랑의 경고에서, 초록의 안심으로 넘어갑니다.

다음 편 예고 ▶ 「016. ‘Success’ 색상을 성공을 의미하는 상황을 나타낼 때 사용하고 있으며, 녹색 계열을 사용하여 안정감과 긍정적인 피드백을 제공하고 있다.」

우리 사이트가 노랑을 올바르게 쓰는지 확인하려면? ViewCheck는 노랑(Warning)이 주의 상황에 적절히 쓰였는지, 노란 텍스트로 대비가 무너진 곳은 없는지, 빨강(오류)과 명확히 구분되는지, 아이콘·텍스트 보조수단이 함께 있는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 Understanding 1.4.3 Contrast (Minimum) — https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

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

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