타이포그래피
제품 화면은 Noto Sans 한 가족으로 씁니다. 문서 명조는 콘텐츠 언어의 서체가 문장 전체를 그립니다.
라틴 · 숫자는 어느 언어 화면에서든 Noto Sans 가 먼저 그리고, 한글은 Noto Sans KR, 일본어는 Noto Sans JP 가 그립니다. 큰 숫자만 같은 가족의 Display 컷으로 표정을 줍니다. 화면에는 h1 을 두지 않고(이름은 브레드크럼), 위계는 크기보다 굵기와 색으로 냅니다.
읽기 위한 문서 본문에는 명조를 씁니다. 한국어는 마루 부리(본문) · 나눔명조(제목), 일본어는 BIZ UDP명조 · Noto Serif JP, 영어는 Noto Serif · Noto Serif Display 입니다. 명조는 문서 스타일 안에서만 씁니다. 카드 안의 제목 · 설명 · 표는 고딕입니다.
| 역할 | 서체 | 토큰 | 굵기 | 쓰는 곳 |
|---|---|---|---|---|
| UI | Noto Sans → Noto Sans KR → Noto Sans JP | --uyoo-font-sans | 400 · 500 · 600 · 700 | 버튼 · 라벨 · 표 · 내비게이션 · 폼 · 배지 |
| 큰 숫자 · 랜딩 · 덱 제목 | Noto Sans Display → Noto Sans KR | --uyoo-font-display | 500 · 600 · 700 | 지표 숫자 · 랜딩 제목 · 덱 제목 |
| ID · 코드 · 키 | Noto Sans Mono → ui-monospace → Noto Sans KR | --uyoo-font-mono | 400 · 500 | 키 · 경로 · 코드 · 버전. 끝을 고딕으로 둬 한글이 섞여도 두부가 안 납니다 |
| 문서 본문 | 마루 부리 · BIZ UDP명조 · Noto Serif(콘텐츠 언어별) | --uyoo-font-serif | 400 | 요구사항 문장 · 노트 · 인용 |
| 문서 제목 | 나눔명조 · Noto Serif JP · Noto Serif Display(콘텐츠 언어별) | --uyoo-font-serif-title | 700 | 문서 제목 · 섹션 제목. 본문에는 쓰지 않습니다 |
크기 — 한 · 영 · 일 같은 줄
제품 화면의 단계입니다. 라벨의 위계는 대문자 · 넓은 자간이 아니라 굵기 500 + 보조 색으로 냅니다.
| 이름 | 크기 · 줄 · 굵기 | 한국어 | English | 日本語 |
|---|---|---|---|---|
| kpi-lg --uyoo-text-3xl | 32 / 38 · 600 Display | ₩12,480,000 | 98.6% | 2.4日 |
| kpi --uyoo-text-2xl | 24 / 30 · 600 Display | 2.4일 | 1,284 | 12件 |
| section --uyoo-text-xl | 20 / 28 · 600 | 결제 설정 | Billing settings | お支払い設定 |
| title --uyoo-text-lg | 16 / 24 · 600 | 작업 목록 | Tasks | タスク一覧 |
| body-lg --uyoo-text-lg | 16 / 26 · 400 | 새 PG 연동으로 결제 모듈을 옮깁니다. | Move the payment module to the new PG. | 決済モジュールを新しいPGへ移行します。 |
| body --uyoo-text-md | 14 / 22 · 400 기본 | 초대 메일을 다시 보냈습니다. | The invitation was sent again. | 招待メールを再送しました。 |
| body-sm --uyoo-text-sm | 13 / 20 · 400 | 마지막 수정 2시간 전 | Edited 2 hours ago | 2時間前に編集 |
| label --uyoo-text-xs | 12 / 16 · 500 | 담당 | Assignee | 担当者 |
| caption --uyoo-text-xs | 12 / 16 · 400 | 24개 중 1–6 | 1–6 of 24 | 24件中 1–6 |
라틴 제목에만 음수 자간(-0.01em)을 둡니다(:lang(en)). 한 · 일은 자간 0 입니다. 대문자 라벨은 :lang(en) 의 랜딩 아이브로에만 씁니다.
굵기 — 네 단계만
없는 굵기를 지정하면 브라우저가 경고 없이 가장 가까운 굵기로 대체합니다.
400 본문 Body
문장 · 표 셀
500 라벨 Label
라벨 · 버튼 · 탭
600 제목 Title
카드 제목 · 지표 숫자 · 선택된 세그먼트
700 강조 Strong
랜딩 · 덱 제목에만
숫자 · ID · 시각
표 · 금액 · 날짜는 고정폭 숫자(tabular-nums)로 오른쪽 정렬합니다. ID 는 Noto Sans Mono 12.5px 보조 색입니다.
| 클래스 | 결과 | 용도 |
|---|---|---|
| (없음) | 1,234,567 · 2026-09-06 · prj_01HZX | 일반 본문 |
| num | 1,234,567 · 2026-09-06 · prj_01HZX | 표 안의 수치. 자릿수가 세로로 정렬됩니다 |
| id | 1,234,567 · 2026-09-06 · prj_01HZX | ID · 코드 · 변수 이름. Td mono 는 이 클래스를 적용합니다 |
시각 — UTC 를 받아 서울 시간으로 표시합니다
| 함수 | 입력 | 출력 |
|---|---|---|
| formatDateTime | 2026-09-06T02:12:00Z | 2026-09-06 11:12 |
| formatDate | 2026-09-06T02:12:00Z | 2026-09-06 |
| formatRelative | 2026-09-06T02:12:00Z (now = 03:00Z) | 48분 전 |
import { formatDate, formatDateTime, formatRelative } from "@uyoolabs/ui";
formatDateTime("2026-09-06T02:12:00Z"); // "2026-09-06 11:12"
formatDate("2026-09-06T02:12:00Z"); // "2026-09-06"
formatRelative(new Date(Date.now() - 3 * 60_000)); // "3분 전"시간대는 서울(Asia/Seoul)로 고정합니다. 클라이언트 로케일을 따르면 서버와 클라이언트의 결과가 달라 하이드레이션 오류가 납니다. 상대 시각에 손을 올리면 정확한 시각을 툴팁으로 보입니다.
문장 폭 · 링크
본문 한 줄은 한국어 40자 · 영어 72자 안팎(최대 640px)으로 둡니다.
어절 중간에서 끊지 않고(keep-all), 마지막 줄에 한 어절만 남지 않게 합니다. 링크는 글자색 45% 밑줄이고 손을 올리면 밑줄이 글자색이 됩니다. 밑줄은 두께 1px, 글자와의 간격 0.22em 입니다.
링크 색(--uyoo-link)은 바닥 · 파인 면 위에서도 4.5:1 이 되게 primary 보다 한 단계 짙습니다. 밑줄 색을 따로 정하려면 decoration-* 유틸리티로 덮어씁니다.
서체 순서 — 한 · 영 · 일
UI 는 화면 언어(:lang)를 따라 라틴을 어디서나 Noto Sans 로 고정합니다. 명조는 콘텐츠 언어를 따르고, 그 언어의 서체가 라틴까지 그려 한 문장 안에서 서체가 바뀌지 않습니다.
| 쓰임 | 한국어 · 기본 | 日本語 | English |
|---|---|---|---|
| UI 본문 | Noto Sans → Noto Sans KR → Noto Sans JP | Noto Sans → Noto Sans JP → Noto Sans KR | 한국어 열과 같음 |
| 큰 숫자 · 랜딩 · 덱 제목 | Noto Sans Display → Noto Sans KR | Noto Sans Display → Noto Sans JP | 한국어 열과 같음 |
| ID · 코드 · 키 | Noto Sans Mono → ui-monospace → Noto Sans KR | … → Noto Sans JP | 한국어 열과 같음 |
| 문서 본문 · 인용 | 마루 부리 → Noto Serif | BIZ UDP명조 → Noto Serif | Noto Serif → 마루 부리 → BIZ UDP명조 |
| 문서 제목 | 나눔명조 → Noto Serif Display | Noto Serif JP → Noto Serif Display | Noto Serif Display → 나눔명조 |
| 끝자리(웹폰트가 못 올 때) | Apple SD Gothic Neo · Malgun Gothic / AppleMyungjo | Hiragino Sans · Yu Gothic UI · Meiryo / Hiragino Mincho · Yu Mincho | system-ui / serif |
- 한국어
- 본문 줄 간격 1.6 · 제목 1.3 · word-break: keep-all · 자간 0
- 日本語
- 본문 1.7 · 제목 1.35 · line-break: strict(띄어쓰기가 없어 keep-all 을 걸면 구두점에서만 줄이 바뀝니다) · 자간 0
- English
- 본문 1.5 · 제목 1.25 · 보통 줄바꿈 · 제목 -0.01em
- 같은 한자
- 같은 코드라도 한국 · 일본 자형이 다릅니다. 일본어(:lang(ja))에서는 JP 서체를 KR 앞에 둡니다.
서체 스택 토큰
| 토큰 | 쓰는 곳 |
|---|---|
| --uyoo-font-sans | UI 고딕. Noto Sans → Noto Sans KR → Noto Sans JP 순서입니다 |
| --uyoo-font-display | 큰 숫자 · 랜딩 · 덱 제목(Noto Sans Display) |
| --uyoo-font-mono | ID · 코드 · 키. 한글 · 가나가 두부로 나오지 않게 끝을 고딕으로 둡니다 |
| --uyoo-font-serif-latin | 영어 문서 본문(Noto Serif) |
| --uyoo-font-serif-ko | 한국어 문서 본문(마루 부리) |
| --uyoo-font-serif-ja | 일본어 문서 본문(BIZ UDP명조) |
| --uyoo-font-serif-title-latin | 영어 문서 제목(Noto Serif Display) |
| --uyoo-font-serif-title-ko | 한국어 문서 제목(나눔명조 700) |
| --uyoo-font-serif-title-ja | 일본어 문서 제목(Noto Serif JP) |
| --uyoo-font-serif | 문서 본문 명조. 콘텐츠 언어(:lang)에 따라 위 세 스택 중 하나가 됩니다 |
| --uyoo-font-serif-title | 문서 제목 명조. 본문에는 쓰지 않습니다 |
문서 명조 — 콘텐츠 언어별
lang 만 바꾸면 --uyoo-font-serif · --uyoo-font-serif-title 이 그 언어의 서체를 고릅니다. 화면 언어와 문서 언어가 다르면 문서를 감싼 요소에 lang 을 답니다.
한국어 · 나눔명조 700 + 마루 부리
결제 재시도 정책
결제가 실패하면 고객에게 같은 날 안에 다시 시도할 수 있는 링크를 보냅니다.
日本語 · Noto Serif JP 700 + BIZ UDP明朝
決済再試行ポリシー
決済に失敗した場合、当日中に再試行できるリンクを顧客に送ります。
English · Noto Serif Display 700 + Noto Serif
Payment retry policy
When a payment fails, we send the customer a link to retry it the same day.
명조는 작은 크기의 가로획 두께를 재서 골랐습니다. 일본어 BIZ UDP명조는 13px 가로획이 Noto Serif JP 보다 37–39% 두껍습니다. 문서 등급(제목 34 · 섹션 19 · 문장 17 · 노트 15.5 · 인용 14)은 문서 페이지에 있습니다.
서체 견본
서체 이름을 직접 지정해 토큰과 상관없이 실물을 봅니다. 위 줄은 22px 700, 아래 줄은 15px 입니다.
UI · 한국어
결제 설정 Billing
결제 API v2 를 10월 24일까지 PAY-142 로 옮깁니다.
UI · 日本語
決済設定 Billing
決済API v2を10月24日までにPAY-142へ移行します。
문서 · 한국어(나눔명조 · 마루 부리)
결제 재시도 정책
결제가 실패하면 고객에게 같은 날 안에 다시 시도할 수 있는 링크를 보냅니다.
문서 · 日本語(Noto Serif JP · BIZ UDP明朝)
決済再試行ポリシー
決済に失敗した場合、当日中に再試行できるリンクを顧客に送ります。
문서 · English(Noto Serif Display · Noto Serif)
Payment retry policy
When a payment fails, we send the customer a link to retry it the same day.
서체 로드
쓰는 표면의 서체만 불러옵니다. 시스템에 설치된 서체에 기대지 않습니다.
// 루트 layout(또는 Vite 진입 파일). 쓰는 표면만 불러온다.
import "@uyoolabs/ui/fonts/app"; // UI 고딕 · 큰 숫자 · ID (한 · 영)
import "@uyoolabs/ui/fonts/app-ja"; // 일본어 화면
import "@uyoolabs/ui/fonts/doc-ko"; // 한국어 문서: 마루 부리 · 나눔명조
import "@uyoolabs/ui/fonts/doc-ja"; // 일본어 문서: BIZ UDP명조 · Noto Serif JP
import "@uyoolabs/ui/fonts/doc-en"; // 영어 문서: Noto Serif · Noto Serif Display서체 파일은 앱의 번들러가 npm 서체 패키지(Fontsource)에서 꺼내 앱 자신의 주소로 배포합니다. 다른 주소(CDN)에서 받으려면 서체에 CORS 헤더가 필요한데, 조직 CDN 에는 그 설정이 없습니다. 마루 부리는 npm 패키지가 없어 이 패키지 안에 woff2 두 개(400 · 600)를 함께 둡니다. 한 · 일 서체는 unicode-range 조각으로 나뉘어 화면에 나온 글자의 조각만 받습니다.
| 표면 | 불러올 서체 | 진입점 |
|---|---|---|
| 제품 앱 | Noto Sans 400–700 · Noto Sans KR 400–700 · Noto Sans Display 600 · Noto Sans Mono 400 | fonts/app. 일본어 화면은 fonts/app-ja 를 더합니다 |
| 문서 · 한국어 | 위 + 마루 부리 400 · 나눔명조 700 | fonts/doc-ko |
| 문서 · 일본어 | 위 + BIZ UDP명조 400 · Noto Serif JP 700 | fonts/doc-ja |
| 문서 · 영어 | 위 + Noto Serif 400 · Noto Serif Display 700 | fonts/doc-en |
| 랜딩 · 덱 | Noto Sans Display 500–700 + 본문 Sans | fonts/app |
v1 의 PretendardFont · DocumentFonts(jsDelivr 에서 서체 CSS 를 읽던 컴포넌트)는 v2.0.0 에서 빠집니다. 위 진입점으로 바꿉니다.
글자 크기 · 줄 높이
제품 화면의 크기입니다. 한 · 일 본문은 :lang 에서 줄 간격을 1.6 으로 한 단계 넓힙니다.
| 토큰 | 값 | 쓰는 곳 |
|---|---|---|
| --uyoo-text-xs | 12px | 라벨 · 캡션 12/16 |
| --uyoo-text-sm | 13px | 작은 본문 13/20 |
| --uyoo-text-md | 14px | 본문 기본 14/22 |
| --uyoo-text-lg | 16px | 카드 제목 · 큰 본문 16/24 |
| --uyoo-text-xl | 20px | 섹션 20/28 |
| --uyoo-text-2xl | 24px | 지표 24/30(Display) |
| --uyoo-text-3xl | 32px | 큰 지표 32/38(Display) |
| --uyoo-leading | 1.5 | 본문 줄 높이. 한 · 일은 1.6 |
| --uyoo-leading-tight | 1.25 | 제목 · 한 줄 컨트롤 |
라이선스와 서체 추가 기준
지금 쓰는 서체는 모두 SIL OFL 1.1 입니다.
| 서체 | 제작 | 라이선스 | 배포처 |
|---|---|---|---|
| Noto Sans · KR · JP · Display · Mono | OFL 1.1 | Fontsource 가변 서체 패키지 | |
| Noto Serif · Serif JP · Serif Display | OFL 1.1 | Fontsource 가변 서체 패키지 | |
| 마루 부리 | 네이버 · 네이버문화재단 | OFL 1.1 | 패키지 안 woff2(fonts-archive/MaruBuri 와 같은 커밋) |
| 나눔명조 | 네이버 | OFL 1.1 | Fontsource |
| BIZ UDP명조 | 모리사와 | OFL 1.1 | Fontsource |
서체를 추가하기 전 확인할 네 가지
- 웹 임베딩과 파일 변형을 허용하는가. 한글 서체를 웹에서 쓰려면 woff2 로 변환하고 서브셋으로 나눠야 하는데, 이 작업이 파일 변형에 해당합니다. “웹페이지 · UI 무료”라고 적힌 서체도 임베딩과 변형은 따로 금지하는 경우가 많습니다. OFL 은 둘 다 허용합니다.
- npm 서체 패키지가 있는가. Google Fonts 에 있는 서체는 Fontsource 에도 있습니다. 없으면 woff2 를 이 패키지 안에 두고 라이선스 파일을 함께 둡니다(마루 부리처럼).
- 필요한 굵기가 있는가. 한글 서체는 굵기가 한두 가지뿐인 경우가 많습니다. 굵기로 위계를 만들 수 없는 서체는 제목용으로만 씁니다.
- 13px 에서 가로획이 선명한가. 인쇄용으로 설계된 명조는 작은 크기에서 가로획이 흐려집니다. 실제 화면 크기로 배치해 가로획 두께를 잽니다.
을유1945는 검토했지만 쓰지 않았습니다. 제목용으로 잘 맞았지만 라이선스가 임베딩과 파일 수정 · 변형을 금지하기 때문입니다.
로고의 글자(Museo Sans Rounded · 배달의민족 도현)는 로고 이미지 제작에만 쓴 서체로, UI 텍스트에는 쓰지 않습니다. 자세한 내용은 규격을 참고하세요.