디자인 시스템 - 레이아웃 여러분은 빈 화면에서 디자인을 잡을 때 무엇부터 구성하시나요? 저는 콘텐츠가 배치될 레이아웃을 가장 먼저 고려하게 됩니다.

레이아웃은 콘텐츠를 어디에 어떻게 넣을지 길잡이가 되어주는 중요한 요소 중에 하나죠. 그럼, 오늘은 디자인 시스템에서 레이아웃 시스템을 정리해 보도록 하죠!

레이아웃 시스템의 핵심 요소 컨테이너 (Container) 콘텐츠가 들어가는 최대 너비 지정 그리드 시스템 (Grid System) 컬럼과 Gutter 간격 설정 브레이크포인트 (Breakpoints) 반응형 설계 기준 정하기 페이지 레이아웃 패턴 일반적인 배치 유형 정리 레이아웃 시스템의 핵심 요소 컨테이너(Container) 크기 조절 컨테이너는 콘텐츠를 감싸는 기본 틀입니다. 일반적으로 최대 너비를 지정해서 레이아웃이 지나치게 넓어지는 걸 방지합니다.

추천 컨테이너 크기 기본 컨테이너 max-width : 1280px 넓은 컨테이너 max-width : 1440px 본문 콘텐...