@godpeople/gds

v2.1.1

Published

10 days ago

갓피플 디자인 시스템 (GDS)

0High
0Medium
0Low

jiyoun

godpeople design-system css tokens

Godpeople Design System (GDS)

v2.1.1 · 갓피플 콘텐츠 플랫폼 통합 디자인 시스템 Source: Style_GDS_ver2.1.fig

신앙 콘텐츠 플랫폼에 맞는 신뢰감 · 친근함 · 차분함을 표현하는 디자인 시스템입니다. 본 저장소는 디자인 토큰과 컴포넌트 스타일을 코드로 제공해, 개발자가 AI 도구와 함께 일관된 UI를 빠르게 만들 수 있도록 합니다.

📦 파일 구성

| 파일 | 용도 | 대상 | |------|------|------| | DESIGN_SYSTEM.md | 토큰·컴포넌트 사양·규칙 가이드 | 디자이너 · 개발자 · AI | | gds.css | 실행 가능한 CSS 변수 + 클래스 | 웹/앱 코드 | | tokens.json | DTCG 형식 디자인 토큰 (Tailwind, Style Dictionary 등) | 빌드 도구 | | Design System v2.1.html | 단일 레퍼런스 페이지 — Foundation · Components · Layouts · Dark Mode | 디자인 참조 |

🚀 빠른 시작

1. npm 설치

npm install @godpeople/gds

// CSS import (webpack / vite 등 번들러 환경)
import '@godpeople/gds/dist/gds.css';

2. CDN

<!-- Pretendard 폰트 (필수) -->
<link href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" rel="stylesheet">

<!-- GDS — unpkg -->
<link rel="stylesheet" href="https://unpkg.com/@godpeople/[email protected]/dist/gds.css">

<!-- GDS — jsdelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@godpeople/[email protected]/dist/gds.css">

3. CSS 직접 적용

<!-- Pretendard 폰트 (필수) -->
<link href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" rel="stylesheet">

<!-- GDS 스타일 -->
<link rel="stylesheet" href="gds.css">

<!-- 사용 예 -->
<button class="gds-btn gds-btn--lg gds-btn--primary">저장하기</button>
<button class="gds-btn gds-btn--lg" disabled>비활성</button>

<input class="gds-input" placeholder="아이디">

2. 다크 모드

<!-- 페이지 전체 -->
<html data-theme="dark">

<!-- 부분 적용 -->
<div class="gds-dark">...</div>

🎨 디자인 토큰 요약

Color

| 카테고리 | 토큰 | 비고 | |---------|------|------| | Gray Scale | --g-0 ~ --g-100 (11단계) | 본문/배경/보더 | | Brand | --p, --p-dark, --p-light, --navy | Primary #00B3EF | | Semantic | --warn, --warn-light, --success | 상태 표현 | | State | --disabled-bg, --disabled-text | 비활성 |

Typography

Head (제목): .gds-h1 ~ .gds-h6 (36px → 15px)
Body (본문): .gds-t1 ~ .gds-t5 (24px → 14px)
Font: Pretendard Variable

Spacing

--space-1 (4px) ~ --space-10 (40px) — 4px 그리드 기반

Radius

--r-sm (4px), --r (8px·기본), --r-md (12px), --r-lg (16px), --r-xl (20px), --r-full

🧩 컴포넌트 클래스 매핑

| 컴포넌트 | 베이스 클래스 | 변형 (modifier) | |---------|--------------|----------------| | Button | .gds-btn | --primary / --secondary / --outline / --warning / --warning-outline / --ghost / --disabled · 크기: --lg / --md / --sm | | Input | .gds-input | --error / --success | | Phone | .gds-phone + .gds-phone__code + .gds-phone__number | — | | OTP | .gds-otp + .gds-otp__box | — | | Date | .gds-date + .gds-date__input | --y / --m / --d | | Select | .gds-select-wrap + .gds-select + .gds-select__icon | — | | Checkbox | .gds-checkbox + .gds-checkbox__box + .gds-checkbox__label | — | | Toggle | .gds-toggle | .is-on | | Tag | .gds-tag | --dark / --primary / --outline / --free / --warn | | Tab | .gds-tabs + .gds-tab | .is-active | | Process | .gds-process + .gds-process__dot | .is-active | | Card | .gds-card | --elev-2 ~ --elev-4 |

자세한 사양과 예시는 DESIGN_SYSTEM.md 참고.

🤖 AI 도구 (Cursor, Copilot, Claude 등) 활용 가이드

새 프로젝트를 시작할 때 AI에게 다음 두 파일을 함께 전달하세요:

DESIGN_SYSTEM.md
gds.css

권장 프롬프트 템플릿

첨부한 갓피플 디자인 시스템(GDS v2.1.1)의 토큰과 규칙을 따라 UI를 작성해주세요.

준수 사항:
1. 스타일은 반드시 gds.css의 클래스(.gds-btn, .gds-input 등)와
   CSS 변수(--p, --g-0 등)만 사용하세요.
2. 새 색상/폰트 크기/spacing 값을 임의로 만들지 마세요.
   필요하면 가장 가까운 토큰을 사용하세요.
3. 한 화면에 Primary 버튼은 1개만 사용하세요.
4. 본문 line-height는 1.6 이상을 유지하세요.
5. 폼 필드는 항상 <label>과 함께 사용하세요.

작업: [여기에 구체적인 요청]

AI가 자주 실수하는 부분

| ❌ 하지 말 것 | ✅ 권장 | |--------------|--------| | style="color: #0096C7" | class="gds-btn--primary" 또는 style="color: var(--p-dark)" | | 임의의 회색 (#ccc, #999) | var(--g-60), var(--g-50) 등 토큰 사용 | | 새 폰트 사이즈 (19px) | .gds-t3 (18px) 또는 .gds-h5 (19px) 사용 | | Disabled 버튼에 opacity: 0.5 | disabled 속성만 추가 — 자동 적용됨 | | 그림자 직접 작성 | .gds-card--elev-2 또는 var(--elev-2) |

🌗 다크 모드 가이드

다크 모드는 라이트 모드의 토큰 변수를 자동으로 재정의합니다. 컴포넌트 코드 변경 없이 부모 요소에 속성만 추가하면 됩니다.

<!-- 시스템 설정 따라가기 -->
<html data-theme="auto">

<!-- 강제 다크 -->
<html data-theme="dark">

// JS로 토글
document.documentElement.setAttribute('data-theme',
  document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
);

📐 디자인 원칙

명확성 (Clarity) — 정보 위계를 명확히, 다음 행동을 직관적으로
일관성 (Consistency) — 동일 요소는 어디서나 동일하게 동작
포용성 (Inclusivity) — 다양한 사용자가 부담 없이 사용
차분함 (Calmness) — 영적 콘텐츠에 어울리는 절제된 색감과 여백

📝 변경 이력

| Version | Date | Changes | |---------|------|---------| | 2.1.1 | 2026.05.20 | Disabled 버튼 토큰 추가 (--disabled-bg, --disabled-text) — Figma 컴포넌트와 일치시킴 | | 2.1 | 2026.05 | Foundation 4종(Color/Typo/Elevation/Icon) 정식 추가, 11단계 Gray Scale, H1-H6 / T1-T5 분리 | | 2.0 | 2025.11 | 다크모드 도입, Pretendard Variable로 전면 교체 | | 1.0 | 2024.03 | 최초 디자인 시스템 공개 |

🔗 관련 자료

상세 사양 문서: DESIGN_SYSTEM.md
레퍼런스 페이지: Design System v2.1.html
Figma 원본: Style_GDS_ver2.1.fig