타이포그래피

본문은 Pretendard Variable, 수치와 ID 는 시스템 mono 입니다.

시스템에 설치된 폰트에 기대지 않습니다 — 방문자 대부분은 설치돼 있지 않습니다. PretendardFont 가 동적 서브셋 CSS 를 head 에 넣습니다. 본문은 word-break: keep-all 로 한국어 단어가 줄 중간에서 끊기지 않고, h1–h3 는 letter-spacing -0.02em 에 text-wrap: balance 입니다.

mono 는 앱이 next/font 로 --font-geist-mono 를 주입하면 그것을, 없으면 시스템 mono 를 씁니다.

import { PretendardFont } from "@uyoolabs/uyooglass/brand";

// 루트 layout 의 <head> 에 둔다. jsDelivr 의 동적 서브셋을 preconnect + stylesheet 로 받는다.
<head><PretendardFont /></head>

크기

Tailwind 기본 스케일을 그대로 씁니다. 새 크기를 들이지 않습니다.

text-xs12px
우유랩스 디자인 시스템 · Glass surface
text-sm14px
우유랩스 디자인 시스템 · Glass surface
text-base16px
우유랩스 디자인 시스템 · Glass surface
text-lg18px
우유랩스 디자인 시스템 · Glass surface
text-xl20px
우유랩스 디자인 시스템 · Glass surface
text-2xl24px
우유랩스 디자인 시스템 · Glass surface
text-3xl30px
우유랩스 디자인 시스템 · Glass surface

수치와 ID

num 은 tabular-nums 만, id 는 mono 서체 + tabular-nums + 0.8125rem 입니다.

클래스렌더용도
(없음)1,234,567 · 2026-09-06 · prj_01HZX일반 본문
num1,234,567 · 2026-09-06 · prj_01HZX표 안의 수치. 자릿수가 세로로 맞는다
id1,234,567 · 2026-09-06 · prj_01HZXID · 코드 · 변수 이름. Td mono 가 이 클래스다

날짜 포맷

서울 고정입니다. 클라이언트 로케일에 맡기면 서버·클라이언트 하이드레이션이 어긋납니다.

출력

함수입력출력
formatDateTime2026-09-06T02:12:00Z2026-09-06 11:12
formatDate2026-09-06T02:12:00Z2026-09-06
formatRelative2026-09-06T02:12:00Z (now = 03:00Z)48분 전
import { formatDate, formatDateTime, formatRelative } from "@uyoolabs/uyooglass";

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분 전"