10. 피그마의 그리드를 활용해 디자인의 완성도 높이기

그리드 이해하기

 

그리드는 디자인을 하는데 있어서 퀄리티를 올려주는 도구 !

-> 그리드는 디자인을 정돈되게 해준다.

 

피그마에서 그리드를 사용할 때 장점

-> 오브젝트를 만들거나 배치할 때 그리드에 맞게 자동으로 크기, 간격을 조정해준다.

 

그리드의 장점

1. 반응형 디자인에 좋다 !

-> 화면이 크든, 작든 사용자가 동일한 디자인을 보게끔 한다.

=> 사용자 입장에서 익숙한 사용자 경험을 할 수 있다.

 

2. 디바이스 별로 포맷을 다시 디자인할 필요가 없다.

=> 디자이너, 개발자 입장에서 디자인을 재활용할 수 있다.

 

예시)

 

 

3. 개발자와 커뮤니케이션을 돕는다!

-> 그리드 내에서 화면 요소들을 어떻게 배치할 것인지 보여준다.

=> 특정 요소가 특정 브라우저에서 어떻게 배치되어야 하는지 쉽게 알 수 있다.

 

정리)

 

---

그리드 만들기

 

그리드의 핵심 용어

1. Max Width : 브라우저 또는 디바이스 화면의 가로 전체의 길이
2. Container : 화면 상에서 특정 컨텐츠가 담기는 영역

 

예시)

=> 컨테이너에 정해진 사이즈는 없다.

 

3. Gutter : 열과 열 사이의 간격

4. Column Width : 열의 가로 길이

5. Column Count : 열의 개수

6. Offset : 컨테이너 바깥에 해당하는 부분

 

예시) 

 

그리드 만들기 !

1. 프레임을 만든 뒤 우측 패널에서 그리드를 만든다. (default로 10px이 설정되어 있다.)

 

2. Column을 설정해준다. (각 옵션에 값을 준다.)

 

3. 완성

-> 그리드를 보고 싶지 않을 때는 Ctrl + G 를 누르면 된다.

 

---

그리드를 활용해서 오브젝트 배치해보기

 

-> 중요도가 높은 컨텐츠(주황색)들은 6개의 Column을 차지

-> 북 컨텐츠(파랑색)들은 3개의 Column을 차지

-> 컨텐츠들 사이 간격을 띄워준다. (같은 컨텐츠끼리 그룹으로 보이게 하기 위함)

=> 정보의 계층(우선순위)을 염두에 두고 배치한다 !

 

---

그리드를 활용한 반응형 UI디자인 만들어보기

 

-> Unsplash 라는 플러그인을 이용해 사진을 넣고 Crop 으로 위치를 조절한다.

 

-> 하위 컨텐츠들도 마찬가지로 사진을 넣어준다.

-> 텍스트도 적절히 배치한다.

 

모바일에 적용하기

-> 마찬가지로 중요 컨텐츠와 하위 컨텐츠들을 적절히 배치한다.

=> 항상 우선순위를 생각해야 한다 !

 

-> 가로 공간이 부족하다보니 세로로 공간을 너무 많이 차지하는 경우가 생길 수 있다.

=> 이 경우 좌우 스크롤 기능을 활용하여 공간을 줄일 수 있다.

=> 또는 좌우에 화살표를 넣어 슬라이드 기능을 활용할 수도 있다.