자간 변환기 (Letter Spacing)

자간(Letter Spacing) 변환 가이드: 시안 그대로 옮기기

자간 변환기는 피그마, 포토샵, 일러스트레이터 등 디자인 툴의 자간 값을 CSS letter-spacing 값으로 변환해주는 도구입니다. 디자인 툴마다 자간 단위가 달라서 퍼블리싱할 때 혼란스러운 부분을 한 번에 해결합니다.

1. 디자인 툴별 자간 단위 변환 공식

• 포토샵/일러스트레이터 (VA): VA 값 ÷ 1000 = em 값. 예: 자간 -25 → letter-spacing: -0.025em
• 피그마 (%): % 값 ÷ 100 = em 값. 예: -2% → letter-spacing: -0.02em
• 피그마/스케치 (px): px 값 ÷ 폰트 크기(px) = em 값. 예: 16px 폰트에 -0.5px → letter-spacing: -0.031em

2. 왜 letter-spacing은 em으로 쓰는 것이 좋을까요?

자간은 글자 크기에 비례할 때 자연스럽습니다. em 단위로 지정하면 폰트 크기가 바뀌어도 자간의 비율이 그대로 유지되므로, 반응형에서 폰트 크기를 조절해도 타이포그래피의 밀도가 일정하게 보입니다. px로 고정하면 큰 제목에서는 좁아 보이고 작은 캡션에서는 넓어 보이는 문제가 생깁니다.

3. 한글 타이포그래피 자간 팁

한글 고딕 계열 폰트(Noto Sans KR, Pretendard 등)는 기본 자간이 다소 넓게 느껴져서, 본문에 -0.02em ~ -0.05em 정도의 좁은 자간을 적용하는 경우가 많습니다. 제목처럼 크기가 큰 텍스트는 자간을 더 좁혀야 시각적으로 안정되어 보입니다. 반대로 영문 대문자로만 이루어진 라벨은 자간을 넓히는 것(0.05em ~ 0.1em)이 가독성에 좋습니다.

자주 묻는 질문 (FAQ)

Q. 포토샵 자간(VA) 값을 CSS로 어떻게 변환하나요?

포토샵과 일러스트레이터의 자간(트래킹) 값은 1000으로 나누면 em 값이 됩니다. 자간 -25는 letter-spacing: -0.025em입니다.

Q. 피그마의 letter spacing %는 CSS로 어떻게 변환하나요?

피그마의 % 자간은 100으로 나누면 em 값이 됩니다. -2%는 letter-spacing: -0.02em입니다.

Q. letter-spacing은 px와 em 중 어떤 단위가 좋나요?

em 단위를 권장합니다. 폰트 크기가 바뀌어도 자간 비율이 자동으로 유지되기 때문입니다.

Q. 한글 웹사이트에 적절한 letter-spacing 값은 얼마인가요?

한글 본문에는 보통 -0.02em ~ -0.05em 정도의 좁은 자간이 많이 사용됩니다. 제목은 본문보다 더 좁게 설정하는 경우가 많습니다.