Padding 시스템을 잡고 나서 다음으로 정리한 게 Typography였어요.
Typography란 쉽게 말하면 앱에서 쓰는 글자 스타일 체계예요.
글자 크기, 굵기, 색상을 어떤 기준으로 쓸지 미리 정해두는 거예요.
처음엔 이게 왜 중요한지 몰랐어요. 글자 크기야 그냥 보기 좋게 하면 되는 거 아닌가 싶었어요.
그런데 만들다 보니 글자 크기 하나가 앱 전체 분위기를 얼마나 크게 바꾸는지 몸으로 느꼈어요.
Typography를 미리 정하지 않으면 생기는 일
기준 없이 글자 크기를 설정하면 이런 일이 생겨요.
FeedPage 카드의 업체명은 14px인데, PeoplePage 카드의 업체명은 13px이에요.
두 페이지에서 같은 종류의 정보인데 크기가 달라요. 사용자는 왜 다른지 모르지만 뭔가 어색하다고 느껴요.
섹션 라벨은 어떤 페이지에서는 11px, 어떤 페이지에서는 12px예요.
작은 차이 같지만 나란히 보면 통일감이 없어 보여요.
이런 문제를 막으려면 처음부터 글자 크기 체계를 잡아두어야 해요.
제가 쓴 Typography 시스템
QuickLog에서는 글자 역할을 다섯 단계로 나눴어요.
| 역할 | 크기 | 굵기 | 색상 | 사용하는 곳 |
| 섹션 라벨 | 11px | Medium | 민트 #00A389 | DATE, TIME, STATS 등 섹션 제목 |
| 본문 제목 | 13px | Medium | Primary Text | 업체명, 카드 제목 |
| 본문 내용 | 12px | Regular | Primary Text | 담당자 이름, 일반 텍스트 |
| 보조 정보 | 11px | Regular | Secondary Text | 날짜, 장소, 시간 메타정보 |
| 태그 텍스트 | 11px | Regular | #0F6E56 | 키워드 태그, 담당자 태그 |
이 다섯 가지 역할만 쓰고, 역할에 맞는 크기와 굵기를 일관되게 적용했어요.
글자 크기보다 굵기가 더 중요해요
처음엔 글자 크기만 신경 썼어요. 그런데 만들다 보니 굵기가 훨씬 중요하다는 걸 알게 됐어요.
같은 13px이라도 Regular와 Medium은 느낌이 달라요.
Regular는 일반적인 내용, 보조 정보에 써요. Medium은 중요한 정보, 강조할 때 써요. 굵기만 잘 써도 어떤 정보가 중요한지 사용자가 자연스럽게 느껴요.
FlutterFlow에서 굵기 설정은 Font Weight에서 해요. 저는 400 Regular와 500 Medium 두 가지만 썼어요. 600 Semi Bold나 700 Bold는 너무 강해서 쓰지 않았어요.
색상으로 정보 위계 만들기
글자 색상도 역할에 따라 나눴어요.
| 색상 | 역할 | 사용하는 곳 |
| Primary Text | 가장 중요한 정보 | 업체명, 카드 제목, 입력값 |
| Secondary Text | 보조 정보 | 날짜, 장소, 담당자 이름 |
| 민트 #00A389 | 섹션 구분 | DATE, TIME, STATS 라벨 |
| 흰색 | 어두운 배경 위 텍스트 | AppBar 제목, 아바타 이니셜 |
Primary Text는 진한 색이에요. 가장 먼저 눈에 들어와야 하는 정보에 써요.
Secondary Text는 중간 회색이에요. 중요하지만 메인 정보보다는 덜 강조해도 되는 정보에 써요.
이렇게 색상으로 위계를 만들면 사용자가 피드 카드를 빠르게 스캔할 때 중요한 정보부터 자연스럽게 눈에 들어와요.
Letter Spacing으로 세련된 느낌 만들기
작은 팁인데 효과가 꽤 커요.
섹션 라벨처럼 짧은 대문자 텍스트에 Letter Spacing을 주면 훨씬 세련된 느낌이 나요.
저는 DATE, TIME, LOCATION, STATS 같은 섹션 라벨에 Letter Spacing 1.5를 줬어요. 글자 사이 간격이 살짝 벌어지면서 고급스러운 느낌이 나요.
반대로 일반 본문 텍스트에는 Letter Spacing을 주지 않아요. 본문에 간격을 주면 오히려 읽기 불편해져요.
| 텍스트 종류 | Letter Spacing |
| 섹션 라벨 (대문자) | 1.5 |
| 본문 제목 | 0 |
| 본문 내용 | 0 |
| 보조 정보 | 0 |
Line Height도 신경 쓰세요
여러 줄로 표시되는 텍스트에는 Line Height도 설정해야 해요.
Line Height는 줄 간격이에요. 기본값보다 살짝 넓게 주면 텍스트가 훨씬 읽기 편해져요.
저는 여러 줄 텍스트에 Line Height 1.5를 줬어요. 한 줄짜리 텍스트는 기본값 그대로 뒀어요.
FlutterFlow에서 Typography 설정하는 방법
FlutterFlow에는 Theme Text Style이라는 기능이 있어요.
App Settings에서 미리 텍스트 스타일을 정의해두면, 각 위젯에서 불러다 쓸 수 있어요. 나중에 스타일을 바꾸고 싶으면 Theme Text Style만 수정하면 그 스타일을 쓰는 모든 텍스트가 한번에 바뀌어요.
저는 이 기능을 처음에 몰라서 모든 텍스트에 직접 크기와 굵기를 설정했어요. 나중에 폰트 크기를 바꾸고 싶을 때 하나씩 다 수정해야 했어요. 정말 힘들었어요.
처음부터 Theme Text Style을 활용하면 나중에 수정이 훨씬 편해요.
실제로 적용해보니 달라진 점
Typography 시스템을 잡기 전과 후를 비교하면 차이가 확연해요.
잡기 전에는 각 페이지 분위기가 조금씩 달랐어요. FeedPage는 뭔가 가볍고, LogPage는 뭔가 무겁고.
같은 앱인데 다른 앱처럼 느껴졌어요.
잡고 나서는 어느 페이지를 열어도 같은 분위기가 느껴져요. 사용자가 페이지를 이동해도 혼란스럽지 않아요.
이게 바로 Typography 시스템의 힘이에요.
앱 만들기 전에 이것만 정해두세요
앱을 만들기 시작하기 전에 종이에 이렇게 적어두세요.
가장 중요한 제목은 16px Medium Primary Text. 카드 제목은 13px Medium Primary Text. 일반 내용은 12px Regular Primary Text. 보조 정보는 11px Regular Secondary Text. 섹션 라벨은 11px Medium 민트색 Letter Spacing 1.5.
이것만 정해두고 일관되게 적용하면 앱 전체가 훨씬 정돈되어 보여요.
글자 크기는 작은 디테일처럼 보이지만, 이 디테일들이 모여서 앱의 완성도를 만들어요.
다음 편에서는 색상 레벨 설계에 대해 이야기해볼게요. Primary, Secondary, Tertiary가 어떤 역할을 해야 하는지, 그리고 색상 위계를 미리 구상해두면 앱 개발이 얼마나 편해지는지 다룰 거예요.
'06. 자동화 및 개발' 카테고리의 다른 글
| #14 색상 레벨 설계 [3/3] — Primary부터 Tertiary까지 미리 구상해야 하는 이유 (0) | 2026.04.15 |
|---|---|
| #12 앱 디자인 일관성의 비밀 [1/3] — Padding 기준을 미리 정해야 하는 이유 (0) | 2026.04.15 |
| #11 FlutterFlow 위젯 완전 정복 — Column, Row, Container, Wrap, ListView 언제 쓰나? (0) | 2026.04.12 |
| #10 LogPage 만들기 2 — 여러 업체와 담당자를 동시에 기록하는 UX 설계 (0) | 2026.04.10 |
| #09 LogPage 만들기 1 — 미팅 기록 입력 화면 레이아웃 잡기 (0) | 2026.04.10 |