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

> Category: AI & LLM
> 깊은 청록빛 블랙을 기반으로 넉넉한 여백과 에디토리얼 타이포그래피를 갖춘 차분하고 거의 무채색에 가까운 시스템.

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

OpenAI의 제품 표면은 대중을 위해 차려입은 연구소처럼 읽힌다 — 임상적이고, 절제되어 있으며, 의도적으로 조용하다. 페이지 배경은 순백(`#ffffff`)이며, 미묘한 청록 기조를 띤 거의 검정에 가까운 잉크색(`#0d0d0d`)과 겹쳐져, 텍스트조차 공격적으로 어둡기보다는 약간 차갑게 느껴진다. 그 결과, 그 주변 크롬이 아닌 모델 출력물, 코드, 산문이 전면에 드러나는 색채적 중립성이 만들어진다.

이 시스템의 시그니처는 절제된 웨이트의 **Söhne**(또는 시스템 대체폰트 `inter`) 사용이다 — 본문에는 400, 내비게이션과 레이블에는 500, 강조에는 600 — 이것이 에디토리얼 디스플레이용 현대적 세리프 서체인 **Signifier**와 짝을 이룬다. 대부분의 AI 브랜드가 미래지향적 느낌에 기댈 때, OpenAI의 세리프 헤드라인은 제품에 조용하고 문학적인 톤을 부여한다. 마치 모든 발표가 하나의 에세이인 것처럼.

형태 시스템은 균일하게 부드럽다: 8px–12px 라디우스, 태그와 칩에는 9999px 필 형태, 날카로운 모서리는 어디에도 없다. 섹션 간 전환은 구분선 대신 여백으로 표현되며, 테두리가 등장할 때는 색의 존재라기보다 색의 부재처럼 읽히는 `#e5e5e5` 헤어라인 형태다.

**주요 특성:**
- 순백 캔버스(`#ffffff`)와 깊은 청록빛 블랙 잉크색(`#0d0d0d`)
- Söhne / Inter, 절제된 웨이트(400, 500, 600) — 주장보다는 절제
- 에디토리얼 디스플레이 헤드라인에는 Signifier 세리프
- 전체에 걸쳐 부드러운 8–12px 라디우스; 칩에는 9999px 필
- 헤어라인 테두리(`#e5e5e5`)는 최소한으로; 여백이 주된 구분선
- 깊은 청록색의 단색 일러스트레이션 — 마크에는 그라디언트 없음
- 넉넉한 행간(1.55–1.65)과 거의 0에 가까운 자간

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

### 주요 색상
- **순백(Pure White)** (`#ffffff`): 주요 배경, 카드 표면, 버튼 배경.
- **잉크 블랙(Ink Black)** (`#0d0d0d`): 주요 텍스트, 브랜드 마크, 주요 CTA.
- **소프트 블랙(Soft Black)** (`#1a1a1a`): 보조 제목, 중요도가 낮은 텍스트용 대체 잉크색.

### 표면 & 배경
- **미스트(Mist)** (`#fafafa`): 섹션 구분 배경, 푸터 표면.
- **펄(Pearl)** (`#f5f5f5`): 카드 표면, 올라온 패널.
- **클라우드(Cloud)** (`#ececec`): 비활성 배경, 구분선 틴트.

### 브랜드 강조색
- **OpenAI 청록(OpenAI Teal)** (`#10a37f`): 브랜드 주색, 링크, 하이라이트 배지 — 그 외 중립적인 시스템에서 유일한 색상.
- **딥 청록(Teal Deep)** (`#0a7a5e`): 브랜드 색상의 호버 및 누름 상태.
- **소프트 청록(Teal Soft)** (`#e8f5f0`): 성공 배지, 하이라이트 콜아웃을 위한 표면 틴트.

### 중립색 & 텍스트
- **그래파이트(Graphite)** (`#3c3c3c`): 본문 텍스트, 기본 읽기 색상.
- **슬레이트(Slate)** (`#6e6e6e`): 보조 텍스트, 캡션, 메타데이터.
- **애시(Ash)** (`#9b9b9b`): 3차 텍스트, 플레이스홀더, 비활성 레이블.
- **스톤(Stone)** (`#c4c4c4`): 장식용 구분선, 희미한 아이콘.

### 의미적 색상 & 테두리
- **테두리 헤어라인(Border Hairline)** (`#e5e5e5`): 표준 헤어라인 구분선.
- **테두리 소프트(Border Soft)** (`#ededed`): 흰색 표면 위 카드 외곽선.
- **오류(Error)** (`#ef4146`): 유효성 검사, 파괴적 동작.
- **경고(Warning)** (`#f5a623`): 안내 상태를 위한 소프트 앰버색.
- **정보(Info)** (`#2563eb`): 정보성 링크 톤(최소한으로 사용; 청록이 여전히 우선).

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

### 폰트 패밀리
- **디스플레이 / 에디토리얼**: `Signifier`, 폴백: `'Source Serif Pro', Georgia, serif`
- **본문 / UI**: `Söhne`, 폴백: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
- **코드 / 모노**: `Söhne Mono`, 폴백: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`

### 계층 구조

| 역할 | 폰트 | 크기 | 굵기 | 행간 | 자간 | 비고 |
|------|------|------|--------|-------------|----------------|-------|
| 디스플레이 | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | 에디토리얼 히어로, 발표 제목 |
| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | 페이지 제목 |
| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | 섹션 제목 |
| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | 소섹션 |
| 본문 대형 | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | 리드 단락 |
| 본문 | Söhne | 16px (1rem) | 400 | 1.65 | normal | 표준 본문 텍스트 |
| 본문 소형 | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | 카드 본문, 밀집 UI |
| 캡션 | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | 메타데이터, 배지 |
| 레이블 | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | 아이브로우, 대문자 내비게이션 링크 |
| 코드 | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | 코드 블록, 터미널 출력 |

### 원칙
- **정체성으로서의 절제**: 굵기는 최대 600; 700 이상은 브랜드에 맞지 않는 느낌을 준다. 계층은 굵기가 아닌 크기와 색상으로 만들어진다.
- **세리프는 영혼을 위해, 산세리프는 시스템을 위해**: Signifier는 에디토리얼 디스플레이 순간에만 등장한다. 제품 UI는 산세리프 전용이다.
- **디스플레이에는 음수 자간**: 디스플레이 크기에서 -0.02em; 자간은 16px에서 0으로 돌아온다.

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

### 버튼

**주요(Primary)**
- 배경: `#0d0d0d`
- 텍스트: `#ffffff`
- 패딩: 10px 18px
- 라디우스: 칩에는 9999px(완전 필), 직사각형 CTA에는 12px
- 호버: `#1a1a1a` 배경
- 사용처: 주요 CTA, "Try ChatGPT", "Sign in"

**보조(Secondary)**
- 배경: `#ffffff`
- 텍스트: `#0d0d0d`
- 테두리: 1px solid `#e5e5e5`
- 패딩: 10px 18px
- 라디우스: 12px
- 호버: 배경 `#fafafa`, 테두리 `#d4d4d4`

**브랜드 강조(Brand Accent)**
- 배경: `#10a37f`
- 텍스트: `#ffffff`
- 패딩: 10px 18px
- 라디우스: 12px
- 호버: `#0a7a5e`
- 사용처: 강조된 업그레이드 CTA, 성공 경로

### 카드
- 배경: `#ffffff`
- 테두리: 1px solid `#ededed`
- 라디우스: 16px
- 패딩: 24px–32px
- 그림자: 기본적으로 없음; 호버 시 `0 4px 16px rgba(13,13,13,0.06)`

### 인풋
- 배경: `#ffffff`
- 테두리: 1px solid `#e5e5e5`
- 라디우스: 12px
- 패딩: 12px 14px
- 포커스: 테두리 `#10a37f`, 링 `0 0 0 3px rgba(16,163,127,0.12)`

### 필 & 태그
- 배경: `#f5f5f5`
- 텍스트: `#3c3c3c`
- 패딩: 4px 10px
- 라디우스: 9999px
- 폰트: 12px / 500

## 5. 간격 & 레이아웃

- **기본 단위**: 4px. 스케일: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
- **컨테이너**: 최대 너비 1200px, 모바일 24px 거터, 데스크탑 48px.
- **섹션 리듬**: 주요 섹션 사이 세로 96–128px; 모바일에서는 64px.
- **그리드**: 데스크탑 12열, 모바일 4열, 24px 간격.

## 6. 모션

- **지속 시간**: 호버에 150–220ms; 레이아웃 전환에 280–360ms.
- **이징**: 진입 시 `cubic-bezier(0.16, 1, 0.3, 1)` (부드러운 감속).
- **절제**: 패럴랙스 없음, 스크롤 재킹 없음. 미묘한 페이드와 트랜슬레이트만 사용.

## 7. 사용 가이드라인

- 중립적인 에디토리얼 절제감, 부드러운 라디우스, 희소한 강조색 사용을 함께 유지할 것; 녹색 강조색만으로는 OpenAI다운 표면이 만들어지지 않는다.
- Signifier 스타일의 디스플레이 순간은 에디토리얼 또는 발표 계층에만 사용하고, 제품 컨트롤은 산세리프 시스템을 유지할 것.
- 장식적인 모션, 무거운 그림자, 지나치게 큰 장식용 카드를 피할 것; 시스템은 차분하고, 읽기 쉬우며, 의도적으로 느껴져야 한다.