디자인부트캠프 Chapter 2. DAY 15

 

피그마(Figma) 레이아웃 그리드

웹이나 앱 UI 디자인을 하다 보면 콘텐츠를 일관성 있게 배치하고 정돈된 느낌을 주기 위해 "레이아웃 그리드"를 사용

 

레이아웃 그리드란?

레이아웃 그리드는 디자인 요소를 정렬하고 일관된 구조를 만들기 위한 가이드라인이다. 콘텐츠 영역을 나누는 컬럼, 마진, 거터(Gutter)를 기준으로 삼아 디자인이 정돈되게 보이도록 도와준다.

 

피그마에서 레이아웃 그리드 설정하는 법

1. 프레임(Frame) 생성
   • F 키를 눌러 프레임을 만들고, 원하는 사이즈를 설정한다. (예: 1440×1024)
2. 레이아웃 그리드 추가
   • 프레임 선택 후 오른쪽 패널에서 Layout grid 클릭 → + 버튼 눌러 추가
3. 그리드 타입 설정
   • Grid: 정사각형 격자 (아이콘, 카드 등 균일 정렬할 때 유용)
   • Columns: 세로 컬럼 기준 (웹 디자인에서 제일 많이 사용)
   • Rows: 가로 줄 기준 (세로 스크롤을 디자인할 때 활용)
4. 컬럼 레이아웃 세부 설정
   • Type: Stretch or Center (보통 웹은 Stretch)
   • Count: 컬럼 개수 (보통 12, 8 등 사용)
   • Margin: 프레임 가장자리 여백 (예: 80px)
   • Gutter: 컬럼 사이 간격 (예: 24px)

왜 레이아웃 그리드를 써야 할까?

✅ 콘텐츠 정렬이 쉬워짐

✅ 일관성 있는 UI 구성 가능

✅ 협업 시 기준이 생겨 커뮤니케이션 원활

✅ 반응형 디자인에도 유리함

 

자주 쓰는 그리드 세팅 예시

• 1440px 데스크탑 기준
  • Columns: 12
  • Margin: 80px
  • Gutter: 24px
• 375px 모바일 기준
  • Columns: 4
  • Margin: 16px
  • Gutter: 16px

---

https://www.figma.com/design/Kvh9Rq2PVggwXvPgJEuPoV/PD_3_%EC%9D%B4%EC%9C%A0%EB%A6%BC?node-id=220-1801&t=cHzapD8hIdi6npIa-1