그리드 디자인


안녕하십니까 IT 아웃소싱 플랫폼 입니다.


디자인분야에서 레이아웃을 잡는 것은 기본적이면서 퀄리티 높은 결과물을 만드는데 중요합니다.

물론 웹디자이너분들도 웹사이트를 디자인하면서 배치나 여백, 정렬 등 신경을 많이 쓰고 있을겁니다.

앱디자이너들도 카테고리나 주요기능을 이용자에게 가독성을 좋게하려고 고민하고 계실 것 같습니다.


디자인에서 중요한 레이아웃을 빛나게 도와주는 도구이자 수단인 '그리드(grid)' 를 알아보겠습니다.



디자인을 구성하는 공간 그리드 


그리드


§ 그리드란?

레이아웃의 요소들을 조화롭게 시각화시키기 위하여 사용하는 수평 , 수직의 안내선입니다.

레이아웃을 잡게 도와주는 요소이지 꼭 그리드에 신경쓰다보면 획일화되고 융통성 없는 

레이아웃 디자인으로 나올 수 있으므로 틀에 얾메일 필요는 없습니다. 


§ 그리드의 장점

첫째. 정보의 조직, 명료, 집중화

둘째. 창조성과 객관성의 증대

셋째. 디자인 요소의 통합과 공간의 체계적 통계

넷째. 제작 과정의 합리화를 통한 시간과 비용의 단축


§ 그리드의 구성요소


그리드 구성요소


(1) 칼럼 : 글자나 이미지를 배열하기 위해 나눈 세로형태의 공간

(2) 모듈 : 모듈은 가로, 세로가 일정한 간격으로 분할된 한 면으로, 공간을 나누는 기본 단위이다.

(3) 마진 : 그리드 외곽의 빈 공간, 화면에 균형과 긴장을 부여, 내용과 이미지를 제외한 나머지 부분

(4) 플로우 라인 : 공간을 수평으로 분할하는 가상의 기준선

(5) 존 : 몇개의 모듈이 모인 별도의 틀

(6) 마커 : 표제와 페이지번호와 함께 사용되어 반드시 동일한 위치에 반복되어야 합니다.

(7) 칼럼 마진 : 칼럼과 칼럼 사이의 공간을 말합니다.


§ 그리드 종류

1. 블록그리드

그리드의 기본으로써 하나의 블록만을 사용하는 디자인으로 1단그리드라고도 불립니다. 

글을 많이 적는 서적이나 논문, 리포트에 주로 쓰이는데 반복될 경우 지루한 느낌을 줄 수 있습니다.

블록그리드



2. 단그리드

두개이상의 단으로 나누어 사용한 그리드로써 단의 수의 따라 2단 3단으로 불리는 그리드 디자인

다양한 형태의 단으로 구성될 수 있어 신문이나 잡지에서 많이 쓰이며 '칼럼그리드'라고도 불립니다.

단그리드


  

3. 모듈그리드

모듈그리드는 단그리드보다 복잡한 디자인 형태일때 사용하는 그리드형태입니다.

모듈이라는 사각형의 방을 만들어 그룹화하는데 이 잉역을 바탕으로 레이아웃을 정합니다.

모듈을 제대로 사용하지 않을 경우 시각적 혼란을 주기 떄문에 안정된 느낌으로 디자인해야합니다.

모듈그리드



4. 계층그리드

직관적인 배치를 사용하여 어떠한 범주에도 들어가지 않고 규칙적이고 반복적으로 쓰이는 

다른 그리드와 달리 디자이너의 공간연출 역량이 중요합니다.

주로 포스터나 북디자인, 웹페이지에서 접근하는 방법입니다. 

계층그리드



§ 그리드디자인 하는데 도움되는 사이트


grid guide


Grid guide

<http://grid.guide/>그리드를 생성하는데 수치를 도움받을 수 있는 좋은 리소스사이트입니다.

전체 폭과 열의 수를 입력하면 자동으로 거터 너비 별로 그리드의 수치를 계산해서 알려줍니다,

<http://guideguide.me/>를 들어가면 설정을 통해 포토샵에서 그리드를 쉽게 생성할 수 있도록

제공받을 수 있습니다. 


웹디자인을 하기전에 그리드를 세팅해 놓고 레이아웃을 잡는다면 이용자들에게 

깔끔하고 가독성있는 웹사이트를 설계하실 수 있을 것 같습니다. 

또한 그리드를 잘 이용할 수록 숙련도 높은 디자이너로 성장하실 수 있습니다. 

디자이너를 꿈꾸는 분들에게 많은 도움이 되셨으면 좋겠습니다. 

감사합니다.


 

프리모아


저작자 표시 비영리 변경 금지
신고
Posted by 프리모아

댓글을 달아 주세요


티스토리 툴바