** 영상으로 보고 싶은 분은 아래 주소를 클릭해 주세요.
- 영상의 12:52 부분부터 보면 됩니다.
1. Layout Guide란?
- 2025년 6월까지만 해도 Layout Guide는 Grid라고 표시했었습니다.
- 새롭게 레이아웃 가이드로 변경이 되었습니다.
- 그리드(Grie)는 오브젝트를 더 섬세하게 작업할 수 있도록 도와주는 격자선입니다.
- 피그마에서는 Frame 요소에 적용가능합니다.
- 그림에서 보는 것과 같이 프레임을 선택한 후 디자인 패널에서 Layout guide의 +버튼을 누르면 그리드가 추가됩니다.
- 과거에 사용했던 모눈종이처럼 나오는 것을 확인할 수 있습니다.
- 보통은 이런 사각형의 격자선으로 나오지만 웹앱에서는 다른 그리드 방식을 사용합니다.
2. Layout Guide의 종류
- Layout Guide(=grid)는 3가지 형태로 나뉩니다.
- Grid, Columns, Rows로 나뉩니다.
- 세 가지 형태를 전부 나누어서 보도록 하겠습니다.
1) Grid
- 그리드는 모눈종이와 같은 격자 선입니다.
- Layout Guide에서 +버튼을 누르면 처음부터 추가가 됩니다.
- Size는 그리드 사각형 크기입니다.
- Color는 그리드의 색상입니다.
- 위의 이미지는 Size를 30으로, 색상을 파란색 계열로 변경했을 때의 모습입니다.
2) Columns
- 컬럼의 한 행의 가로 컨텐츠 수를 나타냅니다.
- 웹과 앱에서 가장 많이 쓰는 그리드 시스템도 컬럼 그리드를 사용합니다.
- 피그마의 Layout Guide 장점은 여러 그리드를 레이어처럼 사용할 수 있다는 점입니다.
- 포토샵에서는 이러한 레이아웃 그리드를 사용하려면 레이어 자체에서 여러 레이어를 사용했어야 합니다.
- 하지만 피그마에서는 쉽게 만들며, 레이어가 아닌 디자인 패널에서 관리합니다.
- 이 내용은 좀 복잡한 내용이므로 위에 제공한 영상을 자세히 보시길 권장합니다.
- 위의 그림은 Grid를 Columns로 바꾼 그림입니다.
- 그럼 용어를 정리하고 가야겠죠?
- Count : 프레임을 몇 개의 컬럼으로 나눌지 수치를 작성
- Color : 컬럼그리드의 색상 지정
- Type : 컬럼의 폭을 어떻게 정렬할지 지정 - Stretch로 주면 Width가 Auto가 되어 여백을 뺀 나머지를 나눠서 자동 계산
- Margin : 전체 프레임의 좌우 여백
- Gutter : 컬럼 사이의 여백
- 컬럼 그리드 시스템은 웹에서 중요하게 사용되는 디자인 요소이기 때문에 피그마는 스타일로 등록 가능하게 처리합니다.
- 그와 관련된 강의는 추후 스타일 등록에서 하도록 하겠습니다.
3) Rows
- Columns와는 반대로 보면 됩니다. 전체 높이에서의 몇 행으로 나눌지 지정하는 것입니다.
- 하지만 보통 웹앱 디자인에서 행들의 높이는 모두 다를 확률이 높기 때문에 잘 사용하지는 않습니다.
- 하지만 편집 디자인에서 일정하게 정리해야 할 부분이 생긴다면 유용하게 사용할 수 있을 것으로 보입니다.
'디자인프로그램 > [2025년버전]피그마' 카테고리의 다른 글
| [피그마2025강의] 6강 피그마 - 모서리 둥근 사각형 - 배터리 아이콘 만들기 (0) | 2025.11.11 |
|---|---|
| [피그마2025강의] 5강 피그마 - 사각형 도형툴 - 햄버거 버튼 만들기 (0) | 2025.11.10 |
| [피그마2025강의] 3강 피그마 가이드(Guide) (0) | 2025.11.09 |
| [피그마2025강의] 2강 피그마 프레임(Frame) (0) | 2025.11.06 |
| [피그마2025강의] 1강 피그마 설치 및 인터페이스 (0) | 2025.10.16 |
