질문사항
Figma에서 line-height를 1.5로 설정하면 텍스트가 겹쳐 보이는데, 프론트엔드 개발자와 웹 프로젝트에서 line-height를 어떻게 소통하고 조율하는 것이 좋을까요?
답변
Figma에서 `Line height`를 `1.5`와 같이 단위 없이 설정하면, 이는 폰트 사이즈에 대한 배수(multiplier)로 적용됩니다. 예를 들어 폰트 사이즈가 16px이면 line-height는 16px * 1.5 = 24px이 됩니다. 텍스트가 겹쳐 보이는 현상은 폰트 자체의 메트릭스(metrics)나 폰트 사이즈 대비 line-height 값이 너무 작게 설정되었을 때 발생할 수 있습니다.
프론트엔드 개발자와의 소통 및 조율은 다음과 같이 진행하는 것이 좋습니다:
단위 통일 및 합의: Figma에서 `Line height`를 설정할 때, `px` 단위로 명확히 지정하거나, `배수(multiplier)`로 사용할 경우 개발팀과 `em` 또는 `rem` 단위로 어떻게 매핑할지 사전에 합의하는 것이 중요합니다. Figma (단위 없음) 1.5 → CSS `line-height: 1.5;` (폰트 사이즈의 1.5배) Figma (px) 24px → CSS `line-height: 24px;`CSS `line-height` 단위 설명: 각 CSS 단위는 다음과 같은 특징을 가집니다. `%` (퍼센트): 폰트 사이즈 대비 비율. `font-size: 14px; line-height: 200%;`는 `28px`입니다. `em`: 부모 요소의 폰트 사이즈에 비례. `1em`은 현재 폰트 사이즈와 같습니다. `rem`: `root em`의 약자로, HTML `<html>` 요소의 폰트 사이즈에 비례합니다. 반응형 디자인에 유용합니다. `vw` (viewport width): 뷰포트 너비에 비례. `vh` (viewport height): 뷰포트 높이에 비례. `px` (픽셀): 고정된 픽셀 값.디자인 시스템 가이드라인: 디자인 시스템에 `Line height` 값을 명확히 정의하고, Figma의 텍스트 스타일(Text Styles)에 이를 적용하여 일관성을 유지합니다. 개발자는 Dev Mode에서 이 값을 쉽게 확인할 수 있습니다.정기적인 싱크: 디자인팀과 개발팀이 정기적으로 만나 폰트, 라인 하이트 등 타이포그래피 관련 이슈를 논의하고 표준을 정하는 것이 가장 효과적입니다. 폰트 렌더링 방식이나 브라우저별 차이로 인해 Figma에서 보이는 것과 실제 웹에서 보이는 것이 다를 수 있으므로, 실제 구현된 결과물을 함께 확인하며 조율하는 과정이 필요합니다.