사이트 전체 "일관성"을 숫자로 — ViewCheck 정량화 실험

페이지마다 다른 버튼, 다른 색, 다른 간격… 그게 얼마나 다른지 기계로 잴 수 있을까?

들어가며 — "일관성이 좋다"는 말의 공허함

디자인 리뷰 자리에서 "일관성이 부족하다"는 말은 참 자주 들린다. 그런데 그 말을 들은 뒤 팀원이 으레 하는 질문이 있다.

"그래서 얼마나 부족한 건가요?"

침묵이 온다. "느낌상 많이 다른 것 같다"고 대답하거나, "메인 페이지랑 상세 페이지 버튼 색이 달라요"처럼 특정 예시를 하나 들거나. 하지만 사이트 전체에 걸쳐 일관성이 "몇 점"인지, 어떤 페이지에서 어떤 항목이 얼마나 벗어났는지, 그걸 수치로 말할 수 있는 사람은 거의 없다.

이 글은 그 질문을 정면으로 다룬다. 공공 웹사이트의 디자인 일관성을 숫자로 표현하는 일이 가능한가. 가능하다면 무엇을 어떻게 재야 하는가. 그리고 그 수치가 실제로 의미 있는 판단 기준이 될 수 있는가.

솔직하게 말해두면 — 우리는 아직 "완벽한 일관성 점수"를 갖고 있다고 주장하지 않는다. 지금 하고 있는 것은 실험이고, 그 실험의 과정을 공개하는 것이 이 글의 목적이다. "연구 중이다"를 부끄러워하지 않으려 한다. 오히려 그게 솔직한 자세라고 생각한다.

한국인이 여러 웹페이지 레이아웃을 그리드 형태로 펼쳐놓고 불일치점을 찾아보는 장면. — 페이지들을 나란히 놓고 비교해야 비로소 보이는 것들. 일관성은 한 장으로는 판단할 수 없다.

일관성이 왜 중요한가 — UX 연구가 말하는 것

일관성이 사용자 경험에 중요하다는 주장은 UX 연구에서 오래된 토대를 가지고 있다. 사용성 분야의 고전적 권위인 Jakob Nielsen은 1994년 처음 발표하고 이후 여러 차례 개정한 **10가지 사용성 휴리스틱(Heuristics)**의 네 번째 항목으로 "일관성과 표준(Consistency and Standards)"을 꼽았다.

닐슨 노먼 그룹(Nielsen Norman Group, 이하 NN/g)은 이 휴리스틱을 이렇게 정리한다.

"사용자는 서로 다른 단어, 상황, 행동이 같은 것을 의미하는지 계속 의심해야 하는 상황을 피해야 한다. 플랫폼과 업계의 관례를 따르라." — Nielsen Norman Group, "Maintain Consistency and Adhere to Standards (Usability Heuristic #4)"

NN/g는 일관성을 크게 두 차원으로 구분한다. **내부 일관성(internal consistency)**은 하나의 제품 또는 제품군 내에서 동일한 시각 표현과 언어를 유지하는 것이다. **외부 일관성(external consistency)**은 업계 전반에서 통용되는 관례를 따르는 것, 예를 들어 파란 밑줄 텍스트는 링크이고, 장바구니 아이콘은 구매 목록이고, 로고는 왼쪽 상단에 있다는 암묵적 약속을 지키는 것이다(NN/g, "Maintain Consistency and Adhere to Standards", https://www.nngroup.com/articles/consistency-and-standards/).

이 두 가지 일관성이 함께 지켜질 때 사용자는 학습 부담 없이 인터페이스를 탐색할 수 있고, 오류를 덜 낸다. 다시 말해 일관성은 미적 취향이 아니라 사용성의 기초다.

그런데 흥미로운 점이 있다. NN/g가 말하는 일관성은 대부분 "이래야 한다"는 규범적 가이드로 제시된다. 일관성이 얼마나 지켜지고 있는지를 수치로 측정하는 방법론까지 제시하는 경우는 드물다. 측정이 어렵기 때문이다. 규범을 아는 것과, 실제 사이트의 일관성을 정량화하는 것은 꽤 다른 문제다.

학계에서 시도한 일관성 측정 — Ozok & Salvendy의 연구

일관성을 실증적으로 측정하려는 시도는 학계에도 있었다. 퍼듀대학교(Purdue University) 산업공학부의 A. A. Ozok과 G. Salvendy는 2000년 학술지 『Ergonomics』에 "Measuring consistency of web page design and its effects on performance and satisfaction(웹 페이지 디자인의 일관성 측정과 성능·만족도에 미치는 영향)"이라는 논문을 발표했다(Ozok & Salvendy, Ergonomics, Vol. 43, No. 4, 2000, pp. 443–460. PubMed: https://pubmed.ncbi.nlm.nih.gov/10801079/).

이 연구에서 두 저자는 웹 페이지의 일관성을 세 가지 요소로 분해했다.

물리적 일관성(Physical consistency): 색상, 폰트, 레이아웃, 아이콘의 시각적 표현이 얼마나 통일되어 있는가.
커뮤니케이션 일관성(Communicational consistency): 같은 행동을 의미하는 언어·용어·레이블이 일관된 방식으로 쓰이는가.
개념적 일관성(Conceptual consistency): 메뉴 구조, 내비게이션 논리, 작업 흐름이 사용자의 기대에 일관되게 맞아 들어가는가.

연구 결과는 특히 흥미롭다. 세 요소 모두 전체 일관성 수준에 유의하게 기여하며, 물리적·커뮤니케이션 일관성은 서로 상호작용하는 반면 개념적 일관성은 독립적으로 작동한다는 것이다. 그리고 불일치한 디자인을 쓴 피험자는 일관된 디자인을 쓴 피험자보다 오류율이 높았다.

이 연구가 우리에게 준 가장 중요한 통찰은 "일관성이 측정 가능하다"는 점이다. 막연하게 느끼던 개념을 세 차원으로 분해하고, 각 차원을 구체적 지표로 환산할 수 있다면, 점수를 만들 수 있다. 그리고 점수가 있으면 비교가 가능해진다.

ViewCheck가 일관성 정량화 실험을 시작할 때, 이 세 차원의 프레임을 직접적인 참고로 삼았다. 특히 "물리적 일관성"이 우리에게 가장 직접적으로 와 닿았다. 색상, 폰트, 간격, 레이아웃 — 이것들은 DOM과 CSS에서 실제 수치로 추출할 수 있는 요소들이기 때문이다.

공공 웹에서 일관성이 더 중요한 이유

민간 웹사이트와 달리 공공 웹사이트에서는 일관성의 의미가 한 단계 더 깊다. 몇 가지 이유가 있다.

첫째, 사용자층이 다양하다. 민간 서비스는 특정 타깃 사용자를 상정하고 설계하지만, 공공 서비스는 10대부터 노년층까지, 디지털 친숙도와 신체 능력이 천차만별인 모든 시민이 대상이다. 일관성이 낮으면 학습 부담이 급격히 커지고, 디지털 취약 계층에게는 그 장벽이 훨씬 가파르다.

둘째, 부처·기관마다 다른 개발팀이 운영한다. 하나의 기관 사이트도 수년에 걸쳐 여러 외주 개발사가 페이지를 추가하거나 리뉴얼하면서 운영된다. 메인 페이지는 최근에 KRDS 기준에 맞게 새로 만들었지만, 2년 전 만든 신청 페이지는 옛 디자인이 그대로 남아 있는 식이다. 사이트 내에서 시각적 방언이 여러 개 공존하는 상황이 된다.

셋째, KRDS라는 공통 기준이 생겼다. 대한민국 행안부와 디지털플랫폼정부위원회가 배포한 범정부 디자인 시스템 KRDS는 공공 웹사이트가 공유해야 할 시각 언어의 표준을 제시한다. 색상 토큰, 타이포그래피, 간격 체계, 컴포넌트 스펙 — 이것들이 공통으로 정해져 있다면, "이 사이트가 그 기준에서 얼마나 벗어나 있는가"를 측정하는 것이 곧 일관성 점수가 될 수 있다.

KRDS 공식 사이트(krds.go.kr)는 컴포넌트의 정의를 이렇게 내린다.

"컴포넌트는 사용자 인터페이스의 가장 작은 단위로, 과업에 상관없이 일관성 있게 사용되는 공통 요소에 대한 가이드입니다."

여기서 핵심 문구는 **"과업에 상관없이 일관성 있게"**다. KRDS는 컴포넌트 자체가 일관성의 단위임을 명시한다. 따라서 어떤 사이트에서 같은 용도의 컴포넌트가 페이지마다 다른 방식으로 구현되어 있다면, 그건 KRDS 기준으로 명백한 일관성 위반이다.

두 가지 미묘하게 다른 버튼 디자인을 루페로 비교하는 근접 촬영. — 루페로 들여다보기 전엔 몰랐던 미묘한 차이. 버튼 하나의 색과 radius가 페이지마다 조금씩 다를 때, 사이트 전체를 보면 그 차이는 증폭된다.

"일관성 점수"는 어떻게 만드나 — 기술적 접근

이제 본론으로 들어가자. ViewCheck가 실험 중인 일관성 정량화의 기술적 접근을 최대한 솔직하게 공개한다.

핵심 아이디어는 단순하다. 같아야 하는 것들이 얼마나 같은가를 수치로 표현한다. 그런데 이 단순한 아이디어를 구현하는 과정에서 복잡한 선택들이 연속으로 등장한다.

무엇을 기준으로 "같아야 한다"고 정하는가

일관성을 측정하려면 먼저 기준이 있어야 한다. ViewCheck에서는 두 가지 기준을 사용한다.

첫 번째 기준: KRDS 토큰. KRDS가 정의한 색상 토큰(색상 586개), 타이포그래피 토큰, 간격 토큰을 기준으로, 사이트의 실제 CSS 값들이 이 토큰에 얼마나 매핑되는가를 확인한다. 예를 들어 KRDS가 정의한 주 색상 토큰이 #003087이라면, 사이트에서 버튼·링크·제목에 쓰인 색상 값들이 이 토큰에 수렴하는지, 아니면 제각각의 근사 값들을 쓰는지를 집계한다.

두 번째 기준: 사이트 내 자체 일관성. KRDS 토큰을 기준으로 하는 것과 별개로, 사이트 내에서 동일한 역할을 하는 요소들이 동일한 시각 속성을 갖는지를 비교한다. 예를 들어 메인 페이지의 primary 버튼과 신청 페이지의 primary 버튼이 같은 색상·폰트 크기·패딩 값을 갖는지. 이 비교는 KRDS 기준과 무관하게, 사이트 내부의 일관성 자체를 잰다.

어떤 요소를 재는가

모든 CSS 속성을 비교하는 건 현실적이지 않다. ViewCheck가 현재 일관성 비교에 주로 쓰는 속성들은 이렇다.

색상: color, background-color, border-color — 특히 인터랙티브 요소(버튼, 링크, 포커스 링)에 적용된 값들
타이포그래피: font-family, font-size, font-weight, line-height — 헤딩(H1~H4)과 본문(p, li) 기준
간격: padding, margin, gap — 주요 레이아웃 컨테이너와 카드 컴포넌트의 값들
테두리 반경: border-radius — 버튼과 카드의 코너 값. KRDS는 컴포넌트별로 border-radius 규격을 명시하고 있어 이탈이 상대적으로 잡기 쉽다.
ARIA 속성 패턴: 접근성 속성(role, aria-label 등)이 같은 유형의 컴포넌트에 일관되게 붙어 있는가

어떻게 비교하는가 — 페이지 간 분산 계산

여러 페이지에서 수집한 값들을 어떻게 비교하는가. ViewCheck가 실험 중인 가장 기본적인 방법은 분산(variance) 계산이다.

예를 들어 사이트의 10개 페이지에서 primary 버튼의 background-color 값을 수집했다고 하자. 이상적으로 일관된 사이트라면 10개 값이 모두 같을 것이다. 하지만 실제로는 #003087, #003190, #004199, rgb(0, 48, 135), rgba(0, 48, 135, 1) 같은 방식으로 혼재되는 경우가 많다. 이것들을 정규화(모두 HEX로 통일하거나, RGB 수치로 변환)한 뒤 분산을 계산하면, 그 분산이 클수록 일관성이 낮다는 신호다.

색상은 HEX나 RGB 값이라 비교적 명확히 수치화할 수 있지만, font-size나 padding은 단위(px, rem, em)가 섞여 있어 정규화가 필요하다. border-radius 역시 단일 값(예: 4px)과 shorthand(예: 4px 4px 0 0) 형태가 혼재한다. 이 정규화 과정이 생각보다 복잡하다는 것을, 실제 코드를 짜면서 배웠다.

일관성 점수를 어떻게 표현하는가

분산을 계산했다고 해서 곧바로 "일관성 점수 78점"이라고 말하는 건 아직 무리다. 분산 값이 어느 정도면 "높은 일관성"이고, 어느 정도면 "낮은 일관성"인가 하는 기준을 설정하는 것 자체가 또 하나의 연구 문제이기 때문이다.

현재 ViewCheck의 일관성 분석이 보여주는 것은 크게 세 가지다.

KRDS 토큰 채택률: 사이트에서 사용된 색상/폰트/간격 값 중 KRDS 공식 토큰에 매핑되는 비율. 예를 들어 "이 사이트의 색상 사용 중 KRDS 색상 토큰에 해당하는 비율은 N%다."
페이지별 편차 맵: 어떤 페이지가 사이트 전체 평균 대비 얼마나 벗어나 있는지를 히트맵 또는 수치 목록으로 표시한다. "검색 결과 페이지의 타이포그래피 편차가 가장 크다"처럼.
컴포넌트별 일관성 위반 건수: KRDS 846규칙 중 일관성 관련 규칙(DS 카테고리)의 미통과 항목을 페이지별로 집계하고, 어떤 컴포넌트에서 가장 많이 발생하는지를 순위로 보여준다.

이 세 가지가 하나의 "일관성 지수"로 통합될 수 있는지는 아직 실험 중이다. 각 항목에 어떤 가중치를 줘야 하는지, 토큰 채택률과 페이지 간 편차를 어떻게 하나의 숫자로 환산하는지 — 쉬운 문제가 아니다.

다중 페이지 분석이 없으면 일관성은 없다

여기서 핵심적인 포인트를 짚고 가야 한다. 일관성은 정의상 여러 페이지를 동시에 보지 않으면 측정 자체가 불가능하다.

단일 페이지를 아무리 꼼꼼히 분석해도 그 페이지 내부의 일관성만 알 수 있다. 그 페이지가 다른 페이지들과 얼마나 통일되어 있는지는, 다른 페이지들의 데이터가 있어야 비로소 말할 수 있다.

이게 ViewCheck가 처음부터 "다중 페이지 분석을 기본값으로" 설계한 이유 중 하나다. 사이트 전체를 보지 않으면 진짜 품질을 모른다는 신념은, 일관성 분석에서 특히 더 직접적으로 맞아떨어진다.

그런데 이 말이 쉽게 들릴 수 있어서, 실제 어려움을 같이 적어두려 한다.

수십 개 페이지에서 수천 개의 CSS 속성 값을 수집하면, 그 데이터는 양이 방대하고 형태가 불균일하다. 어떤 페이지는 인라인 스타일(style="color:#fff")로 값이 지정되고, 어떤 페이지는 외부 CSS 파일로, 어떤 페이지는 CSS 변수(--color-primary)로, 어떤 페이지는 Tailwind 유틸리티 클래스로. 이것들을 공통된 형태로 변환하고, 의미 있는 방식으로 비교하는 것이 생각보다 훨씬 까다롭다.

그리고 더 어려운 문제가 있다. 어떤 페이지들을 비교 대상으로 삼을 것인가. 사이트에 1,000개의 페이지가 있다면, 그 전부를 크롤링하고 비교하는 건 시간과 자원의 문제가 된다. 대표적인 페이지 유형들을 선별해 비교하는 전략이 필요하고, 그 선별이 의미 있으려면 페이지 유형 분류가 먼저 정확해야 한다.

ViewCheck는 현재 메인 페이지, 검색 결과 페이지, 목록 페이지, 상세 페이지, 신청/폼 페이지, 로그인 페이지 같은 15종의 페이지 유형을 분류하고, 유형별 대표 페이지를 최소 한 장씩 포함해 일관성 비교를 한다. 이 분류 자체도 URL 패턴, DOM 구조, 페이지 내 텍스트 신호를 조합해서 하는 만큼, 분류가 틀리면 비교 자체가 어그러진다. 현재 이 분류의 정확도를 높이는 것도 진행 중인 과제다.

ViewCheck LLM 분석에서 사이트 전체 일관성 분석 결과가 표시된 실제 프로덕션 캡처 화면. — ViewCheck LLM 분석의 "일관성" 기능 실제 화면. 다중 페이지를 분석한 결과에서 페이지별 KRDS 토큰 채택률과 디자인 편차가 가시화된다. — 실제 분석 화면

디자인 시스템이 일관성에 미치는 효과 — 해외 사례

디자인 시스템이 실제로 일관성을 높이는가? 이 질문에 답하는 데이터는 해외 디자인 시스템 도입 사례들에서 찾을 수 있다.

Figma는 자사 블로그를 통해 디자인 시스템의 가치 측정 방법론을 꾸준히 다루고 있다(Figma Blog, "Measuring the value of design systems", https://www.figma.com/blog/measuring-the-value-of-design-systems/). Figma가 제시하는 일관성 측정 지표 중 핵심적인 것은 **컴포넌트 채택률(component adoption rate)**이다. 주어진 화면에서 디자인 시스템의 공식 컴포넌트가 전체 UI 요소 중 몇 퍼센트를 차지하는지를 비율로 계산하는 것이다. 100%에 가까울수록 일관성이 높고, 낮을수록 팀들이 독자적인 '커스텀 UI'를 만들어 시스템에서 이탈하고 있다는 신호다.

Pinterest의 디자인 시스템 팀은 이 개념을 직접 실측 도구로 구현했다. FigStats라는 도구를 만들어 매일 밤 Figma 파일 전체를 스캔하고, Gestalt(Pinterest의 디자인 시스템)의 공식 컴포넌트가 전체 대비 몇 퍼센트 사용되었는지를 조직 전체 기준으로 계산한다(Figma Blog, "How Pinterest's design systems team measures adoption", https://www.figma.com/blog/how-pinterests-design-systems-team-measures-adoption/). 이 채택률이 오르면 디자인 팀의 작업이 더 빠르고 일관되어지며, 내리면 어딘가에서 시스템이 실무 팀의 필요를 충족시키지 못하고 있다는 신호다.

디자인 시스템 툴 Supernova의 블로그는 일관성 측정 지표를 조금 더 구체적으로 정리한다(Supernova, "9 Design System Metrics That Matter", https://www.supernova.io/blog/9-design-system-metrics-that-matter). 이 글에서 제시하는 일관성 관련 핵심 지표들은:

시스템 사용률(System usage rate): 승인된 컴포넌트를 쓰는 UI 화면의 비율 (또는 승인 컴포넌트 수 vs. 커스텀 UI 수의 비율)
오버라이드 비율(Override rate): 토큰이나 컴포넌트 속성을 가이드라인 외의 방식으로 재정의하는 빈도. 이 수치가 높으면 시스템에서 "이탈(drift)"이 일어나고 있다는 경고 신호.
QA에서 발견된 드리프트 건수: 디자인 시스템 불준수나 패턴 불일치로 인한 UI 버그 건수

Headspace는 디자인 시스템을 도입한 후 단순 작업에서 20~30%, 복잡한 프로젝트에서는 최대 50%의 시간 절감 효과를 봤다고 보고했다(Figma Blog, "Design System Metrics"). 이런 수치는 일관성 관리가 미적 문제만이 아니라 실질적인 생산성과 연결된다는 증거다.

물론 이 사례들은 민간 기업의 것이다. 공공 웹에 그대로 적용되지 않는다. 하지만 우리가 공공 웹 맥락에서 일관성 점수를 만드는 방향을 설정할 때, 이런 선례들이 참고 기준이 된다. "디자인 시스템 채택률"이라는 개념은 민간이나 공공이나 원리가 같기 때문이다. KRDS가 정의한 컴포넌트와 토큰을, 공공 웹사이트가 얼마나 채택해 쓰는가 — 이것이 KRDS 일관성의 핵심 지표가 될 수 있다.

GOV.UK 디자인 시스템이 일관성에 접근하는 방식

영국 정부가 운영하는 GOV.UK 디자인 시스템은 KRDS의 선배격이다. 흩어진 정부 서비스들을 재사용 가능한 컴포넌트와 패턴으로 통합하는 원리도, 일관성과 접근성을 핵심 가치로 삼는 것도 KRDS와 같다.

GOV.UK 서비스 매뉴얼(Service Manual)은 정부 서비스를 "GOV.UK와 일관되게 만들기 위한" 기반으로 디자인 시스템을 설명하고, 모든 컴포넌트와 패턴이 가장 널리 쓰이는 보조기술로 검증되고 WCAG AA 수준을 충족하도록 만들어졌다고 명시한다(GOV.UK Design System 공식, https://design-system.service.gov.uk/). 그리고 영국 정부디지털서비스(GDS)는 정부 서비스 팀들이 이 디자인 시스템의 원칙, 패턴, 컴포넌트, 스타일을 반드시 사용할 것을 요구한다(GOV.UK Service Manual, https://www.gov.uk/service-manual/design).

GOV.UK 디자인 시스템이 일관성을 관리하는 방식에서 우리가 주목한 점은 두 가지다.

첫째, 컴포넌트에 WCAG 적합성을 명시한다. 컴포넌트 페이지 아래에는 어떤 접근성 기준을 충족하는지가 적혀 있다. 일관성과 접근성이 분리된 개념이 아니라 하나의 컴포넌트 안에서 통합되어 있는 셈이다. KRDS도 이 방향을 따라가고 있다.

둘째, "스스로 만들지 말라(Don't design your own)"는 원칙. GOV.UK 서비스 매뉴얼은 팀들에게 독자적인 컴포넌트를 만들기 전에 디자인 시스템의 기존 컴포넌트로 충분한지를 먼저 확인하라고 명시한다. 이건 일관성을 구조적으로 강제하는 방식이다. 단순히 "이렇게 해야 한다"는 가이드라인이 아니라, 기본값이 이미 존재하는 상태를 만들어 놓는 것이다.

이 접근 방식의 함의는 중요하다. 일관성은 개별 팀이 '알아서 지키는 것'으로 기대하기보다, 시스템 수준에서 일관성을 지키기 쉬운 환경을 만드는 것이 더 효과적이라는 것이다. ViewCheck가 일관성 점수를 만들려는 이유도 비슷하다. "일관성이 낮다"고 알려주는 데서 그치지 않고, 어떤 컴포넌트에서 어떤 이유로 이탈이 발생했는지를 구체적으로 보여줘서, 개발팀이 KRDS로 돌아가기 쉽게 만드는 것이 목적이다.

현대적인 사무실에서 분석가가 모니터의 컬러풀한 일관성 그리드를 살펴보는 모습. — 일관성 분석의 결과는 결국 "어디서 어떻게 이탈했는가"를 보여주는 지도가 되어야 한다.

KRDS 846규칙과 일관성 — DS 카테고리를 해부하다

ViewCheck의 일관성 분석은 독립적인 별개 기능이 아니라, KRDS 846규칙 분석 결과와 긴밀하게 연결되어 있다. 특히 846규칙 중 DS(디자인 스타일) 카테고리 120개 규칙이 일관성 분석의 핵심 재료가 된다.

DS 120개 규칙이 다루는 것들은 이렇다.

색상 체계: KRDS가 정의한 색상 토큰(주 색상, 보조 색상, 상태 색상, 중립 색상 등)이 올바른 맥락에서 사용되는가. 예를 들어 경고(warning) 상황에 주 색상 대신 경고 색상 토큰이 쓰이는가.
타이포그래피: KRDS 서체(Pretendard GOV 또는 호환 서체), 크기 스케일, 자간, 행간 규정 준수 여부.
간격: 8pt 그리드를 기반으로 한 KRDS의 간격 체계. 주요 레이아웃 컴포넌트의 padding, margin, gap이 이 체계를 따르는가.
테두리 반경(border-radius): 컴포넌트별로 KRDS가 명시한 반경 공식 준수 여부.
레이아웃: 최대 너비, 컬럼 구성, 반응형 브레이크포인트 등 레이아웃 수치 준수 여부.

이 120개 DS 규칙을 단일 페이지에 적용하면, 그 페이지의 디자인 스타일이 KRDS 기준에 얼마나 부합하는지를 알 수 있다. 그런데 단일 페이지 판정만으로는 여전히 "이 페이지가 다른 페이지와 얼마나 다른가"를 알 수 없다.

ViewCheck의 일관성 분석은 여기서 한 걸음을 더 나아간다. 여러 페이지에서 DS 규칙 판정 결과를 모아, 같은 규칙이 어떤 페이지에서는 통과하고 어떤 페이지에서는 미통과하는지를 교차 집계한다. 예를 들어 "DS-021 (색상 토큰 준수)"이 메인 페이지에서는 통과, 검색 페이지에서는 통과, 신청 페이지에서는 미통과, 목록 페이지에서는 미통과라면 — 이 규칙에 대한 사이트의 일관성이 낮다는 명확한 신호다.

이렇게 규칙별·페이지별 통과/미통과 매트릭스를 만들면, 몇 가지 유용한 지표가 파생된다.

규칙별 일관성 점수: 전체 분석 페이지 중 이 규칙이 통과한 비율. 100%면 모든 페이지에서 일관되게 준수, 0%면 모든 페이지에서 동일하게 위반 (어떤 의미에서는 이것도 "일관된" 상태이지만, 일관되게 잘못된 것).
불균일성 점수: 같은 규칙이 어떤 페이지에서는 통과하고 어떤 페이지에서는 미통과하는 비율. 이 수치가 높을수록 페이지마다 다르게 구현되어 있다는 뜻이고, 이게 진짜 "일관성 부재"다.
문제 집중 페이지: 불일치가 가장 많이 발생하는 페이지. 보통 오래된 레거시 페이지이거나, 다른 팀이 독자적으로 만든 페이지다.

실제 분석에서 발견하는 것들 — 패턴 세 가지

여러 공공 사이트를 분석한 경험에서, 일관성 위반이 어떤 패턴으로 발생하는지 세 가지 유형을 발견했다. 물론 이건 우리가 본 케이스들에서 귀납적으로 정리한 것이지, 모든 공공 사이트를 대표하는 통계가 아니다. 확인 가능한 범위 내에서의 관찰이다.

패턴 1: "신구(新舊) 이중 구조"

메인 페이지는 최근에 KRDS 기준으로 새로 만들었지만, 깊은 페이지(상세, 신청, 고시 목록 등)에는 수 년 전 만들어진 페이지가 그대로 남아 있는 경우다. 이 경우 메인과 나머지의 시각적 언어가 확연히 다르다. 주 색상이 달라지고, 폰트 크기 체계가 달라지고, 버튼 스타일이 달라진다.

이 유형은 DS 규칙 판정 결과에서 메인 페이지의 DS 통과율이 높고, 나머지 페이지들의 DS 통과율이 낮은 형태로 나타난다. 일관성 측면에서 보면 사이트 내에 두 개의 디자인 시대가 공존하는 셈이다.

패턴 2: "위젯 오염(Widget pollution)"

외부 서비스나 플러그인(민원 접수 외부 위젯, 채팅 상담 버튼, 지도 API 등)이 사이트의 디자인 시스템과 완전히 다른 시각 언어를 들고 들어오는 경우다. 이 위젯들은 사이트 소유자가 내부적으로 제어하기 어렵다. 결과적으로 사이트의 주요 색상은 파란 계열인데, 외부 위젯 버튼은 주황색이 튀어나오는 식이다.

이 유형은 특정 페이지에서만 불일치 지표가 급격히 높아지는 형태로 나타난다. 패턴 1과 달리, 같은 페이지 안에서 일관성 위반이 발생한다.

패턴 3: "근사값(approximate value) 누적"

KRDS 토큰을 쓰려고 했지만, 정확한 토큰 값이 아니라 비슷한 값을 직접 하드코딩한 경우다. #003087 대신 #003090, #004080, #003180처럼 미묘하게 다른 파란색이 여러 개 공존한다. 색상 피커로 보면 비슷해 보이지만, KRDS 토큰 기준으로 보면 전부 다른 값이다.

이 패턴은 눈으로 발견하기 가장 어렵다. 화면을 봐서는 대충 비슷해 보이기 때문에, 디자인 리뷰에서 걸러내지 못하는 경우가 많다. CSS 값을 직접 추출해 토큰과 비교하는 자동화가 가장 빛나는 지점이 여기다.

벽에 붙인 여러 웹페이지 프린트물에 시각적 불일치 위치를 동그라미로 표시한 모습. — 벽에 페이지들을 붙여놓고 시각적 불일치를 찾아 동그라미를 쳐봐야 알 수 있는 것들. 자동화가 그 작업을 대신한다.

일관성을 "어느 정도"로 정의할 것인가 — 기준선의 문제

일관성 점수를 만드는 기술적 방법보다 더 어려운 것이 **기준선(baseline)**의 문제다. "이 사이트는 일관성이 좋다"와 "나쁘다"를 가르는 선을 어디에 그을 것인가.

이 문제에는 몇 가지 접근이 있다.

절대 기준: KRDS 토큰 채택률 N% 이상이면 "높은 일관성"으로 정의. 예를 들어 색상 값의 80% 이상이 KRDS 색상 토큰에 매핑되면 통과. 이 방식의 장점은 명확성이다. 단점은 그 N%를 어디서 근거할 것인가 — 현재 우리에게 그 근거가 충분하지 않다는 점이다.

상대 기준: 분석한 공공 사이트들의 평균 대비 상위 N%면 "높은 일관성"으로 정의. 이 방식의 장점은 현실 데이터를 기준으로 한다는 점이다. 단점은 공공 사이트 전반의 일관성 수준이 낮다면, 상대적 "높은 일관성"이 절대적으로는 여전히 낮을 수 있다는 것.

개선 기준: 절대 기준보다는, 특정 사이트의 시간에 따른 변화를 추적하는 것. "이번 리뉴얼 후 일관성 점수가 N점 올랐다"처럼. 이 방식은 목표 달성을 측정하는 데 효과적이다.

솔직히 말하면, 우리는 아직 이 세 가지 중 하나를 결정하지 못했다. 각각의 방식이 다른 상황에 더 적합하기 때문이다. 위 내용은 현재 우리가 내부적으로 논의하는 방향들이고, 어느 것이 실제로 의미 있는 기준선이 될지는 더 많은 사이트 데이터를 쌓으면서 검증할 예정이다.

UXPin의 블로그는 디자인 시스템 메트릭 전반에 대해 이렇게 정리한다.

"조직은 컴포넌트 채택률을 측정하기 위해 사용 지표, 채택률, 일관성 점수를 사용할 수 있다." — UXPin, "Design System Metrics: How to Measure the Value of Design System", https://www.uxpin.com/studio/blog/design-system-metrics/

여기서 "일관성 점수"가 독립 지표로 제시된다는 점은 흥미롭다. 산업 전반에서 일관성을 정량화하려는 노력이 진행 중이라는 뜻이다. 우리도 그 흐름 안에 있다.

일관성과 접근성의 교차점 — 생각보다 깊다

일관성을 다루다 보면 접근성과 자주 겹치는 부분이 나온다. 이 교차점이 생각보다 깊어서, 따로 다뤄야 할 것 같다.

NN/g는 일관성 휴리스틱(Heuristic #4)에 대해 이렇게 설명한다.

"시스템들이 두 종류의 일관성, 즉 내부 일관성(internal consistency)과 외부 일관성(external consistency)을 유지해야 한다고 권장한다. 내부 일관성이란 단일 제품 또는 제품군 내에서의 일관성을 의미하며, 같은 시각 표현과 언어를 사용함으로써 유지된다." — NN/g, "Maintain Consistency and Adhere to Standards (Usability Heuristic #4)", https://www.nngroup.com/articles/consistency-and-standards/

이 정의에서 "시각 표현과 언어의 동일함"은 접근성과 직결된다. 같은 기능을 하는 버튼이 페이지마다 다른 레이블을 쓴다면, 스크린리더 사용자는 "이 버튼이 이전에 본 그 버튼과 같은 것인지"를 매번 새로 파악해야 한다. 시각적 일관성이 낮으면 고령 사용자나 인지 장애가 있는 사용자에게 특히 부담이 된다 — 이전에 배운 패턴을 다음 페이지에서 재활용할 수 없기 때문이다.

KRDS가 컴포넌트에 WCAG 적합성을 명시하는 것도, 일관성과 접근성의 교차점을 의도적으로 설계에 반영한 결과다. 일관된 컴포넌트를 쓰면 자동으로 접근성도 일관성 있게 높아진다는 구조를 만드는 것이다.

ViewCheck의 일관성 분석에서 이 교차점이 실제로 나타나는 경우를 설명하면 이렇다. DS 규칙(색상 일관성)과 CP 규칙(ARIA 속성 일관성)이 함께 낮은 페이지는, 그 페이지가 시각적으로도 접근성 측면에서도 동시에 이탈한 경우가 많다. 일관성이 낮은 페이지는 "대충 만든" 페이지일 확률이 높기 때문이다. 반대로 DS와 CP를 함께 잘 지킨 페이지는 접근성 평가에서도 높은 점수를 받는 경향이 있다.

이 상관관계를 정식 통계로 검증하는 것은 아직 시도 단계에 있다. 하지만 분석 결과를 보면서 직관적으로는 꽤 강한 패턴이 보인다.

일관성 분석이 "위반 매트릭스"와 만나는 지점

ViewCheck의 24개 분석 기능 중 "일관성"과 "위반 매트릭스"는 가장 가깝게 연결된다.

위반 매트릭스는 846개 규칙 각각이 분석 대상 페이지들 중 어떤 페이지에서 통과하고 어떤 페이지에서 미통과했는지를 전체 테이블로 보여주는 기능이다. 가로축이 규칙 번호, 세로축이 페이지 URL로 구성된 큰 표에서, 특정 칸이 빨간색이면 그 규칙이 그 페이지에서 미통과라는 뜻이다.

이 매트릭스에서 일관성과 관련된 패턴은 두 가지 형태로 나타난다.

수평 패턴 (규칙 단위): 특정 규칙의 행 전체에 빨간색이 많으면, 이 규칙이 사이트 전반적으로 지켜지지 않는다는 뜻이다. 이건 "일관되게 위반"하는 상태다.

수직 패턴 (페이지 단위): 특정 페이지의 열 전체에 빨간색이 많으면, 이 페이지 자체가 전체적으로 이탈한 상태라는 뜻이다. 보통 오래된 레거시 페이지이거나, 외주 업체가 독자적으로 만든 페이지다.

그런데 일관성 위반은 사실 세 번째 패턴에서 더 뚜렷하게 드러난다.

불규칙 패턴 (체커보드): 같은 규칙이 어떤 페이지에서는 빨간색, 어떤 페이지에서는 초록색으로 불규칙하게 섞인 경우다. 이게 진짜 일관성 문제다. 같은 규칙이 어떤 페이지에서는 통과하고 어떤 페이지에서는 미통과한다는 건, 그 규칙이 어떤 페이지에서는 지켜지고 어떤 페이지에서는 지켜지지 않는다는 것이다. 즉, 구현이 통일되지 않았다.

ViewCheck는 이 불규칙 패턴을 감지하고, 그 규칙의 "일관성 불균일 지수"로 표현하려 한다. 어떤 규칙의 통과 여부가 페이지마다 들쭉날쭉할수록 높은 불균일 지수를 갖는 식이다. 이 지수가 높은 규칙들이 일관성 개선의 우선 대상이 된다.

페이지 유형별 일관성 — 어떤 페이지가 더 중요한가

일관성을 개선할 때 모든 페이지를 동등하게 취급하는 건 비효율적이다. 사용자가 많이 방문하는 페이지, 사용자에게 중요한 과업이 일어나는 페이지, 외부에 노출되는 페이지 — 이런 페이지의 일관성이 더 중요하다.

ViewCheck는 페이지 유형을 15종으로 분류하고, 각 유형마다 일관성의 중요도를 다르게 볼 수 있도록 설계 중이다. 대략의 우선순위 개념은 이렇다.

메인 페이지: 사이트의 "얼굴"이지만, 역설적으로 주로 메인만 신경을 쓰기 때문에 상대적으로 일관성이 잘 지켜지는 경우가 많다.
검색·목록 페이지: 사용자가 가장 많이 머무는 페이지이자, 정보 탐색의 핵심. 여기서 일관성이 무너지면 사용자의 탐색 효율이 크게 떨어진다.
신청·폼 페이지: 사용자가 민감한 정보를 입력하는 곳. 불일치한 UI는 신뢰도 저하와 직결된다. 접근성 위반과의 교차가 특히 빈번한 유형.
로그인 페이지: 진입 장벽. 여기서 일관성이 깨지면 "이 페이지가 정말 공식 사이트인가?"라는 의구심을 줄 수 있다.
정책·안내 페이지: 오래된 경우가 많아 레거시 디자인이 많다. 개선 여지가 큰 유형.

어떤 유형의 페이지에 일관성 개선 노력을 집중해야 하는지를 우선순위로 보여주는 것 — 이것이 일관성 분석이 실무에 줄 수 있는 가장 직접적인 가치다.

디자이너가 프린트된 화면들 위에 자를 대고 간격의 일관성을 측정하는 모습. — 자를 대고 간격을 재는 것처럼, 일관성 분석도 결국 기준과 실제 사이의 거리를 재는 일이다.

일관성 점수의 한계 — 솔직하게

여기까지 읽었다면 눈치챘겠지만, 우리는 "일관성 점수 X점"이라는 단일 숫자에 대해 아직 확신이 없다. 그래서 한계를 명확히 적어두는 게 정직하다고 생각한다.

한계 1: 정규화의 부정확성. CSS 값을 수집하고 정규화하는 과정에서 오류가 생길 수 있다. rem에서 px로 변환할 때 루트 폰트 크기를 잘못 가정하거나, CSS 변수가 중첩된 경우 최종 계산 값을 잘못 추적하는 경우가 있다. 이런 오류가 쌓이면 일관성 점수 자체가 부정확해진다.

한계 2: 의미 있는 비교 대상 선정의 어려움. 메인 페이지의 버튼 색상과 시스템 에러 페이지의 버튼 색상을 직접 비교하는 것은 의미가 없다. 같은 유형의 컴포넌트, 같은 역할의 요소끼리 비교해야 한다. 이 "같은 유형, 같은 역할"을 자동으로 정확하게 매핑하는 것이 어렵다.

한계 3: 의도된 차이를 어떻게 구분하는가. 모든 페이지 간 차이가 "일관성 위반"은 아니다. 예를 들어 에러 상태(error state)의 색상은 일반 상태와 달라야 한다 — 그게 의도된 것이다. 일관성 분석이 이런 의도된 차이를 "위반"으로 잘못 판정하지 않으려면, 컴포넌트의 상태(state)를 함께 고려해야 한다. 이게 아직 완벽히 구현되지 않은 부분이다.

한계 4: 중요도 가중치의 주관성. 색상 일관성과 간격 일관성 중 어느 쪽이 더 중요한가? 이 가중치는 어떤 근거로 정해야 하는가? 지금은 KRDS가 정의한 DS 규칙의 가중치를 참고하지만, 그 가중치가 실제 사용자 경험과 얼마나 상관이 있는지는 검증이 필요하다.

이 한계들을 나열하는 이유는, "일관성 점수는 아직 어렵다"는 것을 솔직하게 인정하기 위해서다. 우리가 현재 제공하는 일관성 분석은 "완성된 점수"가 아니라 "유용한 실마리들의 모음"에 가깝다. 그 실마리들 — 토큰 채택률, 페이지별 편차 맵, 불균일 규칙 목록 — 각각은 실무에서 바로 쓸 수 있는 정보다. 하나의 단일 점수로 통합하는 것은, 우리가 더 많은 데이터와 검증을 쌓은 다음의 이야기다.

자동화가 보여주는 것과 보여주지 못하는 것

일관성 분석에서 자동화가 잘 하는 것과 못 하는 것을 명확히 구분해야 한다. 이걸 구분하지 않으면 자동화 결과를 과신하거나 과소평가하는 오류를 범한다.

자동화가 잘 하는 것:

CSS 수치의 정확한 추출과 비교 (색상 HEX, 폰트 사이즈 px, padding 값 등)
대규모 페이지에 걸친 패턴 탐지 (수십 개 페이지에서 반복되는 편차)
KRDS 토큰 데이터베이스와의 비교 (주어진 색상 값이 토큰에 존재하는지)
규칙별·페이지별 매트릭스 생성
위반 건수 집계와 순위 정렬

자동화가 어려워하는 것:

시각적 맥락 이해 (이 색상이 "같은" 역할을 하는 색상인지, 다른 역할인지)
의도된 변형과 비의도적 불일치의 구분
시각적 무게감, 계층 구조, 공간적 리듬처럼 수치로 바로 환산되지 않는 디자인 요소
사용자가 실제로 이 불일치를 인지하는가 (불일치가 있어도 사용자가 못 느끼는 경우도 있음)

이 한계들 때문에, 자동화된 일관성 분석의 결과는 항상 "발견의 시작점"으로 봐야지, "최종 판정"으로 봐선 안 된다. 자동화가 "여기 색상 불일치가 N건"이라고 말해주면, 실무자가 그 N건 중 실제로 고쳐야 할 것들을 추려내는 작업이 뒤따라야 한다.

ViewCheck가 일관성 분석 결과를 보여줄 때 "이건 고쳐야 합니다"가 아니라 "이런 편차가 발견되었습니다"라는 어조를 쓰려 하는 이유가 여기에 있다. 자동화의 발견은 진단 가설이지, 처방 명령이 아니다.

일관성 정량화가 실무에 줄 수 있는 것

한계를 충분히 말했으니, 반대로 일관성 정량화가 실무에 실제로 줄 수 있는 것들을 정리해 보자.

1. "말하기 어려웠던 것"에 숫자를 붙인다. "일관성이 부족하다"는 말은 설득력이 약하다. 하지만 "우리 사이트에서 주 색상 값이 7가지 서로 다른 값으로 쓰이고 있으며, KRDS 색상 토큰과 정확히 일치하는 것은 34%뿐이다"는 구체적이다. 이 숫자가 있으면 경영진 보고, 개발팀 요청, 외주 개발사 발주 스펙에 구체적인 기준을 넣을 수 있다.

2. 개선 우선순위를 만든다. 모든 불일치를 다 고치는 건 불가능하다. 어떤 페이지에서, 어떤 규칙이, 얼마나 많이 이탈해 있는지를 수치로 볼 수 있으면 우선순위가 생긴다. "이 세 개 페이지만 고쳐도 사이트 전체 일관성 점수의 60%가 개선된다"는 식의 판단이 가능해진다.

3. 리뉴얼의 효과를 검증한다. 사이트를 새로 만들었을 때 "이전보다 나아졌나?"를 증명하는 근거가 생긴다. 리뉴얼 전후의 일관성 점수 비교, KRDS 토큰 채택률 변화 — 이것들이 리뉴얼의 정량적 성과 지표가 된다.

4. 발주 스펙에 포함시킬 수 있다. 외주 개발사에 "KRDS 색상 토큰 채택률 85% 이상"이라는 명시적 요구 조건을 넣는 것이 가능해진다. 이게 있으면 검수 기준이 생기고, "느낌상 안 맞아 보인다"는 주관적 갈등을 줄일 수 있다.

5. 다기관 비교의 기반이 된다. 여러 공공 기관의 사이트를 동일한 기준으로 비교해, "A 기관의 일관성 수준이 B보다 높다"는 상대 평가가 가능해진다. 이건 행안부나 NIA 같은 상위 기관이 기관별 디지털 품질을 모니터링할 때 유용한 데이터가 된다.

앞으로의 실험 방향 — 우리가 할 것들

마지막으로 솔직하게 앞으로의 계획을 적어두겠다. 이미 된 것이 아니라, 실험할 것들이다.

① 일관성 시계열 추적: 동일 사이트의 일관성 점수 변화를 시간 축으로 추적. "이번 리뉴얼 후 어떻게 달라졌나"를 숫자로 보여주는 것이 목표.

② 컴포넌트 단위 일관성 리포트: 전체 사이트 수준이 아닌, "버튼 일관성", "헤딩 일관성", "카드 일관성"처럼 컴포넌트 단위로 쪼개서 보여주기. 이게 개발팀에게 더 직접적인 액션 포인트를 준다.

③ KRDS 버전 관리와 연동: KRDS가 업데이트되면 기준이 바뀐다. 어떤 버전의 KRDS 기준으로 분석했는지를 명시하고, 버전이 바뀌었을 때 사이트의 적합도가 어떻게 달라지는지를 자동으로 보여주는 것.

④ 일관성 개선 제안의 자동화: 현재는 "이 규칙에서 편차가 있다"를 보여주는 데 그치는데, 앞으로는 "이 색상을 KRDS 토큰 N으로 바꿔라"처럼 구체적인 개선 코드 스니펫을 제안하는 방향도 실험 중이다.

⑤ KRDScan Vision AI와의 연동: CSS로 잡히지 않는 시각적 일관성 위반 — 예를 들어 이미지 버튼, canvas 기반 차트, 비표준 HTML로 만든 UI 요소들의 일관성은 DOM과 CSS만으로는 판정이 안 된다. KRDScan의 Vision AI가 이 영역을 담당하도록 연동하는 것이 장기 방향이다.

일관성, 왜 어렵고 왜 중요한가 — 정리

지금까지의 내용을 마지막으로 한 번 압축해 보자.

일관성은 UX의 기초 원칙이다. Jakob Nielsen이 30년 전에 정리한 이 원칙은 지금도 유효하다. 사용자는 학습한 패턴이 다음 화면에서도 통해야 인지 부담 없이 서비스를 이용할 수 있다.

그런데 일관성은 말하기는 쉽고 측정하기는 어렵다. 단일 페이지를 아무리 꼼꼼히 봐도, 그 페이지가 다른 페이지들과 얼마나 통일되어 있는지는 알 수 없다. 일관성은 본질적으로 여러 페이지를 동시에 비교해야만 드러나는 속성이다.

공공 웹에서 일관성은 특히 중요하다. 다양한 사용자층, 여러 개발팀에 의한 분절 운영, KRDS라는 공통 기준의 존재 — 이 세 가지 조건이 겹치면서 일관성의 측정과 관리가 실질적인 의미를 갖는다.

ViewCheck는 KRDS 846규칙 중 DS 카테고리, 다중 페이지 분석, CSS 속성 추출과 비교를 통해 일관성을 정량화하는 실험을 하고 있다. 아직 완성된 단일 점수는 없다. 하지만 KRDS 토큰 채택률, 페이지별 편차 맵, 불균일 규칙 목록은 지금도 실무에서 쓸 수 있는 정보들이다.

그리고 이 실험은 계속된다. 일관성을 어떻게 정의할 것인가, 어떤 기준으로 판단할 것인가, 자동화가 보지 못하는 것을 어떻게 보완할 것인가 — 이 물음들에 대한 답을 데이터를 쌓으면서 조금씩 만들어가는 중이다.

마무리 — 숫자가 주는 것과 숫자가 못 주는 것

"일관성을 숫자로 잰다"는 말을 들으면 두 가지 반응이 나온다. 한쪽은 "그게 가능해? 일관성은 느낌의 문제 아니야?"이고, 다른 한쪽은 "드디어 객관적인 기준이 생기겠군"이다.

우리의 입장은 두 반응 사이 어딘가에 있다.

숫자는 분명히 무언가를 준다. 대화를 시작할 수 있는 공통 언어, 시간 변화를 추적할 수 있는 기준, 우선순위를 결정할 수 있는 근거. "느낌상"이 아니라 "수치상"으로 말할 수 있게 되는 것 자체가 의미 있다.

하지만 숫자가 못 주는 것도 있다. 시각 디자인의 미묘한 맥락, 사용자가 실제로 불편함을 느끼는지, 어떤 불일치가 "이 정도는 괜찮다"의 범주에 드는지. 이것들은 숫자로 잘라 말하기 어렵다.

그래서 우리는 일관성 점수를 "전부 말해주는 오라클"이 아니라 "탐색을 시작하는 지도"로 생각한다. 지도가 있으면 어디서부터 살펴볼지를 알 수 있다. 실제로 그 땅을 걷는 것은 사람의 몫이다.

다음 편에서는 시리즈의 방향을 바꿔, 이 일관성 분석이 실제 공공 웹사이트 사례에서 어떤 발견을 만들어 냈는지를 조금 더 구체적으로 들여다볼 예정이다. 숫자의 배경에 어떤 이야기가 있는지 — 그게 결국 숫자를 살아 있게 만드는 것이라 생각하기 때문이다.

참고문헌

본문에 인용한 출처는 작성 시점에 실재 여부를 검증했다. 국내 공식기준과 해외 연구·기관 자료를 함께 실었다.

국내 — 공식 기준 / 정책자료

행정안전부, 「전자정부 웹사이트 품질관리 지침」(행정안전부고시 제2025-46호, 2025. 6. 25. 일부개정). 국가법령정보센터. https://www.law.go.kr/행정규칙/전자정부웹사이트품질관리지침
행정안전부, 「전자정부 웹사이트 품질관리 지침」 일부 개정 및 「전자정부 웹사이트 품질관리 가이드」 수정본 안내(고시 제2025-46호). https://www.mois.go.kr/frt/bbs/type001/commonSelectBoardArticle.do?bbsId=BBSMSTR_000000000016&nttId=118636
KRDS(범정부 UI/UX 디자인시스템) 공식 사이트 — 디지털 정부서비스 UI/UX 가이드라인. 행정안전부·디지털플랫폼정부위원회. https://www.krds.go.kr/
KRDS 소개 페이지 — 컴포넌트 정의 및 디자인 일관성 원칙. https://www.krds.go.kr/html/site/utility/utility_01.html

해외 — 디자인 일관성 연구 / 디자인 시스템 / UX

Nielsen Norman Group, "Maintain Consistency and Adhere to Standards (Usability Heuristic #4)". https://www.nngroup.com/articles/consistency-and-standards/ (내부 일관성·외부 일관성 정의, Jakob Nielsen의 10 Usability Heuristics)
A. A. Ozok & G. Salvendy, "Measuring consistency of web page design and its effects on performance and satisfaction." Ergonomics, Vol. 43, No. 4, April 2000, pp. 443–460. Purdue University, School of Industrial Engineering. PubMed: https://pubmed.ncbi.nlm.nih.gov/10801079/ ResearchGate: https://www.researchgate.net/publication/12516596_Measuring_consistency_of_web_page_design_and_its_effects_on_performance_and_satisfaction
GOV.UK Design System 공식 사이트. Government Digital Service (GDS). https://design-system.service.gov.uk/ (일관성 기반 정부 디자인 시스템의 원칙과 컴포넌트)
GOV.UK Service Manual — Design. https://www.gov.uk/service-manual/design (정부 서비스 일관성 유지를 위한 매뉴얼)
Figma Blog, "Measuring the value of design systems." https://www.figma.com/blog/measuring-the-value-of-design-systems/ (컴포넌트 채택률, 일관성 지표 측정 방법론)
Figma Blog, "How Pinterest's design systems team measures adoption." https://www.figma.com/blog/how-pinterests-design-systems-team-measures-adoption/ (FigStats 도구, 조직 전체 컴포넌트 채택률 자동 측정 사례)
Supernova, "9 Design System Metrics That Matter (And How Supernova Helps You Track Them)." https://www.supernova.io/blog/9-design-system-metrics-that-matter (시스템 사용률, 오버라이드 비율, 일관성 점수 정의)
UXPin, "Design System Metrics: How to Measure the Value of Design System." https://www.uxpin.com/studio/blog/design-system-metrics/ (디자인 시스템 채택률 및 일관성 측정 지표)