Figma_그리드 시스템 Grid System

Goal : Figma의 그리드 시스템을 이해하자

 

 

우선 왼쪽 상단의 메뉴를 눌러 검색 기능에서 layout을 쳐준다, 그리고 show layout grid를 체크해주자.

 

show layout grid를 체크하면 위 이미지의 모습에서처럼, 시안에 적용된 그리드 시스템을 볼 수 있다.

앞으로 그리드를 껐다 켰다하는 것은 정말 많이 쓰이기 때문에, 단축키 ctrl+shift+4를 기억해서 자주 이용하도록 하자.

 

자 그래서 그리드 시스템이 무엇이냐, 디자이너가 디자인 작업을 할 때 화면에 아무것도 없이 완전 빈 화면에다가 레이아웃을 배치하고자하면 되게 힘들 것이다. 어디다가 레이아웃을 배치해야할지도 모를 것이고 배치를 한다 하더라도 일관성을 지키기가 어려울 것이다. 그리드 시스템이 하는 역할은 마치 우리가 노트에 글을 쓸 때, 기본적으로 그어져 있는 줄과 같은 역할을 한다. 이는 우리가 실제로 시안에서는 볼 수 없지만 디자이너가 작업할 때는 보이지않는 기둥과 선들을 그어놓는 것이다. 그리고 디자이너는 그것에 맞춰서 레이아웃을 배치를 하면 굉장히 깔끔하게 요소들의 간격을 설정할 수 있고 정렬도 쉬워지며 매우 일관성있고 통일된 시안을 만들 수 있기 때문에 그리드 시스템을 가장 먼저 설계한다.

 

자 그런데 이 그리드 시스템은 말그대로 시스템이다. 이는 이를 형성하는 규칙과 패턴이 있다는 것이다. 또한 이는 개발자들이 코드로 옮기기에 매우 수월해진다는 의미를 가진다. 

 

그리드를 파악하기 위해서는 몇 column으로 이루어졌는지, 그리고 하나의 column당 unit size는 몇인지, 그리고 gutter의 size는 몇인지에 대해서 파악을 하면 된다.

그럼 본격적으로 그리드 시스템에서 사용되는 용어들에 대해 알아보자. 

다음 이미지를 보면서 그리드를 구성하는 구성요소에 대한 용어 정리를 해보겠다.

딱 봤을 때 보이는 보라색 영역은 사이즈가 다들 비슷해보인다.  

다음과 같이 확인해보니, 정확하게 width가 65px로 동일하다. 여기서 이 기둥의 width 사이즈를 unit size라고 얘기를 한다. 따라서 지금같은 경우에는 unit의 사이즈가 65px이구나, 라고 할 수 있다. 자 그런데 여기서 보라색 기둥뿐만 아니라 기둥과 기둥 사이의 간격의 width도 알아야 한다. 이 기둥과 기둥사이의 간격의 width가 30px이다. 이 width의 사이즈를 gutter size라고 한다. 그래서 이 부트스트랩 그리드 시스템과 같은 경우에는 gutter가 30px이라고 볼 수 있다.

 

여기서 gutter의 절반의 width를 unit의 양 옆에 붙이고, 이를 합친 width를 columns라고 부른다.

colums은 기둥이란 뜻인데, 각각이 일정한 간격대로 나열된 기둥이며 양 옆에 gutter를 배치하고 또한 그 사이에는 unit 사이즈를 갖고 있는 이 하나의 단위를

1 column이라 부른다. 이 부트스트랩에는 12column이 있는 것을 확인할 수 있다.

 

자 그럼 이 브트스트랩 그리드 시스템에서 그리드가 적용되는 영역은 총 몇 px일까? 이는 단순 산수로 계산할 수 있다.

(65+30)*12 = 1,140(px) 이렇게 계산할 수 있다.  

 

이제 디자이너가 어떻게 그리드 시스템을 이용하는지 알아보자.

위 이미지를 보면(출처: 김버그님 강의) 왼쪽 요소는 부트스트랩 그리드 시스템을 기준으로 해서 4column을 사용하며, 양 옆에는 gutter가 붙어있는 식으로 사용한다. gutter 영역에는 요소를 넣지 않는다는게 중요한 rule이다. 오른쪽 요소는 3column을 사용하고 있다. 이렇게 gutter을 양 옆에 두고. 그 사이를 메꾸는 형식으로 요소를 채워넣는게 핵심이다. 

이렇게 그리드 시스템을 이용하면 굉장히 체계적으로 요소의 사이즈, 배치, 간격을 관리할 수 있다는 것을 기억해두자.

 

gutter = 0인 그리드

margin이 설정되어있는 그리드

자 이번 포스트에서 그리드 시스템에서 쓰이는 용어라던가 그리드 시스템을 분석하는 법에 대해서 살펴봤는데, 스스로 그리드 시스템을 분석하고 사용해면서, skill up 할 수 있도록 해보자.