[UI/UX 용어] 레이아웃 (layout)

Foundation

Grid System

• Column (칼럼)
  • 실제 컨텐츠를 포함하는 부분
  • 칼럼의 넓이는 고정 값으로 제공되며, 1개 이상의 칼럼이 조합하여 컨텐츠의 크기를 결정
  • 하나의 칼럼 안에는 반드시 양 옆 거터를 동반해야 함
• Gutter (거터)
  • 칼럼과 칼럼 사이 공간
  • 1개 이상의 칼럼이 조합된 컨텐츠와 컨텐츠 사이의 간격
  • 고정 값으로 제공되며 스크린의 너비에 비례하여 넓은 거터는 큰 스크린에 적합 (칼럼 사이 많은 공백을 생성해야 하기 때문)
• Margin (마진)
  • 내용과 화면의 왼쪽 및 오른쪽 가장자리 사이 공간
  • 여백 너비의 넓이도 고정 값으로 정의
  • 큰 여백은 내용의 둘래에 더 많은 공백을 만들기 때문에 큰 스크린에 적합

Baseline Grid

• 8dp grid
  • 모든 구성 요소가 모바일, 태블릿 및 데스크톱용 8dp 사각 기준선 그리드에 맞춰 조정됨
  • App bar과 floating action button은 8dp 그리드에 맞춰 정렬
• 4dp grid
  • 구성 요소 내의 아이콘, 유형 및 일부 요소들은 4dp 그리드에 맞춰 조정
  • Bottom navigation bar의 요소들은 4dp 그리드에 맞춰 정렬