타이포그래피

폰트 패밀리

시스템 폰트를 쓰는 이유

• 다운로드 비용 없음 — 웹폰트를 요청하지 않으니 텍스트가 바로 그려진다
• 네이티브한 느낌 — OS와 같은 글꼴이라 익숙하고 믿음이 간다
• 성능 — 3G나 저사양 기기를 쓰는 사용자에게 결정적이다
• 현지화 대응 — 시스템 폰트는 비라틴 문자를 알아서 처리한다
• 파이프라인 호환 — Figma MCP 서버는 커스텀 서체를 넘겨주지 않는다. 디자인에서 코드로 넘어갈 때 손으로 고치지 않아도 되는 건 시스템 스택뿐이다.

성능 문제는 이론이 아니다. 웹폰트는 중요 경로에서 렌더링을 막는 요청이라, 데이터 요금이 나가는 3G 연결에서는 사용자가 잔액을 확인하는 시점이 늦어진다. Senco 사용자가 바로 그런 연결을 쓴다.

문서에는 Arial을 쓰는 이유

• 어디에나 있다 — 모든 OS에 설치돼 있고, 모든 이메일 클라이언트에서 표시된다
• 일관된 렌더링 — PDF, 인쇄물, 이메일이 어느 기기에서나 똑같이 보인다
• 전문적인 인상 — 깔끔하고 중립적이라 금융 문서에 어울린다
• 이메일에서 안전 — 영수증, 확인 메일 같은 거래 이메일에서 엉뚱한 대체 폰트가 뜨지 않는다

이메일 클라이언트에서는 system-ui를 쓸 수 없다. 영수증이 어떤 클라이언트에서는 Times New Roman으로, 다른 클라이언트에서는 Helvetica로 보이면, 사용자가 은행에 전달할 가능성이 가장 높은 문서를 믿기 어렵게 된다.

두 스택은 섞어 쓰지 않는다

제품 안의 텍스트는 항상 --ds-font-sans를 쓴다. 영수증 PDF나 확인 이메일처럼 밖으로 내보내는 결과물은 항상 문서 스택을 쓴다. 같은 영수증이라도 앱 안에서 보여 줄 때는 제품 스택을, 이메일로 보낼 때는 Arial을 쓴다. 폰트는 컴포넌트마다가 아니라 내보내는 시점에 바뀐다.

타입 스케일

폰트: system-ui (--ds-font-sans) · 비율: 1.200 (Minor Third) · 기준: 16px · 그리드: 4px 줄 높이

구현된 크기 토큰

ds.css에 정의된 값이다. 모든 타입 역할은 이 중 하나를 쓴다.

자간 규칙

글자가 클수록 자간을 좁히고, 작을수록 읽기 쉽게 넓힌다.

토큰으로 만든 자간 값은 Display와 H1에 쓰는 --ds-tracking-tight(-0.02em) 하나뿐이다. 나머지는 역할별로 적용한다.

줄 높이 규칙

제목

H2와 H3은 600이 아니라 700을 써서 WCAG의 "큰 텍스트"(굵게 18.66px / 14pt 이상) 조건을 맞춘다. 그러면 대비 기준이 3:1로 낮아진다. 18px/600인 H4는 bold가 아니라 semibold라서 큰 텍스트에 해당하지 않는다. 그래서 H4는 4.5:1을 그대로 넘어야 한다. 제목이 커 보이기 때문에, 시스템에서 가장 많이 놓치는 대비 규칙이다.

본문

10px 텍스트는 규칙상 꼭 읽지 않아도 되는 콘텐츠에만 쓴다. 송금을 마치거나 확인하는 데 꼭 읽어야 하는 내용은 --ds-text-2xs로 쓰지 않는다. 중요한 정보라면 최소 12px이다.

굵기 스케일

굵기는 네 가지뿐이고, 더 늘리지 않는다. 시스템 스택은 플랫폼마다 300이나 800을 제대로 지원한다고 보장할 수 없다. macOS에서는 보이는데 안드로이드에서는 아무 표시 없이 400으로 바뀌는 굵기라면, 그 디자인은 디자이너 컴퓨터에서만 존재하는 셈이다.

반응형 크기

제목은 데스크톱에서 커진다. 본문은 그대로다. 어느 기기에서 읽든 읽는 일 자체는 같기 때문이다.

H1은 브레이크포인트 대신 clamp()를 써서 페이지 제목이 화면 폭에 따라 부드럽게 커지게 한다. 나머지 단계는 모두 브레이크포인트에서 한 번에 바뀐다.

권장과 금지

통화와 숫자

Senco는 돈을 다룬다. 숫자는 분명하고 일관되게 보여야 한다.

• 거래 목록, 환율, 금액 표시처럼 열을 맞춰야 하는 곳에는 font-variant-numeric: tabular-nums를 쓴다
• 금융 데이터는 모두 고정폭 폰트가 아니라 시스템 sans-serif 폰트로 쓴다
• 계좌 잔액은 Display 크기(40px), 굵기 700으로 쓴다

고정폭 대신 tabular를 쓰는 이유

비례폭 숫자는 행마다 정렬이 조금씩 어긋나서, 거래 목록에서 튀는 값을 훑어 찾기가 어렵다. 고정폭 폰트로 바꾸면 정렬은 맞지만 코드처럼 보이고, 잔액에 어울리지 않는 인상을 준다. tabular-nums는 시스템 sans를 그대로 쓰면서 숫자 폭만 고정한다. 터미널 같은 느낌 없이 정렬만 맞출 수 있다.

금액 표기 구성

금액은 한 덩어리 텍스트로 쓰지 않는다. 액수가 가장 먼저 눈에 들어오고 통화 단위도 읽히도록 나눠서 구성한다.

센트는 색을 바꾸지 않고 크기만 한 단계 줄인다. 센트를 흐리게 하면 금액이 반올림된 것처럼 보이는데, 수수료 내역에서는 절대 주면 안 되는 인상이다.

이 구성은 잔액, 영수증, 수수료 행처럼 화면에 보여 주는 금액에만 적용한다. 필드에 입력 중인 금액은 필드 크기의 한 덩어리 텍스트다. <input>은 한 가지 글자 크기로만 표시되기 때문이다.

표기 규칙

• 자릿수 구분 기호와 소수점은 받는 쪽 화면에서는 수취인의 로케일을, 보내는 쪽 화면에서는 송금인의 로케일을 따른다. 둘 다 통화 코드를 붙여서 헷갈리지 않게 한다.
• 금액에는 항상 통화 코드(USD, NGN, PHP)를 붙인다. 여러 통화를 다루는 제품에서 숫자만 덩그러니 있으면 결함이다.
• 화면에 보여 주는 금액은 읽어 줄 형태도 따로 둔다. 보이는 텍스트는 짧은 코드로 두고 aria-hidden으로 숨기며, 화면에는 안 보이는 형제 요소에 통화 이름을 넣는다. 그러면 스크린 리더가 "U S D"를 한 글자씩 읽지 않고 "1,250.00 US Dollar"라고 읽는다.

<span aria-hidden="true">1,250.00 USD</span>
<span class="sr-only">1,250.00 US Dollar</span>

화면에 보여 주는 금액에만 해당한다. 편집할 수 있는 필드 안의 금액은 입력한 그대로 읽히고, 통화는 필드 설명으로 알려 준다. Amount input 참고.

• 음수는 괄호로 감싸지 않고 앞에 빼기 기호를 붙이며 --ds-error-text를 쓴다. 괄호는 회계 관례라서 스크린 리더로는 전달되지 않는다.
• 환율은 정확히 유효숫자 6자리로, 금액은 통화의 최소 단위까지(USD는 소수 2자리, JPY는 0자리) 표시한다. Tokens 참고.
• 시각은 사용자 현지 시간대 기준 24시간제 절대 시각으로 쓴다. "2 hours ago" 같은 상대 시각은 쓰지 않는다. 나중에 다시 보면 틀린 정보가 되고, 고객 지원에 보낸 스크린샷으로는 언제인지 답할 수 없다.
• 오늘이면 시각만 쓴다: 10:42. 올해 중 그 이전 날짜면 12 Mar, 10:42, 이전 연도면 12 Mar 2025, 10:42. 월 이름은 Intl.DateTimeFormat으로 로케일에서 가져오고, hourCycle: "h23"으로 고정한다.
• 상태 시각: 진행 중인 상태는 {Status} since {time} 형식이다(Pending since 10:42). 최종 상태는 {Status} · {time} 형식이다(Completed · 12 Mar, 10:42).

문서 타이포그래피

이메일, PDF, 외부 문서에는 어느 클라이언트와 기기에서나 똑같이 보이도록 Arial을 쓴다.

제품 본문은 16px, 문서 본문은 14px이다. 이메일과 PDF는 흔들리는 기차에서 한 손으로 보는 게 아니라, 자리를 잡고 화면을 가까이 두고 읽기 때문이다.

접근성

• 제목 위계는 순서대로 쓰고 단계를 건너뛰지 않는다 (h1 → h2 → h3)
• 본문 줄 높이는 읽기 쉽도록 최소 1.5
• 최소 글자 크기: 10px (--ds-text-2xs). 굵기 500, 양수 자간, 꼭 읽지 않아도 되는 콘텐츠에만 쓴다
• 텍스트 간격을 조정해도 콘텐츠가 사라지지 않아야 한다 (WCAG 1.4.12)
• 시맨틱한 제목 구조로 보조 기술의 탐색을 돕는다
• 대비: 일반 텍스트 4.5:1, 큰 텍스트 3:1 (굵게 18.66px 이상 또는 24px 이상)
• 크기는 rem으로 지정해서, 브라우저와 OS의 글자 크기 설정에 따라 인터페이스가 커지게 한다. px을 쓰는 타입 토큰은 없다.
• 320px 폭과 200% 확대에서도 가로 스크롤 없이 텍스트가 다시 배치돼야 한다 (WCAG 1.4.10)

알려진 공백과 drift

지금 이 스펙과 ds.css가 서로 맞지 않는 부분이다. 말없이 맞춰 두지 않고 목록으로 남긴다. 이 문서를 보고 코드를 만드는 에이전트가 어느 줄이 지켜야 할 계약인지 알아야 하기 때문이다.