질문사항
텍스트 필드 디자인 시 텍스트의 `line-height` (행간 높이)를 고려하여 패딩값을 설정해야 할까요? `line-height`가 `auto`가 아닌 140~150%로 설정될 경우, 상하 패딩값을 조절하는 것이 번거로워집니다.
답변
네, 텍스트 필드 디자인 시 `line-height` (행간 높이)는 패딩값과 함께 최종 컴포넌트 높이에 큰 영향을 미치므로 반드시 고려해야 합니다.
`line-height`의 영향:
Figma에서 `line-height`를 `auto`가 아닌 특정 값(예: 140%, 150%)으로 설정하면, 텍스트 레이어의 실제 높이는 `font-size`와 `line-height`에 의해 결정됩니다. 이 높이에는 텍스트 위아래로 추가되는 여백(leading/trailing space)이 포함됩니다. Auto Layout 프레임의 `Height`를 `Hug contents`로 설정하면, 이 텍스트 레이어의 계산된 높이에 상하 패딩이 더해져 최종 컴포넌트 높이가 됩니다.패딩값 조절의 번거로움 해결:
`Hug contents` 활용: 텍스트 필드의 `Height`를 `Fixed height` 대신 `Hug contents`로 설정하는 것이 좋습니다. 이렇게 하면 텍스트의 `line-height`나 줄 수가 변경되어도 컴포넌트가 자동으로 높이를 조절하며, 지정된 패딩은 항상 유지됩니다. 디자인 토큰 및 변수 사용: 패딩 값을 디자인 토큰이나 Figma 변수로 관리하면, 일관된 간격을 유지하면서 필요할 때 한 번에 변경하기 용이합니다. 개발자와의 합의: `line-height`의 계산 방식(특히 Figma의 `auto`와 CSS의 `normal` 또는 단위 없는 `line-height` 간의 차이)에 대해 개발팀과 명확히 소통하고 합의하는 것이 중요합니다. Figma의 Dev Mode에서 보여주는 CSS 속성 값을 기준으로 논의하면 오차를 줄일 수 있습니다.결론적으로, `line-height`를 고려하여 `Hug contents`와 명확한 패딩 값을 사용하는 것이 유연하고 개발 친화적인 디자인을 만드는 데 도움이 됩니다.