# AiMark

생성형 AI가 만든 결과임을 알리는 표시다. AI가 만든 모든 결과에 붙인다.

- 분류: 알림과 안내
- 가져오기: `import { AiMark } from '@/ui/AiMark'`
- 코드 위치: `apps/mobile/src/ui/AiMark.tsx:8` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/ai-mark

## 미리보기

실제 컴포넌트를 그린 화면은 https://developers.moring.co/tds/components/ai-mark 에서 볼 수 있다. 서비스 색 선택기로 Mordy, Morit 색을 바꿔 볼 수 있다.

## 언제 쓰는가

### 쓴다
- AI가 만든 문제, 해설, 그림에는 반드시 붙인다(「인공지능 기본법」 제31조 제2항·제3항).
- 문제 칩 옆에는 `chip`, 제목 아래 한 줄은 `note`, AI가 그린 그림 위에는 `overlay`.

### 쓰지 않는다
- AI가 만들지 않은 내용에 붙이지 않는다.
- 글자를 바꿔서 의미를 흐리지 않는다. `text`로 바꿀 수는 있지만 "AI 생성"이라는 뜻이 남아야 한다.
- 표시를 눈에 안 띄게 숨기지 않는다.

## 종류

| 이름 | 설명 |
| --- | --- |
| chip (기본) | `segmentTrack` 바탕의 알약(높이 28). 반짝이 아이콘 12 + "AI 생성". |
| note | 바탕 없는 한 줄. 아이콘 13 + `caption` 글자. |
| overlay | 그림의 왼쪽 아래(8, 8)에 검은 반투명(55%) 알약. 흰 아이콘 11 + 흰 굵은 글자. 기본 글자 "AI 생성 그림". |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| chip | 높이 28, 좌우 10 |  |
| overlay | 좌우 8, 위아래 3 |  |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| chip | 기본 모습이다. |
| note | 기본 모습이다. |

## 사용 방법

### 기본

```tsx
import { AiMark } from '@/ui/AiMark';

<AiMark />
<AiMark variant="note" text="AI가 만든 해설" />
<View><Image … /><AiMark variant="overlay" /></View>
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `variant` | `'chip' \| 'note' \| 'overlay'` | `'chip'` | 선택 | `"chip"`(기본), `"note"`, `"overlay"`. |
| `text` | `string` | — | 선택 | 표시 글자. 기본은 chip·note "AI 생성", overlay "AI 생성 그림". |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| chip | 높이 28, 좌우 10, pill, `segmentTrack` 바탕, 아이콘 12 선 2.3, 글자 `smallStrong` `textSecondary` |
| note | 아이콘 13, `caption` `textSecondary`, 사이 5 |
| overlay | 바탕 `rgba(0,0,0,0.55)`, 위치 왼쪽 8·아래 8(절대 위치), 흰 글자 |

## 접근성

- 접근성 이름은 표시 글자 그대로다("AI 생성").

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| chip 글자 (13px 굵게) | `textSecondary` | `segmentTrack` | 3.83:1 미달 | 6.42:1 통과 | 4.52:1 통과 | 6.26:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: AI가 만든 결과 바로 옆에 붙인다.
- 잘못한 예: 사람이 만든 내용에 붙이지 않는다.

## 함께 보는 컴포넌트

- [Chip](https://developers.moring.co/tds/components/chip.md): 짧은 글자를 담는 작은 알약 표지다. 상태, 분류, D-Day를 알린다. 눌리지 않는다.
- [FeedbackCard](https://developers.moring.co/tds/components/feedback-card.md): 문제를 채점한 뒤 결과("정답!", "오답")와 해설을 보여 주는 카드다.