서론: CSS만으로 파이차트를? 그런데 접근성까지?
웹에서 데이터 시각화를 할 때 가장 먼저 떠오르는 건 아마 Chart.js나 D3.js 같은 라이브러리일 거예요. 하지만 간단한 파이차트 하나를 위해 수십 KB의 라이브러리를 로딩하는 건 때로는 오버 엔지니어링일 수 있습니다. 특히, 시맨틱 마크업과 접근성을 고려해야 하는 실무 환경에서는 더 그렇죠.
CSS의 conic-gradient() 속성을 사용하면 라이브러리 없이도 깔끔한 파이차트를 만들 수 있습니다. 하지만 여기서 중요한 건 '보기만 예쁜' 차트가 아니라, 모든 사용자가 이해할 수 있는 차트를 만드는 거예요. 키보드 탐색, 스크린 리더, 고대비 모드 등 다양한 환경에서도 데이터를 정확히 전달해야 합니다.
이 글에서는 CSS 파이차트의 기본 구현부터 시작해서, 시맨틱 HTML과 WAI-ARIA를 활용한 접근성 향상 방법까지 단계별로 알아보겠습니다. 실제 프로젝트에 바로 적용할 수 있는 코드와 함께, 국내 SI/스타트업 환경에서 주의할 점도 짚어드릴게요.
참고 자료: 이 글의 원문은 CSS-Tricks의 Overflow 컨테이너 관련 글에서 영감을 받아 접근성 주제를 확장했습니다.
본론 1: conic-gradient()로 파이차트 구현하기
1. 기본 구조 (HTML)
파이차트는 단순한 <div> 하나로 시작합니다. 하지만 접근성을 고려해 <figure>와 <figcaption>, 그리고 데이터를 텍스트로 표현한 대체 콘텐츠를 함께 제공해야 합니다.
<!-- 시맨틱한 파이차트 구조 -->
<figure role="figure" aria-label="부서별 예산 비율">
<div class="pie-chart" role="img" aria-label="마케팅 40%, 개발 35%, 운영 25%">
<!-- 데이터를 텍스트로 제공 (스크린 리더용) -->
<div class="sr-only">
<ul>
<li>마케팅: 40%</li>
<li>개발: 35%</li>
<li>운영: 25%</li>
</ul>
</div>
</div>
<figcaption>2025년 부서별 예산 분포</figcaption>
</figure>
2. CSS로 파이차트 그리기
conic-gradient()는 원형 그라데이션을 만들어 파이차트처럼 보이게 합니다. 각 색상의 시작 각도와 비율을 계산해서 적용하면 됩니다.
/* 파이차트 스타일링 */
.pie-chart {
width: 200px;
height: 200px;
border-radius: 50%;
/* 마케팅 40% (0deg ~ 144deg), 개발 35% (144deg ~ 270deg), 운영 25% (270deg ~ 360deg) */
background: conic-gradient(
#ff6b6b 0deg 144deg, /* 마케팅: 빨간색 */
#4ecdc4 144deg 270deg, /* 개발: 청록색 */
#ffe66d 270deg 360deg /* 운영: 노란색 */
);
}
꿀팁: 비율 계산이 번거롭다면 CSS 변수와
calc()를 활용하세요. 예를 들어--marketing: 40%;로 정의하고calc(var(--marketing) * 3.6deg)로 각도를 계산하면 유지보수가 훨씬 쉬워집니다.
3. 키보드 포커스 지원
파이차트 자체는 장식용 이미지(role="img")이므로 키보드 포커스를 받지 않아야 합니다. 대신, 상세 데이터를 보여주는 버튼이나 툴팁에 포커스를 제공하는 방식이 좋습니다.
<button type="button" aria-expanded="false" aria-controls="pie-details">
예산 상세 보기
</button>
<div id="pie-details" hidden>
<table>
<caption>부서별 예산 상세</caption>
<thead>
<tr><th>부서</th><th>비율</th><th>금액</th></tr>
</thead>
<tbody>
<tr><td>마케팅</td><td>40%</td><td>4,000만원</td></tr>
<tr><td>개발</td><td>35%</td><td>3,500만원</td></tr>
<tr><td>운영</td><td>25%</td><td>2,500만원</td></tr>
</tbody>
</table>
</div>
이렇게 하면 키보드 사용자가 Tab 키로 '예산 상세 보기' 버튼에 포커스하고, Enter 키로 상세 데이터를 확인할 수 있습니다.
본론 2: 접근성 심화 - 고대비 모드와 스크린 리더 대응
1. 고대비 모드 (Windows High Contrast Mode)
background 이미지만으로 만든 파이차트는 고대비 모드에서 모든 색상이 사라지고 데이터를 전혀 식별할 수 없게 됩니다. 이럴 때는 @media (forced-colors: active)를 사용해 대체 스타일을 제공해야 합니다.
/* 고대비 모드 대응 */
@media (forced-colors: active) {
.pie-chart {
/* 배경 이미지 제거 */
background: none;
/* 대신 테두리로 구분 */
border: 2px solid CanvasText;
}
/* 각 섹션을 별도 요소로 표시하는 방법도 고려 */
}
더 나은 방법은 clip-path를 사용해 각 섹션을 별도의 <div>로 나누는 것입니다. 이렇게 하면 고대비 모드에서도 각 섹션의 테두리가 유지됩니다.
2. 스크린 리더 최적화
앞서 HTML에서 role="img"와 aria-label을 사용했지만, 더 정확한 전달을 위해 aria-describedby로 상세 설명을 연결할 수 있습니다.
<div class="pie-chart"
role="img"
aria-label="부서별 예산 비율"
aria-describedby="pie-description">
<!-- 차트 내용 -->
</div>
<div id="pie-description" hidden>
파이차트는 세 부분으로 나뉩니다. 마케팅 40%는 빨간색, 개발 35%는 청록색, 운영 25%는 노란색입니다.
</div>
3. 국내 환경에서의 주의사항 😅
한국 웹 환경에서는 아직까지 스크린 리더 지원이 선택 사항으로 여겨지는 경우가 많습니다. 하지만 공공기관이나 대기업 프로젝트의 경우 KWCAG 2.2(한국형 웹 콘텐츠 접근성 지침)를 준수해야 하므로, 위에서 다룬 접근성 기법이 필수입니다.
특히, 차트의 데이터를 텍스트로도 제공해야 한다는 점을 잊지 마세요. 시각적 차트만으로는 모든 사용자에게 정보를 전달할 수 없습니다.
결론: 실무 적용 조언 및 마무리
CSS 파이차트는 라이브러리 의존도를 낮추고, 접근성을 높일 수 있는 훌륭한 방법입니다. 하지만 모든 상황에 적합한 것은 아닙니다.
장점
- 라이브러리 없음 (빠른 로딩)
- 간단한 데이터 표현에 적합
- CSS만으로 커스터마이징 자유로움
단점 / 한계
- 복잡한 인터랙션(호버 시 툴팁, 애니메이션 등) 구현이 어려움
- 데이터가 많아지면 유지보수가 복잡해짐
- 고대비 모드 등 특수 환경에서 추가 작업 필요
다음 단계 학습 방향
- 인터랙티브 차트가 필요하다면? → D3.js 또는 Chart.js를 학습해보세요.
- SVG 기반 차트에 관심이 있다면? → SVG
path와stroke-dasharray를 활용한 파이차트도 구현할 수 있습니다. 접근성 측면에서 더 유리할 수 있어요. - 접근성 전체 가이드 → WAI-ARIA Authoring Practices를 참고하세요.