Figmapedia
목록으로 돌아가기
컴포넌트 & 인스턴스

버튼 컴포넌트 내부/외부 여백

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

질문사항

버튼 컴포넌트를 만들 때, 내부 여백(padding)을 포함하여 컴포넌트화하는 것이 좋을까요? 아니면 외부 여백(margin)까지 고려하여 컴포넌트를 구성하는 효율적인 방법이 있을까요?

답변

버튼 컴포넌트를 만들 때 여백 처리 방식은 상황에 따라 다릅니다. 일반적으로 버튼 자체는 내부 여백(padding)을 포함하여 컴포넌트화합니다. 만약 버튼 주변의 외부 여백(margin)이 항상 동일하게 적용되어야 하는 특정 컨텍스트(예: 모바일 반모달 내 버튼)라면, 다음과 같이 두 가지 레벨로 컴포넌트를 구성하는 것을 고려할 수 있습니다:
  • 버튼 컴포넌트: 버튼 자체의 디자인과 내부 여백을 포함합니다.
  • 버튼이 포함된 영역 컴포넌트: 버튼 컴포넌트를 포함하고, 해당 영역에 필요한 외부 여백을 Auto Layout 등으로 설정하여 관리합니다.
  • 이 방식은 유연성을 높이고 재사용성을 극대화하는 데 도움이 됩니다.