DESIGN STANDARD
디자인 표준 가이드
Nanoplanc 전체 제품에 적용되는 디자인 토큰과 원칙입니다. 모든 UI는 이 표준을 기준으로 설계하고, 예외가 필요하면 이 문서를 먼저 업데이트합니다.
1. 색상 토큰
주색 1개 + 보조색 1개 + 경고색 1개. 추가 금지.
브랜드 (Brand)
주색 — 기본 액센트
--color-accent
#2f63ff
호버 액센트
--color-accent-hover
#1f54ef
소프트 액센트
--color-accent-soft
#8fb2ff
시맨틱 (Semantic)
보조색 — 성공/긍정
--color-success
#25b79b
경고색 — 주의
--color-warning
#f0b95d
텍스트 (Text)
기본 텍스트
--color-text
#f5f7fb
보조 텍스트
--color-text-secondary
#c5d0dc
약한 텍스트
--color-text-dim
#8fa0b2
가장 약한 텍스트
--color-text-faint
#63778d
배경 & 보더 (Surface & Border)
캔버스 배경
--color-bg
#07111d
상승 배경
--color-bg-elevated
#0b1726
패널 기본
--color-surface
rgba(11,22,37,0.88)
패널 소프트
--color-surface-soft
rgba(15,28,45,0.82)
기본 보더
--color-border
rgba(143,170,198,0.16)
강한 보더
--color-border-strong
rgba(191,216,239,0.28)
2. 타이포그래피 — 10단계 스케일
Display Font
Space Grotesk
--font-display
Body Font
SUIT Variable
--font-sans
| 토큰 | 크기 | 두께 | 행간 | 자간 | 용도 |
|---|---|---|---|---|---|
| --text-hero | 36px (2.25rem) | 700 | 1.1 | -0.04em | 페이지 히어로 제목 (h1) — 페이지당 1개 |
| --text-display-lg | 24px (1.5rem) | 700 | 1.15 | -0.03em | 섹션 제목 (h2) — 큰 섹션 구분 |
| --text-heading-lg | 20px (1.25rem) | 700 | 1.2 | -0.02em | 강조 수치, 제품명 |
| --text-heading-md | 18px (1.125rem) | 700 | 1.25 | -0.02em | 중형 카드 제목 |
| --text-heading | 16px (1rem) | 600 | 1.3 | -0.01em | 카드 내부 대제목, 데이터 블록 |
| --text-subheading | 14px (0.875rem) | 600 | 1.4 | normal | 카드 서브제목, 라벨 제목 |
| --text-body-lg | 16px (1rem) | 400 | 1.6 | normal | 히어로/섹션 리드 본문 |
| --text-body | 14px (0.875rem) | 400 | 1.6 | normal | 콘솔 기본 본문 (Data density) |
| --text-small | 13px (0.8125rem) | 400 | 1.5 | normal | 보조 설명, 부가 텍스트 |
| --text-caption | 12px (0.75rem) | 600 | 1.4 | 0.04em | 라벨, eyebrow, 뱃지 |
📐 제목 계층 사용 규칙
페이지 제목 (h1)
--text-hero 사용. 페이지당 반드시 1개. 전폭(full-width) 배치. 그리드 셀 안에 넣지 않는다.
섹션 제목 (h2)
--text-display-lg 사용. 각 섹션의 주제를 한 문장(키워드)으로. h1보다 반드시 작아야 한다.
카드/패널 제목 (h3)
--text-heading 또는 --text-subheading 사용. h2보다 반드시 작아야 한다. 카드 안에서만 사용.
강조 수치
--text-heading-lg + --font-display. 숫자 강조 시 사용. 충분한 공간(패딩)이 확보된 카드 안에서만.
본문
히어로/섹션 본문은 --text-body-lg, 일반 본문은 --text-body, 보조 설명은 --text-small.
⚠️ 금지 규칙
- • 이 10단계 외의 폰트 크기를 사용하지 않습니다. 새로운 크기가 필요하면 이 표준을 먼저 수정합니다.
- • 제목에 하드코딩 px/rem 값을 직접 쓰지 않습니다. 반드시
var(--text-*)토큰을 사용합니다. - • h1 제목을 그리드 셀(50% 이하 너비) 안에 넣지 않습니다. 시각적 임팩트가 사라집니다.
- • 같은 페이지에서 h1과 h2가 같은 토큰을 쓰지 않습니다. 계층이 무너집니다.
3. 간격 시스템 — 4px 기준
간격 스케일
보더 반경
--radius-sm
12px — 칩, 배지, 작은 요소
--radius-md
20px — 내부 카드, 입력란
--radius-lg
28px — 주요 카드, 패널
--radius-xl
36px — 최상위 패널, 히어로
4. 그리드 레이아웃 — 3종
이 3가지 비율 외에는 사용하지 않습니다. 컨테이너 max-width: 1360px.
동등 비교, 듀오 카드
사이드 설명 + 메인 콘텐츠
메인 카피 + 사이드 CTA
5. 버튼 — 2종만 사용
| 클래스 | 용도 | 규칙 |
|---|---|---|
| .primary-button | 주요 CTA | 배경 accent, 흰 텍스트. 페이지당 1~2개 |
| .secondary-button | 보조 CTA | 보더만. Primary 옆이나 하단에 배치 |
6. 패널 — 2종만 사용
.panel-surface
기본 패널
backdrop-filter, 그라데이션, box-shadow 포함. 주요 섹션 래퍼.
.panel-surface-soft
소프트 패널
약한 배경. 내부 카드, 보조 영역에 사용.
7. 그라데이션 텍스트
.grad-text
검증된 제품이 있습니다
linear-gradient(135deg, #8fb2ff 0%, #2f63ff 38%, #25b79b 100%)
PRINCIPLES
디자인 원칙
8. 시각 요소
48%의 사용자가 비즈니스 신뢰성을 웹사이트 디자인으로 판단합니다.
텍스트만으로 채우지 않기
모든 섹션에 최소 1개의 시각 요소(아이콘, 스크린샷, 숫자 강조, 다이어그램) 포함
색상은 절제
주색(blue) + 보조색(green) + 경고색(amber). 3개 초과 금지
보색으로 시선 집중
CTA 버튼과 배경의 대비를 높여 핵심 행동을 유도
콘텐츠 = 디자인
카피와 시각 요소가 같은 메시지를 전달. 분리되면 안 됨
9. CTA 원칙
| 원칙 | 설명 |
|---|---|
| 눈에 띄어야 한다 | 배경과 확실한 대비, 충분한 크기 (최소 높이 44px) |
| 명확해야 한다 | "클릭하면 무엇이 일어나는지" 텍스트로 설명 |
| 전략적 배치 | 스크롤 흐름에서 자연스럽게 나타나는 위치에 |
| 일관된 스타일 | 사이트 전체에서 Primary/Secondary 2종만 사용 |
10. 모바일 규격
| 항목 | 규격 |
|---|---|
| 터치 타깃 | 최소 44×44px |
| 폰트 최소 크기 | 16px (모바일 본문) |
| 메뉴 | 햄버거 메뉴, 3레벨 이하 |
| 폴드 위 콘텐츠 | 핵심 메시지 + CTA 1개 |
| 이미지 | WebP 포맷, lazy loading 필수 |
11. 일관성 원칙
일관성 있는 디자인은 성공적인 웹사이트를 만들기 위한 가장 중요한 요소입니다.
| 규칙 | 표준 |
|---|---|
| 같은 역할 → 같은 크기 | 카드 타이틀은 --text-subheading (1.25rem) 하나만 |
| 같은 역할 → 같은 간격 | 카드 패딩은 --space-lg (24px) 하나만 |
| 같은 역할 → 같은 라운드 | 카드 반경은 --radius-lg (28px) 하나만 |
| 같은 역할 → 같은 비율 | 그리드는 equal / aside / wide 3종만 |
12. 헤드라인 원칙
제목은 키워드다. 설명은 서브헤드에서 한다.
제목 = 키워드 2~5단어
display/heading 크기 텍스트는 핵심 키워드만. 문장(~합니다) 금지
설명문 = 서브헤드
문장형 제목은 subheading 크기의 서브헤드로 이동
크기 ≠ 강조
큰 폰트일수록 단어 수를 줄인다. 긴 문장은 '큰 설명문'이 됨
스캔 가능성
제목만 훑어도 페이지 구조를 파악할 수 있어야 함
| 크기 | 최대 글자 수 | 예시 |
|---|---|---|
| display (3rem+) | 10자 이내 | 트레이딩 운용 콘솔 |
| heading (2rem) | 15자 이내 | 운영 제품군 |
| subheading (1.25rem) | 30자 이내 | 설명 문장 배치 가능 |