자바스크립트 없이 그리는 CSS 파이 차트
파이 차트를 자바스크립트 없이 순수 CSS로 그릴 수 있을까? CSS-Tricks가 2026년 6월 4일 공개한 Antoine Villepreux의 글은 이 오래된 질문에 새 답을 내놓는다. conic-gradient로 원형을 칠하는 건 쉽지만, 각 조각의 '시작 각도'를 정하려면 앞선 조각들의 누적 퍼센트가 필요하다. 문제는 CSS에서 형제(sibling) 요소가 서로의 상태를 알 수 없다는 점이다. 저자는 이 근본 제약을 정면으로 다시 붙든다.
"I returned to the core issue: because of how CSS inheritance works, children cannot know the state of their siblings."Antoine Villepreux, CSS-Tricks
무슨 일인가
해법은 데이터를 자식이 아니라 부모 <ul>로 끌어올리는 것이다. 각 조각의 퍼센트를 부모의 data 속성에 인덱스로 담아 두고, attr() 함수로 읽어 nth-child()로 해당 조각에 분배한다. 그런 다음 calc()로 앞선 값들을 차곡차곡 더해 '시작 각도(--accum)'를 만든다. 부모는 모든 자식을 알기에, 형제끼리 공유하지 못하던 누적 계산을 부모가 대신 떠맡는 구조다. 저자는 곧 Baseline에 오를 sibling-index()·sibling-count()가 이 번거로운 우회를 통째로 없앨 것이라 본다.
여러 시각
같은 문제를 다른 각도에서 보면 한계와 맥락이 분명해진다.
- CSS-Tricks(이전 시도) — '완벽한 CSS 파이 차트'를 향한 초기 도전은 자바스크립트로 누적값을 계산해 채워 넣었다. 이번 글은 그 JS 의존을 걷어내고 같은 결과를 CSS만으로 재현했다는 점에서 진화다.
- MDN(conic-gradient) — 접근성의 관점. conic-gradient로 그린 차트는 결국 '이미지'라 대체 텍스트를 줄 수 없어 스크린리더에는 보이지 않는다. 시각화의 의미는 별도 마크업(표·텍스트)으로 반드시 보강해야 한다고 짚는다.
왜 중요한가
이 사례는 CSS가 점점 '계산'을 흡수하는 큰 흐름을 보여준다. 예전엔 자바스크립트가 맡던 누적·인덱스 계산이 attr()·calc()로, 그리고 곧 sibling-index()로 네이티브에 들어온다. JS 의존이 줄면 번들이 가벼워지고 렌더링도 브라우저 최적화 경로를 탄다. 다만 영리한 우회일수록 코드의 의도가 가려지기 쉬워, '왜 이렇게 썼는지'를 설명할 수 있어야 유지보수가 산다.
실무 적용
- 간단한 비율 시각화는 라이브러리 대신 conic-gradient + CSS 변수로 구현해 번들과 의존성을 줄인다.
- CSS-only 차트는 스크린리더에 안 보이므로, 데이터를
<table>이나 visually-hidden 텍스트로 함께 제공해 접근성을 보강한다. - sibling-index()·sibling-count() 지원 현황을 점검해, 가능해지면 인덱스별 변수 나열 같은 보일러플레이트를 걷어낸다.
Kenny의 관점
프론트엔드 관점에서 이 글의 진짜 교훈은 '기교'가 아니라 '경계 감각'이다. CSS로 못 하던 일이 매년 가능해지지만, 가능하다고 다 옳은 선택은 아니다. 나는 작은 도넛·게이지처럼 정적인 비율 표시는 CSS로 내리고, 인터랙션·툴팁·동적 갱신이 필요하면 그때 JS를 얹는다. 그리고 화면에 무엇을 그리든 '스크린리더에는 어떻게 들리나'를 먼저 묻는다. 예뻐 보이는 차트보다, 꺼졌을 때도 데이터가 전달되는 차트가 맞다.
출처
이 글은 아래 원문을 바탕으로 Kenny가 한국어로 요약·정리한 큐레이션입니다.
원문 보기 — CSS-Tricks ↗