타이포그래피에서 버티컬 리듬이 중요한 이유
가독성 높은 콘텐츠 만들기
타이포그래피에 대해 알고 있다면 아마 버티컬 리듬(Vertical Rhythm)에 대해 들어 보셨을 겁니다.
버티컬 리듬은 타이포그래피에서 중요한 것 중 하나인데 저는 버티컬 리듬이 뭔지 알고 나서 제가 작업한 모든 사이트에 적용시켰습니다. 그런데 어느 날 저는 왜 버티컬 리듬이 중요한지 근거를 찾지 못했습니다.
그리고 두 가지 질문들이 뇌리에 스쳤습니다.
버티컬 리듬이 어떻게 사이트 디자인을 향상하여주는지?
버티컬 리듬에서 무엇을 배워야 디자인을 향상하여주는지?
저는 그래서 왜 그러한지 알아보기로 했고 여기 그 내용들을 공유하기로 했습니다.
버티컬 리듬이란 무엇인가?
버티컬 리듬의 콘셉트는 원래 인쇄용 타이포그래피에서 시작되었습니다.
버티컬 리듬에서는 요소 간의 세로(vertical) 여백을 동일하게 유지하는 것입니다.
버티컬 리듬은 베이스라인(baseline)을 이용합니다: 보편적으로 동일한 간격을 유지해주는 denominator입니다.
*역주: 일정한 규칙에 근거하여 움직이는, 배치되는..
인쇄 디자인의 경우 아래 이미지와 같이 눈에 보이는 베이스라인을 위에 덥어 인쇄 디자인을 합니다.
프린트 디자인에서의 베이스라인 그리드웹에서의 베이스라인 그리드의 "line-height" Property와는 조금 다릅니다.
우리는 아래와 같은 베이스라인 그리드를 자주 봅니다.
웹 디자인에서의 베이스라인 그리드인쇄와 웹에서 사용하는 베이스라인 그리드 묘한 차이는 신경 쓰지 마세요. 차이점이 있지만 버티컬 리듬의 근본 원칙에서 벗어나지 않습니다.
여기서 알다시피 버티컬 리듬은 베이스라인과 베이스라인 그리드가 필요합니다.
그럼 다음 단계는 "어떻게 베이스라인을 정하느냐?"입니다.
베이스라인은 본문(body) 텍스트의 "line-height" Property 수치로 정해집니다.
당신이 만든 웹 사이트의 본문 텍스트의 "line-height"가 24px이라면 베이스라인도 24px가 됩니다.
이 시점에서 버티컬 리듬을 구현하는 것은 간단합니다.
그리고 여기에 두 가지 지켜야 할 규칙이 있습니다.
1. 요소 간의 세로 여백을 24px의 배수로 설정할 것.
2. 모든 텍스트 요소 간의 "line-height"을 24px의 배수로 설정할 것.
위의 2개의 규칙을 적용하여 만들면 아래와 같습니다.
h1 {
line-height: 48px;
margin: 24px 0;
}
p {
l ine-height: 24px;
margin: 24px 0;
}
이렇게 규칙을 따라 작성하면 아래의 결과처럼 나타납니다.
버티컬 리듬 전용 전과 적용 후둘 중 어떤 디자인이 좋아 보이나요? 더 좋게 보인다는 것은 아래와 같은 이유에서 일 것입니다.
-차분하다.
-정렬되어 있다.
-읽기 쉽다
-전문가의 손길이 느껴진다.
-기타 등등
그렇다면 왜일까요? 무엇이 위 두개의 디자인의 지각을 바로 바꿔주는 두 가지 규칙을 강력하게 만들까요?
다시 한 번 규칙을 보시죠.
1. 요소 간의 세로 여백을 24px의 배수로 설정할 것.
2. 모든 텍스트 요소 간의 "line-height"을 24px의 배수로 설정할 것.
위 두개의 규칙의 공통 점을 찾으셨나요? 그것은 24px의 배수입니다.
이 두 규칙과 관계있는 디자인 원칙을 반복이라고 합니다.
반복 원리
/반복은 디자인의 하나 혹은 다수의 단순히 하나 이상의 양상의 발생 횟수로 단순하게 반복됩니다.
Repetition is simply repeating the number of occurrences of one or more aspects of the design.
/
무엇이든지 반복이 가능합니다. 예를 들어
-서체
-폰트 두께(bold, regular, thin, light 등)
-폰트 크기
-라인 색
-쉐이프 (동그라미 사각형 삼각형 등)
-기타 등등
심지어 공간적인 관계에서 반복할 수 있습니다.
버티컬 리듬 사례처럼 본문의 항목을 24px 여백으로 반복해 보겠습니다.
그러면 반복은 어떤 역할을 하나요? 반복은 임숙함을 성장시켜(breed) 줍니다. 그러니깐 하나의 묶음으로 느끼게 만들어 주는 능력이 있습니다. 그것은 계획의 일부인 거처럼 누군가도 그렇게 생각했다는 느낌을 줍니다. 간단한 예를 들어 여기 하나의 외로운 동그라미가 있습니다.
외로운 동그라미동그라미는 여기서 뭘 하고 있나요? 어떤 의도인가요? 디자이너는 무엇을 얘기하려 하는 걸까요?
여러분의 생각은 뛰기 시작합니다. 질문에 대한 일관성 있는 답변을 검색하려고 합니다.
아쉽게도 아무것도 찾을 수 없고 안절부절못합니다.
그런데 몇 개의 동그라미를 추가해 그룹을 만들고 어떤지 보시죠.
여러 동그라미동그라미들은 더 이상 불규칙하게 위치하지 않아 보입니다. 그렇죠?
보시기 더 편해 보이지 않나요? 그럼 더 많은 동그라미를 추가하면 어떻게 될까요?
많은 동그라미 들동그라미라 많을수록 이제는 패턴이 보이기 시작합니다.
지금 이 이미지를 보면 어떤 느낌이 드나요? 이전 두개의 이미지와 비교했을 때 어떠한가요?
버티컬 리듬 예제를 비교하기 전후와 거의 같은 느낌일 것입니다. 그렇지 않나요?
오 대박! 왜일까요?
왜냐하면 마음은 무의식적으로 지금까지 답변에 맞춰왔기 때문이죠.
동그라미들을 계획의 일부분으로 보기 시작합니다.
누군가는 이것들을 조심스럽게 조율합니다. 그러한 것엔 이유가 있습니다.
그 이유를 알 필요는 없습니다만 그 이유를 알고 있는 거 같네요. 여러분은 안정적으로 느껴집니다.
버티컬 리듬도 같은 원리입니다.
페이지 전부를 걸쳐 베이스라인을 반복 처리한 거밖에 없습니다.
그런데 버티컬 리듬에 몇몇 꼼수가 있습니다. 그 꼼수라는 건 베이스라인에 눕혀놓는 건데 생각해 보시죠.
한 번 생각해 보세요. 왜 숫자인 건가요? 왜 베이스라인을 24px로 한 걸까요?
이유는 하나입니다: 페이지에서 계속 반복되는 하나의 값(24px)인 것입니다.
그럼 아래 베이스라인 그리드를 다시 보세요. 그리고 지금 보고 확인할 수 있는 건:
반복적인 24px 간격의 베이스라인이 텍스트를 처리하는것을 보이시죠?
대박이죠? 인제 반복 원리가 뭔지 배웠습니다. 그러면 나머지 디자인은 어떻게 적용할 수 있을까요?
더 많이 반복하고 다양한 반복을 할 수 있습니다.
다양한 반복
우리는 모든 걸 24px로 나눌 수는 없습니다. 그리고 그렇게 된다 해도 지겨울 것입니다.
그래서 다양한 상황에 다양한 버티컬 리듬을 사용해야 될 것입니다. 그럼 어떻게 할까요?
정답은 버티컬 리듬의 두 가지 규칙에서 찾을 수 있습니다.
1. 요소 간의 세로 여백을 24px의 배수로 설정할 것.
2. 모든 텍스트 요소 간의 "line-height"을 24px의 배수로 설정할 것.
그렇습니다. 정답은 배수(multiple)에 있습니다.
그러니깐 24px로 원하는 비율대로 몇 배 수로 수치를 증가하거나 가감할 수 있습니다. 핵심은 일관성을 유지하는 것입니다. 우리는 이미 24px의 강력함을 알고 있기 때문에 그다음으로 24px을 배수로 더 하거나(48px) 나눌 수도(12px) 있을 겁니다. 배수로 곱셈을 하다 보면 결국 크기(scale)로 마무리될 것입니다.
12px, 24px, 36px, 48px, 60px, 72px …
(위의) 숫자를 사용하여 margin 혹은 padding 값을 요소들(예: 텍스트, 이미지)에 적용해 보시면 디자인의 일부인 거처럼 아주 자연스럽게 느껴질 것입니다.
두번째 해더의 top-margin은 24px가 아닌 72px 입니다.물론 여러분이 선택한 수치(예: 24px)를 반복 사용하는 것을 기억하세요
이외 24px을 적용할 수 있는 것들
지금까지 24px로 반복적인 간격을 두는 것에 포커스를 두었습니다.
그렇다면 가로로 24px로 좌에서 우로 간격을 둘 수 있다고 생각해 보지 않았나요?
아래 코드와 같이 해보시죠.
.component {
padding-left:24px;
padding-right: 24px;
}
그리드 아이템에서 빈틈(gutter)을 사용해 보십시오.
grid {
display: flex;
justify-content: space-between
margin-left: -12px;
margin-right: -12px;
overflow: hidden;
}.
grid-item {
margin: 24px;
}
텍스트와 모서리 사이를 padding (혹은 margin)을 적용해 보세요(특히 모바일폰에서..).
article {
margin-left: 24px;
margin-right: 24px;
}
@media (min-width:600px) {
article {
margin-left: 0;
margin-right: 0;
}
}
마치며
디자인의 원칙 중 반복성을 준수하는 버티컬 리듬은 매우 중요하다는 것.
반복은 여러 요소들이 여러 하나로 느껴지게 자연스럽게 만들어 주는 것.
반복은 함께 속해 있다는 느낌을 할 수 있는 능력을 가지고 있다는 것.
마치 계획의 일부처럼 생각하게 한다는 느낌을 준다는 것.
버티컬 리듬과 반복을 통해 24px로 다양한 디자인을 할 수 있다는 것.
끝으로, 수직(vertical) 24px로 반복해 보았고 수평으로 24px을 반복해 보았습니다.
반응형 웹에서 좋은 타이포그래피를 만들기 위해 고민하고 계신가요?
버티컬 리듬을 알고 나서는 좋은 타이포 그래피는 어려워서는 안될 것입니다. 그렇죠?
타이포 그래피는 반응형 웹 사이트 제작 시 가장 어려운 부분입니다.
어떤 걸 사용해야 할까요? 어떤 걸 적용해야 할까요? 어떤 게 실현 가능한 걸까요? 어떤 게 요즘 핫한가요?
복잡하고 긴 코딩 없는 모듈화 된 컴포넌트를 통틀어 어떻게 타이포 그래피를 일관성 있게 유지 가능할까요?
다음에는 반응형 웹사이트에서의 타이포그래피에 대해 글을 써보겠습니다.
출처: http://zellwk.com/blog/why-vertical-rhythms
요약: (홀수 제외) 수치를 정하고 그 수치 비율로 레이아웃을 잡으면 좋다.
번역하면서 오래전 전 현대카드 남찬우 이사님이
"(포토샵에서) 타입 툴로 텍스트를 만들 때의 서체는 미가공 상태이다."라고 한 말이 기억에 남네요.
