질문사항
Figma에서 텍스트의 행간(Line Height) 설정이 패딩(Padding) 값에 영향을 미쳐 동일하게 나타나는 경우가 있는데, 그 이유는 무엇인가요? 개발 시 텍스트 박스의 높이와 패딩을 어떻게 이해해야 할까요?
답변
Figma에서 텍스트의 행간(Line Height) 설정은 텍스트 박스의 시각적인 높이와 개발 시의 패딩 값 해석에 영향을 미칠 수 있습니다. 이는 Figma가 텍스트를 렌더링하는 방식과 개발 환경(CSS 등)에서 텍스트 박스를 처리하는 방식의 차이에서 비롯됩니다.
Figma의 텍스트 박스 높이:
Figma에서 텍스트 레이어의 높이(H)는 일반적으로 `font-size`와 `line-height`에 의해 결정되는 '콘텐츠 박스'의 높이를 나타냅니다. `line-height`가 `font-size`보다 크면, 텍스트 위아래로 추가적인 공간(leading)이 생기며, 이 공간이 텍스트 박스의 총 높이에 포함됩니다.
개발 환경에서의 텍스트와 패딩:
개발(특히 CSS)에서는 `line-height`가 텍스트 줄 사이의 간격을 조절하는 데 사용됩니다. `line-height`가 `font-size`보다 크면, 텍스트 줄 자체의 높이 외에 위아래로 여백이 생깁니다. 이 여백은 텍스트 박스 자체의 `height`나 `padding`과는 별개로 텍스트 줄의 시각적 간격을 만듭니다.
문제 발생 원인:
Figma의 'H' 값과 실제 텍스트 높이: Figma의 오른쪽 패널에 표시되는 텍스트 레이어의 'H' 값(바운딩 박스 높이)은 `line-height`에 따라 결정됩니다. 하지만 개발자가 CSS에서 `font-size`와 `line-height`를 적용했을 때, 텍스트 콘텐츠 자체의 시각적 높이와 이 바운딩 박스 높이가 다르게 느껴질 수 있습니다. 특히 `line-height`가 `font-size`보다 작게 설정되면, 텍스트가 겹치거나 잘리는 문제가 발생할 수 있습니다. 패딩 해석의 혼란: 디자이너가 Figma에서 텍스트 레이어 주변에 시각적으로 확보한 공간을 '패딩'으로 생각할 때, 개발자는 `line-height`로 인해 이미 텍스트 자체에 포함된 여백을 고려해야 합니다. 이로 인해 디자이너가 의도한 패딩 값과 개발자가 구현하는 패딩 값 사이에 오차가 발생할 수 있습니다. 예를 들어, Figma에서 텍스트 박스 상하단에 10px의 여백이 보인다고 해서 개발자가 `padding-top: 10px; padding-bottom: 10px;`를 적용하면, `line-height`로 인한 여백 때문에 실제로는 더 많은 공간이 생길 수 있습니다.해결 및 권장 사항:
명확한 커뮤니케이션: 디자이너와 개발자 간에 텍스트의 `line-height`와 `padding`에 대한 기준을 명확히 합의해야 합니다.Auto Layout 활용: 텍스트 레이어를 Auto Layout 프레임 안에 넣고, Auto Layout의 `Padding` 속성을 사용하여 명시적으로 패딩을 정의하는 것이 좋습니다. 이렇게 하면 Figma에서 시각적으로 보이는 패딩 값이 개발 모드에서도 명확하게 전달됩니다.`line-height` 설정: `line-height`는 `font-size`의 배수(예: 1.5) 또는 단위 없는 값으로 설정하여 브라우저의 기본 동작을 따르도록 하는 것이 좋습니다. 픽셀 단위로 고정된 `line-height`는 반응형 디자인에서 문제가 될 수 있습니다.Dev Mode 활용: 개발자는 Figma의 Dev Mode를 통해 텍스트 레이어의 `font-size`, `line-height`, `padding` 등 CSS 속성을 직접 확인할 수 있으므로, 이를 기준으로 구현하는 것이 가장 정확합니다.