<aside> 📎

참고 출처

1. A Guide to Designing with Grids for Product UI — figr.design — 이 레슨에서 다루는 컬럼 그리드와 반응형 그리드 설정(모바일 4·태블릿 8·데스크톱 12 컬럼)의 근거입니다.
2. 8 Point Grid System Layout in Figma — Figma Community — 8의 배수 기반 간격 시스템을 Figma에서 적용하는 방법의 참고 자료입니다. </aside>

색과 글자를 다루는 법을 익혔다면, 이제 그것들을 화면 위에 어떻게 배치할지가 남습니다. 요소 사이 간격을 매번 감으로 정하면 화면이 들쭉날쭉해지고, 개발자에게 넘길 때도 "이건 13px인가 15px인가"를 두고 매번 헷갈리게 됩니다. 이번 레슨에서는 배치를 규칙으로 만드는 레이아웃과 그리드 시스템을 익힙니다.

레이아웃과 그리드 시스템

• 레이아웃은 요소를 화면 어디에 얼마만큼 띄워 배치할지에 대한 규칙입니다.
• 규칙을 정해 두면 디자이너는 의사결정이 줄어 빨라지고, 개발자는 측정 없이 일관되게 구현할 수 있습니다.

레이아웃 기본 용어

• 배치를 다루는 기본 용어입니다.
  • 여백(Margin): 화면 가장자리와 콘텐츠 사이의 바깥 공간입니다.
  • 안쪽 여백(Padding): 요소 테두리와 내용 사이의 공간입니다.
  • 거터(Gutter): 컬럼과 컬럼 사이의 간격입니다.
  • 컬럼(Column): 콘텐츠를 정렬하는 세로 분할선입니다.

8-point 그리드 시스템

• 8-point 그리드는 모든 크기와 간격을 8의 배수(8, 16, 24, 32, 40, 48 ...)로 맞추는 방법입니다.
  • 대부분의 화면 해상도가 8로 나누어떨어져 흐릿함 없이 렌더링되고, Android·iOS·데스크톱에서 일관되게 보입니다.
  • Google Material Design이 이 시스템을 기본으로 사용하며, Apple HIG도 이를 참고합니다.
• 8-point 그리드의 진짜 장점은 픽셀 완벽주의가 아니라 "고민을 없애 주는 것" 입니다. 팀 전체가 8의 배수에 합의하면 간격을 두고 다툴 일이 사라집니다.

컬럼 그리드와 반응형

• 화면 폭에 따라 컬럼 수를 달리해 반응형 레이아웃을 만듭니다. 흔한 설정은 다음과 같습니다.
  • 모바일(약 375px): 4 컬럼, 여백 16~24px
  • 태블릿(약 768px): 8 컬럼, 여백 24~32px
  • 데스크톱(약 1440px): 12 컬럼
• 여백과 거터도 모두 8의 배수로 맞춥니다. 데스크톱에서는 여백을 자동(auto)으로 두어 콘텐츠를 가운데 정렬하기도 합니다.
• Figma에서는 프레임에 레이아웃 그리드(Layout Grid)를 추가해 컬럼·간격 규칙을 화면에 띄워 두고 작업할 수 있습니다.

여백과 근접성

• 여백(화이트스페이스)은 빈 공간이 아니라 관계를 만드는 도구입니다.
  • 관련 있는 요소는 가깝게, 관련 없는 요소는 멀게 두어 그룹을 구분합니다(근접성 원칙).
  • 충분한 여백은 인지 부하를 줄이고 화면을 정돈되어 보이게 합니다.