피그마 6일차 - 피그마 필수 과정 Layout Grid 설정

안녕하세요 

시란입니다. 

 

레이아웃에 그리드 설정하는 방법을 알아보도록 하겠습니다. 

 

먼저 레이아웃 그리드는 디자인을 할때 정렬 및 컴포넌트들을 배치하는데 도움이 됩니다. 

디자인 할때 기본 구조 작업을 한다고 생각하면 편합니다. 

 

다음번에 기회가 된다면 그리드 또는 작업선에 대해서 좀더 자세한 얘기를 해보고 싶네요. 

 

일단 레이아웃 그리드를 만드는 방법에 대해서 알아보도록 하겠습니다. 

자 먼저 데스크톱 프레임을 만들어줍니다. 

작업 크기는 조금 변경해서 w, h 값을 1600과 2000으로 맞춰봅니다. 

 

 

그리고 나서 프레임을 클릭한 후 우측 아래쪽 작업창을 보시면 layout grid 라는 항목이 있습니다. 해당 항목을 +를 눌러줍니다. 

그럼 아래 그림과 같이 빽빽하게 그리드가 생성됩니다.

 

이 그리드는 우리가 원하는 레이아웃 그리드가 아니죠. 전혀 도움이 안됩니다. 

모눈종이도 아니고 말이죠 ㅎㅎ;; 

메뉴에서 Columns를 선택해줍니다. 

우리가 작업하기 편하게 하기 위해서 가로 길이를 12개 정도로 나누고, 양 옆의 픽셀은 120정도 여유를 주도록 합시다. 

gutter는 기둥과 기둥 사이의 간격을 뜻해요. 

 

이렇게 그리드가 완성되었습니다. 

 

 

만약 혹시나 작업하시다가 그리드가 거슬린다면 여기 눈모양을 클릭하시면 됩니다. 

그럼 그리드가 보였다 안보였다 하죠.

 

이렇게 그리드를 만들고 작업을 하면 앞서 말씀한대로 

정렬 및 컴포넌트들을 배치하는데 도움이 됩니다.