한글 타이포그래피 Fonts 폰트를 알면 디자인이 편합니다.
웹 디자인에서 가장 중요한 요소인 Fonts 폰트, 우리는 이것을 디자인하는 방법을 타이포그래피라 부릅니다. 특히 한글 타이포그래피 능력은 웹 디자이너의 기본적인 역량이라고 볼 수 있습니다. 초보자의 경우 웹 한글 폰트 선택부터 실수하는 경향이 있고 이는 경험을 통해 알아가게 됩니다.
저는 한글 폰트 디자인 방법만 알아도 여러분의 웹 사이트 퀄리티를 한 단계 발전시킬 수 있으리라 생각합니다. 따라서 이 글을 참고하신 후 직접 구현해 보기를 바랍니다.
한글 타이포그래피 방법, 꼭 배워야 할까?
한글 폰트와 영어 폰트 설정 그리고 디자인
우선 폰트와 타이포그래피를 헷갈리는 분이 있어서 개념을 정리하고 갈게요. 폰트가 말 그대로 글자라면, 타이포그래피는 글자를 배열하거나 디자인하는 방법을 의미합니다. 따라서 한글 타이포그래피 디자인이란 말은 틀린 표현입니다.
블로그 운영이나 홈페이지 제작 등 웹 문서를 다루는 사람이라면 타이포그래피를 이해하는 게 가장 중요합니다. 특히 한글과 영문의 차이를 알고, 언제 어떤 폰트를 사용해야 하는지 아는 것은 웹디자인의 기본입니다.
그럼, 이유부터 설명해 드리겠습니다.
하나는 가독성의 문제이고, 다른 하나는 직관적인 디자인 영역에서의 문제입니다. 눈썰미가 있고 웹디자인에 관심이 있는 사람이라면 이 글에 사용하고 있는 폰트가 뭔가 정렬된 듯한 느낌을 준다는 걸 알 수 있습니다.
가독성 있는 한글 타이포그래피 배우기
이미지는 한글 타이포그래피 기본 중 하나인 자간을 이야기하고 있습니다. 디자인적인 측면이 아닌 가독성에서 접근하면 일반인도 어떤 폰트 디자인이 옳은 선택일지 알 수 있습니다.
자간의 폭이 넓으면 한글과 영문 모두 가독성이 떨어집니다. 그런데 기본적으로 웹사이트 디자인 결과물에서 자간이 올바로 된 디자인을 볼 수 없는데 현실입니다. 여러분이 이후에 이 부분을 유심히 확인하면 새로운 디자인 시각을 느낄 수 있을 것입니다.
즉 한글 폰트는 가독성을 위해 문자가 서로 붙지 않을 정도의 적당히 좁은 간격을 유지하면 할수록 가독성이 좋아지고, 사실 디자인 측면에서도 정렬된 느낌을 줄 수 있습니다.
이번에는 행간을 살펴보겠습니다. 이번 역시 폭이 좁은 행간과 넓은 행간을 예시로 들었습니다. 그런데 사실 자간을 설명한 뒤라 무작정 오른쪽 폰트 디자인이 더 가독성이 높다고 느낄 수 있지만 이것은 다른 차원의 문제입니다.
타이틀과 텍스트 사이의 공간은 행간으로 볼 수 없지만 디자인 관점에서는 줄 사이의 공간이라는 점에서 저는 동일한 기준이 적용되어야 한다는 생각입니다.
우선 이번 사진에서는 당연히 오른쪽 한글 타이포그래피 형태가 정답에 가깝습니다. 하지만 다음 사진을 보면서 이야기를 더 진행해 보겠습니다.
자 이번에는 텍스트 문장이 떨어져서 두 개로 한글이 배열될 때 문제가 있음이 확인됩니다. 이번에는 가독성이 왼쪽이 더 좋다고 볼 수 있습니다.
왜일까요?
그 이유는 타이틀과 텍스트 사이 공간이 너무 좁기 때문입니다. 이 또한 위에서 소개한 이미지와 같은 한글 타이포그래피 방식으로 배열했기 때문에 시각적인 측면에서 베스트 디자인이 나오질 않았습니다.
즉 한글 폰트 디자인은 문장이 길어지는 경우와 타이틀과 문장 하나를 디자인할 때 행간의 폭을 달리해야 한다는 것이죠.
디자인과 가독성 모두 고려해야 하는 한글 폰트
자 이제 방법을 정리해 보겠습니다. 한글 폰트 디자인은 행간은 물론 자간에도 일정한 디자인 원칙이 있고, 그것은 다음과 같은 기본기를 충실히 따라야 합니다.
- 자간은 타이틀과 텍스트 모두 좁을수록 좋지만, 글자 사이가 붙지 않도록 주의한다.
- 행간은 기본적으로 폰트 크기의 80% 정도가 적당하고, 문장과 문장 사이 공간은 150% ~ 180%를 유지한다.
- 타이틀과 텍스트 공간은 텍스트 문장 공간 이상을 유지하는 게 기본이지만 너무 떨어지면 그룹화가 되지 않는다.
자 이 세 가지 한글 타이포그래피 방식은 여러분이 웹 문서를 취급할 때 공식처럼 적용해야 하는 한글 폰트 디자인의 기초입니다.
이것은 블로그와 인쇄용 문서를 포함하며, 특히 웹디자인에선 가장 중요한 부분입니다.
웹 전용 한글 폰트는 두 가지로 압축하세요.
Noto serif kr, Noto sans kr
웹 문서에 사용되는 폰트를 대표하는 것은 세리프와 산스 폰트입니다. 그중에서도 NOTO sans kr는 대표적인 한글 폰트라고 볼 수 있습니다.
저는 개인적으로 여러분이 한글 폰트를 사용할 때 NOTO sans kr를 이용하는 걸 추천합니다. 어떤 분들은 나눔 고딕을 좋아하는 경우가 많은데, 사실 고딕은 산스체보다 가독성이 떨어지는 서체이고, 오랜 기간 보다 보면 질리는 폰트라는 개인적인 생각이 있습니다.
디자인적인 측면에서 강조하고 싶을 때나 웹사이트 이미지에 산스체보다 세리프가 어울리는 경우가 있는데요, 이때도 NOTO serif kr를 사용하는 게 좋습니다.
그 이유는 웹 전용 한글 타이포그래피 과정에서 가장 많은 실수가 브라우져 호환성을 무시한 디자인인데요, 폰트 적용에서도 웹 전용 한글 폰트가 아닌 경우 와이드 스크린에서 확인하면 이상한 모양이거나 폰트가 깨진 경우가 있기 때문입니다.
이렇게 폰트는 디자인에서 매우 중요한 부분입니다. 개인적으론 잘 정돈된 한글 타이포그래피 하나면 웹사이트는 이미 멋진 디자인일 수밖에 없다고 생각합니다.
여러분도 오늘 소개해 드린 내용을 잘 참고해서 지금보다 더 나은 웹 디자인할 수 있었으면 좋겠습니다.
다음 시간은 이어서 폰트의 색상과 크기에 대한 이야기를 준비해 보겠습니다.
2023 . 10 . 16
에디터 – 민서인
