위반은 혼자 오지 않는다 — 사이트 전체를 관통하는 위반 전파 매트릭스

어떤 규칙 위반이 어떤 페이지에 퍼져 있는지, ViewCheck가 시각화하는 방식에 대한 기록

들어가며 — "메인 페이지는 문제없어요"라는 말이 왜 무서운가

공공 웹사이트 품질 점검을 하다 보면 이 말을 자주 듣는다.

"메인 페이지는 문제없어요. 거기는 우리가 따로 신경 써서 만들었거든요."

그리고 이 말은 종종 사실이다. 메인 페이지는 실제로 잘 만들어져 있다. 헤더는 구조적으로 올바르고, 이미지에는 alt 텍스트가 달려 있고, 버튼의 색 대비도 기준을 충족한다. KRDS 규칙 점검 결과도 나쁘지 않다.

그러나 시민이 실제로 무언가를 처리하러 들어가는 '깊은 페이지'에서는 이야기가 달라진다. 민원 신청 화면의 입력 필드에 레이블이 없거나, 첨부파일 버튼이 스크린리더로 접근하면 빈 버튼으로 읽히거나, 로그인 오류 메시지가 시각적 색상 변화만으로 표시되어 색각 이상 사용자에게는 보이지 않는다. 어떤 사이트에서는 메인 페이지에서 100점을 받고 신청 페이지에서 50점 이하가 나오는 경우도 봤다. 점수 차이가 그 정도다.

이게 담당자의 실수만은 아니다. 구조적인 문제다. 메인 페이지는 "내부 검토"와 "경영진 확인"의 대상이 되지만, 신청·검색·게시판 페이지는 출시 이후 거의 점검을 받지 않는 경우가 많다. 외주 개발사가 바뀔 때마다 깊은 페이지의 품질이 들쭉날쭉해지기도 한다. 메인은 예쁘게, 하위는 빠르게.

우리가 '위반 매트릭스(Violation Matrix)'라는 기능을 만들게 된 이유는 바로 이 지점에 있다. 위반은 특정 페이지 하나의 문제가 아니다. 어떤 위반은 사이트 전체 100개 페이지에 고르게 퍼져 있고, 어떤 위반은 딱 하나의 서비스 신청 화면에만 등장한다. 이 차이를 한눈에 볼 수 있어야 우선순위를 제대로 잡을 수 있다.

이 글은 그 시각화 실험에 대한 기록이다. 완성품을 자랑하는 글이 아니라, 우리가 왜 이런 방식을 선택했고 어떤 어려움이 있는지를 솔직하게 적는 글이다.

워룸 환경의 대형 모니터에 표시된 컬러풀한 네트워크 시각화를 분석하는 한국인 분석가. — 대형 화면을 가득 채운 위반 전파 네트워크를 들여다보는 분석가. 한 규칙이 얼마나 넓게 퍼져 있는지 한눈에 보이는 순간.

왜 '매트릭스'인가 — 품질 데이터의 두 차원

위반 데이터에는 두 개의 축이 있다.

하나는 규칙의 축이다. ViewCheck는 KRDS 846개 규칙을 분석한다. 디자인 스타일(DS) 120개, 컴포넌트(CP) 446개, 기본 패턴(BP) 108개, 서비스 패턴(SP) 172개. 각 규칙은 하나의 구체적인 점검 항목이다. "버튼 컴포넌트의 높이가 최소 44px 이상인가", "폼 입력 필드에 적절한 레이블이 연결되어 있는가", "색상 대비가 WCAG AA 기준 4.5:1 이상인가" 같은 것들.

다른 하나는 페이지의 축이다. 공공 웹사이트는 메인 페이지 하나가 아니다. 검색 결과 페이지, 게시판 목록, 게시글 상세, 로그인, 회원가입, 민원 신청 1단계·2단계·3단계, 파일 첨부 화면, 완료 안내 화면… 규모가 큰 지자체 사이트라면 수백 개의 고유 페이지 유형이 존재한다. ViewCheck는 기본적으로 다중 페이지를 크롤링하므로, 분석 대상 페이지 수가 100개를 넘는 것은 흔한 일이다.

이 두 축을 교차시키면 매트릭스가 된다. 행: 규칙 ID, 열: 페이지 URL. 각 셀에는 그 규칙이 그 페이지에서 통과(pass), 미통과(fail), 해당없음(N/A), 예외(excepted) 중 어떤 상태인지가 들어간다. 846 × 100이면 84,600개의 셀이다.

이걸 날것의 숫자로 보면 아무것도 알 수 없다. 그래서 시각화가 필요하다.

Edward Tufte는 1983년 『The Visual Display of Quantitative Information』에서 데이터 시각화의 핵심 원칙 하나를 이렇게 제시했다. 데이터 잉크(data-ink)를 극대화하고, 차트 쓰레기(chartjunk)를 제거하라. 시각적 표현은 실제 데이터를 가리키는 역할을 해야지, 그 자체가 장식이 되어서는 안 된다는 뜻이다(Edward Tufte, The Visual Display of Quantitative Information, 1983, edwardtufte.com). 우리가 위반 매트릭스를 설계할 때 이 원칙을 자주 되새겼다. 예쁜 그래프를 만들려는 유혹을 참고, 데이터를 정확하게 전달하는 것이 먼저였다.

히트맵부터 시작한 이유 — 가장 오래된 패턴 인식 도구

데이터 시각화에서 매트릭스 형태의 데이터를 보여주는 방법 중 가장 직관적인 것이 히트맵(heatmap)이다. 행과 열이 있고, 각 셀의 값이 색상으로 표현된다. 이 형태는 수십 년 전부터 생물정보학, 금융, 제조업 품질관리에서 사용해 왔고, 웹 UX 분야에서는 사용자가 어디를 클릭하고 얼마나 스크롤하는지를 보여주는 '사용자 행동 히트맵'으로 친숙하다.

chartgen.ai의 히트맵 가이드는 이 형태의 핵심 장점을 잘 정리한다. "히트맵은 복잡한 숫자 데이터를 색상 기반의 패턴으로 변환해, 사람의 눈이 즉각적으로 이상값과 패턴을 감지할 수 있게 한다"(chartgen.ai, Heatmap Data Visualization: Complete Guide with Real-World Examples). 846개 규칙 × 100개 페이지 조합에서 어떤 규칙이 어떤 범위로 퍼져 있는지를 숫자로 파악하는 것은 어렵지만, 색상 농도 차이로 보면 시선이 자동으로 이상 영역으로 간다.

제조업 품질 관리 분야에서도 히트맵 기반의 결함 분포 시각화는 이미 표준 방법론이 됐다. Kapture.io의 결함 매핑(Defect Mapping) 문서는 이렇게 설명한다. "결함은 히트맵 위에 강도와 심각도로 쉽게 위치 파악이 가능하며, 트렌드 차트와 파레토 차트와 함께 실시간으로 업데이트된다. 조기 결함 발견과 예방적 의사결정에 기여한다"(Kapture.io, Defect Mapping). 우리는 이 제조업 품질 관리의 결함 히트맵 논리를 공공 웹 품질 분석에 그대로 가져왔다.

위반 매트릭스의 히트맵 기본 설계는 이렇다.

행(row): KRDS 846개 규칙. DS / CP / BP / SP 카테고리로 묶어 표시.
열(column): 크롤링된 N개 페이지 URL.
셀 색상: 통과(초록) / 미통과(빨강) / 해당없음(회색) / 예외(보라).
정렬 기준: 기본값은 '미통과 페이지 수 많은 규칙부터'. 즉, 사이트 전체에서 가장 많이 퍼진 위반이 맨 위로 온다.

이 정렬 방식이 중요하다. 위반이 1개 페이지에서만 나타난 규칙과, 97개 페이지에서 나타난 규칙은 같은 '미통과'지만 중요도가 전혀 다르다. 전자는 특정 페이지의 지역적 문제이고, 후자는 템플릿 수준의 구조적 문제다.

위반이 퍼지는 방식 — 구조적 전파(Structural Propagation)

웹사이트에서 위반이 여러 페이지에 걸쳐 나타나는 데는 이유가 있다. 위반은 대부분 공유 컴포넌트나 템플릿에서 비롯된다.

소프트웨어 공학 연구는 이를 '실패 전파(failure propagation)'라고 부른다. 컴포넌트 기반 소프트웨어 시스템에서 한 컴포넌트의 결함이 다른 컴포넌트로 전파되는 현상이다. ACM 디지털 라이브러리에 게재된 연구(Dong, Li et al., "On Failure Propagation in Component-Based Software Systems", QSIC 2008)는 이 전파 메커니즘을 형식적으로 모델링하며, 컴포넌트 의존 관계가 결함의 경로를 결정한다는 것을 보였다. 웹사이트의 경우 헤더, 네비게이션, 푸터, 검색창, 로그인 버튼 같은 공유 컴포넌트가 수십~수백 개 페이지에서 동시에 사용된다. 이 컴포넌트 하나에 위반이 있으면, 그 컴포넌트를 포함한 모든 페이지에 동일한 위반이 나타난다.

defect cascading에 대한 소프트웨어 테스트 연구도 같은 현상을 지적한다. "초기 결함은 모든 의존 모듈을 통해 전파될 가능성이 있으며, 시스템의 긴밀한 결합(tight coupling)과 불충분한 검증이 작은 혼란을 연쇄 반응으로 만든다"(testRigor, Defect Cascading in Software Testing). 공공 웹사이트의 GNB(글로벌 내비게이션 바) 하나에 키보드 포커스 스타일이 누락되어 있다면? 그 GNB를 포함한 모든 페이지—메인, 검색, 게시판, 신청 화면 전부—에서 키보드 접근성 위반이 발생한다.

우리가 실제로 분석하면서 자주 발견한 위반 전파 패턴들을 정리하면 이렇다.

1. GNB / 공통 헤더 위반: 사이트 전체 페이지에 동시 전파. 100페이지 중 100페이지에서 같은 규칙 위반이 표시된다. 가장 영향 범위가 넓지만 수정 1회로 전체 해결 가능.

2. 페이지 유형별 위반: 게시판 목록 페이지에만 나타나거나, 로그인 화면에만 나타나는 위반. 해당 페이지 유형의 템플릿 문제.

3. 기능별 산발적 위반: 파일 첨부, 캡차, 팝업 같은 특정 기능이 있는 페이지에만 나타나는 위반. 페이지 유형과 무관하게 특정 기능이 공통으로 가진 문제.

4. 단일 페이지 고립 위반: 딱 하나의 페이지에서만 나타나는 위반. 보통 그 페이지를 따로 개발하면서 발생.

이 네 가지 패턴은 수정 전략도 달라진다. 1번은 공통 컴포넌트 한 번 수정으로 끝난다. 2번은 페이지 유형 템플릿 수정. 3번은 해당 기능 코드 수정. 4번은 개별 페이지 수정. 패턴을 파악하지 못한 채 개별 페이지를 하나씩 고치다가는 100개 페이지를 모두 건드려야 하는 상황이 생긴다. 매트릭스 시각화가 이 전파 패턴을 드러내는 것이 핵심이다.

출력된 다중 페이지 지도 위에 붉은 핀들이 펼쳐진 클로즈업 이미지. 위반 전파의 물리적 은유. — 보드 위의 지도에 퍼져나가는 붉은 핀들. 공공 웹사이트의 위반도 이처럼 구조적으로 전파된다.

숫자로 보는 현실 — 접근성 위반은 얼마나 퍼져 있나

위반 전파의 심각성을 이해하기 위해, 먼저 국내외 연구 데이터를 살펴볼 필요가 있다.

가장 신뢰할 수 있는 대규모 접근성 데이터는 WebAIM의 연례 보고서다. WebAIM(Web Accessibility In Mind)은 매년 상위 100만 개 웹사이트의 접근성을 자동화 도구로 점검한다. 2025년 보고서(WebAIM Million 2025, webaim.org/projects/million/2025)에 따르면:

상위 100만 개 홈페이지의 **94.8%**에서 WCAG 2 기준 접근성 오류가 감지됨
페이지당 평균 51개의 접근성 오류 (2024년 56.8개에서 10.3% 감소)
전체적으로 5,096만 건 이상의 뚜렷한 접근성 오류 감지
가장 많은 오류 유형 1위: 저대비 텍스트 (79.1% 홈페이지에서 발견)
2위: 이미지 대체 텍스트 누락 (55.5%)
3위: 폼 입력 레이블 누락 (48.2%)
4위: 빈 링크 (45.4%)
5위: 제목 계층 건너뜀 (39%)

특히 주목할 점은 이 상위 6가지 오류 유형이 5년째 동일하게 반복되고 있다는 것이다. 이건 단순한 실수의 반복이 아니라, 웹 개발 표준 워크플로우 자체가 접근성을 고려하지 않고 설계되어 있다는 구조적 문제를 가리킨다.

정부 웹사이트만 따로 보면 더 심각하다. AudioEye의 2025년 디지털 접근성 지수(AudioEye Digital Accessibility Index 2025, audioeye.com)는 800여 개 정부 웹사이트의 3만 5,000여 페이지를 분석했다. 결과는:

정부 사이트 페이지당 평균 307개의 접근성 위반
키보드 접근성 위반이 있는 페이지: 69.5% (조사 산업군 중 최고)
페이지당 키보드 접근성 위반 평균: 6.6개
페이지당 접근 불가 이미지 평균: 15.3개
WCAG 최소 색상 대비 위반 평균: 75.4개

이 데이터는 미국 정부 사이트 기준이지만, 구조적 문제의 성격은 다르지 않다. 국내 공공 사이트도 비슷한 패턴을 보인다. 우리가 ViewCheck로 분석한 공공기관 사이트들에서 반복적으로 나타나는 위반들이 이 글로벌 데이터와 크게 다르지 않다.

이 숫자들이 의미하는 바를 위반 매트릭스의 맥락으로 번역하면 이렇다. "저대비 텍스트가 79.1% 홈페이지에서 발견됐다"는 건, 한 사이트 안에서도 저대비 텍스트가 사용된 페이지가 다수라는 뜻이다. 색상 스타일이 공통 CSS에 정의되어 있고, 그 CSS가 전체 페이지에 적용되기 때문이다. 이것이 바로 구조적 전파의 전형적인 사례다.

ViewCheck 위반 매트릭스의 구조 — 세 가지 뷰

우리가 구현한 위반 매트릭스는 세 가지 형태의 뷰를 제공한다. 완성됐다기보다 현재 작동하고 있는 형태다. 계속 실험 중이다.

뷰 1: 846 전체 테이블 (표 형태)

가장 기본적인 형태다. 846개 규칙이 행으로, 분석한 N개 페이지가 열로 나열된다. 각 셀에는 통과/미통과/해당없음/예외 상태가 색상 코드로 표시된다. 행은 기본적으로 '미통과 페이지 수 내림차순'으로 정렬된다.

이 뷰의 장점은 완전성이다. 846개 규칙 전체를 빠짐없이 볼 수 있다. 단점은 규모다. 846 × 100 = 84,600개 셀은 한 화면에 볼 수 없고, 스크롤하며 탐색해야 한다. 그래서 필터링이 필수다. 카테고리 필터(DS/CP/BP/SP), 상태 필터(통과만, 미통과만), 페이지 유형 필터, 키워드 검색을 조합해 원하는 영역을 좁힐 수 있다.

뷰 2: 위반 전파 그래프 (네트워크 형태)

846 전체 테이블이 '정적인 데이터'라면, 위반 전파 그래프는 '관계를 보는 뷰'다.

노드(node)와 엣지(edge)로 구성된 방향성 그래프다. 규칙 ID가 하나의 노드, 페이지 URL이 또 다른 노드다. 규칙이 특정 페이지에서 미통과 판정을 받으면 두 노드를 연결하는 엣지가 생긴다. 위반이 많이 퍼진 규칙일수록 많은 페이지 노드와 연결되어 있어서, 그래프를 보면 "어떤 규칙이 사이트 전체를 어떻게 엮고 있는지"가 시각적으로 드러난다.

우리는 이 그래프 레이아웃에 ReactFlow와 dagre.js를 사용했다. dagre는 방향성 그래프의 자동 레이아웃을 처리하는 자바스크립트 오픈소스 라이브러리로, MIT 라이선스로 공개되어 있다(GitHub, dagrejs/dagre). ReactFlow는 웹 기반 플로우 다이어그램 라이브러리로, 인터랙티브한 노드 편집과 줌/패닝을 기본 지원한다(ReactFlow 공식 문서, reactflow.dev).

그래프 형태의 결함 시각화는 소프트웨어 의존성 분석에서도 유용성이 검증되어 있다. "의존성 매핑은 각 시스템 컴포넌트의 모든 의존 관계를 생성·매핑하여, 결함이 아키텍처 전반에 어떻게 퍼질 수 있는지를 이해하게 한다"는 연구도 있다(IN-COM Data Systems, Preventing Cascading Failures Through Impact Analysis and Dependency Visualization). 위반 전파 그래프는 이 아이디어를 웹 품질 도메인에 적용한 것이다.

그래프 뷰의 한계도 있다. 규칙과 페이지 수가 많아지면 그래프가 복잡해져 가독성이 떨어진다. 그래서 기본 뷰는 P0~P1 심각도의 미통과 규칙과 가장 많은 위반 페이지만 보여주고, 사용자가 원하는 만큼 범위를 확장할 수 있도록 했다.

뷰 3: 날짜별 이력 (타임라인 형태)

같은 사이트를 두 번 이상 분석하면 위반 매트릭스의 시간 축이 생긴다. 지난 분석과 이번 분석을 비교해서, "새로 생긴 위반", "해소된 위반", "지속되는 위반"을 구분할 수 있다.

이 뷰의 핵심 가치는 개선 추적이다. 개발팀이 특정 위반을 수정했다고 했는데 실제로 해소됐는지, 수정하면서 새 위반이 생기진 않았는지를 데이터로 확인할 수 있다. 리포트를 제출할 때 "이전 대비 △△ 규칙 위반이 해소됐습니다"라고 말할 수 있는 근거가 된다.

ViewCheck 분석 인터페이스의 위반 매트릭스 탭 실제 화면 캡처. 규칙과 페이지가 네트워크 그래프로 연결되어 있으며, 빨간 엣지는 미통과 관계를 나타낸다. — ViewCheck LLM 분석 화면에 표시된 위반 매트릭스 실제 화면. 왼쪽의 규칙 노드와 오른쪽의 페이지 노드가 위반 관계로 연결된 방향성 그래프. 색상 농도는 심각도를 나타낸다. — 실제 분석 화면

Tufte의 'Small Multiples' — 우리가 배운 것

위반 매트릭스를 설계하면서 가장 많이 참고한 시각화 원칙 중 하나가 Tufte의 'Small Multiples(작은 배수)'다.

Small Multiples는 "같은 작은 그래프를 반복해서 하나의 시각적 공간에 모아 놓는 것"이다. Tufte는 이것이 "우표 크기의 일러스트를 시각적 공간에 반복적으로 배열함으로써, 많은 양의 데이터를 하나의 그래픽에서 비교할 수 있게 하는 강력한 도구"라고 설명했다(Tufte, The Visual Display of Quantitative Information, 1983). 위반 매트릭스의 히트맵은 본질적으로 small multiples의 적용이다. 각 셀이 하나의 '작은 판정 결과'이고, 그것들이 규칙 × 페이지 격자 위에 배열된다.

thecommspot.com의 데이터 시각화 가이드는 히트맵/매트릭스 형태를 이렇게 설명한다. "매트릭스 히트맵은 2차원 격자 구조 안에 데이터를 표현하며, 행과 열이 각각 별개의 카테고리나 변수를 나타낸다. 각 셀에 할당된 색상은 값의 크기나 강도를 전달한다"(The Comm Spot, Heat Map (Matrix) - Data Visualization). 이 설명은 우리의 위반 매트릭스 구조와 정확히 일치한다.

한 가지 중요한 설계 선택은 색상 의미 고정이었다. 히트맵에서 색상 선택이 잘못되면 색각 이상 사용자에게 아무 의미가 없는 그래픽이 된다. 아이러니하게도, 접근성 위반을 보여주는 도구 자체가 접근성을 위반할 수 있다. 그래서 우리는 색상만으로 상태를 구분하지 않고, 색상 + 아이콘 + 텍스트 레이블을 병행했다. 빨간색 X가 '미통과'지만, 색을 볼 수 없는 사용자도 X 아이콘과 "fail" 텍스트로 같은 정보를 얻을 수 있도록.

데이터 밀도와 인지 부하 — 가장 어려운 균형

위반 매트릭스 설계에서 가장 어려운 부분은 데이터 밀도(data density)와 인지 부하(cognitive load) 사이의 균형이다.

Tufte는 데이터 밀도를 높여야 한다고 했다. "단위 면적당 데이터 포인트 수를 높이고, 같은 공간에 더 많은 정보를 담아라." 이론적으로는 846 × 100의 전체 매트릭스를 한 화면에 보여주는 것이 이상적이다.

그런데 실제 사용자 경험은 달랐다. 처음 이 화면을 보여줬을 때, 많은 담당자가 "이게 뭔데요?"라는 반응을 보였다. 수만 개의 셀이 펼쳐진 화면은 정보를 담고 있지만 이야기를 전달하지 못했다.

정보 시각화 연구는 이 문제를 오래전부터 다뤄왔다. 미국 도서관 기술 리포트(Library Technology Reports)에 실린 정보 시각화 원칙 논문(Chen, 2010, "Information Visualization Principles, Techniques, and Software")은 인지 부하를 줄이는 핵심 전략으로 **점진적 공개(progressive disclosure)**를 꼽는다. 처음에는 요약 수준을 보여주고, 사용자가 원할 때 세부 수준으로 들어갈 수 있게 하는 방식이다.

우리가 선택한 접근은 이렇다. 기본 뷰는 전체 846규칙이 아니라, "가장 많이 퍼진 위반 TOP 10"과 "가장 많은 위반이 있는 페이지 TOP 10"을 요약해서 보여준다. 여기서 시선을 끄는 항목이 있으면 클릭해서 해당 규칙의 전체 페이지 분포를 볼 수 있다. 전체 846규칙 매트릭스는 '고급 보기' 탭에 있다.

이 설계가 완벽하다고 생각하지는 않는다. 지금도 어떤 사용자는 요약 뷰로도 충분하고, 어떤 사용자는 처음부터 전체 매트릭스를 원한다. 기본값 설정이 늘 어렵다.

실제 분석 사례 — 위반 매트릭스가 드러낸 것들

몇 가지 패턴을 실제 분석 과정에서 발견한 것을 공유한다. 특정 사이트를 지칭하는 것이 아니라, 여러 사이트에서 반복적으로 나타나는 유형들이다.

사례 1: GNB 포커스 스타일 누락의 파급

한 지자체 사이트를 100페이지 분석했더니, KRDS CP 카테고리의 특정 규칙—키보드 포커스 가시성 관련—이 98개 페이지에서 동시에 미통과 판정을 받았다. 2개 페이지는 팝업 레이어여서 GNB가 없었기에 N/A였다.

원인은 GNB의 CSS였다. 공통 헤더의 스타일시트에서 :focus 상태가 outline: none으로 설정되어 있었다. 이 한 줄의 CSS가 사이트 98개 페이지 전체에 걸쳐 키보드 접근성 위반을 만들고 있었다. 위반 매트릭스를 보지 않았다면, 담당자는 98개 페이지를 하나씩 고쳐야 한다고 생각했을 것이다. 매트릭스는 "이건 GNB 공통 CSS 한 줄 수정으로 전체 해결이 가능하다"는 사실을 드러냈다.

사례 2: 신청 화면군의 폼 레이블 누락

다른 사이트에서는 특정 규칙—폼 입력 필드 레이블 연결 관련—이 전체 100페이지 중 23개 페이지에서 미통과였다. 23개를 살펴보니 모두 '신청' 또는 '등록' 유형의 페이지였다. 게시판 보기, 검색, 메인 페이지에서는 이 규칙이 통과하거나 N/A(폼이 없음)였다.

이 패턴은 '신청 기능 개발 시 입력한 개발팀이 폼 레이블 연결을 습관적으로 누락'하고 있다는 것을 보여줬다. 수정 대상은 23개 페이지가 아니라, 신청 페이지 템플릿과 그 템플릿을 만든 개발 프로세스였다.

사례 3: 알 수 없는 하나의 페이지

반대 사례도 있다. 특정 규칙이 딱 1개 페이지에서만 미통과가 나왔다. 그 페이지는 '2023년 특별 행사 안내 임시 페이지'였다. 행사는 이미 끝났지만 페이지는 살아 있었고, 거기에만 독자적인 레이아웃이 적용되어 있어서 KRDS 컴포넌트 규칙을 위반하고 있었다. 이건 사이트 전체 구조 문제가 아니라 관리 소홀의 문제였다.

위반 매트릭스가 없었다면 이 페이지는 영원히 방치됐을 가능성이 높다. 담당자가 메인 페이지만 보는 일상에서, 3년 전에 만든 행사 임시 페이지까지 직접 열어볼 리 없으니까.

한국인 팀원들이 대형 스크린에 표시된 위반 전파 시각화를 검토하는 모습. 자연광, 다큐멘터리 스타일. — 팀원들이 대형 화면의 위반 전파 시각화 결과를 함께 검토하는 장면. 어떤 규칙이 어디에 퍼져 있는지 논의하는 것이 수정 전략의 첫걸음이다.

위반 요약 대시보드 — 매트릭스 위에 얹은 통계

위반 매트릭스는 데이터 자체지만, 그 데이터를 해석하는 데 도움이 되는 요약 통계가 필요하다. ViewCheck는 위반 매트릭스 탭 상단에 5개의 요약 대시보드를 제공한다.

1. TOP 10 위반 규칙: 미통과 페이지 수 기준 상위 10개 규칙. "우리 사이트에서 가장 광범위하게 퍼진 위반은 무엇인가."

2. 문제 페이지 TOP 10: 미통과 규칙 수 기준 상위 10개 페이지. "가장 많은 위반이 집중된 페이지는 어디인가." 이 리스트에 특정 신청 화면이 계속 등장한다면, 그 화면이 최우선 개선 대상이다.

3. 심각도별 분포 (P0~P3): 위반을 심각도 4단계로 나눠 막대 차트로 표시. P0(최우선)가 많으면 즉각 대응 필요. P3(낮음)가 많으면 장기 개선 계획으로 관리 가능.

4. 페이지 유형별 분포: 메인/검색/게시판/신청/로그인 같은 페이지 유형별로 위반 수를 집계. "우리 사이트에서 어떤 유형의 페이지가 품질 문제를 많이 가지고 있나."

5. 카테고리별 위반 비율 (DS/CP/BP/SP): KRDS 4개 카테고리 중 어느 영역에서 위반이 집중되는지. 디자인 스타일에서 많다면 색상·타이포 가이드 적용 문제, 컴포넌트에서 많다면 UI 컴포넌트 구현 문제, 기본 패턴에서 많다면 인터랙션 설계 문제, 서비스 패턴에서 많다면 서비스 플로우 설계 문제다.

이 5개 요약이 있어야 840,000개 셀의 바다에서 방향을 잡을 수 있다.

위반과 예외 — 매트릭스에서 '예외 처리'의 의미

실제 공공기관 분석에서는 '예외(excepted)' 처리도 중요한 개념이다.

행안부 지침이나 KRDS 규칙이 100% 적용되기 어려운 상황이 있다. 예를 들어, 노인 복지관 사이트가 KRDS 색상 토큰을 완전히 적용하려면 전체 사이트를 재개발해야 하는 경우, 단계적 적용 계획을 세우고 일부 규칙을 '예외' 처리하는 것이 현실적이다. 또는 특정 페이지가 외부 삽입 콘텐츠(공공 민간 협력 시스템)로 기관이 직접 수정할 수 없는 경우도 있다.

ViewCheck의 예외 처리는 "눈 감고 없애는" 게 아니다. 예외 처리된 규칙은 매트릭스에서 별도 색상(보라색)으로 표시된다. 예외 이유가 기록되고, 예외 처리 후의 '실효 점수'와 예외 없이 계산한 '원점수'가 모두 표시된다. 예외 처리를 남용하면 점수는 올라가도 실제 품질은 그대로인 상황이 생긴다. 그래서 예외 항목이 많을수록 리포트에서 그 사실이 더 눈에 띄게 표시된다.

ViewCheck의 내부 정합성 원칙 중 하나가 passed + failed + notApplicable + excepted = 846이다. 846개 규칙의 총합은 항상 846이어야 한다. 예외 처리가 합계를 바꿔서는 안 된다. 이 등식이 깨지면 데이터 어딘가에 오류가 있다는 신호다.

WebAIM의 연구가 보여주는 구조적 반복

WebAIM 2025 보고서가 특히 주목하는 점은 "6가지 오류 유형이 5년째 변하지 않는다"는 사실이다. WebAIM은 이를 이렇게 해석한다. "이 오류들은 단순한 실수가 아니라, 표준 웹 개발 워크플로우가 기본적으로 생산하는 결과물이다."(WebAIM Million 2025, webaim.org/projects/million/2025)

이 말이 시사하는 것은, 개별 페이지를 수정하는 것만으로는 근본적인 변화가 없다는 것이다. 가장 임팩트 있는 개선은 템플릿 수준의 수정이다. 사이트 전체에 공통 적용되는 컴포넌트, CSS, 템플릿 구조를 바꾸면 수백 개 페이지의 위반이 한 번에 해소된다.

WCAG 위반 패턴 연구(testparty.ai, Website Accessibility Violations: Most Common WCAG Failures by Industry)도 이 점을 강조한다. "한 핵심 요소가 실패하면 다른 것들도 따라 실패하는 경향이 있다. 접근성 문제는 시스템적이다. 메뉴나 이미지 성능이 낮다면 WCAG 준수 전반에 더 넓은 갭이 있다는 신호다. 템플릿 문제는 모든 페이지에서 배수로 증가한다."

이것이 ViewCheck 위반 매트릭스가 궁극적으로 전달하고자 하는 메시지다. 어느 페이지가 몇 개 틀렸는지가 아니라, 어떤 구조적 문제가 얼마나 넓게 퍼져 있는지. 그것을 한눈에 볼 수 있어야 진짜 수정 전략이 나온다.

유리 보드 앞에서 컬러 마커로 이슈 확산 지도를 그리는 한국인 전략가. 자연광, 다큐멘터리 편집 스타일. — 유리 보드에 색깔 마커로 이슈 전파를 정리하는 전략가. 어디에서 무엇이 퍼지고 있는지를 구조화하는 것이 수정의 출발점이다.

기술적 어려움 — 우리가 아직 해결 중인 것들

위반 매트릭스를 만들면서 아직 완전히 해결하지 못한 문제들이 있다. 솔직하게 적는다.

1. 성능 문제: 846 × 100 = 84,600개 셀을 React DOM으로 렌더링하면 브라우저가 느려진다. 현재는 가상화(virtualization) 기법을 적용해 화면에 보이는 셀만 렌더링하고 있지만, 여전히 대규모 데이터에서 초기 로딩이 느린 편이다.

2. 그래프 복잡도: 위반 전파 그래프는 규칙과 페이지가 많아지면 '스파게티 그래프'가 된다. 수백 개의 노드와 수천 개의 엣지가 교차하면 아무것도 읽히지 않는다. 현재는 P0/P1 위반만 표시하거나, 연결이 많은 상위 N개 규칙만 보여주는 필터링으로 부분 해결 중이다. 그래도 그래프가 복잡해지는 건 피하기 어렵다.

3. 동적 콘텐츠 위반: Playwright로 크롤링할 때, 로그인 후에만 보이는 화면이나 특정 사용자 액션(파일 첨부, 모달 열기)을 수행해야만 나타나는 상태의 위반은 매트릭스에 반영하기 어렵다. 정적 DOM 기반 분석의 구조적 한계다.

4. 페이지 유형 분류 정확도: 크롤링된 URL을 '게시판 목록', '신청 화면', '로그인' 같은 유형으로 자동 분류하는데, 분류가 틀리면 매트릭스의 페이지 유형 필터가 오작동한다. 지금은 URL 패턴 + DOM 키워드 + 페이지 텍스트로 15가지 유형을 자동 감지하지만, 분류 정확도가 100%는 아니다. 특히 단일 페이지 애플리케이션(SPA) 구조의 사이트에서는 URL만으로 페이지 유형을 구분하기 어렵다.

5. N/A의 해석: 해당없음(N/A) 판정은 "이 페이지에 해당 컴포넌트가 없어서 검증 불가"라는 의미와, "판정 기술적 한계"라는 의미가 섞여 있다. 이 두 종류의 N/A가 매트릭스에서 같은 회색으로 표시되면, 사용자가 잘못 해석할 수 있다. 이를 구분하는 작업을 하고 있지만, 846개 규칙 각각에 대해 N/A의 성격을 명확히 정의하는 건 상당한 작업량이다.

이 문제들이 해결됐다고 말하기엔 이르다. 현재 가장 어렵다고 느끼는 것은 2번, 그래프 복잡도다. 데이터는 정확한데 시각화가 읽히지 않는 상황이 반복된다. 좋은 해법이 있으면 조언을 듣고 싶다.

우선순위 결정 — 매트릭스에서 P0를 찾는 방법

위반 매트릭스의 최종 목적은 "무엇부터 고쳐야 하나"를 결정하는 것이다. 이를 위한 우선순위 결정 프레임을 설명한다.

ViewCheck는 각 규칙 위반에 P0~P3의 심각도(priority)를 부여한다.

P0 (최우선): 접근성 차단, 법적 위반 위험, 사용 불가 수준의 기능 오류. 즉각 수정 필요.
P1 (높음): 사용자 경험 심각하게 저해. 조기 수정 권장.
P2 (보통): 개선이 필요하지만 즉시 영향은 제한적.
P3 (낮음): 완성도 향상 차원. 장기 개선 로드맵에 반영.

위반 매트릭스에서 우선순위를 결정하는 방법은 두 축의 교차를 보는 것이다.

높은 우선순위 조합: P0 위반 + 높은 전파도 = 최우선 수정 대상. 예: 키보드 포커스 스타일 누락(P0)이 97개 페이지에서 발생하면, 이것이 첫 번째 수정 목표가 된다.

낮은 우선순위 조합: P3 위반 + 낮은 전파도 = 최후 처리. 예: 특정 색상 토큰 미적용(P3)이 1개 행사 임시 페이지에서만 발생하면, 이건 다음 개편 때 처리해도 된다.

이 우선순위 매트릭스(Priority × Propagation)가 작동하면, 100개 위반 목록 앞에서 막막하던 담당자가 "이 3가지부터 시작하면 됩니다"라는 명확한 지침을 얻게 된다.

다만 이 우선순위 계산이 완전 자동화되기는 어렵다. P0 판정이 도메인 지식을 필요로 하는 경우가 있고, 기관의 상황(예산, 개편 일정, 민감한 페이지 여부)에 따라 우선순위가 달라지기도 한다. ViewCheck는 자동 계산된 우선순위를 기본값으로 제공하되, 담당자가 조정할 수 있도록 했다.

정보 시각화의 한계 — 보이는 것이 전부가 아니다

이쯤에서 한 가지 솔직한 이야기를 해야 한다. 시각화는 데이터를 이해하는 데 도움이 되지만, 동시에 착시를 만들 수 있다.

위반 매트릭스에서 어떤 규칙이 진한 빨간색으로 97개 셀을 가득 채우고 있으면, 사람의 눈은 자동으로 그것을 심각한 문제로 인식한다. 그런데 그 규칙이 P3 수준의 낮은 심각도라면? 매우 광범위하게 퍼져 있지만 실제 영향은 제한적인 위반인 것이다. 반대로, 단 1개 페이지에서 조용히 P0 위반이 하나 있을 때, 그 셀은 전체 매트릭스에서 거의 눈에 띄지 않는다.

색상의 크기(면적)는 심각도가 아니라 전파도(퍼진 정도)를 나타낸다. 이것을 사용자에게 명확히 전달하는 것이 설계의 핵심 과제다. 지금 우리는 색상 농도에 더해 심각도 아이콘(P0~P3 배지)을 함께 표시하고 있다. 하지만 두 개의 정보 채널이 겹칠 때 사용자가 그것을 어떻게 읽는지는 아직 사용자 테스트가 충분하지 않다.

정보 시각화 연구자들이 오래전부터 경고한 것이기도 하다. "시각화는 데이터에 대한 판단을 내리는 것이 아니라, 판단을 지원하는 도구다"라는 원칙. 위반 매트릭스는 '어디를 봐야 하는지' 방향을 가리키는 것이고, '무엇이 더 중요한지'는 결국 사람이 판단해야 한다. 데이터 시각화 도구가 그 판단을 대체할 수 없다. 대체할 수 있다고 주장하면 그것이 오히려 위험하다.

다중 페이지 데이터의 집계 방식 — OR 로직의 이유

ViewCheck의 다중 페이지 분석에서 위반 판정 집계 방식을 설명할 필요가 있다.

사이트 전체 결론을 낼 때 우리는 OR 로직을 사용한다. 100개 페이지 중 1개 페이지라도 특정 규칙에서 미통과가 나오면, 그 규칙은 사이트 전체에서 '미통과'로 집계된다. 반대로, 100개 페이지 모두에서 통과해야만 그 규칙이 사이트 전체에서 '통과'다.

이 방식은 보수적이고, 그래서 더 정직하다. 메인 페이지 하나에서 통과했다고 사이트 전체가 통과라고 말하는 것은 거짓이다. 시민이 신청 페이지에서 불편을 겪는다면, 그 사이트는 그 규칙에서 실패한 것이다.

하지만 이 로직은 점수를 낮게 만든다. 100개 페이지 중 99개가 통과하고 1개만 미통과인 경우도 '미통과'로 집계되기 때문이다. 담당자 입장에서는 "우리가 99%는 잘하고 있는데 왜 미통과예요?"라고 느낄 수 있다.

그래서 위반 매트릭스에서는 OR 집계 결과만이 아니라, **전파도(몇 개 페이지에서 미통과였는지)**를 함께 표시한다. 미통과이지만 1/100 페이지에서만 발생한 위반과, 97/100 페이지에서 발생한 위반은 같은 '미통과'가 아니다. 매트릭스는 그 차이를 숫자와 색상 농도로 구분한다.

접근성 위반의 지역성과 전역성

위반 매트릭스를 수백 개 사이트에 적용하면서 발견한 흥미로운 패턴이 있다. 위반에는 지역적(local) 위반과 전역적(global) 위반이 있다는 것이다.

전역적 위반은 사이트 전체에서 균일하게 나타난다. GNB 공통 컴포넌트의 문제, 전체 스타일시트의 문제, 공통 레이아웃 템플릿의 문제가 만들어내는 위반이다. 이런 위반은 매트릭스에서 해당 규칙의 행이 거의 전부 빨간색으로 채워진다.

지역적 위반은 특정 페이지, 특정 기능 영역에서만 나타난다. 매트릭스에서는 해당 규칙의 행에 빨간 셀이 군데군데 분산된다.

더 흥미로운 것은 **군집 패턴(cluster pattern)**이다. 특정 개발 시기에 만들어진 페이지들이 묶여서 같은 위반을 공유하는 경우다. 예를 들어, 2019년에 새단장한 신청 서비스 3개 페이지가 같은 위반을 공유하고, 2023년에 개편한 공지사항 관련 4개 페이지가 다른 위반을 공유하는 식이다. 이건 개발팀 교체나 외주 개발사 변경과 연관되는 경우가 많다. 매트릭스가 이 군집을 드러내면, "어느 시기 개발 관행이 문제였나"를 역추적하는 단서가 된다.

물론 이런 해석은 조심해야 한다. 매트릭스는 상관관계를 보여줄 뿐, 인과관계를 증명하지 않는다. "이 페이지들이 같은 위반을 공유한다"는 것과 "이 페이지들이 같은 시기에 만들어졌다"는 것은 별개의 사실이다. 상관이 있을 수 있지만, 추측으로 결론 내리는 것은 피해야 한다.

모니터에 표시된 컬러 격자 셀들의 클로즈업. 한 손이 특정 셀을 가리키고 있다. 자연광, 다큐멘터리 스타일. — 모니터의 컬러 그리드 위에 손가락으로 특정 셀을 가리키는 장면. 수만 개의 셀 중에서 "이것부터"를 결정하는 순간이 위반 매트릭스의 핵심이다.

KRDS 공식 규칙 체계와 매트릭스의 관계

ViewCheck 위반 매트릭스는 KRDS 공식 규칙 체계를 그대로 따른다. 행안부와 디지털플랫폼정부위원회가 배포한 KRDS는 공공기관이 "원칙 → 스타일 → 컴포넌트 → 기본 패턴 → 서비스 패턴"의 위계로 웹·앱을 설계하도록 요구한다(KRDS 공식, krds.go.kr). ViewCheck의 DS/CP/BP/SP 카테고리가 이 위계를 그대로 반영한다.

특히 2025년 2월 행안부가 개최한 '2025년 범정부 UI/UX 디자인시스템(KRDS) 설명회'는 KRDS 적용 대상을 정부 상징을 사용하는 모든 중앙행정기관·소속기관·공공기관·지방자치단체로 명확히 했다(행정안전부, 2025.2.20 설명회 자료, mois.go.kr). 즉, 전국 수천 개 공공기관의 웹사이트가 KRDS 준수 대상이다.

이 규모를 생각하면 위반 매트릭스의 의미가 달라진다. 각 기관이 자기 사이트 하나의 매트릭스를 보는 것도 의미 있지만, 수천 개 기관의 매트릭스를 집계하면 "대한민국 공공 웹 전체에서 어떤 KRDS 규칙이 가장 많이 위반되고 있나"를 알 수 있다. 이건 정책 차원의 데이터다. 어떤 규칙 영역에서 전국적으로 반복되는 위반이 있다면, 그 규칙에 대한 가이드라인 보강이나 개발자 교육이 필요하다는 신호다.

우리가 지금 3,000개 이상의 공공 도메인 크롤링 인프라를 운영하는 이유 중 하나도 이 집계 데이터를 쌓기 위해서다. 아직 이 수준의 집계 분석을 공개적으로 제공하지는 않지만, 방향은 그쪽이다.

시각화 너머의 질문 — 매트릭스가 보여주지 못하는 것

솔직히 말하면, 위반 매트릭스가 보여주지 못하는 것들도 있다.

실제 사용자 경험: 매트릭스는 KRDS 규칙 위반을 보여주지만, 그 위반이 실제 사용자에게 어느 정도의 불편을 주는지는 별개의 문제다. 규칙을 위반했지만 대부분의 사용자가 알아채지 못하는 경우도 있고, 규칙은 통과했지만 실제 사용이 매우 불편한 경우도 있다. 규칙 준수와 사용자 경험은 강하게 연관되지만 동일하지 않다.

수정 난이도: 매트릭스는 "어디에 문제가 있나"는 보여주지만 "고치기 얼마나 어려운가"는 바로 알 수 없다. GNB 포커스 스타일 CSS 한 줄을 추가하는 것과, 레거시 시스템의 폼 구조 전체를 재작성하는 것은 수정 범위가 전혀 다르다. ViewCheck는 비용 추정 기능을 별도로 제공하지만, 매트릭스 자체에 이 정보를 통합하는 것은 아직 진행 중이다.

외부 삽입 콘텐츠: 공공 사이트에는 행안부 공통 컴포넌트, 민간 결제 모듈, 외부 지도 API, 정부 통합 검색 위젯처럼 기관이 직접 수정할 수 없는 외부 콘텐츠가 많다. 이 영역의 위반이 매트릭스에 그대로 표시되면 "우리가 고칠 수 없는 위반"이 혼재하는 문제가 생긴다. 현재는 예외 처리로 이를 관리하지만, 자동으로 외부 삽입 콘텐츠를 감지해서 분리하는 기능은 아직 없다.

시간 차원의 한계: 매트릭스는 분석 시점의 스냅샷이다. 동적으로 변하는 콘텐츠(실시간 공지사항, 사용자 생성 게시글)는 시점마다 다르게 보일 수 있다. 특히 게시판 상세 페이지는 콘텐츠에 따라 이미지 alt 텍스트 위반 여부가 달라진다. 이 동적 위반을 매트릭스에 어떻게 반영할지는 아직 답을 찾는 중이다.

이런 한계들을 열거하는 이유는, 위반 매트릭스가 "이것만 있으면 충분하다"는 도구가 아니라 "여러 도구 중 하나"라는 것을 명확히 하고 싶어서다. 매트릭스는 첫 번째 지도다. 지도를 가지고 현장에 가야 진짜 상황을 알 수 있다.

앞으로 실험하고 싶은 것들

위반 매트릭스를 더 발전시키는 방향으로 몇 가지 아이디어를 실험하고 있다. 아직 구현되지 않은 것들이다.

페이지 유사도 클러스터링: 비슷한 위반 패턴을 가진 페이지들을 자동으로 묶어주는 기능. 위반 프로파일이 유사한 페이지들은 같은 템플릿을 공유하거나 같은 시기에 개발됐을 가능성이 높다. 클러스터링이 되면 "이 그룹을 대표하는 한 페이지를 수정하면 전체가 해결된다"는 식의 효율적 수정 전략이 가능해진다.

위반 트렌드 예측: 과거 2~3회 분석 데이터를 기반으로, "현재 추세대로라면 6개월 후 이 규칙의 위반 페이지는 몇 개가 될 것인가"를 예측하는 기능. 지금은 현재 스냅샷만 보여주지만, 트렌드를 보여주면 "이건 악화되고 있는 위반이니 지금 고쳐야 한다"는 타이밍 판단이 가능해진다. 다만 이 예측의 신뢰도가 얼마나 될지는 데이터가 더 쌓여야 알 수 있다.

비교 매트릭스: 유사한 공공기관 A, B, C 사이트의 위반 매트릭스를 나란히 놓고 비교하는 기능. "우리 사이트의 위반 패턴이 같은 유형의 다른 기관과 어떻게 다른가"를 볼 수 있으면, 벤치마킹 맥락에서 우선순위를 다시 설정할 수 있다. 이 기능은 프라이버시와 데이터 동의 문제도 얽혀 있어서 구현이 단순하지 않다.

자연어 쿼리: "가장 많은 신청 페이지에서 발생하는 접근성 관련 위반을 보여줘" 같은 자연어로 매트릭스를 탐색하는 기능. LLM의 자연어 이해 능력을 매트릭스 필터링에 적용하는 실험이다. 아직 초기 단계지만, ViewCheck 전체가 LLM 기반 분석을 지향하는 만큼 자연스러운 방향이다.

마무리 — 매트릭스는 지도다, 판단은 사람이 한다

위반 매트릭스는 어디까지나 도구다. 846개 규칙 × N개 페이지의 교차 데이터를 시각화해서, 어디에 문제가 얼마나 퍼져 있는지 보여주는 지도.

좋은 지도의 조건을 Edward Tufte의 말을 빌려 정리하면 이렇다. 데이터를 정직하게 담고, 불필요한 장식 없이 데이터가 스스로 말하게 하며, 비교를 쉽게 만들어야 한다. 우리 위반 매트릭스가 이 조건을 얼마나 충족하는지는 계속 점검해야 한다. 스스로 "잘 만들었다"고 만족한 순간 개선이 멈춘다.

WebAIM의 연구가 5년째 반복해서 말하는 것처럼, 접근성·품질 위반은 단발적 실수가 아니라 구조적 반복이다. 구조적 반복을 해결하려면 구조를 봐야 하고, 구조를 보려면 전체를 한눈에 담을 수 있는 시각화가 필요하다. 그것이 위반 매트릭스가 존재하는 이유다.

그리고 지도를 손에 쥐었다고 길이 저절로 열리지는 않는다. 지도를 읽고, 현장을 보고, 팀과 논의하고, 수정 우선순위를 결정하는 사람이 있어야 한다. ViewCheck가 지도를 제공한다면, 그 지도를 들고 공공 웹을 실제로 개선하는 사람들은 기관의 담당자와 개발팀이다.

우리가 만드는 것은 그 사람들의 일을 조금 덜 막막하게 만드는 도구다. 아직 갈 길이 멀고, 해결해야 할 기술적 문제들도 쌓여 있다. 그래도 지금 이 단계에서 보여줄 수 있는 것들이 의미가 있다고 생각하고 계속 실험하고 있다.

다음 편에서는 또 다른 분석 기능의 이야기로 찾아오겠다.

참고문헌

국내

행정안전부, 「전자정부 웹사이트 품질관리 지침」, 행정안전부고시 제2025-46호, 2025.6.25. https://www.law.go.kr/LSW//admRulInfoP.do?admRulSeq=2100000252582
행정안전부, 「범정부 UI/UX 디자인시스템(KRDS) 설명회 자료」, 2025.2.20. https://www.mois.go.kr/frt/bbs/type013/commonSelectBoardArticle.do?bbsId=BBSMSTR_000000000006&nttId=115763
KRDS 공식 사이트, 「대한민국 정부 디자인시스템」, 행정안전부 · 디지털플랫폼정부위원회. https://www.krds.go.kr/
대한민국 정책브리핑(Korea.kr), 「누구나 쉽게 사용할 수 있는 공공 웹·앱 혁신, '범정부 UI/UX 디자인시스템(KRDS)'으로부터」, 2024. https://www.korea.kr/briefing/pressReleaseView.do?newsId=156670385

해외

WebAIM, The WebAIM Million — The 2025 Report on the Accessibility of the Top 1,000,000 Home Pages, 2025. https://webaim.org/projects/million/2025
AudioEye, 2025 Digital Accessibility Index — Government Industry Report, 2025. https://www.audioeye.com/digital-accessibility-index/2025/industry-reports/government/
Edward Tufte, The Visual Display of Quantitative Information, Graphics Press, 1983. (출판사 공식 페이지: https://www.edwardtufte.com/books/)
The Comm Spot, Heat Map (Matrix) — Data Visualization. https://thecommspot.com/comm-subjects/visual-communication/data-visualization/types-of-data-visualizations-charts-and-graphs/heat-map-matrix/
Dong Li et al., On Failure Propagation in Component-Based Software Systems, QSIC 2008, ACM Digital Library. https://dl.acm.org/doi/10.1109/QSIC.2008.46
testRigor, Defect Cascading in Software Testing — A Guide. https://testrigor.com/blog/defect-cascading-in-software-testing/
dagrejs, dagre — Directed graph layout for JavaScript (GitHub, MIT License). https://github.com/dagrejs/dagre
ReactFlow, Node-Based UIs in React — Official Documentation. https://reactflow.dev/
TestParty, Website Accessibility Violations: Most Common WCAG Failures by Industry, 2025. https://testparty.ai/blog/common-wcag-failures-industry