JavaScript 없이 트레이딩 대시보드 UI 만들기 — 단지 st-core.fscss

I’m happy to translate the article for you, but I’ll need the full text you’d like translated. Could you please paste the content (excluding the source line you already provided) here? Once I have the article text, I’ll translate it into Korean while preserving the original formatting, markdown, and code blocks.

대시보드 UI의 문제점

통계 대시보드가 필요할 때마다 — 차트, 막대, 통계 카드 등 전체를 만들 때마다 같은 보일러플레이트를 작성하게 됩니다: CSS 변수, clip‑path 폴리곤, 카드 레이아웃. 어렵지는 않지만 반복적입니다. 여러 프로젝트에서 작업하면서 매번 그 기반을 복사‑붙여넣는 것은 금방 지칩니다.

그래서 패키징했습니다.

st‑core.fscss 은 FSCSS 용 오픈소스 플러그인으로, 한 번의 임포트로 완전한 트레이딩/통계 대시보드 디자인 시스템을 제공합니다. MIT 라이선스이며, FSCSS 런타임이나 CLI 외에 다른 의존성이 없습니다.

얻을 수 있는 것

@st‑* 믹스인 전체 세트로, 각각은 프로덕션 준비가 된 컴포넌트를 생성합니다:

차트 작동 방식 — 순수 CSS, JS 없음

차트는 clip-path: polygon() 형태입니다.

@st-chart-points에 8개의 Y 값을 전달하면, 이 값들이 CSS 커스텀 프로퍼티(--st-p1부터 --st-p8까지)로 차트 컨테이너에 기록됩니다. 내부의 fill 및 line 요소는 이 값을 읽어 자신을 해당 형태로 클립합니다.

.chart {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--st-surface);

  /* 8개의 데이터 포인트 */
  @st-chart-points(20, 35, 33, 30, 48, 35, 66, 37);
}

“라인”은 앞쪽 가장자리와 뒤쪽 가장자리 두 줄의 포인트로 구성된 얇은 채워진 폴리곤이며, --st-chart-line-width에 의해 구분됩니다. 너비를 변경하면 라인이 자동으로 다시 그려집니다.

.chart-line {
  @st-chart-line-width(2px);
}

그게 전부입니다. JavaScript가 필요 없고, SVG 경로 계산도 없습니다.

최소 전체 예시 (런타임 사용 데모)

@import((*) from st-core);

/* ================= INIT ================= */
@st-root();
@st-container(body);

/* ================= COMPONENTS ================= */
@st-chart-fill(.chart-fill);
@st-chart-line(.chart-line);
@st-chart-dot(.chart-dot, 70, 60);

/* ================= CHART ================= */
.chart {
  width: 100%;
  height: 200px;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  background: var(--st-surface);

  /* DATA (main power) */
  @st-chart-points(20, 25, 21, 37, 30, 60, 27, 50);
}
@st-phone(.wrapper);

/* ================= LINE ================= */
.chart-line {
  /* controlled via helper */
  @st-chart-line-width(2px);

  /* optional override */
  filter: drop-shadow(0 0 8px var(--st-accent));
}

/* ================= FILL ================= */
.chart-fill {
  /* enhance fill visibility */
  opacity: .85;
}

/* ================= DOT ================= */
.chart-dot {
  position: relative;
  overflow: visible;

  /* local customization */
  --st-accent: #c4a8ff; /* overrides root accent just for dot */
}

/* tooltip */
.chart-dot:after {
  content: attr(data-point);
  background: var(--st-accent);
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  border-radius: var(--st-radius-sm);
  position: absolute;
  top: -40px;
  left: -22px;
  white-space: nowrap;
}

/* arrow */
.chart-dot:before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--st-accent);
  transform: rotate(45deg);
  position: absolute;
  top: -18px;
  left: 2px;
}

/* ================= EXTRA (USING st‑core IDEA) ================= */
@st-stat-card(.stat-card);
@st-chart-axis-x(.x-axis);
@st-chart-axis-y(.y-axis);
@st-chart-grid(.chart-grid, 10, 7);

<!-- Example markup for a stat card and axis labels -->
<div class="stat-card">
  <h3>TOTAL EXPENSES</h3>
  <p>$1,326.03</p>
  <small>+5.1% vs last week</small>
</div>

<div class="chart-grid">
  <span>0</span> <span>10</span> <span>20</span> <span>30</span>
  <span>40</span> <span>50</span> <span>60</span> <span>70</span>
  <span>80</span> <span>90</span> <span>100</span>
</div>

<div class="x-axis">
  <span>Sun</span> <span>Mon</span> <span>Tue</span> <span>Wed</span>
  <span>Thu</span> <span>Fri</span> <span>Sat</span> <span>Sun</span>
</div>

전체 차트와 통계 카드, 축 레이블이 포함된 예시입니다. 이것이 전체 CSS이며, 사용자 정의 다각형 수학이나 JavaScript 데이터 바인딩이 전혀 필요하지 않습니다.

Token overrides — it’s just CSS variables

모든 색상, 간격, 그리고 반경은 CSS 사용자 정의 속성입니다. 로컬에서 원하는 속성을 오버라이드하면 — 일반적인 CSS cascade 방식대로 적용됩니다.

/* global theme tweak */
:root {
  --st-accent: #00d4ff;
  --st-bg: #0a0f1e;
}

/* local override — just for the dot */
.chart-dot {
  --st-accent: var(--st-accent-2);
}

같은 페이지에 차트가 여러 개 있나요? 각 컨테이너는 자체 --st-p1 – --st-p8을 가지고 있어 완전히 독립적입니다.

카테고리 바

@st-cat-bar-fill 믹스인은 그라데이션 진행 바를 만듭니다. 요소별로 CSS 변수(--st-fill)를 사용해 채우기 값을 지정하면, 믹스인을 선언한 뒤 추가 매개변수가 필요 없습니다.

@st-cat-bar-fill(.bar-fill, 0);

/* 바별 너비 */
.equit { /* …your styles… */ }

(자신만의 바 요소를 추가하고 각 요소에 --st-fill을 설정하여 진행률을 제어하세요.)

.equities { --st-cat-bar-fill-range: 82%; }
.crypto   { --st-cat-bar-fill-range: 61%; }
.forex    { --st-cat-bar-fill-range: 45%; }

전체 화면 모드 진입
전체 화면 모드 종료

<!-- 전체 화면 제어용 자리표시자 -->

전체 화면 모드 진입
전체 화면 모드 종료

실제로 보기

전체 데모에는 통계 카드, 채우기 + 선 + 점 + 그리드 + 축이 포함된 차트, 카테고리 바, 그리고 전화기 프레임이 포함되어 있으며, 모두 @st-* 믹스인으로 구동됩니다. 커스텀 CSS는 믹스인 호출 외에는 필요하지 않습니다.

Why FSCSS?

FSCSS는 가볍고 현대적인 CSS 전처리기입니다.

FSCSS에 익숙하지 않다면, docs가 좋은 시작점이 될 것입니다.

유용하다면 저장소에 ⭐를 남겨 주세요, 그리고 자유롭게 이슈나 PR을 열어 주세요 — MIT 라이선스이니 마음껏 활용하세요.