> ## Content Index
> Fetch the complete content index at: https://kr.vizney.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Chalk — 다크 사이드바와 파스텔 KPI 카드의 대시보드 스타일
- URL: https://kr.vizney.com/style-chalk/
- Published: 2026-10-21T12:58:43.000Z
- Updated: 2026-10-21T13:04:53.000Z
- Description: 짙은 칠판색 사이드바 위에 파스텔 KPI 카드를 올린 대시보드 스타일입니다. 가상 온라인몰 주문 데이터로 만든 샘플을 직접 조작해 볼 수 있습니다.
- Author: 황예환
- Tags: Styles, Gallery

Chalk는 짙은 칠판색 사이드바 위에 파스텔 분필색 KPI 카드를 올린 대시보드 스타일입니다. 아래 샘플은 가상 온라인몰의 최근 30일 주문 데이터로 만들었고, 채널 탭을 바꾸면 KPI와 두 차트가 함께 바뀝니다. HTML 파일 하나로 브라우저에서 바로 동작합니다.

[전체 화면으로 보기 ↗](https://styles.vizney.com/chalk/?lang=ko&ref=kr.vizney.com)

### Design

- **색은 카드 배경에만:** 파스텔은 KPI 카드 배경에만 쓰고, 숫자와 차트는 그보다 짙은 색으로 두어 데이터가 먼저 읽히게 했습니다. 차트 색은 색각 이상이 있어도 구분되는지 검증한 조합입니다.
- **증감 색은 좋고 나쁨 기준:** 화살표 색은 값이 움직인 방향이 아니라 그 변화가 좋은지로 정했습니다. 취소·반품률은 내려가야 좋은 지표라 하락을 초록으로 표시합니다.
- **평일과 주말을 한 축에:** 시간대별 주문은 평일(실선)과 주말(점선)을 겹쳐 피크 시간의 차이를 보여 주고, 처음에는 주문이 가장 많은 시간대에 초점을 둡니다. 라이브커머스 탭을 고르면 방송 시간대에 주문이 몰리는 모습을 볼 수 있습니다.
- **구성비는 세 가지 색까지:** 카테고리 비중은 게이지형 도넛으로 보여 주고, 색은 세 가지까지만 쓰며 나머지는 회색 '기타'로 묶습니다.

---

### Prompt

Chalk의 레이아웃, 색, 글꼴, 카드와 차트 표현은 [스타일 명세](https://styles.vizney.com/chalk/style.html?ref=kr.vizney.com)에 정리해 두었습니다. 명세 주소와 함께 요청하면 다른 데이터로도 같은 스타일의 대시보드를 만들 수 있습니다.

```
첨부한 데이터로 HTML 파일 하나짜리 대시보드를 만들어 줘.
스타일은 Chalk로 하고, 아래 명세의 레이아웃·색·글꼴·카드와 차트 표현을 그대로 따라 줘.
지표와 차트 구성은 데이터에 맞게 정해 줘.
https://styles.vizney.com/chalk/style.html
```

이 스타일로 대시보드 제작이 필요하면 [문의](https://kr.vizney.com/contact-us/)를 남겨 주세요.