타이포그래피 정의 및 알아두면 좋은 팁 6가지
우리는 모두 이메일이나 메시지를 확인할 때 보낸 사람의 정확한 의도를 파악하고자 내용을 검토하는 데 너무 많은 시간을 소비합니다. 단어에 숨은 의미를 분석한다거나 어떤 단어가 특정 문맥에 더 잘 어울릴지 고민하는 일을 항상 하고 있어요. 하지만 일반적으로 텍스트가 글 내용의 분위기를 시각적으로 반영할 수 있는 방법을 찾아본 적이 있으신가요?
그래픽 디자이너의 역할 중에는 단어의 감정, 메시지 또는 분위기를 텍스트를 디자인함으로써 표현하는 것이 있습니다. 예를 들어, 결혼 청첩장에 쓰일 만한 화려한 폰트를 도로 위 표지판의 폰트로 사용한다고 상상해 보세요. 도로 표지판으로의 역할을 충분히 해내지 못할 수 있을 것입니다.
이 가이드에서는 입력 타이포그래피의 힘에 대해 살펴보려고 합니다. 타이포그래피 정의, 타이포그래피의 핵심 요소 설명, 웹사이트 디자인에 적합한 폰트를 선택하는 방법에 대한 팁을 소개해 드리겠습니다.
타이포그래피란?
타이포그래피의 정의는 활자의 시각적인 측면이라고 할 수 있습니다. 텍스트를 읽기 쉽고 미적으로 배열하는 방법을 일컫는 것입니다. 그 외에도, 특정 분위기를 풍기게 하고 메시지를 강화하는 데 사용될 수 있습니다. 이를 위해 다양한 폰트 및 서체를 사용할 수 있을 뿐 아니라 폰트 크기나 자간 및 어간을 조정할 수도 있습니다.
오래 전부터 사용되어 온 핵심 디자인 용어 중 하나인 타이포그래피는 모든 디자인의 필수 요소입니다. 동일한 단어도 디자인 방식에 따라 다른 느낌을 전달할 수 있습니다. 웹디자인 업데이트, 어린이 동화책 집필, 로고 만들기 등 어떤 작업을 하든 텍스트가 브랜드 개성이나 핵심 메시지의 느낌을 어떻게 시각적으로 적용할 수 있을지 고민해 보세요.
타이포그래피 주요 요소
타이포그래피의 세계로 들어가려면 어떤 변수를 자유자재로 사용할 수 있는지 알아야 합니다. 아주 다양한 타이포그래피 용어들이 있지만 먼저 알아야 할 요소들부터 살펴보도록 하겠습니다.
폰트 및 서체
서체와 폰트에는 뚜렷한 차이가 있으므로 서체 및 폰트의 정의에 대한 구분부터 확실하게 해 두어야 합니다.
서체는 폰트군(예: Helvetica, Times New Roman 또는 악명 높은 Comic Sans)의 집합을 일컫는 이름이지만 폰트는 굵게, 이탤릭 또는 콘덴스와 같은 해당 서체 내의 특정 스타일을 나타냅니다. 지금 보고계신 이 블로그 게시물은 모두 하나의 서체로 작성되어 있지만 다양한 폰트를 포함하고 있는 것이죠.
가독성
타이포그래피를 사용하여 창의성을 발휘할 수 있는 기회는 많이 있지만, 궁극적으로 텍스트는 읽기 위해 있는 것입니다. 명확하고 읽기 쉬운 서체를 선택하는 것 외에도 주의해야 할 추가 요소가 있습니다.
텍스트의 크기와 문자와 줄 사이의 간격(또는 전문적인 용어로 '커닝(kerning)' 및 '리딩(leading)')에 주목하세요. 또한, 텍스트 색상과 배경색 간에 충분히 대비를 주어야 합니다. 이렇게 하면 웹사이트의 사용자 경험 및 접근성도 향상됩니다.
세리프 및 산세리프
타이포그래피에 대해 얘기할 때 이러한 용어를 많이 들을 수 있습니다. 세리체 서체는 문자 획의 끝에 작은 장식 선 또는 ‘꼬리’를 포함하는 반면, 산세리프는 말 그대로 ‘세리프 없음’을 의미합니다. 즉, 산세리프 서체(지금 보고 계신 이 블로그 게시물에 사용된 것처럼)는 일반적으로 문자의 획의 끝에 어떤 장식도 없이, 깨끗한 선으로 구성되어 있습니다.
계층 구조
기본적인 디자인의 원칙 중 하나인 계층 구조는 타이포그래피에서 필수적인 요소입니다. 이는 각 텍스트가 가진 성격에 따라 구분하는 데 사용되기 때문에 독자는 어떤 정보가 가장 중요한지 즉시 이해할 수 있습니다. 계층 구조는 크기(크게 또는 작게)에서부터 너비(두껍게 또는 얇게), 요소 배치(화면 하단에 위치한 텍스트가 상단 폴드의 텍스트보다 덜 중요해 보임)에 이르는 모든 요소를 사용하여 이루어집니다.
예를 들어, 신문 기사의 헤드라인은 일반적으로 본문 텍스트보다 크거나 눈에 잘 띄기 때문에 독자는 헤드라인을 가볍게 훑어보기만 해도 기사 내용의 요지를 파악할 수 있습니다. 또한, 명확하고 이해하기 쉬운 레이아웃을 구성하는 데 도움이 됩니다.
여백
여백 또는 다른 말로 ‘네거티브 스페이스(negative space)’라고 하는 이 용어는 텍스트나 이미지를 둘러싸고 있는 빈 영역을 말합니다. 그래픽 요소 사이에 충분한 공간을 더하면 복잡해지는 것을 피할 수 있고 명확해집니다. 또한, 텍스트 주위에 여백이나 빈 공간을 확보하면 텍스트에 더 주의를 기울일 수 있고 정보 섹션이나 블록을 구분하는 데 도움이 됩니다.
정렬
타이포그래피 정렬은 페이지의 텍스트 흐름을 설정하는 것을 의미합니다. 이러한 정렬에는 아래와 같이 네 가지의 기본 설정이 있습니다.
왼쪽 맞추기: 텍스트가 왼쪽 여백을 따라 정렬됩니다.
오른쪽 맞추기: 텍스트가 오른쪽 여백을 따라 정렬됩니다. 왼쪽에서 오른쪽으로 읽는 언어에서는 일반적으로 오른끝 맞추기가 직관적이지 않기 때문에 권장하지 않는다는 점에 유의하세요.
양쪽 맞추기: 텍스트가 왼쪽 여백에 맞춰지고 간격이 자동으로 조정되어 텍스트가 왼쪽 여백과 오른쪽 여백에 모두 맞춰집니다.
가운데 맞추기: 텍스트가 가운데에 맞춰집니다. 즉, 텍스트가 여백에 맞춰지지 않습니다. 이 방식은 많은 양의 텍스트보다는 제목에 적합합니다. 가장자리가 들쭉날쭉하고 읽는 사람이 매번 다음 줄의 시작 부분을 찾아야 하기 때문에 긴 텍스트에 적용하면 읽기 어려울 수 있습니다.
웹사이트를 위한 타이포그래피 팁 6가지
웹사이트 콘텐츠를 작성하는 것과 사이트에서 그 콘텐츠를 가장 잘 표현할 수 있는 방법은 완전히 별개입니다. 지금부터 소개할 원칙은 특별히 웹사이트 만들기에 맞는 내용들이지만 포스터 또는 뉴스레터 디자인과 같은 다른 맥락에서도 적용할 수 있습니다. 웹디자인에 타이포그래피 원칙을 성공적으로 적용하는 방법에 대한 영감을 얻으려면 최고의 웹사이트 디자인을 소개하는 인상적인 컬렉션을 살펴보세요.
다음은 고려해야 할 6가지 타이포그래피 팁입니다.
01. 브랜드 정체성을 반영한다
비즈니스를 위한 창의적인 모험을 시작하기 전에 브랜드 정체성을 명확하게 정의했는지 확인하세요. 재밌고 에너지가 넘치나요? 혹은 보다 전통적인 접근 방식을 갖고 있나요?
어떤 것이든 여러분의 고유한 개성을 표현하는 서체를 찾아보세요. 웹사이트에 가장 적합한 폰트를 선택하려면 먼저 자신에게 맞는 폰트를 수집한 다음 지금 내가 찾는 글꼴이 어떤 것인지에 대한 이해를 완성했을 때 수집한 폰트의 범위를 좁힙니다.
02. 인터페이스 전체에서 일관성을 유지한다
견고한 브랜드 정체성을 구축하기 위해서는 일관성이 필요합니다. 이는 웹사이트 색상 배색에서 타이포그래피 선택에 이르기까지 모든 경우에 필요합니다. 마이크로카피를 구성하는 단어들부터 웹사이트 메뉴의 텍스트, 홈페이지의 헤더에 이르기까지, 웹사이트의 이곳저곳 사용되는 카피들의 일관성은 매우 중요합니다.
웹사이트 전체에서 동일한 폰트와 서체를 사용하여 전반적인 환경을 만들 수 있습니다. 동일한 사이트에서 최대 두 개 또는 세 개의 서체를 병행하여 사용할 수 있지만(자세한 내용은 아래 참조) 동일한 컨텍스트에서는 동일한 서체를 사용합니다. 예를 들어, 한 페이지의 제목이 Helvetica Bold, 40px로 되어 있는 경우 다른 제목도 동일하게 서체 및 폰트를 적용했는지 확인합니다. 텍스트 테마를 사용자 지정하고 저장하면 사이트 전체에서 반복적으로 사용할 수 있으므로 보다 쉽게 작업할 수 있습니다.
피트니스 웹사이트용으로 만들어진 아래의 템플릿이 다양한 섹션의 카피에서 일관성을 유지하는 방법을 알아보세요.
03. 쉽게 읽을 수 있게 만든다
모든 텍스트는 어떤 목적을 가지고 있습니다. 물론 텍스트가 장식적일 수도 있고 혹은 전반적인 디자인에 텍스트를 추가할 수도 있겠지만, CTA(콜 투 액션) 버튼의 타이포그래피를 정하든 로고 디자인을 위한 폰트를 선택하든 일단 가독성이 좋아야 합니다. 블로그 게시물을 읽기 위해 눈을 가늘게 뜨고 봐야 한다거나 쓰여진 내용을 잘못 이해하여 잘못된 버튼을 클릭하는 것만큼 짜증나는 일도 드물 것입니다.
카피의 텍스트가 데스크탑과 모바일에서 모두 읽을 수 있을 만큼 충분히 큰지 확인합니다. 서체를 선택했다면 내가 결정한 폰트 크기에서도 잘 보이고 가독성이 좋아야 합니다. 일부 서체들은 헤더로 사용하기 위해 크기를 키웠을 경우에 매우 잘 보이지만 크기를 작게 하면 가독성이 떨어지기도 합니다.
04. 두 개 또는 세 개의 글꼴을 지정하여 작업한다
한계를 설정하는 것은 창의성에 대해 매우 유용한 연습이 될 수 있습니다. 타이포그래피도 마찬가지입니다. 여러 개의 서체로 구성된 웹사이트는 엉성하고 일관성이 없게 보일 수 있습니다. 그 대신, 서체를 두 개 또는 세 개 이상 선택하고 각 페이지에 일관되게 사용하는 것이 좋습니다.
설명 및 블로그 게시물과 같이 제목이나 머리글에 주로 사용되는 서체 하나와 길이가 긴 텍스트 블록에 사용되는 서체 하나를 선택하는 것이 좋습니다. 서체를 더 추가하고 싶다면 CTA(콜 투 액션) 및 기타 마이크로카피에 세 번째 서체를 사용합니다.
05. 훌륭한 폰트 조합을 찾는다
사이트에 가장 적합한 최고의 폰트 조합을 찾을 때는 브랜드 아이덴티티를 가장 우선으로 생각하세요. 제목에 사용할 폰트와 긴 형식의 텍스트에 사용할 폰트를 기억해 두세요. 후자의 경우 특히 깨끗하고 읽기 쉬워야 하는 반면, 헤더에 사용할 폰트로는 조금 더 표현력이 있어 브랜드를 잘 표현하는 서체를 선택할 수 있습니다.
06. 웹 안전 폰트를 선택한다
웹사이트가 모든 기기에서 동일하게 표시되도록 하려면 웹 브라우저에 맞는 폰트를 사용해야 합니다. 각 기기에는 자체 폰트 집합이 내장되어 있으므로 웹 상에서 안전하지 않은 글꼴이 사이트에 포함되어 있는 경우 텍스트가 원본과 다른 글꼴로 표시될 수 있습니다. 모든 세심한 디자인 작업을 통해 완성된 결과와는 달라지는 것이죠.
하지만 Wix 웹사이트를 만들 때 미리 설치되어 있는 전문적인 폰트를 사용하면 이러한 문제를 쉽게 방지할 수 있습니다. 또한, 온라인 리소스(예: Google Fonts)에서 웹 안전 글꼴을 다운로드한 다음 Wix 에디터에 자신만의 글꼴을 업로드할 수 있습니다. 무료로 이용할 수 있는 한글 폰트는 눈누, 네이버 등에서도 찾을 수 있습니다.
By 조윤정
SEO & 블로그 전문가
