[피그마 기초 3강] 그리드 이해하기

플랫폼을 보시면 깔끔하게 정돈된 텍스트, 오브제들을 확인하실 수 있습니다. 그리고 그렇게 깔끔한 플랫폼에서 매출과 직결되는 부분이 많을 수 있습니다. 그래서 피그마의 그리드라는 기능에 대해서 알아보겠습니다.

 

 

 

1. offset : 컨테이너 바깥 부분에 해당하는 영역

2. column : 열(칼럼 위에 오브젝트가 배치된다라고 이해하자)

3. Gutter : 칼럼과 칼럼사이의 길이

 

그리드 좋은 예/나쁜 예

1. 그리드를 사용하지 않고 오브제를 먼저 사이즈를 재고 배치를 했을 경우 아래와 같은 화면으로 배치할 수 있습니다. 이렇게 화면을 이렇게 배치하게 되면 예쁘게 잘 배치되었는데, 무엇이 문제일까?

• 잘 보면 오브제가 잘 정돈되어 보이지만, 이를 재사용할 수 없습니다.
  그러나, 그리드를 사용하게 되면 디바이스 별로 사용자들에게 적합하게 보이게 하는 기능을 제공합니다.

그리드를 사용하게 되면 해당 그리드 위에 도형을 위치시켜 이를 활용하여 디자인적인 요소를 고려할 수 있습니다. 전환율을 올리는 가장 중요한 요소 중 하나로 잡고 있는 현재 배치는 굉장히 중요한 요소입니다.

사실 PPT에서도 그리드와 비슷한 부분이 있기는 있지만, 디자인적으로 보았을 때 분명 차이가 존재합니다. 

해당 PPT에서는 모눈종이처럼 사용할 수 있었습니다. 

이렇게 눈금 안내선을 이용하여 기획자들이 쉽게 사용할 수 있었죠. 피그마에서는 그리드를 이용해서 편리하게 위치를 조절하는 레이아웃을 조금 더 정교하게 하였다고 생각하시면 쉬울 것 같습니다.