open-design/design-systems/figma/DESIGN-ko.md

# Figma에서 영감받은 디자인 시스템

> Category: 디자인 & 크리에이티브
> 협업 디자인 도구. 선명한 다색상, 장난기 있으면서도 전문적인.

## 1. 비주얼 테마 & 분위기

Figma의 인터페이스는 스스로를 디자인한 디자인 도구입니다 — 커스텀 가변 폰트(figmaSans)가 극세(weight 320)에서 볼드(weight 700) 사이를 조율하되, 대부분의 타이포그래피 시스템이 결코 탐색하지 않는 특이한 중간 값(330, 340, 450, 480, 540)에 정류하는, 타이포그래피 정교함의 교과서적 사례입니다. 이 세밀한 굵기 제어 덕분에 모든 텍스트 요소는 정밀하게 조율된 시각적 무게를 지니며, "레귤러 대 볼드"라는 단순한 도구 대신 미세한 차이를 통해 위계를 만들어냅니다.

이 페이지는 흥미로운 이중성을 드러냅니다. 인터페이스 크롬은 엄격하게 흑백(감지된 색상이 문자 그대로 `#000000`과 `#ffffff`뿐)인 반면, 히어로 섹션과 제품 쇼케이스는 선명한 다색 그라디언트 — 일렉트릭 그린, 밝은 노랑, 짙은 보라, 핫 핑크 — 로 폭발합니다. 이 분리는 디자인 시스템 자체가 무색임을 의미하며, 제품의 화려한 결과물을 히어로 콘텐츠로 대우합니다. Figma의 마케팅 페이지는 본질적으로 화려한 예술 작품을 전시하는 흰 갤러리 벽입니다.

가변 폰트 너머에서 Figma를 돋보이게 하는 것은 원형과 필(pill) 형태의 기하학입니다. 버튼은 50px 반경(필) 또는 50%(아이콘 버튼용 완전한 원형)을 사용하여 유기적인 툴 팔레트 같은 느낌을 만들어냅니다. 점선 아웃라인 포커스 표시(`dashed 2px`)는 Figma 에디터의 선택 핸들을 연상시키는 의도적인 디자인 선택입니다 — 웹사이트의 UI 언어가 제품의 UI 언어를 참조하는 것입니다.

**주요 특성:**
- 특이한 굵기 정류점을 가진 커스텀 가변 폰트(figmaSans): 320, 330, 340, 450, 480, 540, 700
- 엄격하게 흑백인 인터페이스 크롬 — 색상은 제품 콘텐츠에만 존재
- 넓은 자간과 대문자 기술 레이블을 위한 figmaMono
- 필(50px) 및 원형(50%) 버튼 기하학
- Figma 에디터 선택 핸들을 반영한 점선 포커스 아웃라인
- 선명한 다색 히어로 그라디언트 (그린, 옐로우, 퍼플, 핑크)
- 전역적으로 활성화된 OpenType `"kern"` 기능
- 전반에 걸친 음수 자간 — 본문 텍스트조차 -0.14px에서 -0.26px

## 2. 색상 팔레트 & 역할

### Primary
- **순수 검정** (`#000000`): 모든 텍스트, 모든 솔리드 버튼, 모든 테두리. 인터페이스의 유일한 "색상".
- **순수 흰색** (`#ffffff`): 모든 배경, 흰색 버튼, 어두운 표면 위의 텍스트. 이진법의 나머지 절반.

*참고: Figma의 마케팅 사이트는 인터페이스 레이어에 오직 이 두 가지 색상만 사용합니다. 모든 선명한 색상은 제품 스크린샷, 히어로 그라디언트, 임베드 콘텐츠에만 나타납니다.*

### Surface & Background
- **순수 흰색** (`#ffffff`): 기본 페이지 배경 및 카드 표면.
- **글래스 블랙** (`rgba(0, 0, 0, 0.08)`): 보조 원형 버튼 및 유리 효과를 위한 미묘한 어두운 오버레이.
- **글래스 화이트** (`rgba(255, 255, 255, 0.16)`): 어둡거나 컬러풀한 표면 위의 버튼을 위한 서리 낀 유리 오버레이.

### Gradient System
- **히어로 그라디언트**: 일렉트릭 그린, 밝은 노랑, 짙은 보라, 핫 핑크를 사용한 선명한 다중 정류 그라디언트. 이 그라디언트는 히어로 섹션의 시각적 시그니처입니다 — 도구의 창의적 가능성을 표현합니다.
- **제품 섹션 그라디언트**: 개별 제품 영역(디자인, 개발자 모드, 프로토타이핑)은 쇼케이스에서 각기 다른 색상 테마를 사용할 수 있습니다.

## 3. 타이포그래피 규칙

### Font Family
- **Primary**: `figmaSans`, 폴백: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
- **Monospace / Labels**: `figmaMono`, 폴백: `figmaMono Fallback, SF Mono, menlo`

### 위계

| 역할 | 폰트 | 크기 | 굵기 | 줄 높이 | 자간 | 비고 |
|------|------|------|--------|-------------|----------------|-------|
| 디스플레이 / 히어로 | figmaSans | 86px (5.38rem) | 400 | 1.00 (타이트) | -1.72px | 최대 임팩트, 극도의 자간 |
| 섹션 제목 | figmaSans | 64px (4rem) | 400 | 1.10 (타이트) | -0.96px | 기능 섹션 타이틀 |
| 소제목 | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | 강조된 섹션 텍스트 |
| 소제목 라이트 | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | 가벼운 섹션 텍스트 |
| 기능 타이틀 | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | 볼드 카드 제목 |
| 본문 대 | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px to -0.14px | 설명, 인트로 |
| 본문 / 버튼 | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px to normal | 표준 본문, 내비게이션, 버튼 |
| 본문 라이트 | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px to normal | 가벼운 본문 텍스트 |
| 모노 레이블 | figmaMono | 18px (1.13rem) | 400 | 1.30 (타이트) | 0.54px | 대문자 섹션 레이블 |
| 모노 소형 | figmaMono | 12px (0.75rem) | 400 | 1.00 (타이트) | 0.6px | 대문자 소형 태그 |

### 원칙
- **가변 폰트 정밀도**: figmaSans는 대부분의 시스템이 결코 사용하지 않는 굵기를 씁니다 — 320, 330, 340, 450, 480, 540. 이는 극적인 도약 대신 미묘한 굵기 차이를 통해 위계를 만들어냅니다. 330과 340의 차이는 거의 감지하기 어렵지만 구조적으로 의미 있습니다.
- **라이트를 기본으로**: 대부분의 본문 텍스트는 320–340(일반적인 400 "레귤러"보다 가벼운)을 사용하여, 디자인 도구 미학과 어울리는 에테르 같고 공기처럼 가벼운 읽기 경험을 만들어냅니다.
- **어디서나 커닝**: 모든 텍스트 요소는 OpenType `"kern"` 기능을 활성화합니다 — 커닝은 선택 사항이 아니라 구조적입니다.
- **기본값으로 음수 자간**: 본문 텍스트도 -0.1px에서 -0.26px 자간을 사용하여, 전반적으로 타이트한 텍스트를 만듭니다. 디스플레이 텍스트는 -0.96px와 -1.72px로 더욱 압축됩니다.
- **구조를 위한 모노**: 양수 자간(0.54px–0.6px)과 함께 대문자로 사용한 figmaMono는 기술적 이정표 레이블을 만듭니다.

## 4. 컴포넌트 스타일링

### 버튼

**블랙 솔리드 (필)**
- Background: 순수 검정 (`#000000`)
- 텍스트: 순수 흰색 (`#ffffff`)
- Radius: 아이콘 버튼에는 원형 (50%)
- Focus: dashed 2px outline
- 최대 강조

**화이트 필**
- Background: 순수 흰색 (`#ffffff`)
- 텍스트: 순수 검정 (`#000000`)
- Padding: 8px 18px 10px (비대칭 수직)
- Radius: pill (50px)
- Focus: dashed 2px outline
- 어둡거나 컬러풀한 표면 위의 표준 CTA

**글래스 다크**
- Background: `rgba(0, 0, 0, 0.08)` (미묘한 어두운 오버레이)
- 텍스트: 순수 검정
- Radius: 원형 (50%)
- Focus: dashed 2px outline
- 밝은 표면 위의 보조 액션

**글래스 라이트**
- Background: `rgba(255, 255, 255, 0.16)` (서리 낀 유리)
- 텍스트: 순수 흰색
- Radius: 원형 (50%)
- Focus: dashed 2px outline
- 어둡거나 컬러풀한 표면 위의 보조 액션

### 카드 & 컨테이너
- Background: 순수 흰색
- Border: 없음 또는 최소화
- Radius: 6px (소형 컨테이너), 8px (이미지, 카드, 다이얼로그)
- Shadow: 미묘한 수준에서 중간 수준의 고도 효과
- 카드 콘텐츠로서의 제품 스크린샷

### 내비게이션
- 흰 배경 위의 깔끔한 수평 내비게이션
- 로고: 검정의 Figma 워드마크
- 제품 탭: 필 형태 (50px) 탭 내비게이션
- 링크: 검정 텍스트, 1px 언더라인 장식
- CTA: 블랙 필 버튼
- Hover: CSS 변수를 통한 텍스트 색상

### 특이 컴포넌트

**제품 탭 바**
- 수평 필 형태 탭 (50px 반경)
- 각 탭은 Figma 제품 영역(디자인, 개발자 모드, 프로토타이핑 등)을 표현
- 활성 탭 강조 표시

**히어로 그라디언트 섹션**
- 전체 너비의 선명한 다색 그라디언트 배경
- 86px 디스플레이 제목이 포함된 흰색 텍스트 오버레이
- 그라디언트 안에 떠 있는 제품 스크린샷

**점선 포커스 표시**
- 모든 인터랙티브 요소는 포커스 시 `dashed 2px` 아웃라인 사용
- Figma 에디터의 선택 핸들을 참조
- 웹사이트와 제품을 연결하는 메타 디자인 선택

## 5. 레이아웃 원칙

### 간격 시스템
- 기본 단위: 8px
- 스케일: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px

### 그리드 & 컨테이너
- 최대 컨테이너 너비: 1920px까지
- 히어로: 중앙 정렬 콘텐츠를 가진 전체 너비 그라디언트
- 제품 섹션: 교차 쇼케이스
- 푸터: 어두운 전체 너비 섹션
- 559px에서 1920px까지 반응형

### 공백 철학
- **갤러리 같은 호흡**: 넉넉한 간격은 각 제품 섹션이 자체 전시물로서 숨 쉬게 합니다.
- **시각적 호흡으로서의 색상 섹션**: 그라디언트 히어로와 제품 쇼케이스는 모노크롬 인터페이스 섹션들 사이에 색채적 여유를 제공합니다.

### 테두리 반경 스케일
- 최소 (2px): 소형 링크 요소
- 미묘 (6px): 소형 컨테이너, 구분선
- 편안함 (8px): 카드, 이미지, 다이얼로그
- 필 (50px): 탭 버튼, CTA
- 원형 (50%): 아이콘 버튼, 원형 요소

## 6. 깊이 & 고도

| 레벨 | 처리 방식 | 용도 |
|-------|-----------|-----|
| 플랫 (레벨 0) | 그림자 없음 | 페이지 배경, 대부분의 텍스트 |
| 표면 (레벨 1) | 그라디언트/어두운 섹션 위의 흰 카드 | 카드, 제품 쇼케이스 |
| 고도 (레벨 2) | 미묘한 그림자 | 떠 있는 카드, 호버 상태 |

**그림자 철학**: Figma는 그림자를 절제하여 사용합니다. 주요 깊이 메커니즘은 **배경 대비** (컬러풀하거나 어두운 섹션 위의 흰 콘텐츠)와 제품 스크린샷 자체가 가진 고유한 입체감입니다.

## 7. Do's and Don'ts

### Do
- 정밀한 가변 굵기(320–540)로 figmaSans를 사용하세요 — 세밀한 굵기 제어 자체가 디자인입니다
- 인터페이스를 엄격하게 흑백으로 유지하세요 — 색상은 제품 콘텐츠에서만 옵니다
- 모든 인터랙티브 요소에 필(50px) 및 원형(50%) 기하학을 사용하세요
- dashed 2px 포커스 아웃라인을 적용하세요 — 시그니처 접근성 패턴입니다
- 모든 텍스트에 `"kern"` 기능을 활성화하세요
- 레이블에는 양수 자간과 함께 대문자 figmaMono를 사용하세요
- 전반에 걸쳐 음수 자간을 적용하세요 (-0.1px에서 -1.72px)

### Don't
- 인터페이스 색상을 추가하지 마세요 — 모노크롬 팔레트는 절대적입니다
- 표준 폰트 굵기(400, 500, 600, 700)를 사용하지 마세요 — 가변 폰트의 고유 정류점(320, 330, 340, 450, 480, 540)을 사용하세요
- 버튼에 날카로운 모서리를 사용하지 마세요 — 필과 원형 기하학만 허용됩니다
- 솔리드 포커스 아웃라인을 사용하지 마세요 — 점선이 시그니처입니다
- 본문 폰트 굵기를 450 이상으로 높이지 마세요 — 가벼운 굵기 미학이 핵심입니다
- 본문 텍스트에 양수 자간을 사용하지 마세요 — 항상 음수입니다

## 8. 반응형 동작

### 브레이크포인트
| 이름 | 너비 | 주요 변경 사항 |
|------|-------|-------------|
| 소형 모바일 | <560px | 컴팩트 레이아웃, 스택 |
| 태블릿 | 560–768px | 소폭 조정 |
| 소형 데스크탑 | 768–960px | 2열 레이아웃 |
| 데스크탑 | 960–1280px | 표준 레이아웃 |
| 대형 데스크탑 | 1280–1440px | 확장됨 |
| 울트라 와이드 | 1440–1920px | 최대 너비 |

### 축소 전략
- 히어로 텍스트: 86px → 64px → 48px
- 제품 탭: 모바일에서 가로 스크롤
- 기능 섹션: 단일 열로 스택
- 푸터: 다열 → 스택

## 9. 에이전트 프롬프트 가이드

### 빠른 색상 참조
- 모든 것: "순수 검정 (#000000)" 과 "순수 흰색 (#ffffff)"
- Glass Dark: "rgba(0, 0, 0, 0.08)"
- Glass Light: "rgba(255, 255, 255, 0.16)"

### 예시 컴포넌트 프롬프트
- "선명한 다색 그라디언트(그린, 옐로우, 퍼플, 핑크) 위에 히어로를 만드세요. 헤드라인은 86px figmaSans 굵기 400, line-height 1.0, letter-spacing -1.72px. 흰 텍스트. 흰 필 CTA 버튼 (50px 반경, 8px 18px 패딩)."
- "필 형태 버튼(50px 반경)으로 제품 탭 바를 디자인하세요. 활성: 블랙 배경, 흰 텍스트. 비활성: 투명, 검정 텍스트. figmaSans 20px 굵기 480."
- "섹션 레이블을 만드세요: figmaMono 18px, 대문자, letter-spacing 0.54px, 검정 텍스트. Kern 활성화."
- "20px figmaSans 굵기 330, line-height 1.40, letter-spacing -0.14px로 본문 텍스트를 만드세요. 흰 배경 위의 순수 검정."

### 반복 가이드
1. 가변 폰트 굵기 정류점을 정확하게 사용하세요: 320, 330, 340, 450, 480, 540, 700
2. 인터페이스는 항상 검정 + 흰색 — 크롬에 색상을 추가하지 마세요
3. 솔리드가 아닌 점선 포커스 아웃라인
4. 본문에는 항상 음수 자간, 모노 레이블에는 항상 양수 자간
5. 버튼/탭에는 필(50px), 아이콘 버튼에는 원형(50%)