’성공’과 ’실패’가 같아 보인다면

KRDS DS-016 — ‘Success’ 색상을 성공을 의미하는 상황(작업 완료 또는 긍정적 결과 표시)을 나타낼 때 사용하고 있으며, 녹색 계열을 사용하여 안정감과 긍정적인 피드백을 제공하고 있다.

0. 들어가며 — 경고에서 안심으로

지난 두 편은 경고의 색이었습니다. 빨강(Danger, 오류)과 노랑(Warning, 주의). 이번엔 마침내 긍정의 색 — Success(성공), 초록입니다.

초록은 안심의 색입니다. “신청이 완료되었습니다”, “저장되었습니다” 같은 초록 메시지를 보면, 사용자는 비로소 안도합니다. 일이 잘 끝났다는 신호죠. 빨강이 긴장을, 노랑이 주의를 부른다면, 초록은 안정감과 긍정적 피드백을 줍니다.

그런데 초록에는 System 색 중에서도 가장 위험한 함정이 숨어 있습니다. 바로 빨강과 헷갈린다는 것입니다. 6편에서 봤듯, 색각이상의 99%인 적록색맹은 빨강과 초록을 구분하지 못합니다. 즉 ’성공(초록)’과 ’오류(빨강)’가 이들에게는 똑같아 보입니다. 상태 색에서 가장 정반대인 두 의미가, 가장 헷갈리는 색 조합에 실려 있는 것이죠. 이번 편은 초록의 긍정적 역할과 함께, 이 치명적 함정을 어떻게 다뤄야 하는지를 끝까지 파헤칩니다.

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

DS-016 (디자인 스타일 > 색상) “‘Success’ 색상을 ① 성공을 의미하는 상황(작업 완료 또는 긍정적 결과 표시)을 나타낼 때 사용하고 있으며, ② 녹색 계열을 사용하여 안정감과 긍정적인 피드백을 제공하고 있다.”

① “성공을 의미하는 상황”

Success의 용도입니다. 작업 완료(“저장되었습니다”), 긍정적 결과(“신청이 접수되었습니다”), 정상 상태 표시. 사용자가 한 일이 잘 됐음을 알리는 자리입니다.

② “녹색 계열로 안정감과 긍정적 피드백”

Success의 색은 녹색 계열이고, 그 효과는 안정감·긍정입니다. 초록은 심리적으로 편안함과 안전을 연상시켜, “이제 됐다”는 안도감을 줍니다.

정리: 초록은 성공·완료에 쓰고, 안정감 있는 긍정 피드백을 주라. 이게 DS-016입니다.

2. 녹색의 의미 — 안전과 긍정의 보편 신호

초록이 ’성공·안전’을 뜻하는 것도 보편적인 약속입니다.

신호등의 초록(진행, 안전), 비상구 표시의 초록, 체크 표시(✓)의 초록, “정상” 표시의 초록. 우리는 초록을 ‘가도 좋다’, ‘문제없다’, ’잘 됐다’와 연결 짓도록 학습해 왔습니다. 빨강이 멈춤이라면 초록은 진행이고, 빨강이 위험이라면 초록은 안전입니다.

초록은 심리적으로도 안정감을 줍니다. 자연·식물·생명의 색이라 편안함과 연결되고, 눈이 가장 편하게 느끼는 색 중 하나입니다(눈의 초점이 가장 적게 조절되는 색이라는 연구도 있습니다). 그래서 초록은 사용자를 긴장 시키지 않으면서 ’잘 됐다’를 전달하기에 적합합니다. 빨강·노랑이 주의를 끌어 긴장시키는 색이라면, 초록은 긴장을 풀어주는 색입니다. 일을 마친 사용자에게 안도감을 주는 데 이만한 색이 없습니다.

이 ’안도감’은 공공서비스에서 생각보다 중요한 가치입니다. 정부·공공 절차는 대개 복잡하고, 사용자는 “내가 제대로 하고 있나”, “이게 맞나” 하는 불안 속에서 진행합니다. 신청서가 길수록, 절차가 까다로울수록 이 불안은 커집니다. 그렇게 긴장하며 마지막 제출 버튼을 눌렀을 때, 명확한 초록 완료 메시지는 그 모든 불안을 한 번에 해소해 줍니다. “잘 끝났습니다”라는 그 한마디가, 사용자에게는 긴 여정의 마침표이자 보상입니다.

반대로 완료 신호가 모호하면 — 메시지가 흐릿하거나, 떴다 금방 사라지거나, 색만 다르고 분명한 확인이 없으면 — 사용자는 일을 끝내고도 찜찜한 채로 화면을 떠납니다. “정말 된 건가?” 하는 의심이 남아, 같은 신청을 다시 하거나 기관에 전화로 확인하게 됩니다. 명확한 성공 피드백은 이런 불필요한 재확인과 문의를 줄여, 사용자의 만족도와 기관의 업무 효율을 동시에 높입니다. 초록 하나가 주는 ’확실한 안도감’은 단순한 친절을 넘어, 서비스의 신뢰와 효율을 떠받치는 요소입니다.

3. 언제 Success(초록)를 쓰나

초록이 어울리는 자리는 모두 ‘긍정적 완료·정상’ 상황입니다.

작업 완료 — “저장되었습니다”, “전송 완료.”

신청·제출 성공 — “신청이 정상 접수되었습니다.”

유효성 통과 — 입력이 올바를 때의 ✓ 표시.

정상 상태 — “운영 중”, “정상” 같은 상태 표시.

긍정적 결과 — 승인됨, 합격, 완료된 단계.

이들의 공통점은 — 사용자가 안심해도 되는, 일이 잘 풀린 상황입니다. 초록은 “걱정 마세요, 잘 됐어요”를 전달합니다. 특히 복잡한 공공 절차를 끝낸 사용자에게, 명확한 초록 완료 메시지는 큰 안도감을 줍니다 — “내가 제대로 한 게 맞구나” 하고요.

4. 가장 위험한 함정 — 초록과 빨강이 같아 보인다

DS-016에서 절대 놓쳐선 안 될 부분입니다. 초록(성공)과 빨강(오류)은 의미가 정반대인데, 색각이상자에게는 가장 헷갈리는 조합입니다.

적록색맹(색각이상의 약 99%)은 빨강과 초록을 비슷한 탁한 색으로 봅니다. 그래서 이런 일이 벌어집니다.

“신청 성공”(초록)과 “신청 실패”(빨강) 메시지가 똑같아 보임.

입력칸의 초록 테두리(정상)와 빨강 테두리(오류)가 구분 안 됨.

상태 점이 초록(정상)인지 빨강(위험)인지 알 수 없음.

이건 단순 불편이 아니라 정반대 의미의 혼동입니다. “실패했는데 성공한 줄 알거나”, “성공했는데 실패한 줄 아는” 일이 생깁니다. System 색 중에서 가장 대비되는 두 의미(성공/실패)가, 하필 가장 구분 안 되는 색(초록/빨강)에 실려 있다는 것 — 이게 상태 색 접근성의 핵심 난제입니다.

그래서 초록(Success)은 다른 어떤 색보다도 보조수단이 절실합니다. 빨강도 보조수단이 필요하지만(14편), 초록은 ’빨강과 헷갈린다’는 추가 위험까지 있어 더욱 그렇습니다. 초록 하나만으로 “성공”을 전달하는 것은, 적록색맹 사용자에게 “성공인지 실패인지 모르는” 메시지를 주는 것과 같습니다.

구체적인 장면을 그려봅시다. 적록색맹을 가진 시민이 온라인으로 민원을 신청합니다. 신청서를 다 채우고 제출 버튼을 누르자, 화면에 짧은 메시지가 뜹니다. 그 메시지가 초록 글씨로 “신청이 완료되었습니다”였는지, 빨강 글씨로 “신청에 실패했습니다”였는지 — 이 사람에게는 둘 다 비슷한 탁한 색으로 보여 구분이 안 됩니다. 아이콘도 없고 색만 다른 상황이라면, 이 시민은 신청이 됐는지 안 됐는지 확신하지 못한 채 화면을 닫습니다. 며칠 뒤 “신청 내역 없음”을 발견하고서야 실패였음을 알게 되죠. 가장 중요한 두 결과(성공/실패)가 가장 헷갈리는 색에 실린 탓에 벌어지는 일입니다.

이 문제가 특히 까다로운 이유는, 빨강과 초록이라는 ’보편 약속’을 함부로 바꿀 수도 없다는 데 있습니다. “그럼 성공을 초록 말고 파랑으로 하면 되지 않나?” 싶지만, 초록=성공·빨강=오류는 전 세계가 공유하는 관습이라, 이를 깨면 정상 시야 사용자가 오히려 혼란스러워합니다. 그래서 해법은 색을 바꾸는 게 아니라, 색은 관습대로 유지하되 형태와 텍스트라는 다른 채널을 반드시 더하는 것입니다. 초록은 그대로 두되 ✓ 체크와 “완료” 텍스트를 함께 주면, 정상 시야 사용자는 색으로 빠르게, 색약 사용자는 형태·글자로 확실하게 — 모두가 성공을 인지합니다. 색의 보편성을 지키면서 모두에게 닿는 길은 ’색 교체’가 아니라 ’채널 추가’입니다.

5. 그래서 보조수단이 필수 — ✓와 텍스트

13편의 원칙이 초록에서 가장 강하게 적용됩니다. 초록 성공 표시에는 반드시 다른 단서를 함께 줘야 합니다.

① 체크 아이콘(✓)

성공의 가장 관습적인 아이콘은 체크(✓)입니다. 초록을 못 봐도 ✓ 모양을 보면 “잘 됐다”를 압니다. 그리고 오류의 ✕와 형태가 명확히 달라, 성공과 실패를 형태만으로 구분하게 해줍니다. 초록 + ✓ 는 성공 표시의 기본 세트입니다.

② 명확한 텍스트

“완료되었습니다”, “정상 접수되었습니다” 같은 문구. 색도 아이콘도 못 봐도, 글자를 읽으면 성공이 분명합니다. 특히 중요한 완료(신청·결제)일수록 텍스트가 필수입니다.

③ 형태로 성공/실패 구분

성공과 오류를 색만이 아니라 아이콘 형태(✓ vs ✕), 위치, 또는 텍스트로 확실히 구분합니다. “초록 vs 빨강”에만 기대면 적록색맹은 구분 못 하지만, “✓ vs ✕” 형태 차이는 누구나 구분합니다.

핵심: 초록(성공)과 빨강(오류)을 구분하는 진짜 단서는 색이 아니라 형태(✓/✕)와 텍스트여야 합니다. 색은 거들 뿐, 의미는 형태와 글자에 실려야 모두에게 닿습니다.

여기에 한 가지를 덧붙이면, 이 아이콘과 형태의 약속이 사이트 전체에서 일관되어야 한다는 점입니다. 어떤 페이지에서는 성공이 ✓인데 다른 페이지에서는 동그라미이고, 또 다른 곳에서는 아예 아이콘이 없다면 — 사용자는 매번 새로 학습해야 하고, 형태 단서의 효과도 약해집니다. 성공은 늘 ✓, 오류는 늘 ✕, 주의는 늘 ⚠로 통일해 두면, 사용자는 색을 보기 전에 형태만으로도 상태를 직감하게 됩니다. 이런 일관성은 디자인 시스템이 상태 색을 ’아이콘과 묶인 컴포넌트’로 제공할 때 자연스럽게 확보됩니다(13편에서 본 세트 제공의 이점이죠).

또 하나, 성공·오류 메시지는 스크린리더 사용자도 들을 수 있어야 합니다. 시각장애 사용자에게는 색도 형태도 보이지 않으므로, 메시지가 보조기기에 제대로 전달되도록 마크업하는 것이 중요합니다. 중요한 상태 변화는 화면에 뜨는 동시에 보조기기가 읽어주도록 해야, 화면을 보지 못하는 사용자도 “신청이 완료되었습니다”를 들을 수 있습니다. 결국 상태 전달의 원칙은 하나로 모입니다 — 여러 감각·여러 채널로 같은 정보를 전달하라. 색·형태·텍스트·음성 중 어느 하나에 의존하지 않을 때, 비로소 모든 사용자가 성공의 안도감을 누립니다.

6. 안정감과 절제 — 초록도 아껴야 한다

초록은 편안한 색이라 남용 위험이 덜할 것 같지만, 그렇지 않습니다. 초록도 절제가 필요합니다.

성공 메시지를 너무 자주, 너무 크게 띄우면 사용자는 피로해집니다. 사소한 동작마다 “완료!” 초록 알림이 뜨면 성가시고, 정작 중요한 완료(신청 성공)의 무게가 가벼워집니다. 빨강·노랑처럼 초록도 ’의미 있는 성공’에 써야 그 안도감이 살아납니다.

또한 초록을 일반 강조나 장식에 쓰면, ’성공’이라는 의미가 흐려집니다. 초록 버튼을 일반 행동에 마구 쓰면, 사용자는 그 초록이 ’성공’인지 ’그냥 버튼’인지 헷갈립니다. System 색의 원칙은 모두 같습니다 — 그 색은 그 의미에만. 초록은 성공·정상·완료에만 쓰고, 일반 강조는 Primary 색(DS-007·008)의 몫으로 남겨야 합니다.

7. 흔한 위반 패턴

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

함정 ① 초록만으로 성공 표시. “완료”를 초록 점·초록 글자만으로 → 적록색맹은 실패와 구분 못 함. → 초록 + ✓ + 텍스트.

함정 ② 성공/오류를 색으로만 구분. 정상=초록 테두리, 오류=빨강 테두리(아이콘·텍스트 없음) → 적록색맹 구분 불가. → ✓/✕ 형태 + 텍스트로 구분.

함정 ③ 초록 남용. 사소한 동작마다 초록 알림, 일반 버튼에 초록 → 성공의 의미 희석. → 의미 있는 성공에만.

함정 ④ 초록을 강조색으로. 초록을 Primary 대신 일반 강조에 사용 → 상태색과 역할색 혼동. → 강조는 Primary로.

초록 위반의 핵심은 거의 ‘빨강과 구분 안 됨’ 입니다. 형태(✓/✕)와 텍스트로 구분하는 것이 해법입니다.

8. 무엇을 점검하나

DS-016은 초록(Success)이 올바른 자리에, 보조수단과 함께 쓰였는지를 봅니다.

용도 적합성 — 성공·완료·정상 상황에 초록이 쓰였는가.

빨강-초록 구분 — 성공(초록)과 오류(빨강)가 형태·텍스트로 구분되는가(색만 아님).

보조수단 동반 — 초록이 ✓ 아이콘·텍스트와 함께 쓰였는가.

남용 여부 — 초록이 일반 강조·장식에 오용되지 않았는가.

9. 누가 담당하나

역할	책임
디자이너	Success(초록)를 성공 컴포넌트에 한정, ✓ 아이콘과 세트로
기획/UX	완료·성공 상황 식별, 성공 메시지 문구 작성
퍼블리셔/개발	초록 + ✓ + 텍스트 함께 마크업, 빨강과 형태 구분

DS-016은 특히 빨강과의 구분에 신경 써야 합니다. 성공과 오류가 색만으로 구분되지 않도록, 형태(✓/✕)와 텍스트를 반드시 동반해야 합니다.

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

적용 대상

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

성공·완료 표시가 있는 모든 사이트 = 해당. 신청·저장·제출 완료 메시지가 있으면 적용됩니다.

예외(N/A)

성공·완료 상태 표시가 전혀 없다면 부분 예외일 수 있으나, 폼·신청이 있으면 완료 표시가 따르므로 대부분 적용됩니다.

11. 단계별 개선 방법

Before / After

<!-- ❌ Before: 초록만으로 성공(빨강과 구분 안 됨) --> <p style="color:green">완료</p> <!-- ✅ After: 초록 + ✓ + 텍스트 --> <p class="msg-success"> <svg aria-hidden="true"><!-- ✓ 체크 --></svg> 신청이 정상 접수되었습니다 </p>

입력 유효성: ❌ Before: 정상=초록 테두리 / 오류=빨강 테두리 (색만) ✅ After: 정상=초록+✓ / 오류=빨강+✕ (형태로 구분)

정비 순서

성공 표시 보강 — 완료·성공에 초록+✓+텍스트 3종 적용.

성공/오류 형태 구분 — ✓와 ✕로 의미 구분(색만 의존 금지).

초록 남용 정리 — 일반 강조에 쓰인 초록을 Primary로 교체.

흑백 검증 — 회색조에서 성공/오류가 구분되는지 확인.

12. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 성공·완료를 초록색만으로 알리지 않나요? (✓ 아이콘·텍스트 동반?)

□ 성공(초록)과 오류(빨강)가 형태(✓/✕) 로도 구분되나요?

□ 초록을 일반 강조·버튼에 남용하고 있지 않나요?

□ 화면을 흑백으로 바꿔도 성공/실패가 구분되나요?

□ 사소한 동작마다 초록 알림을 띄우지 않나요?

❓ FAQ

Q1. 초록과 빨강이 헷갈린다면, 다른 색을 쓰면 되나요? 색을 바꾸는 것보다 형태·텍스트로 구분하는 게 근본 해법입니다. 초록=성공, 빨강=오류는 보편적 약속이라 유지하되, ✓/✕ 아이콘과 텍스트를 함께 줘서 색을 못 봐도 구분되게 하세요. 색 교체는 보편 약속을 깨서 오히려 혼란스러울 수 있습니다.

Q2. 성공 메시지에 꼭 텍스트가 필요한가요? 중요한 성공(신청·결제 완료)에는 필수입니다. 사용자가 “정말 됐나?” 확신해야 하는 순간이니까요. 사소한 저장 정도는 ✓ 아이콘으로 충분할 수 있지만, 텍스트가 있으면 더 안전합니다.

Q3. 초록 버튼을 ‘확인’ 같은 일반 행동에 써도 되나요? 권장하지 않습니다. 초록은 ’성공·완료’라는 상태 의미가 강해, 일반 행동에 쓰면 의미가 혼란스러워집니다. 일반 핵심 행동은 Primary 색(브랜드색)을 쓰고, 초록은 성공 상태에 남겨두세요.

Q4. ‘정상’ 상태 표시도 초록인가요? 네, “운영 중”, “정상” 같은 긍정적 상태는 초록이 적합합니다. 다만 역시 색만이 아니라 텍스트(“정상”)나 형태를 함께 줘야 합니다.

Q5. KRDS를 채택하면 자동으로 되나요? KRDS Success 색은 ✓ 아이콘·텍스트·배경·테두리가 세트로 제공돼, 그대로 쓰면 보조수단이 함께 적용됩니다. 다만 성공 메시지의 구체적 문구는 직접 작성해야 합니다.

13. 마무리 — 초록의 안심, 그러나 색만으로는 부족하다

DS-016의 메시지는 두 겹입니다.

초록은 안심을 주는 긍정의 색이지만, 그 안심을 모두에게 전하려면 색만으로는 부족하다.

초록은 일을 마친 사용자에게 “잘 됐어요”라는 안도감을 줍니다. 특히 복잡한 공공 절차를 끝낸 사람에게, 명확한 성공 신호는 큰 위안입니다. 하지만 그 초록이 빨강과 헷갈리는 사람에게는, 안심이 아니라 혼란이 될 수 있습니다. 그래서 초록 성공에는 ✓ 형태와 텍스트가 늘 함께해야 합니다. 가장 정반대인 두 의미(성공/실패)를 가장 헷갈리는 색에 실었기에, 초록이야말로 보조수단이 가장 절실한 색입니다.

이로써 경고 3색(빨강·노랑·초록)을 모두 다뤘습니다. 다음 편은 System 색의 마지막, 차분한 안내의 색입니다. DS-017 — “‘Information’ 색상은 참고 정보나 안내 메시지를 전달할 때 사용하며, 파란색 계열을 사용하여 추가 정보를 제공한다.” 긴장도, 안심도 아닌 ’담담한 정보’의 색, 파랑으로 넘어갑니다.

다음 편 예고 ▶ 「017. ‘Information’ 색상은 참고 정보나 안내 메시지를 전달할 때 사용하고 있으며, 파란색 계열을 사용하여 사용자에게 추가 정보를 제공하고 있다.」

우리 사이트가 성공/오류를 색만으로 구분하는지 확인하려면? ViewCheck는 초록(Success)이 성공 표시에 적절히 쓰였는지, 성공과 오류가 형태(✓/✕)·텍스트로도 구분되는지, 초록이 일반 강조에 남용되지 않았는지를 진단합니다.

📚 참고 출처

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

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

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

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

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