Typography

글자는 콘텐츠를 또렷하고 빠르게 읽히게 하는 요소다. 크기 · 줄 높이 · 굵기를 토큰으로 두고, 그 조합으로 제목 · 본문 같은 위계를 만든다.

개요제목 링크 복사

groo 글자 체계는 당근 SEED 와 같은 두 가지 스타일로 이뤄진다.

• 스케일 스타일 — text-t1 ~ text-t14. 크기와 줄 높이의 짝이다. 굵기는 400 이고, 강조는 font-medium(500) · font-bold(700)로 준다 — SEED 의 t5Medium · t5Bold 와 같다.
• 역할 스타일 — text-screen-title · text-article-body · text-article-note. 화면 제목 · 긴 글처럼 자리가 정해진 글자다.

글꼴제목 링크 복사

groo 는 Pretendard 를 제품에 함께 실어 어느 플랫폼에서나 같은 글꼴로 그린다. SEED 는 iOS · Android · macOS 에서 시스템 글꼴을, Windows 에서만 Pretendard 를 쓴다 — groo 는 두 서비스의 인상을 플랫폼마다 같게 두려고 전부 Pretendard 다. 영문 대체는 Inter 다.

2026-09-29 코드 기준이다.

스케일제목 링크 복사

groo 는 크기와 줄 높이를 한 토큰으로 묶는다 — text-t5 가 16px 과 22px 을 함께 준다. Tailwind 로 내보내면 --text-t5 · --text-t5--line-height 로 갈린다. SEED 는 둘을 따로 토큰($font-size.t5 · $line-height.t5)으로 두고 같은 순서끼리 짝지어 쓴다.

• t1 ~ t5 는 본문 · 장식 글자, t6 ~ t10 은 제목 · 주요 글자, t11 ~ t14 는 큰 화면 제목이다(sm 중단점 이상).

단위 — rem 과 static제목 링크 복사

글자 크기는 사용자의 글자 크기 설정을 따라야 한다. 그래서 값은 px 로 적되, 웹에는 rem 으로 내보낸다 — 브라우저 기본 설정에서 1rem 은 16px 이다. SEED 와 같이 rem 과 고정(px) 두 벌을 둔다.

• rem — 기본이다. 사용자가 글자를 키우면 함께 커진다.
• -static — 커지면 깨지는 자리(배지 · 탭 라벨 · 좁은 칸의 숫자)에만 쓴다. px 그대로라 설정을 따르지 않는다. --text-t5-static 처럼 내보낼 때 함께 생긴다.
• 앱 — OS 글자 크기를 따른다(Flutter 기본). 같은 자리만 TextScaler.noScaling 으로 고정한다.
• 스펙 표의 글자 값은 읽기 쉽게 px 로 보여 준다.

굵기제목 링크 복사

• 600 은 쓰지 않는다. 옛 스타일에서 600 을 쓰던 자리는 옮길 때 500 이나 700 으로 고른다.
• SEED 는 시스템 글꼴을 써서 medium(500)이 플랫폼마다 조금 달라 보인다. groo 는 Pretendard 를 함께 실어 Desk 앱 · 웹에서 같게 보인다 — 시스템 글꼴을 쓰는 지금의 HR 웹만 다를 수 있다.

스케일 스타일 이름제목 링크 복사

SEED 는 크기와 굵기를 묶어 t5Medium 처럼 부른다. groo 는 크기 토큰에 굵기를 더한다.

역할 스타일제목 링크 복사

UI 글자는 줄 높이 ×1.35 안팎, 긴 글은 ×1.5 안팎이다 — 한국어 본문은 줄 사이가 넉넉해야 읽힌다.

글자 역할제목 링크 복사

스케일과 역할 스타일은 크기를 정하고, 색은 Color 의 역할 색이 정한다. 아래 표는 그 둘을 자리마다 어떻게 묶어 쓰는지다 — 컴포넌트 스펙의 글자 부위를 뜻으로 묶은 열아홉 역할이다. 새 자리를 그릴 때는 이 표에서 역할을 고르고, 표에 없는 크기 · 굵기 · 색 조합을 새로 만들지 않는다. 값 대부분은 SEED 컴포넌트 값이고, SEED 에 짝이 없던 자리는 사용자가 정했다(2026-10-16).

• muted 와 subtle(D5) — fg-neutral-subtle 은 덧붙인 정보(축 · 시각 · 단위 · 범례 이름 · 메타 줄), fg-neutral-muted 는 문장으로 된 보조 글(떠 있는 표면 설명 · "더 불러오지 못했어요." 같은 상태 문구 · 긴 글 보조)이다. 같은 차트 안의 글자(축 · 툴팁 머리 · 범례 이름 · 툴팁 줄 이름)는 모두 subtle 한 색이다. 흰 면 위 muted 7.11 · subtle 5.50 이라 눈으로 잘 갈리지 않는다 — 고를 때 값이 아니라 이 규칙으로 고른다. SEED 에는 이 지침이 없고(색 이름 설명뿐), 규칙은 SEED 컴포넌트 값에서 읽었다.
• 금액 색(D1) — 지출 · 이체 금액은 fg-neutral, 수입만 fg-brand("+" 부호와 함께)다. 빨강(fg-critical)은 증감(▲ 올랐다) 한 뜻으로만 쓰고, 금액을 빨갛게 칠하지 않는다 — 거래 종류는 부호 · 아이콘 타일 · 배지가 말한다. Desk 별칭은 fg-income → fg-brand 만 색이고 fg-expense · fg-transfer 는 fg-neutral 을 가리킨다(Color 의 "Desk 전용 별칭"). 대가 — 파랑이 둘이다(수입 fg-brand · ▼ 내림 fg-informative). 라이트는 #0147AD · #1D6EC9(서로 1.65:1)로 갈리지만 다크는 #7AA9F6 · #69ABFF 로 1.00:1 — 다크 통계 화면에서 수입 금액과 ▼ 증감이 같은 색으로 보인다.
• 구역 제목(D3) — 페이지 안 카드 밖 구역 제목(데스크톱 h2 — "자산" 화면의 "입출금 · 저축" 같은)은 카드 머리와 같은 t5 · 700 · fg-neutral 한 벌이다. 위계는 크기가 아니라 자리(바닥 위 · 카드 밖)와 여백이 말한다 — 화면 제목 26 → 구역 16 → 카드 머리 16 → 카드 안 목록 제목 14. 나무 패널 머리도 t5 다(전 t6). 폼 안 묶음 제목(Fieldset)은 그대로 List Header 다(specs/components/field.md).
• 화면 부제(D6) — 화면 제목 아래 한 줄은 t5 · 400 · fg-neutral-muted 다(바닥 위 6.58:1 · 다크 8.73:1). 떠 있는 표면 설명(R7)과 같은 뜻이다. 길면 줄을 바꾼다 — 폰에서는 바 아래 한 줄을 더 차지한다.
• 글 버튼(D2) — SEED Text Button 값 그대로다: 글 t4 · 700 · fg-neutral-muted, 보이는 높이 36(spacing-x9) · 좌우 14(spacing-x3_5) · 위아래 8 · 모서리 8(radius-r2), 누름 바탕 bg-layer-default-pressed, 아이콘 · 꺾쇠 없음. 누르는 영역은 44 × 44(보이는 36 위아래로 4 씩 — WCAG 2.5.5 AAA ✓ · 2.5.8 AA ✓). 줄 끝에 둘 때는 오른쪽 여백만큼 바깥으로 내어(−14) 글자가 줄 끝 글자와 맞게 한다. 2026-10-08 Card 머리 동작 6B(14 · 500 · fg-neutral-subtle · 32 + 꺾쇠 16)를 사용자가 이 값으로 바꿨다. 상단 바 글 버튼(t5 · 500) · 스낵바 동작 · 페이지 배너 버튼 · 첨부 다시 시도 · 메뉴 시트 닫기는 SEED 가 각자 정한 값이라 이 역할에 들지 않는다.
• 자리 글(D7) — fg-placeholder 는 SEED 처럼 gray-600 이다(v119 — v102 의 gray-700 을 바꿨다). 앞뒤 글자 · 칸 아래 설명(fg-neutral-subtle, gray-700)보다 한 단계 옅어 빈 칸이 색으로도 보인다. 대가 — 흰 면 4.18:1 · 다크 시트 3.58:1 로 4.5:1 밑이고, 다크 값(#838997)이 fg-disabled 다크와 같다. 빈 칸과 막힌 칸은 칸 바탕(bg-disabled)과 커서로 갈린다. 막힌 칸의 자리 글은 Input · Textarea · Select 가 fg-disabled(SEED text-input 과 같다)이고, Input OTP 만 막혀도 fg-placeholder 그대로다(2026-10-17 사용자 결정 01T-013 — specs/components/input-otp.md).
• 묶음 이름(D4) — 사이드바 묶음(t4 · 700 · muted)과 푸터 열 제목(t3 · 500 · muted)은 List Header 규칙(subtle)과 다르지만 SEED 레시피(side-navigation.css) · 블록(footer-04) 값 그대로 둔다.
• 500 을 쓰는 줄 제목 — 고르는 상자 · 여닫는 머리 · 내비 항목 · 스위치 라벨만 500 이다. 나머지 줄 제목은 400 이고, 굵기는 목록 제목 · 금액에 남긴다. 설명은 400 이고, 여닫는 머리(Accordion · Collapsible)의 설명만 500 이다 — SEED accordion-item 의 description 이 medium(500) · fg.neutral-subtle 로 머리 제목 500 과 한 벌이다(2026-10-17 사용자 결정 — 01 기초 앱 · 글자 웹 비교 페이지 https://claude.ai/artifact/Q6SNYeUqDwfCjuVMfLwd2g 01T-005).

줄바꿈제목 링크 복사

한국어는 띄어쓰기 단위(어절)로 줄을 바꾼다. 브라우저와 Flutter 의 기본값은 글자 사이 어디서나 끊어서 좁은 칸에서 낱말이 두 줄로 갈린다 — groo 는 웹 · 앱 모두 단어 단위로 끊는다.

• 한 줄보다 긴 낱말(띄어쓰기 없는 긴 이름 · 이메일 · 주소)만 칸 끝에서 끊는다 — 칸 밖으로 넘치지 않는다. 지금 칸 밖으로 넘치는 긴 영문도 칸 안에 들어온다.
• 폭이 내용을 따르는 flex 항목은 min-width: 0 을 둬야 긴 낱말이 칸 안에서 끊긴다(컴포넌트 레시피는 이미 둔다).
• 앱의 이음 문자는 보여 주는 글에만 넣는다 — 입력칸 · 복사할 글 · 검색어 · 서버로 보낼 값에는 넣지 않는다.
• 영문은 원래 단어 단위라 바뀌지 않는다. 한 줄 말줄임 · 줄 수 제한은 그대로 쓴다.
• SEED 는 읽는 글(게시글 본문 · 시트 · 패널 제목 · 도움말 말풍선)만 단어 단위로 끊고, 컴포넌트 라벨 · 설명은 글자 단위로 둔다. groo 는 라벨 · 설명까지 단어 단위다.

사용 가이드라인제목 링크 복사

• 일관성 — 정해 둔 토큰과 스타일만 쓴다. 자리마다 새 크기를 만들지 않는다.
• 분명한 위계 — 제목과 본문을 또렷이 나눠, 정보가 빨리 읽히게 한다.
• 단위 — 웹은 rem 이라 사용자의 글자 크기 설정을 따른다. 커지면 깨지는 자리에만 -static 을 쓴다.
• 역할 먼저 — 화면 제목 · 긴 글처럼 자리가 정해져 있으면 역할 스타일을 쓴다. 뜻이 코드에 남는다. 그 밖의 자리는 위 "글자 역할" 표에서 고른다.
• 단어 단위 줄바꿈 — 맨 바깥 한 곳에서만 건다. 화면마다 word-break 를 따로 걸지 않는다.

옛 이름제목 링크 복사

컴포넌트 스펙은 모두 새 스케일로 옮겼다 — 옛 15단계 이름을 쓰는 컴포넌트는 없다. 옛 이름은 아직 부르는 도구(옛 미리보기 · 레시피 일부)를 옮길 때까지만 남겨 두었고, 새 자리에서 쓰지 않는다. 아래는 옛 이름이 어느 새 이름에 가까운지다.

display-xl(56px) · overline(10px)은 SEED 범위 밖이고 스펙에서 쓰는 곳이 없어 걷을 후보다.

구성과 일부 설명은 당근 SEED Design 의 Foundations 문서(Apache-2.0)를 바탕으로 했다. 값과 그림은 groo 것이다.