색에 ’직책’을 부여하라

KRDS DS-007 — 주요 색상을 Primary, Secondary, Gray 색상으로 구분하고 있다.

0. 들어가며 — 색을 ’예쁨’이 아니라 ’역할’로 보기

지금까지 6편은 색을 ’어떻게 만들고 다루는가’에 집중했습니다. 팔레트를 우선 쓰고(DS-001), 대비를 지키고(DS-002), 단계로 설계하고(DS-003·004), 고대비 모드를 갖추고(DS-005), 색약을 고려하라(DS-006)고요.

이제부터 색의 ‘역할’ 로 넘어갑니다. 그 첫 번째가 DS-007입니다. 핵심 발상은 이렇습니다.

색은 단지 ’무슨 색’이 아니라 ’무슨 일을 하는 색’으로 구분되어야 한다.

영화에 주연·조연·엑스트라가 있듯, 화면의 색에도 역할이 있습니다. 어떤 색은 사용자를 행동으로 이끄는 주연(Primary), 어떤 색은 그를 받쳐주는 조연(Secondary), 어떤 색은 무대 전체를 채우는 배경(Gray) 입니다. DS-007은 색을 이 세 직책으로 명확히 나눠 두라는 규칙입니다.

이 구분이 왜 중요할까요? 역할이 정해져야 화면에 질서가 생기기 때문입니다. 모든 색이 똑같이 외치면 아무것도 안 들리고, 모든 색이 평등하면 사용자는 “어디를 눌러야 할지” 길을 잃습니다. 이번 편은 이 세 역할이 정확히 무엇이고, 왜 이 구분이 좋은 화면의 토대가 되는지를 끝까지 다룹니다.

1. 규칙 원문 — 한 토막이지만 세 역할

DS-007 (디자인 스타일 > 색상) “주요 색상을 Primary, Secondary, Gray 색상으로 구분하고 있다.”

문장은 짧지만 세 개의 역할이 들어 있습니다.

“주요 색상을 … 구분하고 있다”

여기서 ’주요 색상’은 화면을 구성하는 기본 색 체계를 뜻합니다. 그리고 그 색들을 세 가지 역할로 나눠 정의했느냐를 봅니다. 핵심은 ‘구분’ 입니다. 색이 그냥 여러 개 있는 게 아니라, 각 색이 자기 직책을 갖고 정리돼 있어야 한다는 뜻입니다.

Primary / Secondary / Gray

Primary(주요색) — 가장 눈에 띄어야 할 색. 핵심 행동과 중요 정보를 강조.

Secondary(보조색) — 전체 톤을 받치는 색. 보조 액션, 구분, 안정감.

Gray(중립색) — 배경·텍스트·구분선을 책임지는 무채색.

이 세 가지로 역할을 나누면, 색을 쓸 때 “이건 무슨 역할의 색인가?”가 명확해집니다. 그 결과 화면에 일관된 위계와 질서가 생깁니다.

정리: 색마다 직책(주연·조연·배경)을 정해 팔레트를 구성하라. 이게 DS-007입니다. (상태를 알리는 System 색은 별도 역할이라 이 항목에서 빠집니다 — 뒤에서 설명합니다.)

2. 왜 ’역할 구분’이 중요한가 — 질서와 시선

(1) 시선을 행동으로 이끈다

화면을 처음 본 사용자의 눈은 가장 강한 색으로 먼저 갑니다. 만약 Primary가 명확하면, 사용자의 시선은 자연스럽게 “신청하기”, “다음” 같은 핵심 행동으로 흘러갑니다. 반대로 모든 색이 비슷한 강도로 외치면, 시선은 갈 곳을 잃고 헤맵니다. 역할 구분은 사용자가 무엇을 해야 하는지 색으로 안내하는 일입니다.

(2) 일관성을 만든다

역할이 정해져 있으면 “핵심 버튼은 Primary, 보조 버튼은 Secondary, 배경은 Gray”라는 규칙이 사이트 전체에 적용됩니다. 페이지가 바뀌어도, 디자이너가 바뀌어도 같은 규칙이 작동하니 화면이 일관됩니다. 역할 구분이 없으면 페이지마다 색의 의미가 달라져, 사용자가 매번 새로 학습해야 합니다.

(3) 변경에 강하다

브랜드 색을 바꿔야 할 때(기관 통폐합, CI 개편), 역할로 정리돼 있으면 “Primary를 새 색으로 교체”하는 한 번의 결정으로 전체가 바뀝니다. 역할 없이 색이 흩어져 있으면, 어떤 파랑이 ’강조용’이고 어떤 파랑이 ’그냥 장식’인지 구분조차 안 돼 손대기 어렵습니다.

핵심: 역할 구분은 ’색을 예쁘게 고르는 일’이 아니라, 색에 의미와 질서를 부여해 화면을 이해 가능하게 만드는 일입니다. 좋은 디자인 시스템의 가장 기본적인 골격입니다.

3. 세 역할의 정의 — KRDS는 이렇게 규정한다

KRDS는 세 역할을 명확히 규정합니다. 하나씩 깊이 봅시다.

Primary — 화면의 주연

KRDS는 Primary를 이렇게 정의합니다.

“UI의 중요한 요소를 표현하는 primary의 색상은 명도와 채도를 높여 시각적으로 눈에 띄도록 하고… 인터페이스에서 가장 주목받는 요소로 주요 액션이나 중요한 정보를 강조하는 데 사용”

Primary는 화면에서 가장 강하고 또렷한 색입니다. 표준형 KRDS에서는 정부 상징의 정부 청색을 디지털에 최적화한 색이 Primary가 됩니다. 핵심 행동 버튼(“신청”, “제출”, “다음”), 활성 링크, 중요한 강조 — 사용자가 ‘여기를 봐야 한다’, ’여기를 눌러야 한다’고 느껴야 할 곳에 씁니다. 주연답게 아껴 써야 빛납니다(이건 다음 편 DS-008의 주제입니다).

여기서 실무자가 가장 헷갈리는 것이 “그래서 무엇이 Primary를 쓸 자격이 있는 ’핵심 행동’인가”입니다. 기준은 간단합니다 — 그 페이지에서 사용자가 해야 할 가장 중요한 단 하나의 행동입니다. 신청서 페이지라면 “제출”, 로그인 페이지라면 “로그인”, 검색 페이지라면 “검색”이 그것입니다. 한 페이지에 이런 ’주된 행동’은 보통 하나, 많아야 둘입니다. “취소”, “이전”, “임시저장” 같은 보조 행동은 Primary가 아니라 Secondary나 중립 버튼의 자리입니다. 모든 버튼이 다 중요해 보여서 전부 Primary를 입히면, 정작 가장 중요한 행동이 묻혀버립니다. Primary는 ’중요한 색’이 아니라 ’가장 중요한 하나를 가리키는 색’이라는 점을 기억해야 합니다.

이 판단은 디자이너 혼자 할 수 없습니다. “이 화면에서 사용자가 해야 할 가장 중요한 행동이 무엇인가”는 기획·UX의 결정이기 때문입니다. 그래서 Primary의 자리를 정하는 일은 색을 고르는 일이기 이전에, 화면의 목적을 정의하는 일입니다. 역할 구분이 기획 단계부터 시작되어야 하는 이유입니다.

Secondary — 무대를 받치는 조연

“전체적인 UI의 톤을 표현하는 secondary의 색상은 신뢰감과 안정감을 줄 수 있는 안정적인 톤으로 사용… 덜 중요한 액션을 표시하거나 구분을 위한 배경으로 사용”

Secondary는 Primary를 보조합니다. 보조 버튼, 강조가 덜한 영역, 구분용 배경처럼 ‘주연만큼 튀지는 않지만 화면의 톤을 잡아주는’ 역할입니다. KRDS는 Secondary에 신뢰감·안정감이라는 정서를 부여합니다. 정부 서비스에 어울리는 차분하고 믿음직한 분위기를 만드는 색이죠. Primary가 ’행동을 부르는 외침’이라면 Secondary는 ’전체를 감싸는 분위기’입니다.

Gray — 화면의 90%를 책임지는 배경

“주로 배경, 텍스트, 구분 선에 사용”

가장 많이 쓰이지만 가장 안 띄는 색입니다. 본문 글자, 페이지 배경, 카드 면, 구분선, 비활성 요소 — 화면 면적의 대부분이 사실 Gray입니다. 4편에서 봤듯 Gray는 0(흰)부터 100(검)까지 13단계로 정의돼, 배경엔 연한 단계, 글자엔 진한 단계를 골라 씁니다. Gray가 차분하게 무대를 채워줘야 Primary의 강조가 살아납니다. 배경이 조용해야 주연이 돋보이는 것입니다.

4. 세 역할의 관계 — 외침, 분위기, 침묵

세 역할을 따로 보면 잘 와닿지 않으니, 관계로 이해해 봅시다. 잘 만든 화면은 이 셋이 각자의 자리를 지키며 협력합니다.

화면 면적으로 보면 대부분(약 60% 이상)이 Gray 입니다. 흰 배경, 연회색 카드, 진한 본문 글자가 화면을 조용히 채웁니다. 이 침묵의 배경 위에서 Secondary 가 영역을 구분하고 톤을 잡아주며(약 30%), 마지막으로 Primary 가 핵심 행동에만 강하게 등장합니다(약 10%). 이 비율 감각이 다음 편(DS-009의 60:30:10)으로 이어집니다.

이 관계를 소리에 비유하면 — Gray는 침묵(배경), Secondary는 잔잔한 배경음(분위기), Primary는 또렷한 한마디(행동 유도) 입니다. 침묵이 있어야 배경음이 들리고, 배경음이 잔잔해야 한마디가 꽂힙니다. 만약 셋 다 큰 소리로 외치면? 아무것도 안 들립니다. 역할 구분의 본질은 각 색이 자기 음량을 지키게 하는 것입니다.

그래서 역할 구분이 무너진 화면은 ’시끄러운 화면’이 됩니다. 배경까지 화려한 색이고, 보조 요소도 강조색이고, 버튼마다 다른 강한 색이면 — 사용자의 눈은 쉴 곳도, 향할 곳도 없습니다. 정부 서비스처럼 신뢰와 명료함이 중요한 곳에서 이런 화면은 특히 치명적입니다.

잘 정리된 화면은 어떻게 보이나

반대로 역할이 잘 정리된 정부 서비스 화면을 떠올려 봅시다. 사용자가 민원 신청 페이지에 들어왔습니다. 화면 대부분은 흰 배경과 진한 본문 글자, 연한 구분선으로 차분합니다(Gray). 입력 항목들은 옅은 회색 면으로 영역이 구분되고, 보조적인 안내나 부가 버튼은 은은한 톤(Secondary)으로 표시됩니다. 그리고 화면 아래쪽, 가장 중요한 “신청서 제출” 버튼 하나만 또렷한 정부 청색(Primary)으로 빛납니다.

이 화면에서 사용자는 단 한순간도 “어디를 눌러야 하지?”를 고민하지 않습니다. 눈이 자연스럽게 그 파란 버튼으로 향하기 때문입니다. 색이 사용자를 안내한 것입니다. 본문은 읽기 편하고, 화면은 신뢰감 있게 정돈됐으며, 핵심 행동은 명확합니다. 화려한 색을 많이 쓴 것도 아닌데, 오히려 절제했기 때문에 이 명료함이 나옵니다.

두 화면의 차이는 색의 ’개수’나 ’예쁨’이 아니라 역할의 질서입니다. 시끄러운 화면은 색을 많이 써서 실패한 게 아니라, 색마다 직책을 안 정해서 실패했습니다. 잘 정리된 화면은 색을 적게 써서 성공한 게 아니라, 각 색이 자기 역할을 지켰기 때문에 성공했습니다. DS-007이 ’몇 가지 색을 쓰라’가 아니라 ’역할로 구분하라’고 말하는 이유가 여기 있습니다 — 핵심은 양이 아니라 질서입니다.

공공서비스에서 ’명료함’이 특히 중요한 이유

이 질서는 정부·공공 서비스에서 더 무겁습니다. 민간 서비스는 화려함이나 개성으로 사용자를 끌어들이려 하지만, 공공서비스의 미덕은 다릅니다 — 빠르고 정확하게 일을 끝낼 수 있는 것. 주민등록등본을 떼러 온 사람은 화면의 예술성을 감상하러 온 게 아니라, 최대한 빨리 일을 처리하고 싶어 합니다. 이때 역할이 명확한 색 체계는 그 사람을 곧장 목적지로 안내합니다.

반대로 역할이 뒤죽박죽인 화면은 사용자를 머뭇거리게 하고, 잘못된 버튼을 누르게 하고, 결국 일 처리를 지연시킵니다. 그 지연은 한 사람의 짜증으로 끝나지 않고, 수만 명이 쓰는 서비스라면 거대한 누적 비효율이 됩니다. 색의 역할 구분은 그래서 ’디자인 취향’이 아니라 공공 서비스의 효율과 신뢰를 떠받치는 기본기 입니다. 작아 보이지만 결코 사소하지 않은 규칙입니다.

5. System 색은 왜 이 규칙에 없을까

여기서 자연스러운 질문이 생깁니다. “1편에서 색을 Primary·Secondary·Gray·System 네 가지로 나눈다고 했는데, DS-007에는 왜 System이 빠졌지?”

좋은 질문입니다. 답은 역할의 성격이 다르기 때문입니다.

Primary·Secondary·Gray는 화면의 ‘기본 골격’을 이루는 색입니다. 화면 어디에나 늘 존재하며 위계와 톤을 만듭니다. 반면 System 색(성공·경고·오류·정보)은 ’특정 상황에서만 등장하는 색’ 입니다. 오류가 났을 때 빨강, 성공했을 때 초록처럼, 상태를 알리는 신호로 쓰입니다. 늘 깔려 있는 색이 아니라 필요할 때 켜지는 색이죠.

그래서 KRDS는 화면의 상시 골격을 이루는 세 색(Primary·Secondary·Gray)을 ‘주요 색상’으로 묶어 DS-007에서 다루고, 상태 신호인 System은 별도로 관리합니다. 역할의 층위가 다른 것입니다 — 주요 색상은 ’무대’, System은 ’신호등’입니다. 둘 다 중요하지만 하는 일이 다릅니다. DS-007이 세 색만 언급하는 데는 이런 정밀한 구분이 깔려 있습니다.

6. 역할 구분이 없으면 — 흔한 실패

역할 구분이 안 된 사이트에서 나타나는 전형적인 증상들입니다.

모든 버튼이 강조색입니다. 메인 화면에 진한 색 버튼이 일고여덟 개씩 나열돼, 정작 가장 중요한 “신청” 버튼이 그중 하나로 묻힙니다. Primary의 의미가 사라진 것입니다.

배경까지 화려합니다. Gray로 차분히 깔려야 할 배경이 채도 높은 색으로 채워져, 그 위 글자가 안 읽히고 화면이 어수선합니다. 배경(Gray)의 침묵이 깨진 경우입니다.

같은 색이 여러 역할을 합니다. 어떤 파랑이 강조 버튼에도, 단순 구분선에도, 일반 텍스트에도 쓰입니다. 사용자는 “이 파랑이 누르라는 건가, 그냥 장식인가” 헷갈립니다. 역할과 색의 대응이 깨진 것입니다.

브랜드 색을 못 바꿉니다. 색이 역할 없이 흩어져 있어, 나중에 “메인 색을 바꾸자”고 해도 어느 색이 ’강조용 메인’이고 어느 색이 ’우연히 같은 색’인지 구분이 안 됩니다. 결국 전수 조사를 해야 합니다.

이 모든 증상의 뿌리는 하나 — 색에 직책을 부여하지 않았다는 것입니다. DS-007은 이 혼란을 처음부터 막는 예방주사입니다.

7. 해외 디자인 시스템의 색 역할

색을 역할로 구분하는 것은 현대 디자인 시스템의 공통 문법입니다.

미국 USWDS는 색 토큰을 두 종류로 나눕니다. 하나는 red-50, blue-warm-60 같은 ‘색 이름’ 토큰(system token)이고, 다른 하나는 primary, secondary, accent 같은 ‘역할 이름’ 토큰(theme token)입니다. 그리고 디자이너는 화면에서 역할 이름 토큰을 쓰도록 권장됩니다. “이 버튼은 빨강”이 아니라 “이 버튼은 primary”라고 부르는 것이죠. KRDS의 Primary·Secondary·Gray 구분과 정확히 같은 발상입니다.

영국 GOV.UK나 구글 Material 등 성숙한 시스템도 마찬가지로, 색을 ’무슨 색’이 아니라 ’무슨 역할’로 부르는 체계를 갖습니다. 이렇게 역할 기반으로 색을 관리하면, 나중에 그 역할의 색을 바꿔도 역할 이름은 그대로라 모든 화면이 자동으로 따라옵니다.

즉 DS-007의 ’Primary/Secondary/Gray 구분’은 한국 정부만의 특이 규칙이 아니라, 색을 역할로 관리하는 글로벌 표준의 한국식 적용입니다. 색에 직책을 부여하는 것은 이제 디자인 시스템의 기본기입니다.

이 ’역할 이름 토큰’이 주는 실질적 이점은 생각보다 큽니다. 가령 어떤 기관이 몇 년 뒤 브랜드 색을 파랑에서 청록으로 바꾸기로 했다고 합시다. 색을 역할로 관리하지 않았다면, 화면 곳곳에 박힌 파랑이 강조용인지 장식용인지 일일이 판단하며 수백 군데를 고쳐야 합니다. 반면 역할로 관리했다면, --color-primary 토큰 하나의 값을 청록으로 바꾸는 것만으로 모든 핵심 버튼과 강조가 동시에 바뀝니다. 장식적으로 쓰인 다른 파랑은 건드리지 않고요. 역할 기반 색 관리는 ’지금 편하자’가 아니라 ’미래에 흔들리지 않자’는 투자입니다.

또 하나, 역할 이름은 디자이너와 개발자 사이의 공통 언어가 됩니다. “이 버튼 색을 #0a6cff로 해주세요”가 아니라 “이 버튼은 primary예요”라고 소통하면, 색값을 주고받다 생기는 오류가 사라지고, 의도(이건 핵심 행동이다)가 함께 전달됩니다. 색이 단순한 숫자가 아니라 ’의미를 가진 약속’이 되는 것입니다. KRDS가 색을 역할로 구분하라고 요구하는 데는, 이런 협업의 효율까지 포함돼 있습니다.

8. 무엇을 점검하나

DS-007은 색이 역할로 구분돼 정의됐는지를 봅니다.

세 역할의 존재 — 팔레트에 Primary·Secondary·Gray가 각각 역할로 정의돼 있는가.

역할-색 대응 — 핵심 행동에 Primary, 배경·텍스트에 Gray가 일관되게 쓰이는가.

역할 혼용 여부 — 같은 색이 강조와 장식에 무분별하게 섞여 쓰이지 않는가.

시맨틱 토큰화 — 역할이 토큰(--color-primary 등)으로 구현돼 있는가.

1·4는 팔레트/토큰 정의를 봐야 정확하고, 2·3은 실제 화면의 색 사용 패턴을 분석해 판정합니다.

9. 누가 담당하나

역할	책임
디자인 시스템 담당 / 디자이너	색을 Primary·Secondary·Gray 역할로 정의 — 주관
퍼블리셔/개발	역할을 시맨틱 토큰으로 구현, 화면에서 역할대로 사용
기획/UX	화면의 ’핵심 행동’을 정의해 Primary가 어디 갈지 명확히

역할 구분은 디자인 시스템 설계의 기초라, 초기에 한 번 잘 잡아두면 이후 모든 작업이 그 위에서 정돈됩니다. KRDS를 채택하면 이 세 역할 체계가 이미 갖춰져 있어, 브랜드색만 Primary에 얹으면 됩니다.

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

적용 대상

기관 유형	DS-007 적용
중앙행정기관(대표)	✅ 정부 청색 = Primary, 표준 체계
중앙행정기관(운영)	✅ 브랜드색 = Primary, 나머지 역할 표준
공공기관	✅ 동일
지방자치단체	✅ 동일

핵심: 브랜드색은 ’Primary’라는 직책으로

독자 브랜드색을 쓰는 기관(운영·공공·지자체)은 그 브랜드색을 Primary 역할에 앉히면 됩니다. 강원도청의 초록, 어떤 공사의 주황이 ’Primary’가 되는 것이죠. 그리고 Secondary·Gray는 KRDS 표준을 따르면 됩니다. 이렇게 하면 브랜드 정체성을 지키면서도 역할 체계는 표준에 맞출 수 있습니다. ‘브랜드색을 쓰느냐’가 아니라 ’그 색에 역할을 부여했느냐’ 가 DS-007의 관건입니다.

예외(N/A)

색을 쓰는 사이트는 모두 역할 체계가 필요하므로 N/A는 드뭅니다. 점검 대상이 토큰/팔레트 정의를 포함하므로, 운영 화면만으로는 부분 판정에 그칠 수 있습니다.

11. 단계별 개선 방법

시맨틱 토큰으로 역할 고정

/* 원자 토큰(색) → 역할 토큰(시맨틱)으로 연결 */ :root { /* Primary: 핵심 행동 */ --color-primary: var(--blue-50); /* 브랜드색이면 여기에 */ /* Secondary: 보조·톤 */ --color-secondary: var(--blue-20); /* Gray: 배경·텍스트·구분선 */ --color-text: var(--gray-90); --color-bg: var(--gray-0); --color-border: var(--gray-10); } /* 화면에서는 역할 이름만 사용 → "무슨 색"이 아니라 "무슨 역할" */ .btn-primary { background: var(--color-primary); } .btn-secondary { background: var(--color-secondary); }

정비 순서

세 역할 정의 — 우리 색을 Primary/Secondary/Gray로 분류(브랜드색은 Primary).

시맨틱 토큰화 — 역할을 변수로 만들어 화면이 역할 이름을 쓰게.

역할 혼용 정리 — 같은 색이 강조·장식에 섞여 쓰인 곳을 역할대로 정돈.

Primary 절제 — 강조색이 남발된 곳을 Secondary/Gray로 강등(다음 편 DS-008 연계).

12. 30초 자가진단 + FAQ

✅ 30초 자가진단

우리 색이 Primary·Secondary·Gray 역할로 정의돼 있나요?

핵심 행동 버튼에 일관되게 Primary 색이 쓰이나요?

한 화면에 강조색 버튼이 너무 많지 않나요?

배경·본문이 차분한 Gray로 깔려 있나요?

화면에서 색을 부를 때 “파랑”이 아니라 “primary”라고 부르나요(토큰)?

❓ FAQ

Q1. 우리는 색이 메인 하나뿐인데, Secondary가 꼭 있어야 하나요? 화면에는 보조 강조와 구분이 필요한 순간이 반드시 옵니다. Secondary가 없으면 그때마다 Primary를 남용하거나 임의 색을 끌어다 쓰게 됩니다. 최소한의 Secondary 정의는 권장됩니다. KRDS를 채택하면 자동으로 갖춰집니다.

Q2. 브랜드색이 강렬한 빨강인데, Primary로 쓰면 너무 튀지 않나요? Primary는 ‘핵심 행동에만 아껴 쓰는’ 색입니다(DS-008). 강렬한 색일수록 더 절제해서 쓰면 됩니다. 면적을 줄이고 핵심 버튼에만 쓰면, 강렬함이 단점이 아니라 강조 효과가 됩니다.

Q3. Primary와 Secondary를 꼭 다른 색 계열로 해야 하나요? 꼭 그렇진 않습니다. 같은 계열의 다른 단계(진한 파랑=Primary, 연한 파랑=Secondary)로 구성할 수도 있고, 다른 계열로 할 수도 있습니다. 중요한 건 ’색의 다름’이 아니라 ’역할의 명확함’입니다.

Q4. Gray도 ’주요 색상’에 들어가나요? 회색은 색 같지 않은데요. 네, 들어갑니다. Gray는 화면 면적의 대부분을 책임지는 핵심 역할입니다. 배경·텍스트·구분선이 없는 화면은 없으니까요. ’눈에 안 띈다’는 게 ’안 중요하다’는 뜻은 아닙니다.

Q5. System(빨강·초록) 색은 Secondary인가요? 아닙니다. System은 상태를 알리는 별도 역할입니다(5장 참고). Primary·Secondary·Gray는 화면의 상시 골격이고, System은 특정 상황의 신호입니다. 층위가 다릅니다.

13. 마무리 — 색에 직책을 주면 화면에 질서가 생긴다

DS-007의 메시지는 단순하지만 강력합니다.

색을 ’무슨 색’으로 보지 말고 ’무슨 역할’로 보라.

색에 직책을 부여하는 순간, 흩어져 있던 색들이 질서를 갖습니다. 주연(Primary)은 행동을 부르고, 조연 (Secondary)은 분위기를 받치고, 배경(Gray)은 무대를 채웁니다. 이 질서가 있어야 사용자는 화면을 직관적으로 이해하고, 디자이너는 일관되게 작업하며, 나중에 색을 바꿔도 흔들리지 않습니다.

그리고 이 역할 구분은 색상 규칙의 후반부 전체로 이어집니다. 다음 편 DS-008은 “그 Primary를 어디에 써야 하는가”, DS-009는 “세 역할을 어떤 비율(60:30:10) 로 배치하는가”를 다룹니다. 오늘 직책을 나눴으니, 이제 그 직책들을 화면에 어떻게 배치하는지로 들어갈 차례입니다.

다음 편 예고 ▶ 「008. 주요 색상을 주요 액션이나 중요한 정보를 강조하는 데 사용하고 있다.」

우리 색이 역할로 잘 구분돼 있는지 확인하려면? ViewCheck는 사이트가 쓰는 색을 Primary·Secondary·Gray 역할로 분류해, 핵심 행동에 강조색이 일관되게 쓰이는지·강조색이 남발되지 않는지·배경이 차분한 중립색인지를 분석해 보여줍니다.

📚 참고 출처

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

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

U.S. Web Design System — Theme color tokens (역할 기반) — https://designsystem.digital.gov/design-tokens/color/theme-tokens/

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

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