JS 없이 CSS만으로 구현한 고성능 트레이딩 대시보드 설계

Context

통계 대시보드 구현 시 반복되는 CSS 변수 및 clip-path 설정의 보일러플레이트 문제 발생. 여러 프로젝트 간 기초 설계 복사 및 붙여넣기로 인한 개발 효율성 저하.

Technical Solution

• FSCSS 기반의 오픈소스 플러그인 st-core.fscss를 통한 단일 import 디자인 시스템 구축
• JavaScript, SVG, Canvas 없이 CSS custom properties와 clip-path: polygon() 조합으로 차트 렌더링 구현
• 8개의 데이터 포인트(--st-p1 ~ --st-p8)를 CSS 변수로 전달하여 런타임에 폴리곤 형태를 결정하는 구조
• 선(Line) 표현을 위해 전면과 후면 두 줄의 포인트 좌표를 생성하고 --st-chart-line-width 변수로 두께를 조절하는 방식
• 모든 디자인 토큰(색상, 간격, 곡률)을 CSS 변수화하여 상속 구조를 통한 유연한 테마 오버라이드 지원
• @st-cat-bar-fill 믹스인을 활용하여 추가 파라미터 없이 CSS 변수만으로 제어하는 그라데이션 프로그레스 바 설계

Key Takeaway

복잡한 시각화 요소를 단순한 데이터 바인딩 수준으로 처리할 경우, 무거운 JS 라이브러리 대신 CSS 기본 기능과 전처리기를 활용한 선언적 설계가 렌더링 비용과 코드 복잡도를 획기적으로 낮춤.