Typography Hierarchy (2)
2. 타이포그래피 위계 디자인 웬만큼 이해하기
2. 타이포그래피 위계
챕터 개요
여기서 얘기하는 '위계'는 아름다운 질서이거나 혹은 순서, 단계라고 보면 된다.
이 챕터에서는 타이포그래피 위계의 개념과 훈련 과정에서 발생하는 실수들을 이야기한다.
가공되지 않은 순수한 텍스트 정보인 '로 텍스트(Raw Text)'에서 시작하여 복잡한 정보의 사용 원리와 타이포그래피 관련 필수 용어의 정의를 익힐 수 있다.
'주제의 분석', '사고의 과정', '구조', '결합의 긴밀성' 그리고 '유동성'과 '타이포그래피 그리드'와의 상관관계까지 타이포그래피 위계는 모든 디자인의 완성을 위한 필수 사고 과정이다.
2-1. 타이포그래피 위계, 계단 오르기
클라이언트의 메시지를 정확히 이해하고, 핵심적인 메시지를 추출해서 정리하는 시작점이 매우 중요하다.
1. 첫 번째 계단 오르기: 의미
각 계단은 하나의 작품을 만들 때 필요한 각각의 진화된 도구라고 보면 된다.
첫 번째 도구는 정리되지 않은 글자들의 나열을 글줄로 분할하는 '의미 분할'이다.
정보를 명확하게 전달하기 위해 의미 분할을 먼저 해야 한다.
먼저, 클라이언트로부터 듣고 적은 내용인 '텍스트'를 보며 이해한 후,
단어와 문장들의 '의미'를 분할한다. 이것이 바로 '타이포그래피 위계' 디자인의 시작이다.
막연하게 느껴지는 단어 '디자인'을 시작할 때,
무엇을 우선적으로 고려해야 하는지에 대한 생각이 곧 타이포그래피 위계의 첫 단계다.
제1 위계: 프라이머리(Primary)
제2 위계: 세컨더리(Secondary)
제3 위계: 털시어리(Tertiary)
'날 것'을 의미하는 '로 텍스트(Raw Text)'
로 텍스트로 텍스트에 있는 단어, 철자 내용 하나까지 신중하게 파악해야 한다.
이러한 일차적인 사고는 일상적으로 몸에 밴 자신만의 디자인적 편견을 제거하게 하고 클라이언트와 보다 정확한 커뮤니케이션을 가능하게 한다.
좋지 않은 예가독성(Legibility): 문자나 기호, 혹은 선이나 도형이 얼마나 쉽게 보이는지에 대한 인지 정도.
활자체, 글자 간격, 글줄 간격 띄어쓰기 등의 요소에 따라 가독성이 달라짐
인쇄된 글자들이 시각적으로 보이는 정도, 넓게는 인쇄물의 내용에 대한 독자들의 이해 정도까지 포함
이독성(Readability): 글의 내용 정보를 쉽게 인식할 수 있는 정도.
문장의 표현, 문체, 단어의 선택에 이르기까지 독자가 정보 습득을 얼마나 잘하는지의 효율성을 의미함
2. 두 번째 계단 오르기: 줄간여백
어떤 정보를 전달할 때, 독자들에게 '내가 읽을 수 있다'라는 가벼운 자신감을 주어야 한다.
게슈탈트 이론 중 '근접성의 법칙'은 가까이 있는 요소들 간에 더 관련성을 지니도록 인식되는 이론이다.
군학일계
★ 사과
★ 파인애플
★ 청포도
★ 귤
망고스틴
★ 복숭아
위 여섯 가지 과일 중 어느 것이 가장 중요해 보이는가?
중요하다고 생각하는 과일들에 '★'표시를 해보니,
가장 중요해 보이는 건 '망고스틴'이다.
강조 표시가 50%가 넘어가는 순간, 중요하지 않은 것과 중요한 것의 구분이 없어진다.
군계일학이 눈에 띄지만, 군학일계 또한 눈에 엄청 띈다.
군학일계: 뛰어난 사람들 가운데에서 평범하거나 모자란 인물.
군계일학: 닭의 무리 가운데에서 한 마리의 학이란 뜻으로, 많은 사람 가운데서 뛰어난 인물.
정보의 올바른 연결
글줄 여백을 너무 자주 주게 되면, 전체 정보의 효율성은 오히려 줄어들게 된다.
과하지 않은 정도의 그루핑이 효과적이다.
좋지 않은 예3. 세 번째 계단 오르기: 굵기강조
서체의 명확한 굵기 차이를 통해 더 높은 단계의 위계를 구분해 주는 방법이다.
이를 통해 사람들은 정보의 구조를 쉽게 파악할 수 있다.
그러나,
명확하지 않은 차이는 '시각적 떨림 현상'을 발생시킨다.
그래픽디자인 요소 간의 불명확함이 '모호한 시선집중'을 불러일으키는 것과 같다.
잊지 말자!
: 작은 차이는 '실수', 큰 차이는 '의도'이다.
정보의 시작 느낌
텍스트에도 무게가 있다.
굵기 강조할 때 유의할 점은 '정보의 시작점'이라는 느낌을 준다는 것이다.
게슈탈트 법칙 중 유사성/근접성의 법칙을 생각해 보자.
유사성의 법칙
우리의 시선은 일반적으로 페이지의 좌측 상단에서 우측 하단으로 내려오게 된다.
정보 수용자 입장에서 초기에 접하는 내용은 가장 먼저 주목을 끌게 되어있다.
굳이 글줄 강조라는 도구를 사용해 위계에 혼돈을 줄필요가 없다.
첫 문단이자 첫 문장에 굵기를 강조하게 되면, 오히려 주목도를 떨어트리는 역효과로 작용할 수 있다.
4. 네 번째 계단 오르기: 들여쓰기
들여쓰기를 통해 공간 여백의 기능과 효과가 비로소 발휘된다.
'비대칭적 밸런스(Asymmetrical Balance)'라는 개념은 아주 매력적이다.
그래픽디자인 요소(텍스트, 이미지 등)들의 조합이 '시각적 축(Visual Axis)'을 중심으로 비대칭적이지만 균형미를 드러내는 것이다.
잊지 말자!
: 디자인은 줄(Grid)을 잘 맞추는 것이다.
꽤 크리에이티브한 디자인: 들여쓰기
'들여쓰기(Indent)'는 의미분할 단계에서 진행한 디자인 결과물 위에 작업하는 것이다.
들여쓰기는 위계를 표현하기에 상당히 효과적이며, 무엇보다 이 단계에서 아름다움의 표현이 가능해진다.
오른쪽 정렬은 가독성을 저하시켜 인지하는데 필요한 에너지를 증가시킨다.
일부 예외의 경우를 제외하고, 오른쪽 정렬이 효과적인 경우는 거의 없을 거다.
전체적인 사각 프레임의 형태를 잘 맞추었을지는 모르지만 읽기 힘들다.
★ Typography White River는 문장의 간격이나 단어의 간격 조절을 통해 '강'의 흐름을 막아야 한다.
문장이 긴 본문의 경우 '강'은 형용사 첨삭 등의 조절로 막을 수 있다.
White River는 텍스트 베이스라인의 가로 방향성을 저해하므로
가급적 발생하지 않도록 주의를 기울여야 한다.
폐쇄성의 법칙
단계가 높아질수록, 사용도구가 좋아질수록 제1 위계는 돋보이도록 더욱 강조되어야 한다.
여기서는 단어의 시작이나 끝이 서로 연결돼서 보이는 폐쇄성의 법칙을 적용할 수 있다.
점이 일정하게 일렬로 찍혀있을 때 '점선', 즉 '선'으로 부를 수 있는 이유도 폐쇄성의 법칙 때문이다.
River
텍스트에서도 띄어쓰기된 공간들이 본문 텍스트를 따라 세로로 연결되어 보이면서 심미성을 저하시키는 현상.
그루핑 된 텍스트의 덩어리감을 깨는 좋지 않은 플라크 같은 존재이니 다른 단어들로 Paraphrasing 해서 River가 생기지 않도록 막아줘야 한다.
