본문 바로가기

디자인

Grid Systems 그리드 시스템

Grid Systems

페이지를 구성하는 요소(사진, 텍스트, 쪽번호등)들이 시스템(일관된 무언가)속에 들어있는 것들
일종의 가이드 역할을 하는 것을 말함

 - 페이지는 양쪽 디자인을 원칙으로 하며, 안쪽 마진은 안쪽 마진끼리,  바깥마진은 바깥마진까지 너비가 맞아야함.

Margins (마진)
여백, 중앙의 텍스트와 이미지가 놓여지는 중심부분을 제외한 여백 (가장자리)
디자인은 항상 놓여지는 곳에만 눈이 간다고 생각하는데,  공간이 어떻게 비워져있는지에 따라 느낌이 달라진다.
안정된, 균형있는 형태를...
뭔가 놓여지는 부분뿐 아니라 남게 되는 여백도 함께 생각을 많이 해봐야한다.

Columns 칼럼
텍스트의 양이나 이미지의 비율이 많아질경우 칼럼이 늘어나게됨
세로로 나누게 되는 공간들을 칼럼이라고 부름
3칼럼이상까지 가지 않는것이 대부분임.
칼럼의 폭안에 (가독성 때문임, 긴 텍스트를 한 컬럼으로 갈 경우 떨어짐) 몇개 이상의 단어를 넣지 못하도록 룰이 있기도 함.

Flowlines
캡션과 텍스트의 공간이나, 컬럼과 이미지사이의 공간
수평으로 나눠주는 공간들
얼마나 넓게 좁게 쓰냐에 따라 리듬감, 가독성을 높여주기도 함, 이미지와 텍스트 사이의 균형을 잡아주는 역할

Moules 모듈
individual units of space separated by regular intervals.
리듬감을 가지고 사용해야함.

Spatial zone
몇개의 모듈이 모여서 지역을 이루는가?
Groups of modules that together form a distinct field of use.

Markers 마커
중요한부분인데 디자이너들이 많이 망각하는 부분
페이지 넘버나, 기사의 타이틀(sub add)
페이지 넘버가 양쪽 끝으로 가느냐? 안쪽으로 가느냐? 위쪽으로 가느냐? 특이하게 할꺼냐?
다양한 방법으로 시도할 수 있음. 이런것들도 시스템을 가지고, 규칙적으로 배열해야함.


중요하게 여겨야할 것들
1. 디자인하고자 하는 컨텐츠에서 어떠한 요소들(텍스트, 이미지)이 있는지를 먼저 정리하는게 중요함
2. 디자인과 텍스트를 사용하기전에 만들어놓아야함.
3. 텍스트를 앉히게 되면 생각하지 못한 상황이 발생했을때 (헤드라인이 너무 길어졌다던지....)  효과적으로 내용을 수정하기도 한다.

그리드의 중류
1. manuscript grid
많은 정보를 다룰때
책같은 것들
양쪽의 마진을 많이줌

2. column grid
투컬럼, 쓰리컬럼, 네컬럼
컬럼을 주게되면서 그 안에서 실험이 가능함.
꼭 컬럼이 비례될 필요는 없음.
정보를 다양한 방식으로 분할한다던지, 통일감, 다양성을 추구할 수 있는 디자인, 
이미지와 텍스트를 많이 사용하는 경우, 릴레이션십, 콤포지션들을 많이 실험할 수 있는 장점.
더 많은 베리에이션을 추구할 수 있음. 한컬럼을 사용하는 것보다 더 다양한것들이 나옴

3. modular grid
신문이나 이미지가 많이 사용된 책의 형태(복잡한 형태)에서 많이 사용한다.
크기도 여러가지 형태로 조절해야할 경우
모듈러 그리드에서는 플로어 라인을 얼마나 잘 쓰냐에 따라 복잡한 모듈러들을 잘 디자인....
모듈의 크기가 작아질수록 그 안에서 다양성을 추구할 수 있지만 다른 한편으로는 너무 많은 모듈을 사용하면 혼란스럽거나 복잡한 디자인이 초래할 수 있음.
모듈의 갯수는 많이 가지 않는것이 기본임(안전한 방법)
그리드의 경우 수학적인 요소가 많이 들어있음.
많은 모듈이 있을 경우에는 디자인하기 쉽지 않은 디자인

4. Hierarchical grid
웹사이트의 경우 하이라이칼 그리드를 많이 볼 수 있음.
인터페이스 디자인의 경우 그리드 시스템을 가지고 디자인을 하는것이 일관성이 있고, 정보전달에 있어서 명확하고 효과적이게 할 수 있다.
다양성을 추구할 수 있음.
웹사이트,나 스크린안에서 디자인할때는 그 안에서의 비율과 균형, 조화를 잘 따져야함.
비례가 어떻게 되는가.. 살펴보는게 중요함.
화면상에 나오는 디자인에서 중요한것은 일관적이게 디자인을 해야함.
특히나 스크린, 웹사이트의 경우에는 화면이동이 다른장소로 가는 느낌이 들기 때문에, 일관적인 느낌을 줘야함. 시각적으로 혼란함을 주면 안됨.


정보를 그리드에 앉힐때 중요한점들
1. 그리드 시스템을 구축하고 시작하지만 다양성을 추구할 수 있다는것을 잊지 마라. (룰만 따르지말고 변화(다양성)를 추구해라)

2.  컬럼의 경우에다가 모듈을 끊어 주게 되면 모듈안에서 여러가지 베리에이션이 가능함. 모듈을 생각해두고 어떻게 결합하고 다양하게 쓰느냐가 여러가지 다양성을 탐구하는데 도움이된다.

3. the number of possible layouts within a well designed grid should be immense.

그리드가 자유로움을 구속하는것 같지만. 그리드를 가지고 생각하되, 그리드 안에서 다양한 가능성과, 벗어날 수 있는 속성을 생각해보며 디자인해보자.


그리드팁

1. 너무 규칙적인것에 얽매이지말고, 다양성을 추구할것
2. 다양성을 추구하는것이 중요한것이 페이지페이지마다 리듬이 달라지기 때문에 그런것들을 항상 염두해둬야함.