콘텐츠로 이동

디자인 시스템

DataSketchers 디자인 시스템은 토큰(Token) 기반으로 브랜드 일관성을 보장합니다. 색상, 타이포그래피, 라운딩, 그림자, 간격을 토큰으로 정의하고 모든 제품(D-SKET, 위키, 마케팅 사이트)이 같은 값을 공유합니다.

색상 토큰

브랜드는 따뜻한 브랜드 옐로와 중성적인 오프화이트를 기본으로 합니다.

토큰 값 용도
--brand-yellow #FFD21D 브랜드 포인트, 강조
--neutral-offwhite #FBFAF6 페이지 배경
--text-primary #1F1B16 본문/제목 (진한 브라운)
--text-secondary #4A453C 보조 텍스트
--bg-subtle #F7F7F5 카드/구분 배경

기준 대비율: 본문은 최소 WCAG AA(4.5:1) 을 확보하도록 #1F1B16 를 오프화이트(#FBFAF6) 배경 위에 사용합니다.

타이포그래피 & 폰트

  • Pretendard : 본문/UI 기본 한글 산세리프 폰트
  • IBM Plex Mono : 코드, 수치, 식별자용 모노스페이스 폰트
역할 폰트 예시
본문/UI Pretendard 데이터스케쳐스
코드/식별자 IBM Plex Mono D-SKET / 0xFF

폰트 폴백

오프라인/느린 네트워크를 대비해 Pretendard → system-ui 순으로 폴백을 지정하세요. 위키는 특히 로딩 지연을 피해야 합니다.

라운딩 & 그림자

  • 라운딩: 컴포넌트 기본 rounded-2xl (14px)로 부드러운 카드 느낌
  • 그림자: 낮은 고도용 shadow-sm ~ 모달용 shadow-lg
tokens.css
:root {
  /* 색상 */
  --brand-yellow:    #FFD21D;
  --neutral-offwhite: #FBFAF6;
  --text-primary:    #1F1B16;
  --text-secondary:  #4A453C;
  --bg-subtle:       #F7F7F5;

  /* 라운딩 */
  --radius-card: 14px;        /* rounded-2xl */

  /* 간격 (8pt 그리드) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
}

반응형 그리드

콘텐츠는 모바일부터 데스크톱까지 유연하게 배치됩니다. 대표 브레이크포인트:

브레이크포인트 너비 그리드 컬럼
모바일 < 768px 4
태블릿 768px – 1024px 8
데스크톱 > 1024px 12
  • 컨테이너 최대폭: 1200px, 좌우 여백 --space-2
  • 그리드 간격: 24px (컬럼 갭)
  • 콘텐츠는 항상 12 컬럼 기준으로 설계

접근성

  • 본문/보조 텍스트 대비 WCAG AA 충족
  • 키보드 포커스 표시 보존 (:focus-visible)
  • 의미 있는 HTML 시맨틱 태그 사용 (<nav>, <main>, <footer>)
  • 감성적 색상(빨강·초록)에만 의존하지 않도록 아이콘/텍스트 병행

접근성 회귀 방지

색상 토큰 변경 후에는 대비율을 다시 측정하세요. #4A453C 보조 텍스트는 작은 글씨에서 대비가 부족할 수 있으므로 콘텐츠 용도에 맞춰 크기를 조정합니다.

토큰 사용 표준

  1. 하드코딩된 색상 값은 금지 — 반드시 CSS 변수/토큰 참조
  2. 라운딩은 --radius-card 등 토큰만 사용
  3. 새 제품 시작 시 이전에 정의된 토큰 재사용
  4. 모노스페이스가 필요한 식별자는 IBM Plex Mono 적용

디자인 토큰의 목적

토큰은 단일 진실 공급원(single source of truth) 입니다. 테마 변경 시 변수 값만 바꾸면 전체 UI가 일관되게 바뀝니다. 하드코딩 값은 브랜드 무결성을 깨뜨리므로 피하세요.