폰트 수치 일일이 적지 마세요: 개발자가 감동하는 기획자의 타이포그래피 가이드

-
폰트 수치 일일이 적지 마세요: 개발자가 감동하는 기획자의 타이포그래피 가이드

폰트 수치 일일이 적지 마세요: 개발자가 감동하는 기획자의 타이포그래피 가이드

화면 하나 만들 때마다 “16px, Bold, 행간 140%…”를 텍스트 옆에 적고 있나요?

화면이 수십 장이 되면 기획자는 숫자에 흔들리고, 개발자는 매번 캡처해서 확인합니다. 결국 폰트는 커지고, 일정은 작아집니다. 🫠

해결책은 단순합니다. 수치로 소통하지 말고, ‘이름(스타일)’으로 소통하세요.

피그마의 텍스트 스타일(Text styles)을 “타이포그래피 규칙(디자인 토큰)”으로 시스템화하면, 기획서에서 폰트 수치 기입 노동이 거의 사라지고 개발 전달도 깔끔해집니다.


폰트 수치 일일이 적지 마세요

1) 수치가 아닌 ‘이름’으로 소통하기

개발은 보통 “16px Bold”를 화면마다 다시 읽지 않습니다. 대신 Body-1, Title-Large 같은 스타일 이름을 코드에 한 번 선언하고 계속 재사용합니다.

  • 기획자: “본문은 Body-1, 섹션 제목은 Title-Medium”
  • 개발자: .typo-body-1 같은 클래스(또는 토큰)를 만들어 반복 적용

결론: 숫자는 “매번 확인”, 이름은 “한 번만 합의”입니다.

2) 기획자가 잡아야 할 타이포그래피 핵심 3요소

폰트는 “크기”만 맞추면 끝이 아닙니다. 아래 3개가 세트로 고정돼야 개발 구현이 흔들리지 않습니다.

  • 크기(Font Size): 제한된 스케일로 통일(예: 12/14/16/20/24)
  • 행간(Line Height): Auto 대신 비율 또는 px로 명시(가독성 안정)
  • 자간(Letter Spacing): 기본 0을 원칙으로, 타이틀에만 소폭 조정처럼 “스타일 단위로” 명시

이 3개가 고정되면 개발자 질문은 “이거 몇 px?”에서 “이거 Body-1 맞죠?”로 바뀝니다. 질문이 ‘계산’에서 ‘확인’으로 바뀌는 순간, 승리입니다. ✅

3) 실무 바로 적용: 텍스트 스타일 5종 세트(추천 수치 포함)

아래 5종은 웹/모바일 웹에서 가장 무난하게 시작할 수 있는 “기본 뼈대”입니다. 팀에 표준이 없다면 이걸 기준으로 합의부터 잡아두면 됩니다.

3-1. 추천 타이포 5종 스펙

Style 이름 Font size Line height Letter spacing Weight 권장 사용처
Title-Large 24px 32px (1.33) -0.01em 700 페이지 헤더, 주요 타이틀
Title-Medium 20px 28px (1.4) -0.005em 600 섹션 제목, 카드 타이틀
Body-1 16px 24px (1.5) 0em 400 본문, 설명 문장, 기본 텍스트
Body-2 14px 22px (1.57) 0em 400 보조 설명, 리스트 서브 텍스트
Caption 12px 18px (1.5) 0.01em 400 힌트, 주석, 폼 안내 문구

3-2. 개발자가 그대로 가져갈 수 있게 “토큰/클래스”로도 써두기

Typography Guide 페이지에 아래를 그대로 붙여 넣어두면, 개발자는 이걸 기반으로 CSS(또는 토큰)를 바로 만들 수 있습니다.

/* Typography Tokens (example) */
:root{
  --typo-title-lg-size: 24px;
  --typo-title-lg-line: 32px;
  --typo-title-lg-track: -0.01em;
  --typo-title-lg-weight: 700;

  --typo-title-md-size: 20px;
  --typo-title-md-line: 28px;
  --typo-title-md-track: -0.005em;
  --typo-title-md-weight: 600;

  --typo-body-1-size: 16px;
  --typo-body-1-line: 24px;
  --typo-body-1-track: 0em;
  --typo-body-1-weight: 400;

  --typo-body-2-size: 14px;
  --typo-body-2-line: 22px;
  --typo-body-2-track: 0em;
  --typo-body-2-weight: 400;

  --typo-caption-size: 12px;
  --typo-caption-line: 18px;
  --typo-caption-track: 0.01em;
  --typo-caption-weight: 400;
}

/* Utility Classes (example) */
.typo-title-lg{
  font-size: var(--typo-title-lg-size);
  line-height: var(--typo-title-lg-line);
  letter-spacing: var(--typo-title-lg-track);
  font-weight: var(--typo-title-lg-weight);
}
.typo-title-md{
  font-size: var(--typo-title-md-size);
  line-height: var(--typo-title-md-line);
  letter-spacing: var(--typo-title-md-track);
  font-weight: var(--typo-title-md-weight);
}
.typo-body-1{
  font-size: var(--typo-body-1-size);
  line-height: var(--typo-body-1-line);
  letter-spacing: var(--typo-body-1-track);
  font-weight: var(--typo-body-1-weight);
}
.typo-body-2{
  font-size: var(--typo-body-2-size);
  line-height: var(--typo-body-2-line);
  letter-spacing: var(--typo-body-2-track);
  font-weight: var(--typo-body-2-weight);
}
.typo-caption{
  font-size: var(--typo-caption-size);
  line-height: var(--typo-caption-line);
  letter-spacing: var(--typo-caption-track);
  font-weight: var(--typo-caption-weight);
}

운영 팁: 이 5종 세트로 시작해서, 새 스타일이 필요할 때는 “추가 이유”를 남기고 늘리면 스타일이 폭증하지 않습니다.

4) 실무 네이밍 규칙(Body-1, Title-Large) 정하기

스타일 이름은 팀 공용 언어여야 합니다. 피그마에서 관리까지 고려하면 슬래시(/) 그룹핑이 특히 유용합니다.

  • 가장 단순: Title-Large, Body-1
  • 그룹핑 포함(추천): Web/Title-Large, Web/Body-1, Web/Caption

중요한 건 “깊은 계층”이 아니라 “통일”입니다. Web/Typography/Body/Regular/16 같은 이름은 멋져 보이지만 유지보수가 괴로워질 확률이 높습니다.

5) 피그마에서 텍스트 스타일 등록하는 법

  1. 텍스트 레이어를 만들고, 3요소(크기/행간/자간)와 weight를 맞춥니다.
  2. 오른쪽 패널 Typography 영역에서 스타일(Style) 선택 메뉴를 엽니다.
  3. +로 새 텍스트 스타일을 만들고 이름을 저장합니다. 예: Web/Body-1
  4. 이후부터는 수치 기입 대신 스타일 적용으로 통일합니다.

포인트: 화면마다 숫자를 적는 대신, “스타일이 적용되어 있다”가 스펙입니다.

6) 개발자가 감동하는 Typography Guide 페이지 구성

기획서 맨 앞(또는 별도 페이지)에 Typography Guide를 만들면, 개발자는 그 페이지를 사전처럼 씁니다.

추천 구성(1페이지 완성형)

  1. Type Scale 샘플: Title-Large, Body-1 등 스타일별 예시 문장 나열
  2. Spec 표: 위 5종 스펙 표 그대로 배치
  3. Dev Mapping: 토큰/클래스 예시 코드(위 CSS 블록)
  4. Usage Rules: “Caption은 보조 안내에만, 본문에 쓰지 않기” 같은 룰 3줄

기획서에 넣기 좋은 문장 템플릿:

Typography 규칙:
- 모든 텍스트는 지정된 스타일(Title-Large, Body-1 등)로만 작성합니다.
- 신규 스타일 추가 시 사유를 Typography Guide에 기록합니다.
- 개발은 스타일명 기준으로 매핑합니다(Dev Mode에서 스타일명 확인).

7) 자주 터지는 실수 체크

  1. 스타일 이름이 화면마다 다름: Body, Body1, 본문이 섞이면 즉시 혼란
  2. 스타일 적용 후 부분 수정 남발: 특정 화면만 15px 같은 “예외”가 누적
  3. 행간 방식 뒤섞임: Auto, %, px가 혼재되면 구현에서 흔들림
  4. Caption 남발: 작은 글씨가 많아지면 가독성보다 피로가 먼저 옴
  5. Bold로 계층 해결: 굵기만 바꾸면 구조가 아니라 감정이 됩니다
  6. Guide 페이지가 최신이 아님: 버전/날짜 표기 없으면 “최신이 뭐죠?”로 회귀

결론: 시스템이 자유를 만듭니다

처음 규칙을 정하는 과정은 손이 조금 갑니다. 하지만 한 번 정리한 타이포그래피 시스템은 프로젝트 내내

  • 기획자의 수치 기입 노동을 줄이고
  • 개발자의 확인 노동을 줄이고
  • 결과물의 일관성을 올립니다.

오늘은 딱 이것만 해보세요. Body-1 스타일을 만들고, Typography Guide 페이지에 샘플 문장 한 줄을 찍어두기. 그 한 줄이 팀의 “공용 언어”가 됩니다. ✅

FAQ

Q 추천 5종 세트만으로 정말 충분한가요?

A대부분의 초기 프로젝트는 충분합니다. “필요할 때만 추가” 원칙이 핵심입니다. 스타일이 많아질수록 속도는 오히려 느려지는 경우가 많습니다.

Q 행간은 px로 쓰는 게 좋나요, 비율로 쓰는 게 좋나요?

A둘 다 가능합니다. 다만 팀에서 한 방식으로 통일하는 게 가장 중요합니다. 실무에선 px 값을 기본으로 두고, 괄호로 비율(예: 24px, 1.5)을 같이 적어두면 해석이 줄어듭니다.

Q 자간은 왜 Caption만 +0.01em을 줬나요?

A작은 글씨는 밀도가 높아 보이기 쉬워, 아주 소폭의 자간이 읽기 부담을 덜어줄 때가 있습니다. 다만 폰트에 따라 체감이 달라질 수 있으니, “Caption만”처럼 제한적으로 적용하는 방식이 안전합니다.

Q 이 스펙을 모바일에도 그대로 써도 되나요?

A가능하지만, 앱/모바일 웹에서 본문은 15~16px 영역에서 팀이 선호를 다르게 잡는 경우가 있습니다. 우선 16px 기반으로 시작하고, 실제 화면 밀도에 따라 Body-1만 조정하는 식으로 최소 변경이 좋습니다.

Q Typography Guide 페이지는 어디에 두는 게 좋아요?

A프로젝트 첫 페이지(Notice) 다음에 두는 걸 추천합니다. “규칙을 먼저 보여주고, 화면 정의로 들어가는 흐름”이 가장 덜 헷갈립니다.

참고 링크