그리드와 친해지기 (사이트 안내)

 

해당 콘텐츠는 웹디자인에서 기초적으로 사용하는 그리드(Grid)의

사전/실무적 정의, 간단한 비교예시를 소개해 드리며

궁극적으로는 유용한 그리드 사이트 소개를 위한 글입니다.

 

웹디자인 그리드의 아주 기초적인 부분을 다루고 있기에

바쁘신 분은 하단 [사이트 소개] 부분만 신속하게 확인하셔도 되겠습니다. :D

---

 

 01. 그리드란? 

그리드의 사전적인 뜻을 간단히 하면 '격자, 바둑판의 눈금' 등을 뜻하며,

일반적으로는 수직과 수평으로 면이 분할된 것을 의미합니다.
결국 시각적 콘텐츠를 효과적으로 배열하기 위한 뼈대가 그리드의 뜻이라 할 수 있겠습니다.

'그리드 시스템'은 디자인의 효과적인 '레이아웃을 구현할 때' 그 바탕이 되는 것이므로
이는 디자인의 레이아웃에 규칙을 부여하는 수단입니다.

 

[ 기본요소 ] 　1) 컨테이너 : 콘텐츠 영역의 가장 큰 너비(width) 입니다. 　2) 단 :  나누어진 규칙적인 영역. 　　　　 같은 사이즈의 콘텐츠를 복수 나열할 때, 단을 기준으로 질서있는 레이아웃을 잡습니다. 　3) 거터 :  단과 단 사이의 거리, 공통적 여백 　4) 마진 : 화면과 컨테이너 좌/우 사이의 가변적 여백 　* 단위 : px

　* 반응형 웹사이트 작업 기준, 12단 / 20거터 그리드 사용이 가장 보편적인 것으로 알려져 있음

 

 02. 그리드의 존재 이유 

그리드는 시각적 질서와 전체 디자인의 일관성을 유지시키는데 반드시 필요합니다.
그리드 시스템에 맞추어 작업 한 UI디자인과 그렇지 않은 UI디자인은
콘텐츠의 가독성 유무에 가장 직접적인 영향을 미친다 하여도 과언이 아닙니다. (다음예시 참조)

 

 03. 그리드 적용 예시 

 

A : 그리드 시스템 적용

 

B : 그리드 시스템 파괴

 

유명 포털 웹페이지를 떠올려보시겠어요?

보통 A화면(그리드 시스템 적용)과 큰 틀에서의 레이아웃이 오버랩됨을 아실 수 있을겁니다.

반면, B화면(그리드 파괴)은 디자인의 질서라곤 찾아보기 어려운... 너무나도 자유분방한 레이아웃이죠.

이는 어떤 콘텐츠가 주된 내용이고, 어느 쪽에 먼저 시선을 두어야 할지 고민스럽게 하는 배치입니다.

 

A에 비해 B는 가독성이 크게 저하됨을 간단한 비교를 통해 알아보았는데요.

앞서 언급하였던 '가독성'의 주축을 그리드가 담당한다는 것을 간헐적으로 소개해 드렸습니다.


 04. 가이드 사이트 공유 

반응형 웹사이트 디자인 뿐만 아니라, 그래픽 디자인이나 UI디자인에도 그리드 시스템은 적극 활용되고 있습니다.

흔히 '예쁘다' 라고 여겨지는 웹디자인 콘텐츠에도 그리드의 규칙과 질서가 존재하기 때문입니다.

 

그리드를 구축하기 위해서는 작업하고자 하는 컨테이너(px)를 효과적으로 나눌 수 있어야 하는데요.

이를 도와줄 수 있는 유용한 사이트가 있어서 소개해 드립니다.

 

http://gridcalculator.dk

작업에 도움되는 정보이기를 바래봅니다. 감사합니다. :D

 

#그리드 #웹디자인 #반응형사이트 #웹디자인기초 #디자인입문 #포토샵 #그리드시스템 #컨테이너