프레임 기능 : 그리드 그리기

리사이징을 위해서 더 배울 것이 남아서 간단하게 넘어가는 내용입니다.

바로 그리드 그리기인데요.

 

그리드는 디자인에서 상당히 중요한 역할을 하는 기능으로

해당 레이아웃의 배치 등을 어긋나지 않고 균일하게 맞춰주는 역할을 합니다.

 

이번 시간에는 그리드를 만들어 보는 시간을 가져 보겠습니다.

 

 

---

1. 그리드 사용하기

그리드는 프레임에서만 사용할 수 있다. 

 

프레임 선택 후 우측에 Layout Grid 기능을 킨다.

+ 버튼을 누르면 원하는 만큼 추가할 수 있다. 

 

---

2. 그리드의 종류

레이아웃 배치의 기본이 되는 그리드 형식을 만들 때 쓴다.
그리드는 원하는대로 추가할 수 있다.
기본적으로 픽셀, 행, 열 3가지 종류가 있다.

 

각각 색상도 자유롭게 설정 가능하다.

 

 

1) 픽셀 그리드

가장 기본적인 픽셀 그리드.
보통 8배수로 제일 많이 만들어진다.

 

사람에 따라 다르기는 하는데 2¹ / 2² / 2³ / 2⁴ 배수로 작성하는 경우가 잦다. 

(필자는 10px grid로 작성하는 경우도 있다고 들었음. 반드시 규칙은 아니다. )

 

 

2) 열 그리드

레이아웃의 기본을 만드는 열 그리드.

개인적으로는 단 수(Column Count)는 12(desktop) → 8(tablet) → 6(large mobile) 
→ 4(small mobile)를 주로 쓴다.


이때 타입은 늘리기(stretch) + 여백(margin)을 쓰고
 간격(gutter)를 조정하면 편하게 만들 수 있다.

 

사람에 따라 그리드 규칙은 다르게 만들 수 있고, 

이는 어디까지나 디자이너의 재량이라 생각한다.

 

3) 행 그리드

행 그리드는 텍스트의 줄높이를 기준으로 쓴다.

가장 기본적인 행 간격의 기준을 잡을 때 쓰인다.
하지만 요즘은 그렇게 주요하게 쓰이지는 않는 것 같다. 

 

두께는 본문에 주로 쓰는 16px을 사용하였다.

 

Row의 count는 전 영역을 표시할 수 있도록

프레임 요소의 길이에 맞춰 설정하면 된다.

 

그래도 개인적으로는

이 부분을 소홀히 하면 줄 간격을 놓치기가 쉽다고 본다. 

주의하며 사용하자. 

 

4) 레이아웃 그리드 만들기

 

1~3 레이아웃 그리드를 모두 모아서 하나의 그리드 템플릿을 만든다.

픽셀 그리드와 행 그리드, 열 그리드가 하나로 일치시키게 짤 수록

디자인이 어긋나는 정도가 줄어든다.

 

추후 실습에서 더 자세히 알아보자.

---

이상으로 간단하게 그리드 표기에 대해서 알아보았습니다.

 

포토샵과 일러스트레이터에서는 이 기능이 제대로 지원되지 않아서

옛날에는 꽤 손이 많이 가는 작업이었는데요.

 

이렇게 편하게 바뀌어서 훨씬 수월한 작업이 가능하게 되어 기쁩니다.

모두 잘 써보시고 자신만의 그리드 표현 방식을 설정해서 써보시길 바랍니다.