디자인 시스템 - 공간(Space) 시스템 만들기 이전 글에서 디자인 시스템을 구축할 때 기본이 되는 파운데이션(foundation)의 색상 팔레트와 타이포그래피에 대해서 알아보았습니다. 오늘은 중요하지만 종종 간과되는 Space에 대해서 이야기해 볼게요.

Space system 이란? UI 디자인에서 깔끔하고 읽기 쉽게 만들어주는 "간격"을 의미해요. gap, margin, padding 등으로 정의하며 일관된 간격을 유지할 수 있도록 설정해야 해요.

일반적으로 4px, 8px 그리드 시스템이 많이 사용됩니다. 모바일 퍼스트 접근 방식에서는 4px, 데스크톱 중심의 UI에서는 8px 단위를 선호해요.

예를 들어 Google, Apple은 모두 8px 시스템을 사용하는 것을 볼 수 있습니다. Space system 만들기 저는 4px 단위 시스템을 적용합니다. 4의 배수로 간격을 설정하는 것이 핵심이에요.

작은 UI 요소에서는 4px 또는 8px 간격 컴포넌트 간 간격에서는 16px...