# Calm AI — 투명한 코파일럿 디자인 시스템

> 2026 트렌드 "calm interfaces" + "transparent AI-native UX" + "AI as collaborative copilot" + "motion that explains"를 하나의 토큰 체계로 묶은 컨셉.
> 함께 적용: `designs/anti-slop.md`

## 1. 분위기

Calm AI는 **조용한 동료가 옆자리에서 메모를 건네는 느낌**을 목표로 한다. AI는 화면 주인공이 아니다. 사용자의 문서·데이터·작업물이 화면 중앙을 차지하고, AI는 오른쪽 사이드 패널이나 인라인 주석처럼 가장자리에 머문다. AI가 무엇을 하든 사용자의 원본은 사용자가 수락하기 전까지 바뀌지 않는다.

"마법" 연출은 쓰지 않는다. 반짝이 아이콘, 보라색 그라디언트, 빛나는 테두리, 타이핑하듯 흘러나오는 과장된 애니메이션은 금지다. 대신 AI의 모든 제안에 세 가지가 붙는다.

1. **근거** — 왜 이 제안이 나왔는지. 출처 문서·조항·데이터 행을 인용 칩으로 보여주고, "근거 보기"로 원문을 펼친다.
2. **확신도** — 높음/보통/낮음 3단계. 숫자 퍼센트보다 단계와 짧은 설명("유사 판례 3건 일치")을 우선한다.
3. **통제권** — 수락 / 수정 / 무시. 세 버튼은 항상 같은 순서, 같은 위치에 있다.

진행 상태는 스피너 대신 **단계 목록**으로 설명한다. "계약서 14개 조항 읽는 중 → 표준계약서와 비교 중 → 위험 조항 3건 정리 중". 모션은 상태가 바뀌었다는 사실을 알리는 용도로만 쓰고, `prefers-reduced-motion`에서는 즉시 전환한다.

**핵심 특징**
- 저채도 중성 팔레트 + 단일 차분한 액센트(딥 틸 `#1f5f5b`). 보라·네온·그라디언트 없음
- 문서 본문은 세리프(Noto Serif KR), UI는 Pretendard. 읽는 영역과 조작하는 영역이 서체로 구분됨
- AI 제안은 변경 추적(tracked changes) 형태: 삭제는 취소선, 추가는 밑줄 + 옅은 녹색 배경
- 여백이 넓고 요소가 적다. 화면당 채색된 주 액션은 1개
- 그림자는 거의 없음. 깊이는 보더와 배경 톤 차이로 표현

## 2. 컬러 팔레트 & 역할

모든 색은 `oklch()`로 정의하고 hex를 주석으로 병기한다. 중성색은 미세하게 녹청(hue 160~190) 쪽으로 기울어 액센트와 같은 온도를 유지한다.

```css
:root {
  /* ── Neutral surface ── */
  --bg:              oklch(97.6% 0.004 120);  /* #f6f6f3  앱 캔버스 */
  --surface:         oklch(100% 0 0);         /* #ffffff  문서 용지, 카드 */
  --surface-sunken:  oklch(95.6% 0.005 130);  /* #eff0ec  패널 배경, 입력창 바탕 */
  --surface-hover:   oklch(93.8% 0.006 140);  /* #e9eae6 */
  --border:          oklch(90.5% 0.006 140);  /* #e0e2dd  기본 보더 */
  --border-strong:   oklch(83% 0.008 150);    /* #c8ccc6  입력창, 강조 구분선 */

  /* ── Text ── */
  --text:            oklch(24% 0.01 170);     /* #1c2321  본문 (대비 15.6:1) */
  --text-muted:      oklch(47% 0.012 170);    /* #59625f  보조 (대비 6.3:1) */
  --text-subtle:     oklch(62% 0.01 170);     /* #868d8a  메타, 플레이스홀더 */

  /* ── Accent: deep teal (화면당 1곳) ── */
  --accent:          oklch(43% 0.062 188);    /* #1f5f5b  주 액션, 포커스 */
  --accent-hover:    oklch(37% 0.056 188);    /* #184e4b */
  --accent-soft:     oklch(95% 0.016 185);    /* #e7f1ef  선택 배경 */
  --accent-on:       oklch(99% 0.003 180);    /* #fbfdfc  액센트 위 텍스트 */
  --focus-ring:      oklch(43% 0.062 188 / 0.45);

  /* ── AI semantic ── */
  --ai-surface:      oklch(98.2% 0.006 185);  /* #f5f9f8  AI 패널 카드 바탕 */
  --ai-border:       oklch(88% 0.022 185);    /* #cfdfdc  AI 생성물 경계 */
  --ai-marker:       oklch(55% 0.05 188);     /* #4b7f7a  AI 출처 표시 바(좌측 2px) */

  /* ── Diff (tracked changes) ── */
  --diff-add-bg:     oklch(94.5% 0.03 155);   /* #e2f0e6 */
  --diff-add-text:   oklch(40% 0.07 155);     /* #26593a */
  --diff-del-bg:     oklch(94.5% 0.022 35);   /* #f6e7e2 */
  --diff-del-text:   oklch(45% 0.09 35);      /* #8b3e2e */

  /* ── Confidence ── */
  --conf-high:       oklch(48% 0.07 160);     /* #2f6b55  높음 */
  --conf-high-bg:    oklch(95% 0.02 160);     /* #e6f1ec */
  --conf-mid:        oklch(55% 0.09 75);      /* #8a6a24  보통 (ochre) */
  --conf-mid-bg:     oklch(95.5% 0.03 85);    /* #f5efdf */
  --conf-low:        oklch(50% 0.1 35);       /* #9b4a36  낮음 (clay) */
  --conf-low-bg:     oklch(95.5% 0.02 35);    /* #f7ebe7 */

  /* ── Citation ── */
  --cite-bg:         oklch(95.5% 0.008 230);  /* #eceff2 */
  --cite-text:       oklch(42% 0.03 235);     /* #3f5566 */
  --cite-border:     oklch(88% 0.012 230);    /* #d4dade */

  /* ── Radius / space / motion ── */
  --r-sm: 4px;   /* 칩, 배지, diff 마크 */
  --r-md: 8px;   /* 카드, 입력창, 버튼 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --dur-fast: 140ms; --dur-base: 220ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}
```

### 역할 규칙
| 토큰 | 쓰는 곳 | 쓰지 않는 곳 |
|---|---|---|
| `--accent` | 주 버튼 1개, 포커스 링, 진행 중 단계 점 | 장식, 아이콘 일괄 채색, 배경 대면적 |
| `--ai-marker` | AI가 만든 블록 좌측 2px 바 | 사용자 작성 콘텐츠 |
| `--conf-*` | 확신도 미터·배지 | 일반 성공/경고 상태(별도 status 토큰 사용) |
| `--cite-*` | 출처 칩, 근거 패널 | 일반 태그 |
| `--diff-*` | 인라인 제안, 비교 뷰 | 하이라이트 장식 |

> 확신도 색은 **색만으로 전달하지 않는다**. 항상 막대 개수(3/2/1)와 텍스트 라벨을 함께 쓴다.

## 3. 타이포그래피

- **UI**: `Pretendard Variable`, fallback `-apple-system, "Apple SD Gothic Neo", sans-serif`
- **문서 본문**: `"Noto Serif KR"`, fallback `"Nanum Myeongjo", serif` — 사용자의 원본 콘텐츠 영역에만
- **수치/코드/조항 번호**: `"JetBrains Mono"`, `ui-monospace` — `font-variant-numeric: tabular-nums`

| 역할 | 폰트 | 크기 | 굵기 | 행간 | 자간 |
|---|---|---|---|---|---|
| 문서 제목 | Noto Serif KR | 26px | 600 | 1.35 | -0.01em |
| 문서 본문 | Noto Serif KR | 16px | 400 | 1.85 | 0 |
| 패널 제목 | Pretendard | 15px | 650 | 1.4 | -0.01em |
| UI 본문 | Pretendard | 14px | 450 | 1.6 | -0.005em |
| 보조/메타 | Pretendard | 12.5px | 500 | 1.5 | 0 |
| 오버라인 | Pretendard | 11px | 650 | 1.4 | 0.04em |

원칙: 크기 단계는 6개를 넘기지 않는다. AI 패널의 텍스트는 문서 본문보다 **항상 작고 조용해야** 한다(14px 이하). AI가 만든 문장이 사용자 문서보다 시각적으로 커지는 순간 주객이 뒤바뀐다.

## 4. 컴포넌트

### 4.1 제안 카드 (Suggestion Card)
```css
.suggestion {
  background: var(--ai-surface);
  border: 1px solid var(--ai-border);
  border-left: 2px solid var(--ai-marker);
  border-radius: var(--r-md);
  padding: var(--space-4);
  display: grid; gap: var(--space-3);
}
.suggestion__head { display: flex; justify-content: space-between; align-items: center; }
.suggestion__title { font: 650 14px/1.45 var(--font-ui); color: var(--text); }
.suggestion__reason { font: 450 13px/1.6 var(--font-ui); color: var(--text-muted); }
.suggestion__actions { display: flex; gap: var(--space-2); }
.suggestion[data-state="accepted"] { border-left-color: var(--conf-high); opacity: .72; }
.suggestion[data-state="dismissed"] { opacity: .5; }
```
구성 순서는 고정: **제목(무엇을) → 확신도 → 이유(왜) → 출처 칩 → diff 미리보기 → 수락/수정/무시**. 처리된 카드는 사라지지 않고 접힌 상태로 남아 "되돌리기"를 제공한다.

### 4.2 버튼 3종
```css
.btn { height: 32px; padding: 0 12px; border-radius: var(--r-md);
  font: 600 13px/1 var(--font-ui); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  transition: background var(--dur-fast) var(--ease); }
.btn:hover { background: var(--surface-hover); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
```
수락=`primary`, 수정=기본, 무시=`ghost`. 순서를 바꾸지 않는다.

### 4.3 출처 칩 (Citation Chip)
```css
.cite {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: var(--r-sm);
  background: var(--cite-bg); border: 1px solid var(--cite-border);
  color: var(--cite-text); font: 550 12px/1 var(--font-ui);
}
.cite__index { font-family: var(--font-mono); opacity: .7; }
.cite:hover { border-color: var(--cite-text); }
```
칩 텍스트는 구체적으로: `[1] 표준하도급계약서 제9조`, `[2] 2025.03 법무팀 검토의견`. "Source 1"처럼 뭉뚱그리지 않는다.

### 4.4 확신도 미터 (Confidence Meter)
```css
.conf { display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px/1 var(--font-ui); padding: 3px 8px; border-radius: var(--r-sm); }
.conf__bars { display: inline-flex; gap: 2px; }
.conf__bars i { width: 3px; height: 10px; border-radius: 1px; background: currentColor; opacity: .22; }
.conf[data-level="high"] { color: var(--conf-high); background: var(--conf-high-bg); }
.conf[data-level="high"] i { opacity: 1; }
.conf[data-level="mid"]  { color: var(--conf-mid);  background: var(--conf-mid-bg); }
.conf[data-level="mid"] i:nth-child(-n+2) { opacity: 1; }
.conf[data-level="low"]  { color: var(--conf-low);  background: var(--conf-low-bg); }
.conf[data-level="low"] i:first-child { opacity: 1; }
```
라벨은 "확신 높음 · 유사 조항 4건 일치"처럼 근거 요약과 붙인다. 낮음 단계 제안은 기본 접힘 + "검토 필요" 문구.

### 4.5 단계 진행 (Step Progress)
```css
.steps { list-style: none; display: grid; gap: 10px; }
.step { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: start;
  font: 500 13px/1.5 var(--font-ui); color: var(--text-subtle); }
.step__dot { width: 8px; height: 8px; margin: 6px 4px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); }
.step[data-state="done"]   { color: var(--text-muted); }
.step[data-state="done"] .step__dot { background: var(--conf-high); border-color: var(--conf-high); }
.step[data-state="active"] { color: var(--text); }
.step[data-state="active"] .step__dot { border-color: var(--accent);
  animation: breathe 1.6s var(--ease) infinite; }
.step__meta { font: 500 12px var(--font-mono); color: var(--text-subtle); }
@keyframes breathe { 50% { box-shadow: 0 0 0 4px var(--accent-soft); } }
@media (prefers-reduced-motion: reduce) { .step__dot { animation: none !important; } }
```
각 단계는 **동사 + 대상 + 수량**: "조항 14개 읽기 완료 · 0.8초", "표준계약서 2종과 비교 중". 중단 버튼을 항상 함께 둔다.

### 4.6 Diff 뷰 (Tracked Changes)
```css
.diff-del { background: var(--diff-del-bg); color: var(--diff-del-text);
  text-decoration: line-through; text-decoration-thickness: 1px; border-radius: 2px; }
.diff-add { background: var(--diff-add-bg); color: var(--diff-add-text);
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
  border-radius: 2px; }
.diff-anchor { border-bottom: 2px solid var(--ai-marker); cursor: pointer; }
.diff-anchor[aria-current="true"] { background: var(--accent-soft); }
```
문서 본문 안의 제안은 반드시 패널 카드와 1:1로 연결된다. 본문 앵커를 클릭하면 카드가 스크롤되어 강조되고, 반대도 마찬가지. 색 외에 취소선/밑줄로 구분해 색각 이상 사용자도 읽을 수 있게 한다.

### 4.7 프롬프트 입력 (Prompt Input)
```css
.prompt { background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 10px 12px; display: grid; gap: 8px; }
.prompt:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.prompt textarea { border: 0; resize: none; font: 450 14px/1.55 var(--font-ui);
  color: var(--text); background: transparent; min-height: 44px; }
.prompt__scope { font: 500 12px var(--font-ui); color: var(--text-muted); }
```
입력창 위에 **범위(scope) 표시**가 필수: "대상: 제7조~제12조 · 참조: 표준하도급계약서". AI가 무엇을 보고 답하는지 사용자가 미리 안다.

## 5. 레이아웃 원칙

- **3열 워크스페이스**: 좌 내비(220px) · 중앙 문서(가변, 본문 폭 최대 680px) · 우 코파일럿 패널(360~400px).
- 코파일럿 패널은 닫을 수 있고, 닫아도 문서 레이아웃은 흔들리지 않는다(문서는 중앙 정렬 유지).
- 문서 여백은 넉넉하게: 용지 패딩 56px 이상, 문단 간 16px.
- 패널 내부 순서: ① 작업 범위 ② 진행 단계 ③ 제안 목록(확신도 높은 순) ④ 프롬프트 입력(하단 고정).
- 간격은 4의 배수 토큰만 사용. 카드 간 12px, 섹션 간 24px.
- 빈 상태: "이 문서에서 검토할 항목을 찾지 못했습니다. 범위를 넓혀 다시 검토할까요?" + 범위 버튼. 아이콘 일러스트 금지.
- 에러 상태: 어느 단계에서 멈췄는지 단계 목록에 그대로 표시하고 "이 단계부터 다시"를 제공.

## 6. 깊이 & 엘리베이션

| 레벨 | 처리 | 용도 |
|---|---|---|
| 0 | `--bg` | 앱 캔버스 |
| 1 | `--surface` + `1px var(--border)` | 문서 용지, 패널 |
| 2 | `--ai-surface` + `--ai-border` + 좌측 마커 | AI 생성 블록 |
| 3 | `0 1px 2px oklch(24% .01 170 / .06), 0 8px 24px oklch(24% .01 170 / .08)` | 팝오버(근거 보기), 메뉴 |

그림자는 레벨 3에만 쓴다. 글로우, `backdrop-filter: blur` 남발, 컬러 그림자 금지. AI 요소를 돋보이게 하려고 빛을 두르지 않는다. 경계는 **선과 톤**이 담당한다.

## 7. Do / Don't

**Do**
- 모든 AI 제안에 근거(출처 칩)·확신도·수락/수정/무시를 붙인다
- 원본 수정은 diff로 먼저 보여주고, 사용자가 수락할 때만 반영한다
- 진행 상태를 단계 문장으로 설명하고 중단 버튼을 둔다
- AI가 만든 블록은 좌측 2px 마커로 출처를 구분한다
- 처리한 제안은 접어서 남기고 되돌리기를 제공한다
- 확신도가 낮으면 솔직하게 "검토 필요"라고 쓴다
- 문서 본문은 세리프, AI·UI는 산세리프로 분리한다

**Don't**
- 반짝이(sparkle) 아이콘을 버튼·제목마다 붙이지 않는다. AI 표시는 텍스트 라벨 "코파일럿" 또는 마커 바로 충분하다
- 보라/인디고 그라디언트, 무지개 테두리, 글로우 애니메이션 금지
- 무한 스피너, "생각 중..." 한 줄로 진행을 뭉뚱그리지 않는다
- AI가 사용자 문서를 직접 덮어쓰거나 중앙 영역을 차지하는 채팅 UI로 대체하지 않는다
- "AI가 완벽하게 분석했습니다" 같은 과장 카피 금지
- 확신도를 색만으로, 또는 근거 없는 "97%" 숫자로 표시하지 않는다
- 한 화면에 액센트 색을 3곳 이상 쓰지 않는다

## 8. 반응형

| 구간 | 레이아웃 |
|---|---|
| ≥1280px | 좌 내비 + 문서 + 우 패널 3열 |
| 1024~1279px | 좌 내비를 아이콘 레일(56px)로 축소, 패널 340px |
| 768~1023px | 패널이 오른쪽 오버레이 시트(폭 380px)로 전환, 문서는 전폭 |
| <768px | 패널이 하단 시트(높이 70vh)로 전환. 제안 카드의 버튼은 3등분 전폭(높이 44px) |

- 모바일에서 diff는 인라인 유지, 카드 내 diff 미리보기는 생략하고 "본문에서 보기" 링크로 대체.
- 터치 타깃 최소 44px, 출처 칩은 모바일에서 높이 28px.
- 오버레이 시트 전환 모션은 `--dur-base` 슬라이드, reduced-motion이면 페이드 없이 즉시.

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

### 기본 블록
```
Calm AI 디자인 시스템을 적용해줘.
- 배경 #f6f6f3, 카드 #ffffff, 텍스트 #1c2321, 보조 텍스트 #59625f, 보더 #e0e2dd
- 액센트는 딥 틸 #1f5f5b 하나만, 화면당 주 버튼 1개에만 사용
- UI 폰트 Pretendard, 사용자 문서 본문은 Noto Serif KR, 숫자는 JetBrains Mono
- 반경 4px(칩)·8px(카드/버튼) 두 가지만. 그림자는 팝오버에만
- AI는 오른쪽 패널에만 존재하고 중앙 콘텐츠를 대체하지 않음
- 반짝이 아이콘, 보라 그라디언트, 글로우, 이모지 금지. 아이콘은 lucide-react
```

### 화면별 프롬프트
```
계약서 검토 워크스페이스를 만들어줘. 중앙에 세리프 본문의 계약서(제1조~제12조),
오른쪽 380px 코파일럿 패널. 패널 상단에 "검토 범위: 전체 12개 조항",
그 아래 단계 진행 목록 4단계(완료 2, 진행 중 1, 대기 1, 각 단계에 소요 시간),
그 아래 제안 카드 3개. 각 카드: 제목, 확신도 배지(높음/보통/낮음, 막대 3개),
이유 1~2문장, 출처 칩 2개, diff 미리보기, 수락/수정/무시 버튼.
본문에는 같은 제안이 취소선(삭제)+점선 밑줄(추가)로 표시되고 카드와 연결됨.
```

```
AI 요약 기능이 있는 회의록 화면. AI 요약은 원문 위가 아니라 오른쪽 패널에.
요약의 각 문장 끝에 [1][2] 출처 칩을 달고, 칩을 누르면 원문 해당 발언이 하이라이트.
확신도 낮은 문장은 회색 + "검토 필요" 라벨. 상단에 "요약 다시 만들기" 대신
"범위 바꾸기" 버튼을 둬서 어떤 구간을 요약했는지 명시.
```

```
진행 상태 컴포넌트를 만들어줘. 스피너 금지. 세로 단계 목록으로
"엑셀 3개 시트 읽기 완료 · 1.2초" / "거래처 코드 412건 매칭 중 (238/412)" /
"불일치 항목 정리 대기" 형식. 진행 중 단계 점은 1.6초 주기로 은은하게 숨쉬기,
prefers-reduced-motion이면 정지. 하단에 "중단" 고스트 버튼.
```

### 셀프 체크
- [ ] 모든 제안에 근거·확신도·3버튼이 있는가?
- [ ] AI 패널을 닫아도 핵심 작업이 가능한가?
- [ ] 스피너 대신 단계 문장으로 진행을 설명하는가?
- [ ] 반짝이 아이콘이나 보라색이 한 군데라도 있는가? → 제거
- [ ] 확신도가 색 외에 막대 수·텍스트로도 전달되는가?