강한 색은 작게, 약한 색은 넓게

KRDS DS-009 — 주요 색상을 60%는 배경 및 중립적인 색상, 30%는 보조 색상, 10%는 주요 기능이나 중요한 상호작용을 하는 색상으로 배치하고 있다.

0. 들어가며 — 절제가 마침내 ’숫자’가 되다

지난 두 편을 돌아봅시다. DS-007은 색에 역할(Primary·Secondary·Gray)을 부여하라고 했고, DS-008은 그 Primary를 핵심 행동에만 절제해서 쓰라고 했습니다. 두 편 모두 ’절제’를 말했지만, 한 가지 질문이 남았습니다.

“그래서 얼마나 절제해야 하는데? 강조색을 정확히 어느 정도만 쓰라는 거지?”

DS-009가 마침내 그 답을 숫자로 줍니다 — 60 : 30 : 10. 화면 색의 60%는 차분한 중립색, 30%는 보조색, 그리고 단 10%만 강조색으로 배치하라는 것입니다. 막연한 “아껴 써라”가 구체적인 비율이 되는 순간입니다.

이 60:30:10은 사실 디자인계에서 오래전부터 통용된 황금 비율입니다. 인테리어, 패션, 그래픽 디자인이 공통으로 쓰는 배분 법칙이죠. KRDS는 이 검증된 비율을 공공 웹 디자인의 표준으로 가져왔습니다. 이번 편은 이 세 숫자가 각각 무엇을 의미하고, 왜 이 비율이 ‘안정감 있으면서도 또렷한’ 화면을 만드는지, 그리고 가장 흔히 깨지는 지점은 어디인지를 끝까지 풀어냅니다.

1. 규칙 원문 — 세 개의 숫자

DS-009 (디자인 스타일 > 색상) “주요 색상을 ① 60%는 배경 및 중립적인 색상, ② 30%는 보조 색상, ③ 10%는 주요 기능이나 중요한 상호작용을 하는 색상으로 배치하고 있다.”

세 개의 숫자가 각각 한 역할에 대응합니다.

① 60% — 배경·중립색

화면 면적의 약 60% 는 차분한 중립색(주로 Gray)이 차지해야 합니다. 흰 배경, 연회색 면, 진한 본문 텍스트, 구분선 — 화면을 조용히 채우는 색입니다. ’바탕’에 해당하죠.

② 30% — 보조색

약 30% 는 보조색(주로 Secondary)입니다. 영역을 구분하고, 보조 요소를 표현하고, 톤을 잡아주는 색입니다. 중립색과 강조색 사이를 메우는 ’중간층’입니다.

③ 10% — 강조색

마지막 10% 만 강조색(Primary)입니다. 핵심 행동 버튼, 활성 링크, 중요한 상호작용 — 사용자를 행동으로 이끄는 색입니다. DS-008에서 본 그 ’아껴 쓰는 색’의 정확한 분량이 바로 이 10%입니다.

정리: 바탕 60 : 보조 30 : 강조 10. 강조색은 화면의 10분의 1을 넘지 않아야 한다 — 이게 DS-009입니다.

2. 60:30:10이란 무엇인가 — 디자인의 황금비

60:30:10은 KRDS가 발명한 게 아니라, 디자인 전반에서 수십 년간 검증된 배색 법칙입니다. 그 뿌리를 알면 왜 이 비율이 통하는지 이해됩니다.

인테리어에서 온 법칙

이 비율은 본래 실내 인테리어 디자인의 기본 원칙입니다. 방을 꾸밀 때 벽·바닥 같은 큰 면(60%)은 차분한 기본색, 가구·커튼 같은 중간 면(30%)은 보조색, 쿠션·소품 같은 작은 포인트(10%)는 강조색으로 배치하면 조화로우면서도 생동감 있는 공간이 됩니다. 만약 벽까지 강렬한 색이면 방이 부담스럽고, 포인트 색이 너무 많으면 산만해집니다. 60:30:10은 ’안정과 생동의 균형점’입니다.

화면에도 그대로 적용된다

웹 화면도 본질은 같습니다. 큰 면(배경·본문 영역)은 차분하게, 중간 면(섹션·카드·보조 요소)은 보조색으로, 작은 포인트(핵심 버튼·강조)는 강조색으로. 이렇게 배분하면 화면이 편안하게 읽히면서도 핵심이 또렷한 상태가 됩니다.

여기서 핵심은 ‘면적’ 입니다. 60:30:10은 색의 ’개수’가 아니라 화면에서 차지하는 넓이의 비율입니다. 강조색을 한 종류만 써도 그것을 화면 곳곳에 넓게 칠하면 10%를 훌쩍 넘깁니다. 반대로 강조색 종류가 여럿이어도 각각 작게 쓰면 합쳐서 10% 안에 들 수 있습니다. 비율의 대상은 색의 가짓수가 아니라 면적이라는 점을 기억해야 합니다.

왜 인테리어의 법칙이 화면에도 통할까

흥미로운 질문이 하나 있습니다. 방을 꾸미는 법칙이 어떻게 웹 화면에도 똑같이 적용될까요? 답은, 둘 다 인간의 눈과 뇌가 시각 정보를 받아들이는 방식을 다루기 때문입니다. 매체가 벽이든 화면이든, 그것을 보는 사람의 시지각은 동일합니다. 사람의 눈은 넓은 면이 차분할 때 편안함을 느끼고, 작은 포인트가 강할 때 그것을 ’중요한 것’으로 인식합니다. 이건 문화나 매체를 초월하는 보편적 반응입니다.

그래서 60:30:10은 인테리어, 패션, 포스터, 프레젠테이션, 웹 화면 어디에나 통합니다. 잘 차려입은 사람의 옷차림을 떠올려 보세요 — 대부분 차분한 기본색(정장, 셔츠)이고, 작은 포인트(넥타이, 포켓치프)만 색이 강합니다. 온몸을 강렬한 색으로 휘감은 옷차림이 부담스러운 것과, 화면 전체가 강조색인 게 산만한 것은 정확히 같은 원리입니다. KRDS가 이 비율을 채택한 것은 유행을 따른 게 아니라, 인간 시지각의 보편 원리에 기댄 것입니다. 그래서 시간이 지나도 낡지 않는 기준입니다.

’균형’은 무관심이 아니라 의도다

한 가지 오해를 짚고 가야 합니다. 60:30:10을 지킨 화면이 ‘아무것도 안 한 밋밋한 화면’은 아니라는 점입니다. 오히려 정반대입니다. 차분한 60%는 우연히 비워둔 게 아니라 의도적으로 양보시킨 공간이고, 또렷한 10%는 그 양보 덕분에 빛나는 것입니다. 절제된 화면은 ’디자인을 덜 한’ 화면이 아니라 ‘어디에 힘을 줄지 정확히 아는’ 화면입니다. 무엇을 강조할지 결정하려면 무엇을 강조하지 않을지부터 결정해야 하는데, 60:30:10은 바로 그 결정의 비율적 표현입니다.

3. KRDS의 구체적 배분 — 무엇을 어디에

KRDS는 이 60:30:10을 실제 화면 요소에 구체적으로 매핑해 둡니다. 추상적인 비율이 아니라 ’무엇이 어느 비율에 들어가는가’까지 정리한 것입니다.

60% — Surface, Background, Text, Icon, Divider

화면의 토대를 이루는 모든 것입니다. 페이지 배경(Surface), 영역 바탕(Background), 본문 텍스트, 일반 아이콘, 구분선(Divider). 대부분 Gray 계열입니다. 사용자가 ‘읽고 머무는’ 영역이라 차분해야 합니다.

30% — Element, Border, Action

화면을 구조화하는 중간층입니다. 카드·패널 같은 요소(Element), 테두리(Border), 보조적인 액션(Action). 주로 Secondary나 중간 톤의 색이 쓰입니다. 화면에 짜임새를 주되 튀지는 않습니다.

10% — Primary Action, Link, Button

사용자를 행동으로 이끄는 부분입니다. 핵심 행동(Primary action), 링크, 강조 버튼. Primary 색이 여기 들어갑니다. 그리고 KRDS는 여기서 한 걸음 더 나아가, 가장 강한 강조색은 5% 이하로 더 절제하라고 권합니다. 10% 안에서도 진짜 핵심 강조는 그 절반 이하로 아끼라는 것이죠.

이 구체적 매핑이 중요한 이유는, 60:30:10을 ’느낌’이 아니라 ’실행 가능한 기준’으로 만들기 때문입니다. “배경·텍스트·구분선은 60% 쪽, 핵심 버튼·링크는 10% 쪽”이라고 정리해 두면, 디자이너가 색을 배치할 때 명확한 길잡이가 됩니다.

4. 왜 하필 이 비율인가 — 안정과 생동의 균형

60:30:10이 통하는 데는 인간의 시지각과 관련된 이유가 있습니다.

눈은 쉴 곳이 필요하다

화면을 볼 때 눈은 끊임없이 정보를 처리합니다. 강한 색은 시각적 자극이라, 많을수록 눈이 피로해집니다. 화면의 60%가 차분한 중립색이면, 눈이 머물며 쉴 수 있는 ’여백 같은 공간’이 생깁니다. 이 쉼이 있어야 사용자가 오래 머물러도 피로하지 않고, 정작 중요한 강조가 등장했을 때 또렷이 인식합니다. 60%의 차분함은 나머지 40%를 위한 ’배경 정적’입니다.

강조는 작아야 강하다 (DS-008의 연장)

지난 편에서 본 ’강조의 경제학’이 여기서 숫자로 확인됩니다. 강조색이 10%일 때 그 10%가 도드라집니다. 만약 강조색이 30%, 50%로 늘어나면 더 이상 강조가 아니라 그냥 ’많이 쓴 색’이 됩니다. 10%라는 상한은 강조의 힘을 보존하기 위한 안전장치입니다.

30%가 다리를 놓는다

만약 60%(차분)와 10%(강렬)만 있고 30%가 없다면, 화면은 너무 단조롭거나 두 극단이 충돌합니다. 30%의 보조색은 차분함과 강렬함 사이에 부드러운 다리를 놓아, 화면에 깊이와 짜임새를 줍니다. 세 층이 모두 있어야 균형이 완성됩니다.

핵심: 60:30:10은 임의의 숫자가 아니라, ‘편안하게 머물 수 있으면서도 핵심이 또렷한’ 화면을 만드는 검증된 균형점입니다. 안정(60)과 구조(30)와 생동(10)이 한 비율 안에 담겨 있습니다.

5. 면적의 함정 — ‘강한 색은 작게, 약한 색은 넓게’

DS-009를 한 문장으로 압축하면 이렇습니다 — 강한 색일수록 좁게 쓰고, 약한 색일수록 넓게 써라.

직관과 반대라 실수가 잦습니다. 사람들은 흔히 “이 색이 우리 브랜드색이고 예쁘니까 많이 쓰자”고 생각합니다. 그래서 브랜드색(강조색)을 헤더 전체, 배경 전체에 넓게 칠합니다. 그 결과 강조색이 화면의 40~50%를 차지하고, 정작 핵심 버튼은 그 색바다에 묻혀버립니다. 60:30:10이 완전히 뒤집힌 것입니다.

올바른 접근은 반대입니다. 강조색(브랜드색)은 핵심 버튼과 포인트에만 작게, 화면의 대부분은 차분한 중립색으로. 그러면 강조색이 작아도 — 아니, 작기 때문에 — 더 또렷이 빛납니다. 브랜드색을 사랑할수록 역설적으로 아껴 써야 그 색이 산다는 것이 60:30:10의 가르침입니다.

이 원칙은 5편(선명한 화면 모드)·8편(강조 절제)과도 한 줄로 꿰입니다. 모두 “넓은 면은 조용히, 작은 포인트는 강하게” 라는 같은 시각 원리의 다른 표현입니다.

이 함정이 특히 공공기관에서 자주 터지는 데는 조직적인 이유가 있습니다. 새 홈페이지를 만들 때, 기관 내부에서는 “우리 상징색이 잘 드러나야 한다”는 요구가 강하게 나옵니다. 그래서 헤더도 브랜드색, 주요 배너도 브랜드색, 섹션 구분도 브랜드색으로 칠하게 됩니다. 의도는 좋습니다 — 기관 정체성을 보여주고 싶은 것이니까요. 하지만 결과는 정반대입니다. 브랜드색이 화면을 뒤덮으면 그 색은 더 이상 특별하지 않고, 사용자는 어수선함만 느낍니다. 정체성을 강조하려다 정체성을 희석시키는 역설이 벌어집니다.

진짜로 브랜드를 각인시키는 방법은 반대입니다. 차분한 화면에 브랜드색 포인트 하나가 또렷이 빛날 때, 사용자는 그 색을 더 선명하게 기억합니다. 명품 브랜드일수록 로고를 작고 절제되게 쓰는 것과 같은 이치입니다. 브랜드색을 ‘많이’ 보여주는 것과 ‘강하게’ 각인시키는 것은 전혀 다른 일이며, 60:30:10은 후자로 가는 길입니다. 기관 담당자가 이 점을 이해하면, “브랜드색을 줄이자”는 제안이 정체성을 버리는 게 아니라 오히려 살리는 길임을 받아들이게 됩니다.

6. 가장 많이 깨지는 곳 — 위반 패턴

실무에서 60:30:10 위반은 거의 정해진 형태로 나타납니다.

함정 ① 브랜드색 배경 남용. 헤더·푸터·섹션 배경을 진한 브랜드색으로 넓게 칠함. 강조색이 화면의 절반을 차지해 비율이 무너지고, 그 위 강조가 묻힘. → 배경은 중립색으로, 브랜드색은 포인트로.

함정 ② 강조 버튼 과다. 화면에 진한 강조 버튼이 여러 개라 10%를 훌쩍 초과. → 핵심 하나만 강조, 나머지 양보(DS-008).

함정 ③ 보조색 부재. 60%(중립)와 10%(강조)만 있고 30%(보조)가 비어, 화면이 단조롭거나 두 색만 충돌. → 영역 구분·카드·테두리에 보조색을 활용.

함정 ④ 채도 높은 면 과다. 채도 높은 색을 넓은 면에 써서 눈이 피로하고 대비가 깨짐. → 넓은 면은 채도 낮은 중립색으로.

네 함정의 뿌리는 하나 — ’면적’을 고려하지 않고 색을 골랐다는 것. 60:30:10은 ’어떤 색을 쓰나’가 아니라 ’각 색을 얼마나 넓게 쓰나’의 규칙입니다.

실제 화면에서 비율을 가늠하는 법

“우리 화면이 60:30:10인지 어떻게 알죠?”라는 질문에는 간단한 자가 테스트가 있습니다. 화면을 눈을 살짝 가늘게 뜨고 보거나, 일부러 흐릿하게 보세요. 디테일이 사라지고 색 덩어리만 남으면 비율이 한눈에 들어옵니다. 대부분이 차분한 회색·흰색이고 강조색은 작은 점처럼 박혀 있으면 잘 된 것이고, 강조색이 큰 덩어리로 보이면 과한 것입니다. 디자이너들이 시안을 흐릿하게 만들어 보는 ’스퀸트 테스트(squint test)’가 바로 이 방법입니다.

또 하나, 화면을 회색조(흑백)로 바꿔 보는 것도 좋습니다(DS-006에서도 권한 방법이죠). 흑백으로 바꾸면 색의 ’화려함’에 속지 않고 순수하게 밝기 분포와 면적을 볼 수 있습니다. 흑백에서도 핵심 행동이 또렷이 구분되고 화면이 차분하면, 색 배분이 건강하다는 뜻입니다.

이런 테스트가 알려주는 더 큰 교훈은, 60:30:10이 ’정밀 계산’이 아니라 ’전체 인상’의 문제라는 것입니다. 픽셀을 세어 정확히 10%를 맞추라는 게 아니라, 화면을 멀리서 봤을 때 ’차분한 바탕에 또렷한 포인트’라는 인상이 나오면 됩니다. 그 인상이 곧 사용자가 실제로 느끼는 경험이기 때문입니다.

7. 색상 규칙들이 하나로 모이는 지점

DS-009는 앞선 색상 규칙들이 합류하는 지점입니다. 잠깐 정리해 봅시다.

DS-007(역할 구분) — 색을 Primary·Secondary·Gray로 나눴습니다.

DS-008(강조 사용) — Primary를 핵심 행동에만 쓰라고 했습니다.

DS-009(60:30:10) — 그 세 역할을 면적 비율로 배치하라고 합니다.

세 규칙을 합치면 하나의 완결된 그림이 됩니다 — 색에 역할을 주고(007), 강조를 절제하고(008), 면적을 균형 있게 배분한다(009). Gray(중립)가 60%, Secondary(보조)가 30%, Primary(강조)가 10%. 역할과 비율이 정확히 대응합니다. 이 세 규칙을 함께 지키면, 차분하면서도 또렷하고 일관된 — ’좋은 정부 서비스 화면’의 색 토대가 완성됩니다.

이렇게 색상 규칙들은 따로 노는 게 아니라 서로를 떠받칩니다. 그래서 하나만 어겨도 전체 균형이 흔들립니다. 역할 구분 없이 60:30:10을 지킬 수 없고, 60:30:10 없이 강조 절제가 완성되지 않습니다.

8. 해외 디자인 시스템도 60:30:10

이 비율은 국제적으로도 표준입니다.

미국 USWDS는 색을 primary·secondary·accent로 나누면서, 이들이 약 60% : 30% : 10% 의 비례 관계를 이루도록 권장합니다. KRDS와 토씨까지 같은 비율입니다. 그래픽·인테리어·UI 디자인이 공통으로 쓰는 이 비율이, 정부 디자인 시스템에서도 표준으로 자리 잡은 것입니다.

즉 60:30:10은 한국 정부의 자의적 기준이 아니라, 디자인 전 분야가 합의한 배색의 기본 문법입니다. KRDS는 그 검증된 문법을 공공 웹에 적용했을 뿐입니다.

9. 무엇을 점검하나

DS-009는 화면의 색 면적 비율을 봅니다.

중립색 비중 — 화면 대부분(약 60%)이 차분한 중립색으로 채워졌는가.

강조색 비중 — 강조색이 약 10%(핵심 강조는 5% 이하)로 절제됐는가.

보조색 존재 — 중간층(약 30%)의 보조색이 화면에 짜임새를 주는가.

면적 균형 — 강한 색이 넓은 면을 점유하지 않는가.

화면의 색 점유 면적을 추출해 중립·보조·강조 비율을 집계하면, 60:30:10에서 얼마나 벗어났는지 판정할 수 있습니다. 엄격한 정수보다 ’대략의 균형’으로 봅니다.

10. 누가 담당하나

역할	책임
디자이너	화면 색 면적을 60:30:10 균형으로 배치 — 주관
디자인 시스템 담당	역할별 색이 비율에 맞게 쓰이도록 가이드
퍼블리셔/개발	시안의 면적 비율을 구현에서 유지(임의 배경색 추가 금지)

60:30:10은 디자이너의 감각 영역처럼 보이지만, ’면적’이라는 객관적 기준이 있어 점검과 합의가 가능합니다. “이 화면 강조색이 너무 많다”는 막연한 피드백을, “강조 면적이 10%를 넘는다”는 구체적 기준으로 바꿀 수 있습니다.

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

적용 대상

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

색이 있는 모든 화면 = 전부 해당. 특히 브랜드색을 가진 기관일수록 이 비율을 의식해야 합니다 — 브랜드색을 넓게 쓰고 싶은 유혹이 크기 때문입니다.

예외(N/A)

순수 흑백 문서가 아니라면 사실상 모든 화면이 비율 점검 대상입니다.

12. 단계별 개선 방법

Before / After

❌ Before — 헤더·배너·섹션 배경을 전부 브랜드 파랑으로 → 강조색이 화면의 ~50%, 핵심 버튼이 파란 바다에 묻힘 ✅ After — 배경은 흰색·연회색(60%), 카드·구분은 보조색(30%), 핵심 버튼·링크만 브랜드 파랑(10%) → 차분한 화면에 핵심 행동이 또렷

정비 순서

배경부터 중립화 — 넓은 면(헤더·섹션 배경)을 차분한 중립색으로.

강조색 면적 줄이기 — 브랜드색을 핵심 버튼·링크·포인트로 한정(≤10%).

보조색으로 짜임새 — 영역 구분·카드·테두리에 보조색 활용(~30%).

채도 점검 — 넓은 면의 채도를 낮춰 눈의 피로 완화.

13. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 화면 대부분이 차분한 중립색(흰·회색)인가요?

□ 강조색(브랜드색)이 화면의 10% 안팎인가요, 절반 가까이인가요?

□ 헤더·배경을 진한 강조색으로 넓게 칠하지 않았나요?

□ 영역 구분·카드에 보조색이 적절히 쓰였나요?

□ 강조색을 줄였더니 핵심이 더 또렷해지지 않나요?

❓ FAQ

Q1. 정확히 60:30:10을 맞춰야 하나요? 자를 대고 재나요? 아닙니다. 정밀한 수치가 아니라 ’대략의 균형’입니다. 핵심은 “중립색이 대부분, 강조색은 소량”이라는 감각입니다. 강조색이 30~50%를 차지하면 명백한 위반이지만, 8%냐 12%냐는 따지지 않습니다.

Q2. 우리 브랜드색이 자랑스러운데 조금만 쓰라니 아쉬워요. 브랜드색을 사랑할수록 아껴 써야 그 색이 빛납니다. 화면을 온통 브랜드색으로 칠하면 그 색이 평범해지지만, 핵심에만 쓰면 매번 강렬한 인상을 줍니다. 적게 쓰는 것이 브랜드색을 더 돋보이게 하는 길입니다.

Q3. 강조색이 10%면 화면이 심심해 보이지 않나요? 심심함과 차분함은 다릅니다. 30%의 보조색이 화면에 짜임새와 깊이를 줍니다. 60:30:10은 단조로운 게 아니라 ‘정돈된’ 화면을 만듭니다. 차분하지만 비어 보이지 않습니다.

Q4. 강조색을 여러 종류 쓰면 각각 10%씩인가요? 아닙니다. 강조색은 모두 합쳐서 약 10%(핵심은 5% 이하)입니다. 강조색 종류가 많을수록 각각 더 작게 써야 합산이 10% 안에 듭니다. 사실 강조색 종류도 적을수록 좋습니다.

Q5. 다크모드/선명한 화면 모드에서도 60:30:10인가요? 비율 원리는 유지됩니다. 배경이 어두워져도 ’차분한 면 60 : 보조 30 : 강조 10’의 균형은 같습니다. 색이 반전될 뿐 면적 배분의 철학은 동일합니다.

14. 마무리 — 비율이 곧 질서다

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

좋은 화면은 강한 색을 많이 쓴 화면이 아니라, 색의 면적을 잘 배분한 화면이다.

60:30:10은 단순한 숫자가 아니라 시각적 질서의 공식입니다. 60%의 차분함이 눈을 쉬게 하고, 30%의 보조색이 짜임새를 만들고, 10%의 강조가 핵심을 가리킵니다. 이 균형이 있어야 화면이 편안하면서도 또렷하고, 무엇보다 신뢰감 있습니다 — 공공서비스에 가장 필요한 그 인상입니다.

지금까지 색상의 ’역할(007)·사용(008)·배분(009)’을 차례로 다뤘습니다. 이로써 색을 ’어떻게 쓰는가’의 큰 그림이 완성됐습니다. 다음 편부터는 색의 더 세밀한 기법으로 들어갑니다. DS-010 — “5단계 투명도 색상을 사용하고 있다.” 겹쳐지는 요소(모달 뒤 막, 비활성 처리, 반투명 구분선)에 쓰는 투명도(Alpha)를 5단계로 표준화하는 이야기입니다. 색의 ’깊이’를 다루는 기법으로 넘어갑니다.

다음 편 예고 ▶ 「010. 5단계 투명도 색상을 사용하고 있다.」

우리 화면의 색 면적이 60:30:10에 맞는지 확인하려면? ViewCheck는 화면의 색 점유 면적을 추출해 중립·보조·강조의 비율을 집계하고, 강조색이 과도하게 넓은 면을 차지하고 있는지를 시각화해 보여줍니다.

📚 참고 출처

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

U.S. Web Design System — Using color (60/30/10) — https://designsystem.digital.gov/design-tokens/color/overview/

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

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