긴장도 안심도 아닌, 그냥 알아두세요

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

0. 들어가며 — System 색의 마지막, 가장 조용한 신호

System 색(상태 색)의 마지막 주자입니다. 빨강(오류), 노랑(주의), 초록(성공)을 지나, 이제 가장 차분한 색 — Information(정보), 파랑입니다.

앞의 세 색은 모두 ’감정’을 담았습니다. 빨강은 긴장, 노랑은 경계, 초록은 안도. 그런데 파랑은 다릅니다. 파랑은 감정 없이, 그저 정보를 전합니다. “이건 알아두시면 좋아요”, “참고하세요” 같은, 긴급하지도 긍정적이지도 않은 담담한 안내의 색이죠. 사용자를 멈춰 세우지도, 안심시키지도 않고, 그냥 도움이 될 정보를 옆에서 건넵니다.

파랑에는 한 가지 특별한 문제가 있습니다. 바로 KRDS의 Primary(주요색)도 파랑이라는 점입니다. 정부 상징색인 ‘정부 청색’이 Primary인데, Information도 파랑 계열입니다. 그래서 “이 파랑이 누르라는 강조(Primary)인가, 그냥 정보(Information)인가”가 헷갈릴 수 있습니다. 이번 편은 차분한 안내색 파랑의 역할과 함께, 이 ’Primary 파랑 vs Information 파랑’ 문제를 어떻게 풀어야 하는지를 다룹니다.

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

DS-017 (디자인 스타일 > 색상) “‘Information’ 색상은 ① 참고 정보나 안내 메시지를 전달할 때 사용하고 있으며, ② 파란색 계열을 사용하여 사용자에게 추가 정보를 제공하고 있다.”

① “참고 정보나 안내 메시지를 전달할 때”

Information의 용도입니다. 도움말, 팁, 일반 공지, 부가 설명처럼 알아두면 좋은 정보를 전할 때 씁니다. 오류도, 경고도, 성공도 아닌 ’중립적 안내’가 핵심입니다.

② “파란색 계열로 추가 정보 제공”

Information의 색은 파랑 계열이고, 목적은 추가 정보 제공입니다. 파랑은 차분하고 신뢰감 있어, ‘담담하게 도움을 주는’ 안내에 적합합니다.

정리: 파랑은 긴급하지 않은 참고·안내 정보에 쓰고, 차분하게 도움을 주라. 이게 DS-017입니다.

2. 파랑의 의미 — 차분함과 신뢰

파랑이 ’정보·신뢰’를 뜻하는 것도 보편적인 연상입니다.

파랑은 하늘과 바다의 색으로, 심리적으로 차분함·안정·신뢰를 연상시킵니다. 그래서 은행, 공공기관, 기술 기업 등 ’신뢰’가 중요한 조직이 파랑을 즐겨 씁니다. 정부 상징색이 청색인 것도 이 신뢰의 이미지와 무관하지 않죠. 파랑은 흥분시키지 않고 안정시키는 색이라, 차분히 정보를 전달하기에 가장 적합합니다.

상태 색의 관점에서 파랑은 ‘온도가 가장 낮은’ 신호입니다. 빨강이 뜨겁고(긴급), 노랑이 미지근하고(주의), 초록이 따뜻하다면(안도), 파랑은 차갑고 담담합니다. 사용자에게 어떤 행동이나 감정을 요구하지 않고, 그저 “이런 정보가 있어요”라고 알려줄 뿐입니다. 이 ’요구하지 않음’이 Information의 핵심 성격입니다. 도움말이나 안내는 사용자를 압박하면 안 되니까요.

파랑의 또 다른 강점은 대비 측면에서 다루기 쉽다는 점입니다. 노랑이 너무 밝아서 글자색으로 못 쓰는 것(15편)과 달리, 파랑은 적당히 어두워서 흰 배경에 글자로 써도 어느 정도 읽힙니다. 그래서 안내 텍스트나 링크에 파랑을 쓰기가 비교적 수월합니다. 물론 너무 옅은 파랑은 대비가 약하므로 명도를 확인해야 하지만, 노랑만큼 까다롭지는 않습니다. 차분한 성격에 다루기도 무난한 색 — 그래서 파랑은 정보 전달의 기본색으로 오래 사랑받아 왔습니다.

흥미로운 점은, 이 모든 특성이 정부·공공 서비스의 성격과 잘 맞는다는 것입니다. 공공 서비스는 화려하게 유혹하는 곳이 아니라 차분하게 신뢰를 주는 곳이어야 합니다. 파랑의 안정감과 신뢰의 이미지가 공공 브랜딩에 널리 쓰이는 이유죠. 다만 바로 그래서 파랑이 화면에 과하게 많아지기 쉽고, Primary(브랜드 파랑)와 Information (안내 파랑)이 뒤섞이는 문제가 생깁니다. 파랑이 공공 서비스에 잘 어울리는 색인 동시에, 가장 신중하게 관리해야 할 색이기도 한 셈입니다.

3. 언제 Information(파랑)을 쓰나

파랑이 어울리는 자리는 ’긴급하지 않은 도움 정보’입니다.

도움말·툴팁 — “이 항목은 ○○를 의미합니다” 같은 부가 설명.

일반 안내·공지 — “○○ 서비스가 추가되었습니다”, “이용 시간 안내.”

팁·권장 사항 — “이렇게 하면 더 편리합니다.”

참고 정보 — 사용자가 알면 좋지만 몰라도 작업엔 지장 없는 내용.

진행 중 안내 — “처리 중입니다”, “잠시만 기다려 주세요” 같은 중립 상태.

이들의 공통점은 — 사용자가 즉시 행동할 필요는 없는, 도움이 되는 정보입니다. 파랑은 “참고하세요” 수준의 부드러운 안내입니다. 빨강처럼 멈춰 세우거나 노랑처럼 주의를 환기시키지 않고, 옆에서 조용히 거듭니다.

4. Information vs 다른 상태색 — ‘긴급도 0’

DS-017을 제대로 쓰려면 파랑을 다른 상태색과 구분해야 합니다. 핵심은 긴급도입니다.

색	의미	긴급도	사용자에게
🔴 빨강(Danger)	오류·위험	높음	“멈추고 고치세요”
🟡 노랑(Warning)	주의	중간	“확인하고 진행하세요”
🟢 초록(Success)	성공	낮음(완료)	“잘 됐어요, 안심하세요”
🔵 파랑(Information)	정보	없음	“참고하세요(선택)”

파랑의 긴급도는 사실상 0입니다. 다른 상태색은 모두 ‘사용자가 반응해야 할 무언가’를 담지만, 파랑은 ’반응하지 않아도 되는’ 정보입니다. 이 차이가 중요한 이유는, 파랑을 다른 상태색처럼 쓰면 정보의 위계가 무너지기 때문입니다. 단순 안내를 빨강·노랑으로 쓰면 사용자가 과하게 긴장하고, 반대로 중요한 경고를 파랑으로 쓰면 사용자가 무시합니다. 파랑은 ’긴급하지 않음’을 분명히 하는 색이라, 그 자리를 지켜야 상태 색 체계 전체가 작동합니다.

5. 핵심 함정 — Primary 파랑과 Information 파랑

DS-017에서 가장 주의할 점입니다. KRDS의 Primary(주요색)가 정부 청색, 즉 파랑인데 Information도 파랑 계열입니다. 두 파랑이 화면에서 섞이면 혼란이 생깁니다.

문제의 핵심은 역할이 다르다는 것입니다.

Primary 파랑 — ‘핵심 행동’ 신호입니다. 누르라는 뜻이죠(버튼·링크). 사용자의 행동을 유도합니다.

Information 파랑 — ‘참고 정보’ 신호입니다. 알아두라는 뜻이죠(안내 박스). 행동을 요구하지 않습니다.

만약 둘이 똑같은 파랑이면, 사용자는 “이 파란 것이 누르라는 건가, 그냥 정보인가”를 헷갈립니다. 정보 박스를 버튼으로 착각해 누르거나, 반대로 눌러야 할 버튼을 그냥 정보로 여겨 지나칠 수 있습니다. 행동(Primary)과 정보(Information)의 경계가 흐려지는 것이죠.

해법은 두 파랑을 명도·채도·형태로 구분하는 것입니다. KRDS는 Primary와 Information을 다른 색 단계로 정의해, 같은 파랑 계열이라도 구분되게 합니다. 그리고 형태로도 구분합니다 — Primary는 채운 버튼·링크 형태로, Information은 ⓘ 아이콘이 붙은 안내 박스 형태로요. 색만으로 구분하려 하지 말고, 역할에 맞는 형태를 함께 줘야 사용자가 “누를 것”과 “읽을 것”을 구분합니다. KRDS를 채택하면 이 구분이 이미 설계돼 있어 안전합니다.

이 문제를 조금 더 깊이 보면, 결국 ‘색은 의미를 단독으로 짊어질 수 없다’는 이 시리즈의 반복된 교훈으로 돌아옵니다. 파랑이라는 색 하나에 ’핵심 행동’과 ’참고 정보’라는 두 역할을 모두 실으려 하면, 색은 그 둘을 구분해 줄 수 없습니다. 색은 그저 ’파랑’일 뿐이니까요. 그래서 진짜 구분은 색이 아니라 형태와 맥락이 해야 합니다. 버튼처럼 생긴 파랑은 ’누르는 것’, 텍스트 박스 안에 ⓘ와 함께 있는 파랑은 ‘읽는 것’. 사용자는 사실 색보다 이 형태 단서로 역할을 판단합니다.

이는 정부 사이트에서 특히 현실적인 문제입니다. 정부 청색을 브랜드 Primary로 쓰는 기관이 대부분이라, 화면에 파랑이 이미 많습니다. 거기에 안내 정보까지 파랑으로 추가하면 파랑 천지가 되어 위계가 무너집니다. 그래서 실무에서는 Information을 너무 진한 파랑이 아니라 옅은 파랑 배경에 담거나, 파랑 계열 중에서도 Primary와 명확히 구분되는 톤을 골라 씁니다. 또는 ⓘ 아이콘과 안내 박스라는 형태를 일관되게 써서, 색이 비슷해도 ’이건 안내’임을 형태로 못 박습니다. 두 파랑의 공존은 색만으로는 풀 수 없고, 형태와 절제가 함께 풀어야 하는 문제입니다.

핵심: 같은 파랑이라도 Primary(행동)와 Information(정보)은 역할이 다릅니다. 명도·채도·형태로 구분해, 사용자가 ’누를 것’과 ’읽을 것’을 헷갈리지 않게 해야 합니다.

6. 파랑도 보조수단과 함께 (ⓘ)

13편의 원칙은 파랑에도 적용됩니다. 다만 파랑은 긴급도가 낮아 상대적으로 위험이 덜하지만, 그래도 색만으로 ’정보’를 구분하면 색약자가 놓칠 수 있습니다.

Information의 관습적 아이콘은 ⓘ(원 안의 i) 입니다. 이 아이콘이 안내 박스에 붙으면, 색을 못 봐도 “참고 정보구나”를 압니다. 그리고 안내 텍스트 자체가 정보를 담으므로, 텍스트가 곧 보조수단이 됩니다. 파랑 + ⓘ + 텍스트가 Information의 기본 세트입니다.

7. System 4색 한눈에 정리

DS-013~017로 System 색 4종을 모두 다뤘습니다. 한눈에 정리해 봅시다.

색	이름	의미	아이콘	사용자 행동
🔴 빨강	Danger	오류·위험	✕ / ⚠	멈추고 고치기
🟡 노랑	Warning	주의·잠재 위험	⚠	확인하고 진행
🟢 초록	Success	성공·완료	✓	안심
🔵 파랑	Information	참고·안내	ⓘ	참고(선택)

네 색의 공통 원칙은 하나입니다 — 그 색은 그 의미에만 쓰고, 반드시 아이콘·텍스트와 함께(DS-013). 색은 빠른 직관을 주지만, 의미는 형태와 글자에 실려야 모두에게 닿습니다. 그리고 각 색은 ‘온도’(긴급도)가 달라서, 상황에 맞는 색을 써야 사용자가 적절히 반응합니다. 이 4색 체계를 제대로 쓰면, 화면이 사용자에게 보내는 모든 상태 신호가 명확하고 일관됩니다.

8. 흔한 위반 패턴

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

함정 ① 정보에 빨강·노랑 사용. 단순 안내를 경고색으로 표시 → 사용자가 불필요하게 긴장. → 참고 정보는 파랑.

함정 ② Primary와 Information 파랑 혼동. 안내 박스와 버튼이 같은 파랑 → 누를 것/읽을 것 헷갈림. → 명도·형태로 구분.

함정 ③ 중요 경고에 파랑 사용. 주의·오류를 파랑으로 → 사용자가 무시. → 긴급한 건 노랑·빨강으로.

함정 ④ 파랑만으로 정보 구분. ⓘ 아이콘·텍스트 없이 색만 → 색약자 놓침. → 보조수단 함께.

파랑 위반의 핵심은 ‘긴급도 오용’(정보를 경고처럼/경고를 정보처럼) 과 ‘Primary 혼동’ 입니다.

9. 무엇을 점검하나

DS-017은 파랑(Information)이 올바른 자리에, Primary와 구분되어 쓰였는지를 봅니다.

용도 적합성 — 참고·안내 정보에 파랑이 쓰였는가(경고엔 빨강·노랑).

Primary 구분 — Information 파랑이 Primary 파랑과 명도·형태로 구분되는가.

긴급도 적정성 — 중요한 경고를 파랑으로 약화시키지 않았는가.

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

10. 누가 담당하나

역할	책임
디자이너	Information(파랑)을 Primary와 구분, 안내 컴포넌트에 적용
기획/UX	’참고 정보’와 ’경고/행동’을 구분, 안내 문구 작성
퍼블리셔/개발	안내 박스(파랑+ⓘ)와 버튼(Primary)을 형태로 구분 구현

DS-017은 특히 Primary와의 구분에 신경 써야 합니다. 정부 청색이 Primary라, Information 파랑과 헷갈리지 않도록 명도·형태를 명확히 달리해야 합니다.

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

적용 대상

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

도움말·안내·공지가 있는 모든 사이트 = 해당. 부가 설명이나 안내 메시지가 있으면 적용됩니다.

예외(N/A)

참고·안내 정보 표시가 전혀 없다면 부분 예외일 수 있으나, 대부분의 서비스는 안내·도움말을 갖습니다.

12. 단계별 개선 방법

Before / After

<!-- ❌ Before: 안내를 노랑/빨강으로(과한 긴장) 또는 Primary와 같은 파랑 --> <div style="background:#fff3cd">참고: 이용 시간은 09~18시입니다</div> <!-- ✅ After: 차분한 파랑 + ⓘ + 텍스트 --> <div class="msg-info"> <svg aria-hidden="true"><!-- ⓘ --></svg> 참고: 이용 시간은 09시~18시입니다 </div>

정비 순서

안내를 파랑으로 — 참고·도움말을 경고색에서 파랑으로 재분류.

Primary 구분 — 안내 박스 파랑을 버튼 파랑과 명도·형태로 구분.

긴급도 재조정 — 중요 경고가 파랑이면 노랑·빨강으로 승격.

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

13. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 단순 안내를 빨강·노랑으로 표시해 과하게 긴장시키지 않나요?

□ 안내 박스(정보)와 버튼(행동)이 같은 파랑이라 헷갈리지 않나요?

□ 중요한 경고를 파랑으로 약화시키지 않았나요?

□ 파랑 안내에 ⓘ 아이콘·텍스트가 함께 있나요?

□ System 4색(빨강·노랑·초록·파랑)을 의미대로 구분해 쓰나요?

❓ FAQ

Q1. Primary도 파랑, Information도 파랑이면 어떻게 구분하나요? 명도·채도를 달리하고(KRDS는 다른 단계로 정의), 형태로 구분하세요. Primary는 채운 버튼·링크 형태로 ‘누르는 것’, Information은 ⓘ가 붙은 안내 박스 형태로 ’읽는 것’으로요. 색만이 아니라 형태가 역할을 구분합니다.

Q2. 도움말도 꼭 파랑이어야 하나요? 참고·안내 성격이면 파랑이 적합합니다. 핵심은 ’긴급하지 않은 정보’를 차분한 색으로 전달하는 것입니다. 도움말을 빨강·노랑으로 하면 사용자가 “뭔가 문제인가” 하고 불필요하게 긴장합니다.

Q3. ’처리 중’은 무슨 색인가요? “처리 중”, “로딩 중” 같은 중립 진행 상태는 Information(파랑) 계열이 적합합니다. 성공도 실패도 아닌 중립이니까요. 완료되면 초록(성공)이나 빨강(실패)으로 결과를 알립니다.

Q4. 파랑은 긴급도가 0인데, 그럼 안 봐도 되는 건가요? ‘반드시 즉시 반응할 필요는 없는’ 정보라는 뜻이지, ’무의미하다’는 게 아닙니다. 도움이 되는 정보이므로 잘 보이게 제공하되, 사용자를 압박하지 않는 차분한 톤으로 둡니다.

Q5. KRDS를 채택하면 Primary/Information 구분이 자동인가요? KRDS는 Primary와 Information을 다른 색 단계와 컴포넌트로 정의해, 그대로 쓰면 구분이 보장됩니다. 자체 설계라면 두 파랑을 명도·형태로 명확히 구분하는 데 특히 신경 써야 합니다.

14. 마무리 — 조용한 색의 역할

DS-017의 메시지는 차분합니다.

모든 정보가 외칠 필요는 없다. 어떤 정보는 조용히 옆에서 거들 때 가장 유용하다.

파랑(Information)은 긴장도 안심도 아닌, 담담한 도움의 색입니다. 사용자를 압박하지 않고 필요한 정보를 차분히 건넵니다. 이 ’조용함’이 파랑의 역할이고, 그래서 경고색(빨강·노랑)과 섞이지 않아야 하며, 행동색 (Primary 파랑)과도 구분되어야 합니다. 조용한 색이 자기 자리를 지킬 때, 시끄러운 색(경고)도 제 힘을 냅니다.

이로써 System 색 4종(빨강·노랑·초록·파랑)과 색의 ’역할·사용·상태’가 모두 정리됐습니다. 다음 편부터는 색의 새로운 영역, 표면(surface)과 고도(elevation) 로 넘어갑니다. DS-018 — “기본 모드에서 배경, 표면 색상을 흰색 surface와 색상 surface가 번갈아 레이어로 쌓이게 사용하며, border나 shadow로 고도를 표현한다.” 화면에 ’깊이’를 만드는 색의 기법입니다.

다음 편 예고 ▶ 「018. 기본 모드에서 배경, 표면 색상을 흰색의 surface와 색상 surface가 번갈아 가며 레이어가 쌓이게 사용하고 있으며, border나 shadow를 함께 사용하여 고도를 표현하고 있다.」

우리 사이트가 파랑을 올바르게 쓰는지 확인하려면? ViewCheck는 파랑(Information)이 참고·안내에 적절히 쓰였는지, Primary 파랑과 구분되는지, 중요 경고를 파랑으로 약화시키지 않았는지, ⓘ 아이콘·텍스트 보조수단이 함께 있는지를 진단합니다.

📚 참고 출처

KRDS 색상(Color) 스타일 가이드 (System 색상 Information) — 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

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

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