본문으로 건너뛰기
TDSMoring 디자인 시스템

AiMark

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

이 페이지의 목차
분류
알림과 안내
가져오기
import { AiMark } from '@/ui/AiMark'
코드 위치
apps/mobile/src/ui/AiMark.tsx:8

미리보기#

실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.

AI 생성
chip
AI 생성
note
AI 생성 그림
overlay (그림 위)

언제 쓰는가#

쓴다

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

쓰지 않는다

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

종류#

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

크기#

AiMark 크기
이름값설명
chip높이 28, 좌우 10
overlay좌우 8, 위아래 3

상태#

AI 생성
chip
AI 생성
note
AiMark 상태
상태모습과 동작
chip기본 모습이다.
note기본 모습이다.

사용 방법#

기본

기본
import { AiMark } from '@/ui/AiMark';

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

속성(props)#

AiMark 속성
이름타입기본값필수설명
variant'chip' | 'note' | 'overlay''chip'선택"chip"(기본), "note", "overlay".
textstring—선택표시 글자. 기본은 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 생성").

글자 색 대비

글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.

AiMark 글자 색 대비
쓰임글자색바탕대비기준
chip 글자 (13px 굵게)textSecondarysegmentTrack3.83:1 미달6.42:1 통과4.52:1 통과6.26:1 통과4.5:1 (작은 글자)

잘한 예와 잘못한 예#

AI 생성
잘한 예AI가 만든 결과 바로 옆에 붙인다.
직접 쓴 메모 옆의 “AI 생성”
잘못한 예사람이 만든 내용에 붙이지 않는다.
  • Chip: 짧은 글자를 담는 작은 알약 표지다. 상태, 분류, D-Day를 알린다. 눌리지 않는다.
  • FeedbackCard: 문제를 채점한 뒤 결과("정답!", "오답")와 해설을 보여 주는 카드다.