자간 변환기 (트래킹 → CSS)
포토샵/일러스트레이터의 트래킹 값이나 Figma의 % 자간을 CSS em·px 값으로 변환합니다.
조회수 1,132회
미리보기
TYPOGRAPHY SPACING EXAMPLE
세 가지 도구, 세 가지 단위
Adobe 앱은 트래킹을 em의 1000분의 1 단위로 측정합니다. CSS em = 트래킹 ÷ 1000, 즉 트래킹 50 → letter-spacing: 0.05em입니다. Figma의 퍼센트는 단순히 em × 100입니다: 5% = 0.05em. px 값은 폰트 크기에도 좌우됩니다 — 16px에서 0.05em은 0.8px이지만, 같은 0.05em이 48px에서는 2.4px가 됩니다. 디자인 파일에 표시된 값을 아무 칸에나 입력하면 나머지 값이 즉시 갱신되므로, Figma 스펙을 개발자에게 넘길 때 손으로 계산할 필요가 없습니다. Sketch와 XD도 CSS와 같은 em 기반 로직을 따르므로, 여러 디자인 도구가 섞여 있는 환경에서 표준으로 삼기에 가장 안전한 값은 대개 em 필드입니다.
알아두면 좋은 점
"트래킹(tracking)"이라는 용어는 1960~70년대 사진식자기 시대의 유산입니다. 레트라셋(Letraset) 전사지나 초기 사진식자기처럼, 글자 사이 간격을 조절한다는 것은 필름 조각이나 전사지 위에서 문자가 놓이는 위치를 물리적으로 옮기는 작업을 뜻했습니다. 커닝(kerning)과 자주 혼동되지만 둘은 같은 개념이 아닙니다 — 트래킹은 선택한 텍스트 전체에 균일한 간격을 더하는 반면, 커닝은 "AV"나 "To"처럼 형태가 겹치는 특정 한 쌍의 글자 사이 간격만을, 균일한 간격으로는 해결할 수 없는 어색한 시각적 틈을 메우기 위해 조정합니다. CSS에는 알아둘 만한 실용적인 함정도 하나 있습니다: letter-spacing은 마지막 글자를 포함해 모든 글자 뒤에 간격을 추가하므로, 가운데 정렬이나 오른쪽 정렬된 텍스트는 아무도 신경 쓰지 않는 이 보이지 않는 여백 때문에 살짝 균형이 어긋나 보일 수 있습니다. 음수 트래킹 값도 양수만큼이나 유효하며, 매우 큰 제목에서 흔히 쓰입니다 — 글자가 원래 의도된 크기보다 훨씬 크게 확대되면 기본 간격이 헐거워 보이기 시작하기 때문입니다.
- 큰 디스플레이 제목: 트래킹 −10~−30(시각적 임팩트를 위해 좁게)
- 작은 대문자 라벨: 트래킹 +50~+200(가독성을 위해 넓게)
- 본문 텍스트: 보통 0으로 둠 — 기본 간격은 이미 서체 디자이너가 조율한 값
- 로고타입과 워드마크: 단일 트래킹 값으로는 어려운, 글자 쌍마다 개별적으로 커스텀 조정하는 경우가 많음
자주 묻는 질문
Figma에서 자간이 px로 표시되어 있으면 어떻게 하나요?
그렇다면 이미 CSS px 값입니다. 폰트 크기를 올바르게 설정한 뒤 px 필드에 입력하고, 다양한 글자 크기에서도 잘 확장되는 CSS를 위해 em 환산값을 확인하세요. Figma는 실제로 파일 설정에 따라 자간에 퍼센트와 px 단위를 모두 지원하므로, 값을 개발팀에 넘기기 전에 디자인 시스템이 어느 쪽을 쓰는지 확인하는 것이 좋습니다.
대문자 텍스트에 왜 양수 트래킹이 필요한가요?
대문자는 원래 어센더와 디센더가 있는 소문자 옆에 편안하게 놓이도록 그려져 있어서, 소문자 없이 단독으로 촘촘하게 배치하면 시각적으로 답답해 보입니다. 모두 대문자인 라벨, 내비게이션 항목, 인트로 텍스트에는 +5%~+15%(트래킹 50-150)가 고전적인 해결책이며, 한눈에 편안히 읽힐 만큼만 글자 형태를 넓혀 줍니다.
트래킹과 커닝의 차이는 무엇인가요?
트래킹은 단어, 줄, 또는 선택 영역 전체에 걸쳐 균일한 간격을 더합니다. 커닝은 "AV"나 "To"처럼 인접한 글자 한 쌍 사이의 간격만 조정하는데, 이런 조합은 그대로 두면 형태가 겹치거나 어색한 시각적 틈이 생기기 때문입니다. CSS도 둘을 따로 다룹니다 — letter-spacing은 트래킹을 제어하고, font-kerning(보통 "normal"로 둠)은 폰트에 내장된 커닝 테이블에서 가져온 쌍별 커닝을 제어합니다.
가운데 정렬된 텍스트에 letter-spacing을 적용하면 왜 살짝 어색해 보이나요?
CSS letter-spacing은 마지막 글자를 포함해 모든 글자 뒤에 간격을 추가합니다 — 많은 개발자를 당황하게 만드는 스펙의 특성입니다. 가운데 정렬이나 오른쪽 정렬된 텍스트에서는 이 보이지 않는 마지막 여백이 시각적 중심을 이동시켜, 텍스트가 원래 위치보다 살짝 왼쪽으로 밀린 것처럼 보이게 만듭니다. 흔한 해결책은 요소에 letter-spacing 값과 대략 비슷한 작은 음수 margin-right를 적용하는 것입니다.
"트래킹"이라는 용어는 어디에서 왔나요?
1960~70년대 사진식자 장비에서 유래했습니다 — 레트라셋 전사지나 사진식자 장치 같은 기계에서는 글자 사이 간격을 조절한다는 것이 필름 조각이나 전사지 위에서 글자가 지나가는 경로(track)를 물리적으로 옮긴다는 뜻이었습니다. 이 용어는 디지털 조판 시대에도 살아남아, 결국 Photoshop이나 Illustrator 같은 도구에서 자간을 가리키는 표준 단어가 되었습니다 — 원래 묘사하던 물리적 기계가 사라진 지 한참 뒤까지도 말이죠.
비슷한 도구
문제 신고하기
자간 변환기 (트래킹 → CSS)
댓글
아직 댓글이 없습니다 — 첫 댓글을 남겨보세요!