복잡함의 규칙
가상의 안내선 "그리드(Grids)"스터디
“형식과 내용이 구분되지 않을 때 예술 작품이 실현된다”
- Paul Rand -
디자인 구성은 그리드라는 토대 위에서 이루어집니다. 그리드를 이용해 다양한 요소들을 효과적으로 구성할 수 있으며, 디자인의 일관성을 구축하는데 도움을 주어 정돈된 체계의 근거를 제공합니다. 그리드 모듈은 시각적 일관성을 가지고 레이아웃 구성 요소들을 빛나게 해주는 도구인 만큼 적절하게 사용될수록 좋은 디자인 결과물이 나올 가능성이 크다고 할 수 있습니다.
UX랩에서는 우리가 오래전 배웠거나 감각적으로 알고는 있지만 생각해본지 조금 오래된 디자인의 기본중에 기본, 그리드에 관해서 일주일에 한번씩 총 4차례 스터디 모임을 갖고, 안그라픽스의 그리드(GRIDS)를 독서하고 토론하였으며 그 기반으로 여러 자료를 리서치 하였습니다. 그 내용을 공유합니다.
그리드 필요성
정보를 구성하는 방법을 통해 다양한 환경에서의 배치, 정돈, 위계 구성을 돕기 위해 그리드는 사용됩니다. 레이아웃 안에 여러 가지 디자인 요소를 배치하지만 사람의 눈은 본문을 읽어내는 방식에 있어 습관적으로 위에서 아래로 왼쪽에서 오른쪽으로 집중되는 걸 알 수 있습니다. 색의 대비 또는 색을 이용, 텍스트의 크기 등 다양한 방식으로 흐름을 유도할 수 있습니다.
- 낱쪽을 읽는 방식 -때론 실용적 요구가 미학적 고려보다 우위에 놓여야 할 때가 있습니다. 목적이 분명한 화면의 경우, 사용자의 사용성에 초점을 두어 사용하기 쉬우면서 대상이 쉽게 접근할 수 있도록 해야 합니다. 이러한 실용적 기능을 제공할 때 그리드는 시각적 체계를 전달함과 동시에 정박, 엇박등의 시각적 리듬감을 통한 즐거움도 함께 전달합니다.
그리드 기본
그리드는 디자인을 할 때 기본적인 틀이 되며, 요소들을 배열하는 데 있어 구조를 제공해 줍니다. 인쇄물의 낱쪽이나 펼침 쪽의 공간의 윤곽을 효과적으로 그리려면 그리드의 기초사항을 알고 있어야 합니다. 그리드는 규범적인 도구가 아니기 때문에 기초를 응용하여 다양하게 접목시킬 수 있으며, 적극적인 형태를 창조하며, 여러 가지 요소들을 활용하여 구조들의 위계를 만들어 갈 수 있습니다. 즉, 디자이너가 정한 룰을 통해 사용자에게 다양한 메세지를 전달 할 수 있는 방법론 입니다.
- 낱쪽의 구조 (출처 : designschool.canva.com) -낱 쪽의 기본 구조들은 각각 디자인 안에서 중요한 목적과 기능을 맡고 있습니다. 낱 쪽의 기본 구조들을 응용하여 펼침 쪽까지 다양한 방식으로 글자와 이미지 요소들을 배치하며, 형태 안에서 다양하게 배치하여 짜임새 있고 효과적인 디자인을 할 수 있게 합니다.
때로는, 비례 또는 수학적 원리를 이용한 여러 가지 방식으로 그리드를 그릴 수 있습니다. 우리가 흔히 알고 있는 피보나치수열 또한 하나의 비례로 8:13 황금비의 조화로운 비례를 반영한 수열이라고 할 수 있습니다.
- 3등분 법칙 -
- 웹에 접목시킨 예제 (출처 : behance.net) -그리드 요소
그리드의 중심 요소는 단연 "글자"입니다. 글자는 읽기 쉬워야 하며, 메시지를 효과적으로 전달해야 합니다. 글자는 전체 디자인 모습에 크게 작용되므로 단순히 폰트를 선택하는데에서 끝나지 않습니다. 글자에서 굵기는 다양한 농도의 색 팔레트를 구성하며, 글자의 크기나 배열을 통해 창의적으로 사용한다면 디자인에 좋은 영향을 줄 수 있습니다.
- 그리드요소 배치형태 (출처 : creativemarket.com) -그리드는 글자, 이미지 요소를 공통의 단위로 사용하며, 정의한 그리드 내에서 적절한 자리에 배열하여 다양 하지만 규칙이 느껴지는 형태로 구성합니다.
그리드 쓰임
“그리드가 제한적이라는 말은 언어가 제한적이라거나 타이포그래피가
제한적이라는 말과도 같다. 이 매체를 비판적으로 또는 수동적으로 사용하는
것은 우리에게 달린 일이다”
- Ellen Lupton -
그리드를 사용하는 데 있어 단순 형태에만 의존하지 않은 다양한 사용방법들이 있습니다.
요소를 배열하여 그리드의 형태로 보이도록 하는 유형
요소의 크기와 내용의 균형을 깨는 유형
둘레를 사용해 창의적&역동성을 가져오는 유형
축을 제어하여 구성하는 유형
요소 사이의 관계나 연결을 좀 더 효과적으로 제시하는 유형
디자인 요소에 숨 쉴 공간을 제공하는 유형
아이덴티티 접근법
- 그리드 쓰임 (출처 : creativemarket.com) -그리드에 배열할 때 한 가지 유형만 아니라 다양한 유형을 어떻게 표현하느냐에 따라 다양한 느낌을 표현할 수 있습니다. 여백, 크기, 둘레 등 다양한 유형으로 표현, 낱 쪽과 펼침 쪽의 다른 요소들이 서로 상호작용할 수 있도록 합니다.
- 그리드 쓰임 (출처 : gridness.net) -그리드의 일차적인 기능은 질서를 잡는 것입니다.
자료를 제시하는 더욱 형식적인 구조에서 가장 효과적으로 내용을 이해할 수 있도록 하는 것이 핵심입니다. 몇 가지 간단한 규칙을 적용해 다양한 숫자 정보들을 차분한 느낌으로 전달, 간단한 위계, 정렬, 글자의 쓰임에 따라 정보를 전달합니다.
- 그리드 쓰임 (출처 : behance.net) -
- 그리드 쓰임 (출처 : ww38.likesof.us) -
- 그리드 쓰임 (출처 : pinterest.com) -예시와 같이 그리드는 다양하게 쓰일 수 있습니다. 또한, 어떤 방식으로 어떻게 사용하냐에 따라 전혀 다른 느낌을 줄 수도 있습니다. 그리드 시스템은 내용에 맥락을 만들어주며, 즐거운 레이아웃을 통해서 시각적 만족감을 제공합니다.
마치며
주로 프린트 디자인에서 언급된다고 생각되는 그리드는 우리가 자주 다루는 웹/모바일 UI디자인의 근간이기도 합니다. 어딘가 모르게 엉성해 보이는 화면, 반대로 어딘가 모르게 짜임새 있어 보이는 화면 이 모든것의 출발이 그리드라고 해도 과언이 아니라고 생각합니다.
현재 디자인을 공부하는 학생분들도, 현업에 종사하는 디자이너 분들도 한번쯤 자신이 알고 있는 기본에 대해서 점검하고 가는 계기는 자신의 작업물에 긍정적인 영향을 끼친다고 확신합니다.
