책 :: 그리드를 넘어서

타이포그래피 그리드는 정보를 쉽게 다룰 수 있도록 적절한 크기로 나누는 기하학적 체계이다. 이것은 정보를 사람들이 쉽게 이해하도록 단어와 이미지들 사이의 배치와 비례의 관계를 조정해준다. 수평적, 수직적 교차 선에 의해 생긴 분할 면은 정보를 배치하는 좌표로서, 원하는 정보가 어디에 있는지 쉽게 찾아갈 수 있도록 갖가지 요소들을 중립적 공간 속에 자리를 잡아준다. 




- 어떤 디자이너들은 작업 과정에서 정확하고 질서 있고, 모든 것이 분명해야 한다는 점에 의문을 제기하지 않는다.


- 그러나 또 다른 디자이너들에게는 새로운 표현을 방해하는 답답하고 부담스러운 낡은 기준일 뿐이다.




이 책의 활용법

- 시각적 구성이라는 주제를 간단하게 조망하는 개략서 

- 섹션1. 그리드의 완성 : 그리드의 발전과 실제 적용 예

- 섹션2. 그리드의 해체 : 그리드에 기반을 둔 레이아웃을 어떻게 깨뜨리고 자유롭게 구성할 것인가를 모색







1. 그리드의 완성 




그리드의 역사 





- 모리스 : 비대칭 공간으로 디자인한 레드하우스에 텍스타일, 유리, 물건 등 일체를 직접디자인하고 제작,감독하였다. 이를 통해 적합한 목적이 형태에 영감을 준다는 믿음을 강력하게 실현해나갔다. 




- 맥머도 : 목적에 맞는 공간 할애와 서체의 선택과 크기, 여백, 인쇄 품질의 세심한 관리로 정기간행물을 한결같은 품질을 유지했다.




- 라이트 : 전체가 부분이 될 수 있듯이 부분은 전체가 될 수 있다. 결국 모든 곳은 목적에 맞아야한다. 비례관계/ 직사각형의 영역/ 비대칭을 구성은 모더니즘의 

원리가 되었다.




-올브리히 : '인생과 예술 찬양' 산세리프 폰트로 이루어진 최초의 본문으로 여백과 대조를 이루면서 중립성을 유지. 즉 배치와 간격을 통한 시각적 중요성이 보다 잘 표현된 것이다.


-로베릭스 : 원을 정사각형으로 분할 하여 생기는 비례를 기반으로 구성을 하는 체계적 수업 방법을 개발




- 얀치홀트 : 타이포그래피를 기초, 여백, 글자 사이의 간격, 글과 글의 상호관계, 계층그리드 구조 구축,  DIN 용지규격의 기반 구축




- 뮐러-브로크만 : 그리드 시스템은 조직화, 명료화하려는 욕구, 요점을 꿰뚫으려는 욕구, 주관성보다는 객관성을 기르려는 욕구를 의미한다.




- 비넬리 : 복잡한 정보를 명확하게 정리하면서 모듈 속의 공간을 의미론적 구역으로 분할하는데 중점을 두었다. 디자인은 전체적 시스템을 개발하기 위해 개인적인 표현충동을 경계해야한다는 신념을 갖고 있었다.  




- 유니그리드(UNIGRID) 모듈그리드 : 수평 띠에 의해 분할된 12개의 틀을 가진 것으로, 디자인에서 창의적인 면에만 주력할 수 있게 되었다. 

  ㄴ 예시 기업브로셔 이미지는 최근 유행하고 있는 디자인 스타일과 흡사해서 놀랐다. 




- 에이프릴 그리먼 : 그리드를 본격적으로 사용하기 시작하면서 디자이너들은 여기서 더욱 진전된 시각적 형식의 가능성을 모색하게 되었다, 1980-1990년대 동안 합리적 구조의 영역을 벗어난 해체주의는 엄격한 그리드 시스템과 그 밖에 완전히 비구조적인 개념들과 함께 마침내 일반적인 유형으로 자리 잡게 된다.




그리드 기초




그리드의 장점은 명쾌함, 효율성 경제성, 연속성이다.





그리드는 정보를 유형별로 구분하고 레이아웃에 체계적인 질서를 제공함으로써 사용자의 시각적 항해를 간편하게 해준다. 시간이 단축되고, 도서나 카달로그 같은 막대한 정보를 수월하게 레이아웃 할 수 있다. 또한 여러 사람들이 동일한 프로젝트를 수행하거나 시리즈 프로젝트에서 이미 구축된 규칙이 있다면 모든 결과물이 훼손 없는 동일한 형식과 동일한 품질을 유지 할 수 있다.




페이지 해체하기

효과적인 그리드를 구축한다는 것은 타이포 그래피 공간의 시각적, 의미론적인 관점에서 특정한 내용을 세밀하게 배분하는 것을 의미한다.

타이포그래피공간은 부분에서 전체로 이어지는 관계에 의해 결정된다. 글자가 모여 만든 한 행은 단락이 되고, 이것은 외곽 형태를 가진 덩어리가 된다. 여백은 이와 반비례하게 되고, 단락,단, 이미지 사이의 공간은 시선의 흐름을 정하는데 도움이 된다. 공간의 구성을 파괴하면 보는 사람들은 이에 자극을 받아 열중하게 된다. 지면 요소들 간의 중요도를 결정하는 데는 서체 크기, 두께, 위치, 간격의 변경 등 수없이 많은 방법이 있다. 그리드는 이러한 정렬과 계층적 관계를 다른 이들이 쉽게 다루고 이해할 수 있도록 하는 관리체계다.




그리드의 분석 : 페이지의 기본 요소들

그리드는 판형의 구성요소들을 배치하기 위한 가이드로서, 일정한 단위들로 구성 되어있다. 모든 그리드는 아무리 복잡한 것이라도 동일한 모양의 기본 형태를 가지고 있다. 이들은 필요에 따라 통합될 수 있으며, 생략될 수도 있다. 이는 디자이너가 자료를 어떻게 해석 하느냐에 따라 달라진다.




적적한 구조 구축하기

1. 정보의 특성과 제작 요구사항을 판단하는 단계 - 그리드는 일단 전개된 후에는 폐쇄적인 시스템이 되므로 다양한 종류의 정보, 수많은 이미지와 같은 콘텐츠의 특성을 잘 이해하고 이를 담을 수 있는 그리드를 구상해야한다. 잠재적 문제점까지 예츠해야한다. (긴 헤드라인, 이미지 자르기, 콘텐츠가 한단락 넘거나 남는경우)

2. 그리드에 따라 자료들을 실제 레이아웃하는 단계 - 주어진 그리드 안에 할 수 있는 방법이 무궁무진하다. 




- 마진 :  내용물 전체의 시각적 형태를 결정한다. 주의력을 집중시키고, 시선을 위한 여유 공간을 제공하며, 본문보다 덜 중요한 하위 정보를 위한 구역으로 활용되기도 한다.




- 플로우 라인 : 수평으로 공간을 나누는 시각적 기준선. 시선을 안내하는데 도움이 된다. 텍스트, 이미지의 시작/종료 지점을 정하는데 사용할 수 있다.




- 스페이셜 존 : 몇 개의 필드가 모인 그룹. 




- 마커 : 장 제목, 페이지 번호, 기타 모든 레이아웃의 같은 위치에 놓이는 항목




- 단 : 가로로 씌어진 본문이 일정한 너비 안에서 반복되며 만드는 정렬 틀을 일컫는다. 대부분 동일한 너비를 가지지만, 각기 다른 너비를 가지는 것도 가능하다.




- 모듈 : 단과 일정 양의 열을 묶은 하나의 단위







01. 메뉴 스크립트 그리드 : 가장 단순한 그리드 유형, 기본 구조는 페이지 거의 전부를 차지하는 커다란 사각형 영역

서적이나 긴 수필 같은 많은 양의 본문을 앉혀서 책으로 출판할 수 있도록 하는 것.

본문과 마진의 위치를 결정해주며, 기타 필요한 상세부분 등을 지정해준다. 이러한 단순한 구조에서도 페이지를 넘기면서 편안하게 읽을 수 있도록 세심한 주의를 기울여야한다. 많은 양의 글자들이 회색 면으로 보이게 되므로 시각적 흥미와 편안함을 주어 독자의 눈이 피곤함을 느끼는 일이 없도록 해야한다. 

마진의 비율을 조절하는 것이 시각적 흥미를 끄는 요령 중 하나이다. 일반적으로 마진을 넓게 하면 시선을 모으는데 도움이 되며 심리적으로 차분한 느낌과 안정성을 줄 수 있다. 바깥쪽 마진이 좁으면 글이 책의 가장자리에 아주 가깝게 놓이기 때문에 긴장감이 생긴다. 블록에서 본문의 크기과 행간의 넓이, 단어의 간격 등을 조화롭게 조정하는 것이 중요하다. 




02. 단 그리드 : 불연속적인 정보를 단으로 나누어 관리

여러 다른 내용으로 나뉘거나 전혀 다른 성격이 섞여 있는 불연속적인 정보는 단으로 나누어 관리하는 것이 편리하다. 유동적인 본문에서 단은 상호 의존적일 수도 있고, 독립적일 수 있으며 보다 넓은 단을 만들기 위해 합칠 수도 있기 때문에 매우 유연하면서 다른 종류의 정보들을 효과적으로 구분해준다. 

단의 너비는 본문의 크기에 좌우된다. 한 행에 적당한 양의 글자가 들어갈 수 있는 너비를 구하는 것이 관건이다. 영문의 경우 너무 좁으면 하이픈이 과다하게 생기므로 산만해진다. 반대로 너무 넓으면 독자들은 다음 행이 시작하는 부분을 찾는데 어려움을 느끼게 된다. 

플로우 라인 : 본문이나 이미지의 수직흐름에 일종의 멈춤 역할을 하는 가로로 놓인 띠를 말한다. 본문 시작, 항상 그 선에서 단이 시작되는 것을 알려준다. 또는 해더, 페이지 수등의 위치를 정하거나 중간 또는 아래쪽에 이미지 전용으로 사용하거나 타임라인, 보충 기사, 인용문과 같은 다른 종류의 글들을 위치시킬 수 있다. 3단그리드와 비대칭 2단 그리드는 흔히 사용되는 레이아웃 방법이다. 4단 그리드는 역동적인 레이아웃이 가능하다. 타이포에 파격적인 변화를 주어 활용한다.




03. 모듈 그리드 : 단을 세분화된 행으로 나누어 정보 공간을 제공, 대규모 출판 시스템에서 많이 사용, 차트, 양식, 스케줄, 네비게이션 시스템과 같은 토표 정보에 적합

매우 복작한 프로젝트의 경우 단 그리드로 제어가 안될 때 사용한다. 모듈이 그룹으로 모여 스페이셜 존이라고 부르는 큰 영역을 규정하기도 한다. 모듈이 작을 수록 더 많은 융통성과 더 큰 정교함을 제공하지만, 혼란스럽게 되고 통일감을 잃을 수도 있다. 

모듈의 비율 - 본문의 평균 단락 길이를 계산하여 한 단락이 들어갈 정도로 잡을 수 있다. 모듈의 모양은 가로로 길거나 세로로 길어도 상관없다. 이미지 종류나 강조하려는 요소에 맞출 수도 있다. 모듈에 의해 책 크기가 결정될 수도 있다. 모듈 그리드는 바우하우스의 이상을 받아들여 합리주의적 해석까지도 전파하려 했다. 




04. 계층 그리드 : 어떠한 범주에도 맞지 않는 기이한 그리드. 단의 너비나 시각전 요소들 간의 간격 등 다르게 정해진 그리드. 서로 다른 위치에 있는 다양한 임의의 요소들이 상호 시각적으로 영향을 주고 보완할 수 있는 합리적 구조로서 개발되었다. 웹페이지가 가장 보편적인 예이다. 내용물에 따라 정렬이 변하지만 비율적인 구성은 유지된다. 

전혀 다른 요소들을 하나로 만들거나 포스터와 같은 단일 판형에서 요소들을 유기적으로 배치하는 상층구조를 만든다. (하이어러키?) 다양한 사용자의 브라우저 설정값이 달랐기 때문에 페이지 구성을 고정 할 수 없었다. 때문에 유동적인 폭과 높이를 필요로 한다. 그러나 여전히 정렬이나 디스플레이 영역의 표준화나 틀은 필요하다. 

05. 변형과 규칙 벗어나기 : 그리드를 이용한 레이아웃에서 순서 정하기

디자이너는 페이지를 넘기면서 사람들이 지속적으로 관심을 유지 할 수 있도록 역동적이고 시각적으로 구성하기 위해 이 함축적 구조를 사용한다. 그리드 사용에 있어 가장 위험한 것은 규칙성에 굴복해버리는 것이다. 그리드는 단지 레이아웃의 가장 낮은 단계의 조건일 뿐이며 눈에 띄지 않는 안내선이라는 것을 잊지 말아 야한다. 내용물은 고정되어 있고, 때로 자유롭게 움직이면서 레이아웃을 단조롭지 않도록 주의하며 만든다. 

- 그리드 위에 모든 자료를 펼쳐 서로 비교하면서 분류하는 것이 좋다. 페이지 위에 전개될 내용은 썸네일 스케치한다. (썸네일을 구상한 스토리 보드는 어떤 내용물이 어디에서 진행되는가, 앞으로 어떤 내용이나 이미지가 필요한가, 어떤 것들이 앞뒤로 놓이게 되는 가등을 예측하는데 도움이된다. ) 그러면 디자이너들은 그리드 위에서 레이아웃을 이러저리 바꾸어 보면서 여러페이지들의 흐름이 단순한 것에서 복잡한 배열까지 반복되거나 할 것이다. 

단순 그리드 매우 규칙적이지만 페이지에 따라 이미지 위체 변화를 주어 시각적 흥미 유발, 다양한 방법으로 형태를 만들어 단순그리드를 보강한다. 리듬감과 통일감을 주고있다. 







그리드를 기반으로 한 디자인 프로젝트 예시







2. 그리드의 해체







그리드 해체와 탈그리드 디자인 프로젝트 예시

현대 디자인에서 기술의 발전과 심미적 관심, 산업화 등으로 인해 그리드의 사용이 증가하였지만, 동시에 직관적 구성이라는 또 다른 접근 방식도 함께 모색되었다. 19-20세기 기계화된 생산방식은 잔인성과 파괴를 야기했다. 1차세계대전에 대학 반작용으로 글자들을 이리저리 배열하거나 서로 관련없는 기호들을 가지고 주제와 경험에 대한 의미를 부여하는 등 질서와 무질서가 결합되는 그래픽 디자인 경향으로 이어졌다. 직관적이고 색다른 접근방식은 그리드 구조에 기초한 합리적 접근과 동등한 비중을 가지게 되었다. 이제 디자이너는 주어진 프로젝트를 위해 선택할 수 있는 최적의 방법으로서 몇 가지 새로운 아이디어를 더 가지게 된 것이다.

타이포그래피와 그리드 디자인의 근간이 되고 있지만, 최근에 볼 수 있는 바와 같이 정보와 이미지를 조합하는 데는 수없이 많은 다른 방법들이 존재한다. 그리드를 사용할 것이냐 아니냐를 결정하는 것은 항상 주어진 과제의 내용이 어떤 것이냐에 따라 달라진다. 

어떤 내용은 스스로 정돈된 구조를 가지고 있어서 특별히 그리드를 필요로 하지 않는 경우도 있지만, 특정 독자들의 정서적 반응을 유도하기 위해 그리드의 구조를 무시해야 할 때도 있다. 또 어떤 경우는 독자들의 시각적 경험을 자극하기 위해 일부러 복잡하고 사변적인 디자인 형식을 취하는 경우도 있다.

그리드 해체

해체의 목적 : 구성된 공간을 변형시켜서 그 안에 있는 요소들 사이에 새로운 관계가 형성되도록 하는 것. 

해체를 하는 방법은 아주 간단한 것이라도 전통적인 그리드를 없애겠다는 발상이다. 구조에서 일반적으로 예상할 수 있는 장소를 다른 곳으로 옮기면 기존에 존재하지 않았던 새로운 정보들의 연결이 이루어지게 된다. 모듈이나 칼럼을 옮기거나 파괴하여 서로 겹쳐놓으면 역동적인 건축적인 공간을 만들어 낼 수 있다. 예를들어 2단과 3단 그리드를 엇갈려 새로운 공간을 구성할 수 있을 것이다. 또 서로 다른 비례를 가진 그리드를 중첩시키거나 비껴서 배치하면 중요도의 차이가 생기면서 읽는 순서가 결정되거나 혹은 공간적 모호성을 띄게 될 것이다. 크기나 밀도를 바꾸면서 기하학적인 공간 안에서 상호작용을 통해 특정 정보가 다른 것과 차별화되어 보이게 한다.




언어학적 해체

음성적 리듬에 맞추어 글자들의 굵기나 크기, 색깔, 혹은 글줄 사이의 배치를 바꾸는 방법이다. 큰 소리, 혹은 속도를 나타내는 단어들은 다른 글자보다 더 크고 굵은 글자, 기울어진 글자 등으로 표현하여 마치 실제로 이야기할 때와 같은 느낌을 줄 수 있다. 




-예시




임의의 구성

형식적 논리를 바탕으로 재료들을 직관적으로, 그러나 뚜렷한 목적을 가지고 배치하는 것으로서 무작위적 구성과는 전혀 다르다고 할 수 있다. 즉, 재료 본연의 시각적 관계들과 대비를 파악하고, 이들 관계에 기초하여, 대중과의 연결점을 만드는 것이다. 

그리드의 한 단계로 사용하기도 하는데, 자료들을 처음 생각한대로 신속하게 결정하고 짜맞추어 어떤 것이 처음 생각대로 유지되고 있는지, 어떤 것이 커뮤니케이션에 가장 적절한 것인지, 혹은 아닌지 가늠하게 된다. 




-예시




개념 혹은 그림을 통한 암시

내용으로부터 시각적 아이디어를 끌어내 페이지를 구현하는 구성방법. 예를들어 본문과 이미지들이 홍수 속에 있는 것과 같은 느낌을 주도록 물속의 여기저기에 떠있게 할 수 있다. 이 경우 그리드는 없지만 아이디어를 중심으로 한 연속적인 느낌의 구성으로 통일감을 주게된다. 책이나 전시장의 벽처럼 자연스러운 흐름을 만들어야 하는 작업에서, 시각적 요소들은 마치 영화 필름의 프레임처럼 시간 속에서 서로 연관을 가지게 된다. 이들 동적 구조는 일정한 형태를 가지지 않는다. 페이지가 넘어갈 때 글자 크기가 점점 커져서 앞으로 나오는 것처럼 보이게 할 수도 있다. 공간과 시간의 감각적 경험을 조합의 원리로서 사용한다면, 보는 이들의 본능적이고 감성적인 반응을 강력하게 자극 할 수 있다. 




우연 효과

우연한 효과를 만든다는 것은 완전한 우연한 것이 아니라 이미 어느 정도 우연성을 조정하고 있다는 의미다. 예컨대, 붓의 성질과 크기, 특정한 동작으로 인해 생기는 터치를 예상하면서, 획을 긋는 것이다. 디자이너는 자신이 좋아하는 우연한 효과의 유형을 선택하고 이것을 자신이 좋아하는 결과에 맞추어 어느정도 변형을 시킬 수 있다. 




---

리뷰

그리드를 넘어서(2006)는 절판 되었지만, 그리드 기초 이론이 잘 정리 되어있다. 

초반에는 술술 잘 읽혔지만, 예시부터는 명확하게 이미지 어느 부분을 말하는 것인지 알 수가 없어 이해하기가 어려웠다. 마치 영어 해석 또는 작품 해석을 하는 기분이었다.

또 편집디자인에 관한 이야기가 98%를 차지하고 있어 웹디자인에서의 설명이 아쉬웠다. 10년 전이라서 조금 있던 설명 조차도 큰 영양가는 없었다. 그래도 초반 부분의 이론이 매우 잘 정리 되어있어서 읽을만한 가치는 있다고 생각한다.