오토 레이아웃

텍스트 필드 높이, 패딩 설정

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

질문사항

높이 40px의 텍스트 필드를 만들 때, 상하 패딩을 4px 또는 8px로 주고 텍스트 필드 높이를 40px로 고정(fixed)하는 방식이 맞을까요? 개발자는 패딩값만으로 높이를 계산하여 실제 구현 시 높이가 달라지는 경우가 있습니다. 텍스트 필드 높이를 패딩값으로만 설정하는 것이 더 좋은 방법일까요?

답변

텍스트 필드의 높이를 설정하는 방식은 단일 라인 텍스트 필드인지, 여러 라인 텍스트 영역(Textarea)인지에 따라 다르게 접근하는 것이 좋습니다. 개발자와의 일관성을 위해서는 `Hug contents`와 패딩을 활용하는 것이 일반적으로 권장됩니다.

단일 라인 텍스트 필드 (Input Field):

Figma: 텍스트 레이어를 Auto Layout으로 묶고, `Height`를 `Hug contents`로 설정한 후, 상하 패딩을 지정합니다. 텍스트의 `line-height`와 패딩이 합쳐져 최종 높이가 결정됩니다. 만약 정확히 40px을 원한다면, 텍스트의 `line-height`를 고려하여 상하 패딩을 조절해야 합니다. 예를 들어, 텍스트 높이가 24px이라면 상하 패딩을 각각 8px씩 주면 총 높이가 40px이 됩니다.

개발: 개발자는 주로 `padding`과 `line-height`를 기반으로 높이를 계산합니다. `fixed height`를 지정하는 경우, 텍스트의 `line-height`와 패딩이 합쳐져 의도한 높이와 다르게 보일 수 있습니다. `min-height`를 사용하여 최소 높이를 보장하고, `padding`으로 내부 여백을 주는 방식이 일반적입니다.

여러 라인 텍스트 영역 (Textarea):

Figma: `Height`를 반드시 `Hug contents`로 설정하고 상하 패딩을 지정해야 합니다. 이렇게 하면 텍스트가 여러 줄로 늘어나도 자동으로 높이가 조절됩니다.

개발: `min-height`와 `padding`을 사용하여 최소 높이를 지정하고, `resize: vertical` 등의 CSS 속성으로 사용자가 높이를 조절할 수 있도록 구현합니다.

권장 사항:

`Hug contents`와 패딩 사용: 대부분의 경우, Auto Layout의 `Height`를 `Hug contents`로 설정하고, 상하 패딩을 명확히 지정하는 것이 개발 구현과 더 잘 맞습니다. 이는 컴포넌트가 내용에 따라 유연하게 반응하도록 합니다.

`line-height` 고려: 텍스트의 `line-height`가 최종 높이에 미치는 영향을 이해하고, 패딩 값을 설정할 때 이를 고려해야 합니다.

개발자와의 소통: 가장 중요한 것은 디자인 시스템 구축 초기 단계에서 개발팀과 높이 계산 방식(패딩 기반 vs. 고정 높이)에 대해 합의하는 것입니다. Figma의 Dev Mode에서 보여주는 CSS 속성 값을 기준으로 논의하는 것이 좋습니다.