Foundation
Spacing
Spacing은 컴포넌트 혹은 콘텐츠 간의 간격을 표현합니다.
디자인에서 간격은 시각적 균형과 사용자 경험을 향상시키는 중요한 요소입니다. 본 가이드는 일관성 있고 효과적인 간격 시스템을 구축하기 위한 지침을 제공합니다.
수직 간격
수평 간격은 요소들이 가로로 나란히 배치될 때 적용되는 공간을 의미합니다. 이 방식을 통해 디자이너와 개발자는 일관된 수평 간격을 쉽게 적용할 수 있으며, 전체적인 레이아웃 및 요소간의 균형을 효과적으로 유지할 수 있습니다.
Nav-to-title
nav-to-title은 네비게이션 바 아래에 위치한 타이틀과 네비게이션 간의 간격을 정의합니다.
Component-default
component-default는 디자인 시스템에서 컴포넌트의 기본 간격을 정의하는 토큰입니다. 이는 버튼간의 간격, 카드, 폼 등 다양한 컴포넌트의 내부 요소 간 간격이나 컴포넌트 간의 기본 간격으로 사용되어 디자인의 일관성을 유지하는 데 도움을 줍니다.
수평 간격
수직 간격은 요소들이 세로로 배치될 때 적용되는 공간을 의미합니다. 이는 레이아웃의 수직적 구조와 리듬을 결정하는 중요한 요소입니다.
global-gutter
global-gutter는 모든 서비스에서 화면 가장자리와 콘텐츠 사이의 간격을 일정하게 유지함으로써 디자인의 일관성을 확보하고, 사용자 경험을 향상시키는 핵심 간격입니다. 이를 통해 반응형 디자인 및 다양한 UI 컴포넌트 간의 균형 잡힌 간격 조정이 가능합니다.
