🔠 서체 행간 가변 감쇄 보정 계산기 (Line-Height Crop)
사용 중인 서체의 고유 메트릭 구조와 행간 스펙을 입력하시면, 글자 상하단에 유령처럼 붙어 다니는 불필요한 빈 여백을 정밀하게 깎아내어 시안과 100% 일치하는 수직 정렬 믹스인을 생성합니다.
💡 타이포 행간 여백 감쇄 시뮬레이션 결과
글자 1개당 생성되는 순수 고스트 공백: 0
상하단 감쇄 차단 음수 마진 마진율: 0
📊 수직 레이아웃 무결성 방어 리포트
* 본 연산기는 웹 타이포그래피의 고유 렌더링 박스인 대문자 높이(Cap Height)와 디센더(Descender) 영역 간의 오차 마진을 계산하는 크롭 알고리즘입니다. 마크업 적용 후 컴포넌트에 가상요소(`::before`, `::after`) 형태로 음수 마진 마찰을 가하므로 인접 레이아웃과의 마진 병합 현상이 자연스럽게 통제됩니다.
웹폰트 종류별 메트릭 구조 분석 및 가상요소를 활용한 line-height 여백 크롭 원리 확인하기 (클릭)
💡 피그마 시안과 100% 일치하는 정밀 정렬, 서체 고스트 패딩 제거와 CSS 믹스인 설계 가이드
웹 UI 디자인 툴인 피그마(Figma)에서 설계된 시안을 보고 퍼블리싱을 진행하다 보면 유독 버튼 내부의 텍스트나 타이틀 영역의 '수직 정렬'이 미세하게 틀어지는 현상을 자주 마주하게 됩니다. 시안에 적힌 대로 마진과 패딩을 칼같이 입력했음에도 불구하고, 실제 브라우저 화면에서는 글자 상하단에 유령처럼 숨어있는 불필요한 빈 여백 때문에 컴포넌트의 간격 밸런스가 사정없이 어긋나곤 하는데요. 실무에서는 이를 '고스트 패딩(Ghost Padding)' 또는 서체 메트릭 공백이라고 부르며 UI의 디테일을 떨어뜨리는 고질적인 주범으로 꼽습니다. 디자인 시안의 간격을 픽셀 단위까지 완벽하게 브라우저에 재현하고 불필요한 행간 거품을 깎아낼 수 있도록 이 계산기를 제작했습니다.
이 연산 도구는 사용자가 선택한 웹폰트의 고유 공백 계수와 글자 크기, line-height 배수를 상속하여 글자 1개당 생성되는 순수 고스트 공백을 역산하며, 가상요소에 대입할 상하단 감쇄 차단 음수 마진 믹스인 코드를 실시간으로 도출해 줍니다.
📊 실무 주력 웹폰트별 고유 메트릭 공백 계수 명세표
폰트 디자이너가 서체를 설계할 때 심어둔 글꼴 자체의 상하단 기본 여백 스펙입니다. 아래 반응형 표를 통해 내가 프로젝트에 사용 중인 서체의 고유 계수를 시각적으로 체크해 보세요.
| 서체 프리셋 명칭 | 서체 고유 공백 계수 (Em Factor) | 브라우저 텍스트 렌더링 성향 | 실무 가변 가이드 및 레이아웃 배치 팁 |
|---|---|---|---|
| Pretendard (프리텐다드) | 0.13 | 애플 산돌고딕 기반의 균형 잡힌 메트릭 구조를 지녀 수직 정렬이 비교적 안정적 | 가장 보편적으로 쓰이는 반응형 표준 서체. 본 계산기의 기본 베이스 계수로 적용됨 |
| Noto Sans KR (본고딕) | 0.09 | 글자 자체의 기본 뼈대가 커서 상하단 여백이 좁고 베이스라인이 미세하게 낮음 | 글자 수 수치 대비 실제 박스가 꽉 차 보이므로 음수 마진 폭을 좁게 보정해야 안전 |
| Inter (인터 영문 서체) | 0.11 | 대문자 높이(Cap Height)가 명확하며 영문 소문자의 디센더 라인이 컴팩트함 | 글로벌 대시보드 UI나 숫자가 강조되는 파이낸셜 컴포넌트 뼈대 설계에 강력 추천 |
📌 텍스트 박스 모델의 비밀, line-height가 유발하는 고스트 공백의 물리 공식
브라우저가 글자를 화면에 그릴 때, CSS의 line-height 속성은 글자 자체의 크기 외에 위아래로 똑같은 양의 '반행간(Half-leading)' 공간을 기계적으로 밀어 넣습니다. 예를 들어 24px 글자에 line-height: 1.6을 주면 전체 행의 높이는 38.4px이 되고, 글자 위아래로 각각 7.2px이라는 어마어마한 공백 거품이 끼어들게 되는데요. 더 치명적인 것은 서체 디자이너가 글자가 잘리지 않도록 서체 내부에 심어둔 기본 여백 계수까지 결합한다는 점입니다.
이 문제를 해결하는 유일한 수학적 솔루션은 [폰트 크기 × (line-height 배수 - 1) ÷ 2] 공식에 서체 고유의 공백 계수 가중치를 더해, 글자 레이아웃을 순수하게 감싸고 있는 투명한 여백 영역을 역산하는 것입니다. 본 계산기는 이 복잡한 타이포그래피 수학 공식을 알고리즘 내부 뼈대로 장착하고 있어, 픽셀과 REM 단위를 오가며 브라우저 상의 유령 여백을 소수점 네 자리까지 정밀하게 계산해 냅니다.
⚙️ 가상요소(::before/::after)와 음수 마진을 활용한 수직 레이아웃 무결성 전략
서체의 고스트 공백을 강제로 깎아내기 위해 컴포넌트 자체의 height를 강제로 고정하거나 패딩을 임의로 줄이면, 나중에 글자 크기가 바뀌거나 줄 바꿈이 일어날 때 글자가 박스 밖으로 튀어나와 겹치는 끔찍한 깨짐 버그가 발생합니다. 현대 웹 표준 퍼블리싱에서 가장 권장하는 실무 치트키는 대상 요소의 가상요소인 ::before와 ::after를 활용하여 텍스트 상하단에만 정밀하게 계산된 margin-top 및 margin-bottom 음수(-) 마진 마찰을 가하는 것입니다.
이렇게 하면 텍스트의 유동적인 줄 바꿈 구조는 완벽히 유지되면서, 인접한 다른 레이아웃 요소(이미지, 버튼 등)가 글자의 순수 알맹이 경계선까지 딱 붙어 정렬되는 무결점 박스 모델이 완성됩니다. 본 생성기가 추출해 주는 크롭 믹스인 소스코드를 CSS 파일 상단에 바인딩하여, 미디어쿼리 분기 없이도 피그마 디자인 시안과 자로 잰 듯 정확히 일치하는 모던 인터페이스를 마스터해 보시기 바랍니다.
⚠️ 서체 행간 가변 감쇄 보정 계산기 이용 시 주의사항
본 서체 행간 가변 감쇄 보정 계산 프로그램이 빌드하는 CSS 소스코드는 W3C 표준 레이아웃 명세를 완벽히 준수하므로 모든 모던 렌더링 엔진 환경에서 매끄러운 수직 밸런스를 보장합니다. 다만, 가상요소 음수 마진 기법을 적용하실 때, 해당 텍스트를 감싸고 있는 부모 컨테이너의 overflow: hidden 속성이 켜져 있거나 인접 엘리먼트 간의 마진 병합(Margin Collapsing) 현상이 꼬여 있을 경우, 감쇄된 음수 마진 영역 때문에 글자의 상단이나 하단 꼬리(디센더) 부분이 미세하게 가려져 보이는 가시성 훼손이 발생할 수 있습니다. 따라서 본 가이드 코드를 적용한 후에는 반드시 브라우저 개발자 도구로 가상요소의 마찰 궤적을 체크하시고, 본문 타이포그래피의 가시성을 최종 크로스 체크하시기 바랍니다.