웹폰트는 어떻게 동작할까? 글꼴이 깨지는 이유와 라이선스

디자이너가 정성껏 고른 멋진 글꼴이, 막상 다른 사람 화면에서는 밋밋한 기본 글꼴로 보이는 경우가 있습니다. 분명 같은 사이트인데 글자 모양이 다르게 뜨는 것입니다. 왜 이런 일이 생기고, 어떻게 하면 누구 화면에서나 같은 글꼴로 보이게 할 수 있을까요.

이번 글에서는 웹에서 글꼴이 어떻게 화면에 뜨는지, 왜 가끔 깨지는지, 그리고 글꼴에도 왜 라이선스가 따라붙는지를 코드 없이 풀어 보겠습니다.

글꼴은 컴퓨터마다 다르게 깔려 있습니다 #

글꼴은 사이트가 아니라 보는 사람의 컴퓨터에 깔려 있는 경우가 많았습니다. 예전 웹은 이 글꼴로 보여 달라고 지정만 하고, 실제 글꼴은 보는 사람 기기에 있는 것을 가져다 썼습니다.

문제는 사람마다 깔려 있는 글꼴이 다르다는 점입니다. 내 컴퓨터에는 있는 글꼴이 상대 컴퓨터에는 없으면, 브라우저는 어쩔 수 없이 비슷한 다른 글꼴로 대신 보여 줍니다. 디자이너가 의도한 모양이 사람마다 달라지고, 때로는 글자가 깨져 보이는 이유입니다.

웹폰트는 글꼴을 함께 보내 줍니다 #

이 문제를 풀려고 나온 것이 웹폰트입니다. 사이트가 글꼴 파일까지 함께 내려보내, 보는 사람 컴퓨터에 그 글꼴이 없어도 똑같이 보이게 하는 방식입니다. 이제는 거의 모든 사이트가 이 웹폰트를 씁니다.

비유하자면, 예전에는 굴림체로 읽어 달라고 부탁만 하고 상대가 굴림체를 안 가졌으면 그만이었다면, 웹폰트는 글꼴 자체를 편지에 동봉해 보내는 셈입니다. 그래서 누구 화면에서나 디자이너가 고른 그대로 보입니다.

웹폰트도 결국 다운로드입니다 #

글꼴을 함께 보낸다는 것은, 그만큼 내려받을 파일이 늘어난다는 뜻이기도 합니다. 글꼴 파일은 생각보다 무거워서, 로딩되는 짧은 사이에 글자가 잠깐 안 보이거나 기본 글꼴로 떴다가 바뀌며 깜빡이기도 합니다. 페이지를 열 때 글자가 한 박자 늦게 모양을 갖추는 경험이 여기서 옵니다.

그래서 웹폰트는 빠르게 전달하는 것이 중요합니다. 앞서 다룬 CDN과 캐시가 여기서 다시 쓰입니다. 글꼴 파일을 가까운 곳에 두고, 한 번 받은 글꼴은 다시 받지 않도록 캐시해 두면, 두 번째 방문부터는 글자가 곧바로 제 모양으로 뜹니다. 특히 한글 글꼴은 글자 수가 많아 파일이 훨씬 무겁기 때문에, 이 최적화가 더 중요합니다.

글꼴에도 라이선스가 있습니다 #

글꼴은 누군가 디자인한 엄연한 저작물입니다. 그래서 마음대로 가져다 쓸 수 없고, 쓰임새에 따라 라이선스를 갖춰야 합니다. 특히 웹폰트로 쓰려면 별도의 허락이 필요한 경우가 많아, 인쇄물에는 써도 되는 글꼴이 웹에는 안 되는 일도 있습니다.

무심코 가져다 쓴 글꼴 때문에 나중에 비용을 청구받는 일도 드물지 않습니다. 다행히 누구나 자유롭게 쓸 수 있도록 공개된 오픈소스 글꼴도 많습니다. 구글이 무료로 제공하는 글꼴이 대표적입니다. 앞서 오픈소스 라이선스를 다룰 때처럼, 글꼴도 가져다 쓰기 전에 허용 범위를 한 번 확인하는 습관이 안전합니다.

그래서 글꼴이 깨지지 않게 하려면 #

핵심은 두 가지입니다. 보여 주고 싶은 글꼴을 웹폰트로 함께 제공하고, 혹시 못 받았을 때를 대비해 대체 글꼴을 미리 지정해 두는 것입니다. 그러면 웹폰트가 늦게 뜨더라도 글자가 깨지지 않고 비슷한 글꼴로 자연스럽게 버팁니다.

여기에 글꼴 파일을 가볍게 다듬고 CDN으로 빠르게 전달하면, 보기 좋은 글꼴과 빠른 화면을 함께 챙길 수 있습니다.

왜 비개발자가 알면 일이 편해지는가 #

• 글꼴 사고를 이해합니다. 같은 사이트가 기기마다 다르게 보이거나 글자가 늦게 뜨는 이유를 알면, 문제를 정확히 전달할 수 있습니다.
• 라이선스 위험을 압니다. 글꼴에도 사용 범위가 있다는 점을 알면, 디자인에 글꼴을 쓸 때 허용 범위를 먼저 확인하게 됩니다.
• 성능을 함께 고려합니다. 한글 웹폰트가 무겁다는 점을 알면, 글꼴 수를 무리하게 늘리지 않고 화면 속도와 균형을 잡을 수 있습니다.

마무리 #

오늘은 웹폰트가 글꼴 파일을 함께 보내 누구 화면에서나 같은 모양으로 보이게 한다는 점, 그 대가로 다운로드가 늘어 CDN과 캐시가 필요하다는 점, 그리고 글꼴에도 라이선스가 따른다는 점을 살펴봤습니다. 글꼴은 보내 줘야 보이고, 함부로 쓰면 안 되는 저작물이라는 것이 핵심입니다.

글꼴에 붙는 라이선스의 큰 그림이 궁금하다면 MIT,GPL,Apache 라이선스 차이를, 웹폰트를 빠르게 전달하는 CDN과 캐시가 궁금하다면 캐시,CDN — “캐시 좀 지워보세요"의 정체를 함께 읽어 보시길 권합니다.