Figma - 레이아웃(Layout) & 그리드 시스템(Grid System)

1. 레이아웃(Layout) & 그리드 시스템(Grid System)

1) 레이아웃(Layout)
화면 크기, 텍스트, 이미지, 여백, 등의 다양한 구성요소를 고려하여 앱내에 정보를 시각적으로 배치하는 것

• 그리드 시스템(Grid System)
  • 여러 종류의 요소를 질서있게 배치하기 위한 그리드 규칙을 말함 그리드를 활용하면 시각적인 통일성을 줄수 있어 작업시에도 편리함을 가져다 준다.
    • 그리드(Grid)의 사전적 의미 : 격자무늬, 격자판을 의미한다
• 웹과 앱의 차이점
  • 참고로 폴더블 및 스마트폰 시장이 커지고 있어 이에 맞춘 대응을 지속적으로 해야함
    • 반응형 웹
      • 다양한 기기와 해상도에 맞춰서 반응형 레이아웃 사용
        • 12단 그리드
    • 모바일
      • 스마트폰 크기에 맞춘 단조로운 레이아웃 사용
        • 4,6단 그리드

2) 그리드 시스템 요소

사진출처 : 디자인 베이스

Column

• 레이아웃을 수직으로 나눈 구역을 말함 예를 들어, 웹페이지나 잡지에서 텍스트나 이미지를 정렬할 때 사용하는 가이드라인 같은 것이라 생각하면 됨 일반적으로는 여러 개의 컬럼이 병렬로 배치되어 콘텐츠를 나누고, 이를 통해 레이아웃이 구조적으로 잘 정리된 느낌을 줌 Sketch나 Figma에서 컬럼을 이용해 디자인 요소들을 정렬하고 배치할수 있음
  

Gutter

• 각 컬럼 사이의 간격을 의미함 이 공간은 컬럼 간의 여백으로, 콘텐츠들이 서로 너무 가까워 보이지 않도록 해야함. 적절한 거터를 설정하면 디자인이 깔끔해지고, 가독성이 향상되기 때문에 컬럼을 더 명확하게 구분짓는 역할을 수행한다.

Margin

• 레이아웃의 가장자리와 콘텐츠 사이의 공간을 의미함. 쉽게 말해, 페이지의 경계와 그 안에 들어갈 내용물 사이의 여백이라고 할 수 있음 마진은 콘텐츠가 페이지의 경계에 너무 가깝게 위치하지 않도록 보호하는 역할을 하기 때문에 이 공간은 디자인의 전체적인 균형을 잡아주고, 사용자가 콘텐츠를 편하게 읽을 수 있도록 도와줌