AppText
앱의 모든 글자를 그리는 컴포넌트다. 글자 스타일 11종 중 하나를 variant로 고르면 크기, 줄 높이, 굵기, 자간이 정해진다.
- 분류
- 데이터 표시
- 가져오기
import { AppText } from '@/ui/AppText'- 코드 위치
apps/mobile/src/ui/AppText.tsx:15
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
display — 복습할 문제가 3개 있어요title — 복습할 문제가 3개 있어요headline — 복습할 문제가 3개 있어요bodyStrong — 복습할 문제가 3개 있어요body — 복습할 문제가 3개 있어요small — 복습할 문제가 3개 있어요smallStrong — 복습할 문제가 3개 있어요caption — 복습할 문제가 3개 있어요metric — 복습할 문제가 3개 있어요question — 복습할 문제가 3개 있어요
언제 쓰는가#
쓴다
- 화면의 모든 글자에 React Native의
Text대신 쓴다. - 글자 크기와 굵기는
variant로 고르고, 색은color에 토큰을 넘긴다. - 굵기만 바꾸려면
weight를 쓴다.
쓰지 않는다
Text를 직접 쓰지 않는다. 앱 설정의 글자 크기 배율과 시험지 서체가 적용되지 않는다.style로fontSize만 바꾸지 않는다. 줄 높이를 함께 주어야 한다(없으면 크기의 1.34배로 자동 보정되지만 의도한 값이 아니다).- 글자 색을 HEX로 직접 쓰지 않는다.
color.text같은 토큰을 쓴다.
종류#
| 이름 | 설명 |
|---|---|
| variant | display, title, headline, bodyStrong, body(기본), small, smallStrong, caption, button, metric, question. 값은 글자 페이지의 표에 있다. |
| weight | regular~extrabold. 앱의 글꼴 이름이 굵기별로 나뉘어 있어서 굵기는 글꼴을 바꾸는 방식으로 적용된다. |
| align | left, center, right 같은 글자 정렬. |
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 글자 크기 설정 | 0.92 / 1 / 1.12 / 1.24배 | 앱 설정의 글자 크기 배율이 크기와 줄 높이에 곱해진다. 시스템 글자 크기는 최대 1.6배까지 반영된다. |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 시험지 서체 | PaperType 안에서는 모든 글자가 Noto Serif KR로 바뀐다. |
사용 방법#
기본
기본
import { AppText } from '@/ui/AppText';
import { color } from '@/ui/tokens';
<AppText variant="headline">오늘의 복습</AppText>
<AppText variant="small" color={color.textSecondary}>자료 18개 · 복습 12개</AppText>굵기와 정렬
굵기와 정렬
<AppText variant="body" weight="bold" align="center">완료했어요</AppText>속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
variant | TextVariant | 'body' | 선택 | 글자 스타일 이름. 기본 "body". |
color | string | — | 선택 | 글자 색. 기본 color.text. |
weight | keyof typeof font | — | 선택 | 굵기("regular" ~ "extrabold"). 지정하면 variant의 굵기를 덮는다. |
align | TextStyle['textAlign'] | — | 선택 | 글자 정렬. |
style | (React Native) | — | 선택 | 추가 스타일. fontSize를 바꾸면 줄 높이가 없을 때 크기의 1.34배로 자동으로 정해진다. |
나머지 속성은 TextProps를 그대로 받는다.
위에 적지 않은 나머지 속성(numberOfLines, adjustsFontSizeToFit, accessibilityRole 등)은 React Native Text를 그대로 받는다. 시스템 글자 크기 배율은 maxFontSizeMultiplier=1.6으로 제한된다.
치수와 토큰#
- 글꼴
- Pretendard (굵기별 파일). 시험지 서체 안에서는 Noto Serif KR
- 기본 색
text- 글자 크기 배율
- 앱 설정 배율 × (크기, 줄 높이)를 소수 첫째 자리(줄 높이는 정수)로 반올림
- 여백
includeFontPadding: false, 세로 가운데 정렬
접근성#
- 글자 크기 배율에서 글자가 커져도 잘리지 않게 부모의 높이를 고정하지 않는다.
글자 색 대비
글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.
| 쓰임 | 글자색 | 바탕 | 대비 | 기준 |
|---|---|---|---|---|
| 본문 (15px) | text | surface | 17.15:1 통과15.25:1 통과16.13:1 통과10.92:1 통과 | 4.5:1 (작은 글자) |
| 보조 글자 (13px) | textSecondary | surface | 4.23:1 미달6.95:1 통과4.88:1 통과7.11:1 통과 | 4.5:1 (작은 글자) |
잘한 예와 잘못한 예#
오늘의 복습
variant와 색 토큰으로 지정한다.