DESIGN LOVERS®
개발 이야기2018-03-27

웹 타이포그래피 — 글자만 잘 다뤄도 달라진다

웹 타이포그래피 — 글자만 잘 다뤄도 달라진다

홈페이지를 보면 화려한 이미지와 디자인에 눈이 가지만, 사실 홈페이지의 대부분은 '글자'입니다. 방문자가 실제로 읽고 정보를 얻는 것도 글자입니다. 그래서 글자를 어떻게 다루느냐 — 웹 타이포그래피 — 가 홈페이지의 읽기 편함과 인상을 크게 좌우합니다. 화려한 것보다 기본인 글자를 잘 다루는 것의 중요성을 이야기합니다.

글자를 잘 다루는 것이 왜 중요한가?

결론부터: 홈페이지의 대부분이 글자이고, 방문자는 글자로 정보를 얻는데, 읽기 불편한 글자는 방문자를 떠나게 하고 읽기 편한 글자는 정보를 잘 전하고 좋은 인상을 주기 때문입니다. 글자를 잘 다루는 것은 화려한 디자인보다 기본이면서 중요합니다.

웹 타이포그래피 — 글자만 잘 다뤄도 달라진다
화려함보다 읽기 편함이 먼저

읽기 불편하면 떠난다

아무리 좋은 내용도 읽기 불편하면 방문자가 읽지 않습니다. 글자가 너무 작거나, 줄 간격이 좁아 답답하거나, 한 줄이 너무 길어 눈이 따라가기 힘들거나, 배경과 글자 색의 대비가 약해 잘 안 보이면, 방문자는 읽기를 포기하고 떠납니다. 정보를 전하려고 쓴 글이, 읽기 불편해서 전달되지 못하는 것입니다.

반대로 글자가 읽기 편하면, 방문자가 편안하게 내용을 읽고 정보를 얻습니다. 적절한 크기와 간격, 알맞은 줄 길이, 충분한 색 대비로 다듬어진 글자는 눈에 편안하게 들어옵니다. 방문자는 그것을 의식하지 못한 채 '이 홈페이지 읽기 편하다'고 느끼며 더 오래 머뭅니다. 이렇게 글자를 잘 다루는 것은, 방문자가 우리 내용을 실제로 읽고 이해하게 하는 기본입니다. 좋은 내용을 준비했다면, 그것이 잘 읽히도록 글자를 다루는 것까지가 완성입니다.

웹 타이포그래피의 기본

1. 읽기 좋은 크기

글자가 너무 작으면 읽기 힘듭니다. 특히 모바일에서 확대하지 않고도 편하게 읽을 수 있는 크기가 기본입니다.

2. 적절한 간격과 줄 길이

줄 사이 간격이 충분해야 답답하지 않고, 한 줄이 너무 길지 않아야 눈이 편하게 따라갑니다.

3. 충분한 색 대비

글자와 배경의 색 대비가 충분해야 잘 보입니다. 흐릿한 대비는 읽기 어렵고 눈을 피로하게 합니다.

한글에는 한글에 맞는 배려가 필요하다

웹 타이포그래피에서 특히 신경 써야 할 것이 있습니다. 한글은 로마자와 특성이 달라, 한글에 맞는 배려가 필요하다는 것입니다. 한글은 글자 하나하나가 네모난 형태라 로마자와 리듬이 다르고, 줄 간격이나 글자 크기에서 다르게 느껴집니다. 로마자 기준으로만 다루면 한글이 답답하거나 어색해 보일 수 있습니다.

또 한글은 단어 중간에서 줄이 바뀌면 어색합니다. 조사나 단어가 어중간하게 잘려 다음 줄로 넘어가면 읽기 불편하고 인상도 나빠집니다. 그래서 한글 홈페이지는 한글의 특성을 이해하고, 한글이 자연스럽고 편안하게 읽히도록 다뤄야 합니다. 이런 세심한 배려가 있는 홈페이지와 없는 홈페이지는, 같은 내용이라도 읽는 편안함과 완성도에서 큰 차이가 납니다. 우리 방문자가 한글을 읽는다면, 한글에 맞는 타이포그래피를 챙기는 것이 좋은 홈페이지의 기본입니다.

화려함보다 읽기 편함이 먼저다

홈페이지를 만들 때 화려한 이미지나 효과에 신경 쓰다가, 정작 대부분을 차지하는 글자를 소홀히 하는 경우가 많습니다. 하지만 방문자가 실제로 정보를 얻는 것은 글자입니다. 화려한 것보다 글자가 읽기 편한 것이 먼저입니다. 읽기 편한 글자는 눈에 잘 안 띄지만, 방문자가 편안하게 정보를 얻고 오래 머물게 하는 힘이 있습니다.

그래서 좋은 홈페이지는 글자를 세심하게 다룹니다. 크기, 간격, 줄 길이, 색 대비, 그리고 한글이라면 한글에 맞는 배려까지 챙기는 것입니다. 이것은 화려하지 않아 눈에 잘 띄지 않지만, 홈페이지의 완성도와 실제 사용 경험을 크게 좌우합니다. 좋은 제작자는 화려한 것뿐 아니라 이 기본인 글자까지 잘 다룹니다. 글자를 잘 다루는 것 — 이 기본에 대한 정성이, 겉보기엔 비슷해 보여도 실제로 읽을 때의 편안함과 완성도를 가릅니다. 기본이 튼튼한 홈페이지가 좋은 홈페이지입니다.

실제 사례 — 글자를 다듬어 달라진 홈페이지

좋은 내용을 담았는데 방문자가 오래 머물지 않던 홈페이지가 있었습니다. 살펴보니 글자가 작고, 줄 간격이 좁아 답답하고, 한글이 어색하게 잘려 읽기 불편했습니다. 글자 크기를 읽기 좋게 키우고, 간격을 넉넉히 하고, 줄 길이를 조정하고, 한글이 자연스럽게 읽히도록 다듬었습니다. 내용은 그대로인데 훨씬 읽기 편해졌고, 방문자가 더 오래 머물며 내용을 읽게 됐습니다. 글자를 잘 다룬 것이 만든 차이였습니다.

자주 묻는 질문

Q. 글자가 정말 그렇게 중요한가요?

중요합니다. 홈페이지의 대부분이 글자이고, 방문자가 정보를 얻는 것도 글자입니다. 읽기 불편하면 좋은 내용도 전달되지 못하고 방문자가 떠납니다.

Q. 무엇을 챙겨야 하나요?

읽기 좋은 글자 크기, 적절한 줄 간격과 줄 길이, 충분한 색 대비가 기본입니다. 한글이라면 한글에 맞는 배려도 함께 챙겨야 합니다.

Q. 한글은 왜 따로 신경 써야 하나요?

한글은 로마자와 특성이 달라, 로마자 기준으로만 다루면 어색합니다. 단어 중간에서 줄이 바뀌면 특히 불편합니다. 한글에 맞는 배려가 필요합니다.

Q. 화려한 디자인보다 중요한가요?

방문자가 실제로 정보를 얻는 것이 글자이므로, 화려함보다 읽기 편함이 먼저입니다. 눈에 잘 안 띄지만 완성도와 사용 경험을 크게 좌우합니다.

글자까지 세심하게 다룬 홈페이지가 필요하면 디자인러버스가 함께합니다.