UI GUI 디자인 03 / 그리드시스템 제작하기

1. 그리드시스템 왜 사용하는걸까?

그리드는 쉽게 말해 격자인데

디자인을 구성하는 박스의 간격이나 배치를 쉽게 하기 위해서 그리드 시스템을 사용한다.

허나 모든 디자인요소에 그리드를 맞추는 것이 아니다.

디자인을 구성하는 커다란 박스만 그리드에 맞게 배치를 하고 그 안에 들어가는 작은 요소들.

메뉴라든지, 버튼 같은 것은 자유롭게 배치하면 된다.

---

2. 그리드시스템 구성 요소

Column / Gutter / Number of Columns / Full Width / Margin width

쉽게 말해서

컬럼(Column) = 기둥

거터(Gutter) = 기둥사이의 여백

넘버더컬럼스(Number of Columns) = 몇개의 컬럼을 사용하냐

풀 위드(Full Width) = 최대 해상도

마진 위드(Margin width) = 콘텐츠를 둘러싸는 공간의 넓이

※만약 1280px의 해상도를 잡았을 때, 15단 그리드시스템일 경우

거터를 20px로 잡으면 67px의 컬럼이 15개 있는 것이 되는 것이다.

---

3. 그리드시스템 제작방법

그리드시스템의 구성요소 중 무엇을 먼저 정하냐는 정답이 없는 문제다.

하지만 굳이 정한다면 넘버더컬럼스를 먼저 정하고 시작하는게 편하다고 한다.

근데 나도 예시로 몇 번 해보니까 넘버더컬럼스를 먼저 정하는게 편한듯하다.

디자인을 하기 위해 이제 그리드시스템을 이용해서 만든다고 가정해보자.

내가 쓸 컬럼을 해상도 안에서 잘 배치하고 사용할 수 있는 그리드여야 할 것이다.

찾아보니 그 값을 쉽게 구하기 위해서 이 사이트를 유용하게 사용하는 거 같다.

http://gridcalculator.dk/ 👇그리드를 구해주는 사이트!!

Grid Calculator by Nicolaj Kirkgaard Nielsen

강사님께서 좋은 계산 방법을 알려주셨는데 이걸 내 개인블로그에 적어도 되나 모르겠어서 못적겠당,,

 

 

※Max width : 1280px , Gutter : 20px, Column : 6개, Margin width : 20px 이라고 가정했을 때

Full width는 1280px ,

컬럼의 값은 190px이라는 결과가 나오게 된다.

이렇게 내가 원하는 대로 입력하고 수를 맞출 수 있어서 매우 편리한 거 같다.(요즘 참 세상이 좋다..👍)

 

최소 해상도를 잡는 것은 저번 글에서 참고해서 데이터 추출해서 정하면 될 것이다.👇

https://debliny.tistory.com/entry/02-%EA%B0%95%EC%9D%98%EB%85%B8%ED%8A%B8-UI-GUI-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%B5%9C%EC%86%8C-%ED%95%B4%EC%83%81%EB%8F%84-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%B6%94%EC%B6%9C%ED%95%98%EA%B8%B0

UI GUI 디자인 02 / 최소 해상도 데이터 추출하기

 

해상도는 최소해상도를 고려해서 정하고,

거터값을 정할때는 좁게하냐 넓게하냐에 따라서 분위기 스타일이 달라지기 때문에 그런걸 고려해서 정하면 될 것이다.

 

해상도 크기, 그리드 크기 모두 정답은 없다.

본인이 만들고 추구할 디자인의 컨셉, 스타일에 따라서 편리하게 정하면 될 것이다.

 

 

참고 : 리메인 UXUI 디자인 패키지 강의

---

찾다보니 좋은 글 들이 많아서 참고 하면 좋을 것 같다.

 

https://imweb.me/faq?mode=view&category=28&category2=31&idx=189

그리드 시스템이란?

 

http://designbase.co.kr/webdesign-4/

#4 웹디자인 그리드 시스템의 모든 것?! - 웹디자인 입문 강좌