CSS Typed `attr()`와 커스텀 엘리먼트를 활용한 동적 차트 구현

핵심 기술

CSS의 발전된 기능인 Typed attr()와 Custom Elements를 활용하여 JavaScript 없이 순수 CSS만으로 테이블 데이터를 기반으로 다양한 종류의 동적인 차트(컬럼, 영역, 선, 파이, 도넛)를 구현하는 방법을 상세히 설명합니다.

기술적 세부사항

• 기본 구조: 접근성, 단순성, 가독성을 위해 <table> 태그를 차트 구조의 기본으로 사용합니다.
• Typed attr() 활용: --_v: attr(data-value type(<number>), 0);와 같이 data-* 속성의 값을 CSS 변수로 안전하게 가져와 연산에 활용합니다. min, max 속성도 동일하게 처리합니다.
• Custom Elements: <data-chart>와 같은 커스텀 엘리먼트를 사용하여 차트 전체를 감싸고, 반응형 디자인을 위한 컨테이너 역할을 수행하며, 사용자 정의 속성을 추가합니다.
• cqb 단위 활용: 컨테이너 높이에 비례하는 100cqb 단위를 사용하여 반응형 높이 계산을 용이하게 합니다.
• 컬럼 차트: calc() 함수와 Typed attr()를 이용해 min, max, 데이터 값을 기반으로 각 컬럼의 높이를 계산합니다.
• 영역 및 선 차트: 이전 요소의 data-prev 속성 값과 현재 값의 관계를 이용하여 clip-path의 polygon() 함수로 영역 또는 선 형태를 구현합니다. 특히 선 차트에서는 --line-chart-line-h로 선의 두께를 조절합니다.
• 파이 및 도넛 차트: conic-gradient()를 사용하여 각 섹션의 시작점(--_start)과 끝점(--_end)을 계산하고, 누적 값(--_av)과 총합(--_t)을 이용해 구현합니다. 도넛 차트는 mask 속성을 활용하여 가운데를 비웁니다.
• 그룹 차트: 테이블 행(<tr>)에 여러 <td>를 배치하고 CSS로 그룹화하여 다중 컬럼, 영역, 선 차트 등을 표현합니다.
• 반응형 디자인: 커스텀 엘리먼트에 items-sm, items-xs와 같은 속성을 추가하고 @container 쿼리를 사용하여 뷰포트 크기에 따라 표시되는 항목 수를 동적으로 제어합니다.
• 브라우저 호환성: Safari, Firefox에서는 Typed attr()가 지원되지 않아 JavaScript 폴백이 필요함을 명시합니다.

개발 임팩트

• JavaScript 라이브러리 없이 순수 CSS만으로 복잡하고 시각적으로 매력적인 차트를 구현할 수 있는 방법을 제시합니다.
• CSS의 최신 기능을 활용하여 웹사이트의 성능을 개선하고 개발 과정을 간소화할 수 있습니다.
• CSS의 유연성을 통해 다양한 디자인 요구사항과 반응형 디자인을 쉽게 적용할 수 있습니다.

커뮤니티 반응

• Typed attr() 및 Custom Elements의 새로운 활용 사례를 보여주며, CSS 커뮤니티에서 주목받을 만한 기술적 시도입니다.
• 특히 conic-gradient와 clip-path를 활용한 복잡한 시각화 기법은 많은 개발자에게 영감을 줄 수 있습니다.