웹디자인 배우기, 가독성 높이는 폰트 계층구조 이해하기

오늘 다룰 내용은 별게 아닌 것 같지만, 필자가 가장 중요하게 생각하는 웹디자인 배우기의 핵심입니다. 여러분 중 웹디자인에 관심 있는 사람이라면 잘 정돈되어 있다는 느낌을 갖는 사이트를 보게 될 것입니다. 이는 모두 폰트 계층구조가 잘 갖춰진 상태이며, 이를 통해 디자인이 완성된다고 해도 무방합니다.

 

웹디자인 배우기, 본질은 가독성이다.

사실 홈페이지를 만드는 이유는 혼자 보려는 게 아니라 누군가에게 내가, 내 회사가 알리고 싶은 메시지를 전달하기 위함이에요. 따라서 읽기 편하게 깔끔하게 정돈 된 폰트가 무엇인지 이해하는 건 웹디자인 배우기의 본질이라 할 수 있죠.



사실 이론적으로 그리 어려운 문제가 아닌데, 실제 이걸 잘하는 디자이너를 찾기란 쉽지 않습니다. 인터랙션이나 창의적인 구조를 더 중요하다 여기는 분들도 있지만 제 생각은 이와 다릅니다.

모든 웹사이트는 방문자에게 정확한 정보를 전달하는 게 목적이 되어야 하고, 이를 위해서는 폰트 계층구조에 대한 이해와 가독성을 높이는 방식을 반드시 알아야 하죠.

기본적으로 폰트 계층구조를 만들기 위해서는 글자의 크기, 두께, 폰트와 폰트 사이의 간격이 중요한데, 이는 정해진 원칙이란 게 사실 없다고 봐야 합니다.

다만 문장의 행간을 기준으로 상위 폰트와 하위 폰트 간격을 잡고, 글자 크기에 따라 간격을 조절하는 게 일반적인 방식이죠.

따라서 이번 글에서는 기술적인 문제 보다는 그 중요성이나 그로 인해 얻게되는 디자인 결과물에 어떤 차이가 있는지를 전달하는 데, 목적이 있습니다.

 

폰트를 배열하는 기본 원칙에 대하여.

웹사이트 디자인 배우기는 사실 폰트와 이미지를 다양한 방식으로 나열하는 방법을 배우는 게 전부라고 할 수 있습니다. 문제는 상황이나 업종, 디자인 컨셉에 따라 폰트 종류를 결정하는 것 부터 모두 경험에서 오는 차이 때문에 결국 선택이 달라지는 것이죠.

따라서 이를 배우는 가장 좋은 방법은 여러분이 볼 때 잘 정리된 사이트의 폰트 간격이나 크기 두께를 그대로 따라하는 것입니다.

마음에 드는 디자인이 있다면 마우스 우클릭을 통해 개발자 도구(검사)로 들어갑니다.



이후 요소 확인 버튼을 클릭하고 해당 요소가 폰트는 무엇을 썼는지, 크기는 어떠한지, 두께 여백까지 확인하는 것이죠.

또한 영문과 한글은 폰트가 전혀 다르기 때문에 자간이나 행간을 설정하는 방식도 다릅니다. 보통 영문은 자간이 넓어야 하고, 한글은 대다수 기본 세팅에서 좁혀야 할 것입니다.

행간은 문장과 문장 사이를 말하는 데, 이 역시 어떻게 설정 하느냐에 따라 전체 폰트 상하 간격에 변화를 주어야 합니다.

중요한 건, 중요도에 따라 폰트 크기나 두께, 컬러까지 달라야 하지만 동일한 폰트라고 판단되는 요소는 일관성을 두는 것입니다.

앞서 이야기한 것 처럼 이렇게 글로 설명하는 게 얼마나 이해에 도움이 될지 모르지만, 사실 저는 웹디자인 배우기에서 폰트 계층구조와 요소 그룹핑만 이해해도 디자인의 90%는 이해했다고 생각합니다.

실제로 여러분이 홈페이지나 랜딩을 제작한 경험이 있다면, 그것도 다른 사이트를 그대로 모방해 본 경험이 있다면 결과가 다른 걸 알 수 있습니다. 이 차이는 바로 폰트 계층구조에서 오는 것이 일반적인 현상입니다.

오늘 소개한 내용을 다 이해하지 못했더라도, 폰트의 중요성을 알고 이를 개선하기 위해 노력한다면 지금 보다 나은 결과물을 창조할 수 있을 것입니다.

준비한 소식은 여기까지 입니다.