피그마의 레이아웃 그리드 기능과 활용 예시
레이아웃 그리드는 디자인 작업에서 일관성을 유지하고 정렬을 쉽게 하기 위해 사용되는 가이드 시스템임.
특히 반응형 UI 설계, 정돈된 컴포넌트 배치, 가독성 향상 등에 유용함.
1. 피그마에서 레이아웃 그리드 설정하는 방법
1) 레이아웃 그리드 추가하기
- 프레임(Frame)을 선택
- 오른쪽 패널에서 Layout Grid(레이아웃 그리드) 섹션을 찾음
- "+" 버튼을 클릭하여 새로운 그리드 추가
추가 후 그리드 타입을 선택하여 원하는 형태로 조정 가능함.
2. 레이아웃 그리드 유형과 활용 예시
1) 그리드(Grid)
설명:
- 정사각형 패턴의 격자 형태
- 아이콘 디자인, 컴포넌트 배치, 8px 또는 10px 단위 디자인에 유용함
활용 예시:
- 아이콘 디자인할 때 8px 간격의 그리드를 설정하여 픽셀 퍼펙트한 디자인 유지
- 일정한 간격으로 UI 요소를 배치하여 정렬감 확보
설정 방법:
- "+" 버튼 클릭 → Grid 선택
- 크기(Size)를 설정하여 간격 조절
2) 컬럼(Columns)
설명:
- 웹과 모바일 UI 디자인에서 가장 많이 사용하는 유형
- 여러 개의 세로 컬럼을 활용하여 콘텐츠를 정렬함
- 일반적으로 12컬럼 시스템을 사용함
활용 예시:
- 반응형 웹 디자인에서 데스크탑(12컬럼), 태블릿(8컬럼), 모바일(4컬럼) 설정
- 텍스트와 이미지 정렬 시 컬럼을 기준으로 배치하여 가독성 향상
설정 방법:
- "+" 버튼 클릭 → Columns 선택
- 컬럼 개수(Count) 조정
- Margin(마진): 양쪽 여백 설정
- Gutter(거터): 컬럼 사이의 간격 조정
3) 행(Rows)
설명:
- 세로 방향이 아닌 가로 방향의 정렬 가이드
- 스크롤형 콘텐츠 디자인, 카드형 UI, 리스트 정렬 등에 사용
활용 예시:
- 모바일 앱의 리스트 UI를 균등한 간격으로 배치할 때 활용
- 카드형 UI 디자인 시 일정한 높이를 유지하는 데 사용
설정 방법:
- "+" 버튼 클릭 → Rows 선택
- 행 개수(Count), 거터, 마진 설정
4) 점(Line)
설명:
- 점선 형태로 배치되는 가이드
- 정밀한 맞춤이 필요한 디자인에서 사용됨
활용 예시:
- UI 요소의 픽셀 단위를 맞추기 위해 보조 가이드로 활용
- 손으로 자유롭게 배치할 때 기준점으로 사용
3. 레이아웃 그리드 활용 예시
1) 반응형 웹 디자인
- 데스크탑: 12컬럼
- 태블릿: 8컬럼
- 모바일: 4컬럼
- 컬럼 기반으로 UI 요소를 정렬하여 다양한 화면 크기에 적응할 수 있도록 설계
2) 모바일 앱 UI 디자인
- 리스트형 콘텐츠(예: 뉴스 피드, 카드형 UI)에서 행(Row) 그리드를 사용하여 균등한 간격 유지
3) 버튼과 텍스트 정렬
- 버튼 크기, 텍스트 정렬을 맞출 때 8px 또는 10px 그리드를 활용하여 균형감 있는 디자인 적용
피그마에서 프레임 바깥으로 레이어가 튀어나오지 않게 하는 방법
1. 프레임을 클립(Clip Content) 설정하기
프레임 내부의 요소가 프레임 바깥으로 넘치지 않도록 잘라내는 방법임.
설정 방법:
- 프레임을 선택
- 우측 패널에서 Clip Content 체크
- 프레임 크기를 벗어난 요소가 프레임 내부에만 표시됨
2. 마스크(Mask) 기능을 활용하기
마스크를 적용하면 특정 영역 외부로 나가는 부분이 보이지 않게 됨.
설정 방법:
- 프레임 내부에 마스크 역할을 할 쉐이프(예: 사각형) 추가
- 마스크할 요소와 함께 선택한 후 Ctrl + Alt + M (Mac: ⌥ + ⌘ + M)
- 마스크된 부분 외에는 보이지 않음
3. Auto Layout을 활용하여 정리하기
프레임 내부의 콘텐츠를 정렬하여 요소가 튀어나가지 않도록 하는 방법임.
설정 방법:
- 프레임을 선택한 후 Shift + A를 눌러 Auto Layout 적용
- 패딩, 마진을 조절하여 콘텐츠가 프레임 내부에 정렬되도록 설정
- 넘치는 요소가 프레임 내부에 맞춰 조정됨
4. 수동으로 요소 정렬 및 제한하기
프레임 바깥으로 나가지 않도록 수동으로 제한하는 방법임.
설정 방법:
- 프레임 크기를 조정하여 콘텐츠가 넘치지 않도록 함
- 정렬(Align) 옵션을 사용하여 요소를 프레임 내부에 배치
- 필요 시 프레임 내부의 요소 크기를 조정하여 맞춤
[추가 피드백: 8px 단위의 공간 시스템 활용]
1. 8px 단위의 공간 시스템이란?
- 디자인 요소들의 간격(Spacing)과 크기(Size)를 8의 배수로 정하는 방식을 의미함.
- 예를 들면, 여백, 패딩, 마진, 버튼 크기, 카드 UI, 행 간격 등을 8px, 16px, 24px, 32px 등 8의 배수로 설정하는 것임.
2. 왜 8px 단위 시스템이 중요한가?
✅ 일관성 유지
- 디자인 시스템에서 모든 요소가 일정한 간격을 가지므로 깔끔한 레이아웃을 유지할 수 있음.
- 특정 요소의 크기를 조정할 때 기존 구조와 어긋나지 않도록 조정 가능함.
✅ 수정 및 확장 용이
- 만약 UI를 수정할 때 8px 단위로 설계되어 있다면, 수치를 쉽게 변경 가능함.
- 예를 들어 버튼의 크기를 37px에서 40px로 수정하는 것보다 32px → 40px로 수정하는 것이 훨씬 자연스럽고 체계적으로 변경 가능함.
✅ 반응형 디자인에 유리
- 8px 단위는 다양한 해상도에서도 균형 잡힌 간격을 유지할 수 있도록 도와줌.
- 특히, 모바일(360px, 375px, 390px), 태블릿(768px, 1024px), 데스크탑(1440px 이상) 등의 해상도에서도 정렬이 깨지지 않도록 설계 가능함.
3. 8px 단위 시스템을 적용하는 방법
- 피그마(Figma)에서 그리드 설정
- 프레임을 선택하고 Layout Grid를 추가
- Grid Type을 ‘Grid’가 아닌 ‘Columns’ 혹은 ‘Rows’로 설정
- Spacing(간격)을 8px 단위로 설정하여 모든 요소가 8의 배수로 정렬되도록 함
- 필요한 경우 Base Unit을 4px로 설정하여 좀 더 세밀한 조정이 가능하게 함 (ex. 4px, 8px, 16px 등)
- 기본 컴포넌트 크기 예시
- 버튼 높이: 40px (8px 단위)
- 카드 UI 패딩: 16px (8px 단위)
- 아이콘 크기: 24px (8px 단위)
- 리스트 아이템 간격: 8px or 16px
- 헤더 높이: 64px
4. 결론
💡 8px 단위 시스템을 활용하면 디자인의 일관성이 높아지고, 유지보수 및 수정이 편리해짐.
💡 반응형 웹과 앱 디자인에서도 유용하게 활용할 수 있어 확장성이 높음.
💡 Figma에서 Layout Grid 기능을 활용하여 간격을 설정하면 보다 체계적인 디자인을 할 수 있음.