타이포그래피와 컨텐츠, 그리드란 무엇인가?, 수평그리드에 대하여

이 내용은 국민대학교 시각디자인학과 2학년 수업인
타입과 컨텐츠를 수강한 후 나름대로 정리하여 포스팅하는 글입니다.

존경하는 선배님이자 스튜디오 밈(http://www.studiomim.com/)의 디자이너이신 김의래 선생님의 수업입니다.

studiomim

www.studiomim.com

GRID

그리드는 디자인요소의 질서와 일관성을 유지하는데 있어 큰 역할을 하는 안내선입니다.
글자와 이미지를 효율적으로 배열하기 위한 레이아웃의 수단으로 시각적 통일성을 얻게하죠. 많은 양의 정보를 일목요연하고 체계적으로 보이도록 할 수 있습니다. 

이렇듯 레이아웃의 기준이 되는 그리드를 만들거나 성격에 따라 개발된 여러개의 그리드를 하나의 인쇄물에서 운용하기위한 체계를 '그리드 시스템' 이라고 부릅니다. 
그리드시스템을 이용하면, 여러 디자인 요소를 어디에 어떻게 배치할지 논리적이고 객관적인 해결책을 찾을 수 있습니다. 특히 신문, 잡지, 백과사전, 카탈로그처럼 구성요소가 복잡한 매체를 다룰 때 효과적이죠.   - 타이포그래피 사전, 안그라픽스 발췌

그리고 위의 사진처럼 텍스트박스의 두 모서리가 그리드라인에 접할때 그것을
'그리드 피팅' 이라고 부릅니다.

그리드피팅만 이루어진다면 레이아웃은 자유로워집니다.
오히려 규격에 맞추는듯한 이 행위가 레이아웃을 자유롭게 할 수 있는 이유는 뭘까요?

바로 그리드피팅만 된다면 텍스트박스를 어떻게놓던 통일감과 질서가 부여되기때문입니다. 그래서 그리드를 짠 후엔 반드시 그리드피팅을 시켜줘야 하죠.



그리드를 설계할땐 주어진 글의 구성과 내용위계를 잘 파악하여 이 모두를 체계적으로 담을 수 있도록 평면적 얼개를 짜야합니다. 그리드는 단순히 안내선을 그리는 행위만은 아닙니다. 단락이 구분되는 지점, 글줄길이, 단어길이, 반복적으로 등장하는 기호 등등 타이포그래피의 다양한 요소들을 파악하여 설계하여야만 안정적인 그리드를 얻을 수 있죠.

그리드의 설계는 다양한 내용을 다루어보며 오랜기간 숙련되어야 글의 구성에 적절한 그리드 설계가 이루어질 수 있습니다.
(하지만 시대가 변화하여 곧 AI가 글을 분석하여 알아서 그리드를 짜 주게될것입니다. 하지만 그 AI를 다루고, 그것을 넘어서기위해선 그리드를 자유자재로 사용할 줄 알아야겠죠?




그렇다면 우리는 그리드 안에서 콘텐츠를 어떻게 분석하고, 구성할 지에 대해 알아보도록 합시다.

적절히 텍스트박스를 나누고 그리드피팅을 하기 위해선, 글을 잘 나누고 나뉜 글들을 잘 그루핑해야 합니다. 요소들을 그루핑하는것은 비주얼메시지(시각언어)를 전달하는데 매우 중요합니다. 그루핑은 한 요소가 근접해있는 다른 요소와 즉각적인 시각관계를 가능하게 하여 시각적 덩어리를 만들어 냅니다. 이것을 통해 구성은 단순해지며, 소극적인 공간인 '여백' 은 향상되고 시각적 계층은 더욱 강하게 나타나죠.



타이포그래피의 기본은 <문자로 나타난 정보의 위계를 시각적으로 나타내는 것> 입니다.
그렇기때문에 글들을 잘 그루핑하고, 레이아웃으로써 그것을 잘 드러내는것이 성공적인 타이포그래피라고 할 수 있죠.


3분의 1법칙이라고 있습니다. 

이렇게 화면을 3x3으로 분할해 보았을때 생기는 4개의 교차점들 (중간에있는 정사각형의 각 모서리) 은 시각적으로 가장 주목을 받는 위치입니다. 이것은 황금비와 관련이 있습니다. 
https://ko.wikipedia.org/wiki/%ED%99%A9%EA%B8%88%EB%B9%84

황금비 - 위키백과, 우리 모두의 백과사전

목차 1 정의 2 수학적 성질 3 황금비의 다른 표현 3.1 연분수로 표현한 황금비 3.2 다중근호로 표현한 황금비 4 반론 5 같이 보기 6 각주 7 외부 링크 정의 [ 편집 ] 황금비는 어떠한 선으로 이등분하여 한쪽의 평방을 다른쪽 전체의 면적과 같도록 하는 분할이다. 즉, 선 AB위에 점 C가 있을 때 (AC)^2＝BC×AB 또는 AC：CB＝AB：AC가 되도록 분할하는 것이다. 이 비의 값은 로, 거의 1.61803398....：1 또는 1：0.61803398...이 되는데 이것을 황금비라 한다. 황금비는 고대 그리

ko.wikipedia.org

오늘은 이 3x3 그리드에 글자를 배치해보며 그리드를 이해해 보겠습니다.

임의의 정보를 그루핑하여 위계구조에 따라 배치해보았습니다.

그리드피팅을 어떻게 했는지 보이시나요?
여기서 저는 단락 길이로 정보의 위계를 구분하려 하였으나 그것이 생각처럼 잘 느껴지진 않습니다.
또한 형태적으로 비슷하게 만듦으로써 통일감을 주려 했으나 그것이 오히려 위계를 더 해치는 결과를 낳기도 했죠.



그리고 두번째 작업입니다.

확실히 전보단 위계를 구별하기 쉬워졌습니다. 
두 그룹의 행간에 구분을 줌으로써 밀도로 위계구분을 해주었습니다. 오른쪽의 그룹이 훨씬 중요하고 잘 읽어야될 것 처럼 보이죠?

 그리고 오른쪽그룹의 시작점을 3x3 그리드의 포인트에 맞춰주었습니다. 그렇기때문에 저 그룹이 당연히 가장 먼저, 가장 잘 보이겠죠?

또한 여백의 구성도 시원하고 깔끔하게 했습니다.




동료들의 작품을 보면 글줄길이로 위계를 구분하거나 여백을 사용하는등 다양한 방법으로 그 위계를 구분해주었습니다.

위계라는 단어가 정말 많이 나오죠? 그만큼 중요하기때문입니다!! ㅎㅎ