타이포그래피

Figma line-height Auto 웹 불일치

피그마 오픈카톡방2026. 3. 7.

질문사항

Figma에서 `line-height`를 `Auto`로 설정하여 작업했는데, 개발된 웹사이트에서 `line-height`가 다르게 보이는 문제가 발생합니다. 이 차이를 줄일 수 있는 방법이 있을까요?

답변

Figma의 `line-height: Auto` 설정과 웹 브라우저의 `line-height: normal` 코드 렌더링 방식에는 차이가 있어 간격 불일치가 발생할 수 있습니다. 이 문제를 해결하기 위한 몇 가지 방법이 있습니다.

`px` 단위로 `line-height` 명시: 가장 정확한 방법은 Figma에서 `line-height`를 `px` 단위로 명시적으로 설정하는 것입니다. 이렇게 하면 개발자도 해당 `px` 값을 그대로 적용하여 일관성을 유지할 수 있습니다. 다만, 폰트 사이즈가 변경될 때마다 `line-height`도 수동으로 조정해야 하는 번거로움이 있습니다.

`em` 또는 `%` 단위 사용: 폰트 사이즈에 비례하여 `line-height`를 설정해야 하는 경우, `em` 또는 `%` 단위를 사용할 수 있습니다. 예를 들어, `line-height: 1.5em` 또는 `line-height: 150%`와 같이 설정하면 폰트 사이즈에 따라 `line-height`가 자동으로 조절됩니다. 이 방식은 `Auto`보다는 예측 가능성이 높지만, 브라우저별 미세한 렌더링 차이가 여전히 발생할 수 있습니다.

개발자와의 협의: 가장 중요한 것은 개발자와 `line-height` 처리 방식에 대해 사전에 협의하는 것입니다. 특정 폰트와 `line-height` 조합에서 발생하는 렌더링 차이를 인지하고, 디자인 시스템이나 가이드라인에 명확한 `line-height` 정책을 포함하는 것이 좋습니다. 예를 들어, 특정 폰트 사이즈에 대한 `line-height` 값을 미리 정의해두거나, `line-height: normal`을 사용하되 필요에 따라 `padding` 등으로 간격을 조절하는 방식을 논의할 수 있습니다.

Figma Plugin 활용: `Line Height Manager`와 같은 플러그인을 사용하여 `line-height` 값을 일괄적으로 관리하거나, `px` 단위로 변환하는 데 도움을 받을 수도 있습니다.

결론적으로, 가장 확실한 방법은 `px` 단위로 명시하거나, `em`/`%` 단위를 사용하되 개발자와 긴밀히 소통하여 일관된 렌더링 결과를 얻는 것입니다.