인사이트
웹사이트와 웹폰트
웹사이트는 일반적으로 텍스트와 이미지라는 정보의 나열로 구성되어 있습니다. 이때 텍스트는 폰트를 이용해서 화면에 출력되는데요. 사용하는 폰트에 따라 웹사이트의 인상이 달라지기 때문에, 웹사이트에 있어 폰트는 매우 중요한 요소라고 말할 수 있습니다.
기존의 폰트는 사용자의 PC에 폰트 파일이 설치되어야 웹사이트에서 사용할 수 있었어요. 하지만 웹폰트는 사용자의 PC에 폰트를 설치하지 않고도 웹사이트에서 원하는 폰트를 사용할 수 있게 하는 기술입니다. 웹폰트를 이용한다면 기본 폰트만을 사용해야 하는 제약을 벗어나, 디자이너의 의도를 정확하게 반영한 웹사이트를 제작할 수 있어요.
Windows, MacOS, iOS, Android 등의 운영체제는 라이선스 문제로 설치된 기본 폰트가 서로 다릅니다. 때문에 기본 폰트를 사용한다고 해도 웹사이트는 각기 다른 환경의 문제로 제각기 다른 디자인으로 보일질 수밖에 없었어요. 웹폰트의 등장은 운영체제나 기종에 구애받지 않고 동일한 사용자 경험을 제공할 수 있는 혁신이었습니다.
웹폰트의 현실
웹폰트의 장점은 앞서 이야기한 것 외에도 다양합니다. 관련 정보를 태그로 달아야 하는 번거로움 없이 웹사이트의 검색 경쟁력을 유지할 수 있으며, 자동 번역 기능에도 쉽게 연동되어 글로벌화에도 용이해요. 하지만 장점이 다양한 만큼 근원적인 문제를 몇 가지 가지고 있어요.
첫번째는 트래픽이 증가한다는 것입니다. 폰트 파일은 글자의 디자인 정보를 담고 있어요. 일반적으로 라틴 폰트는 글자 수가 많지 않기 때문에 수십 KB정도의 용량이지만, 한글 폰트*의 경우 수백 KB부터 디자인에 따라 10MB가 넘을 정도로 용량이 큽니다.
*한글 폰트는 제작 효율을 위하여 사용 빈도가 높은 2,350자 ~ 2,780자 정도의 글자만 디자인하는 일이 많았습니다. 그러나 웹환경에서 사용해야 하는 웹폰트는 한글 확장(11,172자)까지 모두 갖추고 있어야 합니다. 웹사이트에서 어떤 용도로 사용될지 모르기 때문입니다.
폰트 파일을 웹환경에서 사용하기위하여 웹폰트 파일 형식(WOFF)으로 변경하면 약 50% 정도 용량이 줄어들고, 더욱 최신 파일 형식(WOFF2)를 이용하면 거기서 30~50% 정도가 추가로 줄어듭니다. 하지만 여전히 한글 웹폰트의 용량은 웹에서 사용하기에 부담스러운 것이 현실이에요.
웹폰트 용량에서 시작된 트래픽 문제는 자연스럽게 웹사이트의 로딩 시간으로 연결됩니다. 웹폰트도 웹사이트를 표시하는 하나의 리소스이기 때문에 다운로드에 시간이 걸립니다. 기술이 발전하면서 인터넷 속도는 점점 더 빨라지고 있지만, 사용자의 접속 환경에 따라서 인터넷 속도는 천차만별이에요. 간혹 웹사이트가 열리면서 이미지가 조금 뒤에 보였던 경험은 누구나 한 번쯤 있을 텐데요. 이와 마찬가지로 웹폰트를 다운로드하는 시간 때문에 텍스트도 조금 뒤에 보일 수 있습니다.
이렇게 웹폰트의 다운로드 시간으로 인해 발행하는 상황을 웹브라우저는 크게 2가지 방식으로 처리합니다. 첫 번째는 웹폰트를 다운로드 받기 전까지는 기본 시스템 폰트로 텍스트를 보여주다가, 다운로드가 완료되면 웹폰트로 바꿔 표시하는 FOUT(Flash of Unstyled Text) 방식. 그리고 두 번째는 웹폰트를 다운로드 받기 전까지는 텍스트를 숨겨두다가, 완료되면 웹폰트로 텍스트를 표시하는 FOIT(Flash of Invisible Text) 방식입니다. 이 외에도 몇 가지 방식의 변주가 있고 각각의 장단점이 있는데요. 이러한 처리 방식은 모두 웹폰트가 가진 문제점을 보완하기 위한 대안으로 사용되고 있습니다.
두 번째는 라이선스에요. 현재 사용 중인 대부분의 웹폰트는 무료로 공개된 OFL(Open Font License) 라이선스이고, 상업용 웹폰트 사용은 활성화되지 않은 편인데요. 웹폰트는 말 그대로 웹에서 사용하는 것이고, 웹에서 사용한다는 것은 누구에게나 공개한다는 말과 같아요. 상업용 폰트를 웹폰트(WOFF)로 변경하여 사용하는 순간, 해당 폰트(폰트 파일 속의 디자인 정보)를 웹상에 오픈하는 것을 의미합니다.
때문에 특정 상업용 폰트가 꼭 필요한 경우에는 폰트 회사로부터 금액을 지불하고 웹폰트용 라이선스와 폰트 파일을 구매하여 적용하고 있어요. 일반적으로 폰트 회사들은 웹에 폰트가 공개되는 상황을 감안해 웹폰트를 높은 가격으로 책정하고 있습니다. 이처럼 상업용 폰트를 웹폰트로 사용하기 어렵기 때문에 국내 웹폰트 환경*은 아직까지 활성화되지 못했어요.
*해외 웹폰트 시장은 국내와는 조금 다릅니다. 라틴 폰트의 경우 글자 수가 한글 폰트에 비하여 적은 만큼 폰트 파일의 크기가 작기 때문에 웹사용성이 높습니다. 또한 오랜 역사만큼 자유롭게 사용 가능한 무료폰트의 수가 많아 선택의 폭이 넓습니다. 영미권 유명 웹사이트를 방문해 보면 사이트의 디자인 컨셉에 맞는 다양한 웹폰트가 사용되고 있습니다.
*영미권 웹사이트 사례를 보면 별다른 보안 기술 없이 웹폰트를 사용하는 것을 볼 수 있습니다. 라이선스 관련 인식 때문일 수도, 잦은 소송 사례 때문일 수도 있지만 폰트가 유출되는 것에 대한 우려는 찾아보기 힘듭니다. 그러나, 국내의 상황은 조금 다릅니다. 폰트 제작 업체마다 입장이 다를 수는 있지만, 한 개의 폰트를 만들기 위해서는 11,172자를 일일이 디자인해야 하기 때문에 폰트 파일이 유출되지 않도록 신경을 쓰고 있습니다. 따라서, 대부분의 폰트 제작 업체들은 폰트 파일이 공개되는 웹폰트 파일 제공에 소극적일 수밖에 없습니다.
한글에 최적화된 새로운 웹폰트 기술
산돌은 이러한 국내 웹폰트 환경을 개선하고 웹에서도 제약 없이 폰트를 사용할 수 있는 환경을 만들고자 했습니다. 이를 위해 앞서 이야기한 문제점들을 보완할 수 있는 방안을 고민했어요. 그 결과 트래픽 문제를 해결하기 위해 웹폰트 용량을 최적화하고, 라이선스 문제를 해결하기 위해 웹폰트를 보호할 수 있는 보안기술을 개발할 수 있었어요. 그리고 2023년 하반기부터 새로운 웹폰트를 서비스하기 위해 준비하고 있습니다.
*산돌은 웹폰트 서비스에 적용된 경량화 기술과 보안 기술에 대하여 특허 출원을 진행한 결과 2022년 특허청으로부터 특허 등록 결정을 받았습니다. 산돌 웹폰트 서비스는 웹폰트 사용으로 인한 시간 소모를 최소화하여 웹 사이트의 렌더링 속도를 향상시키기 위한 기술입니다.
*2023년에는 웹폰트 서비스 기술의 해외 특허 등록을 위한 과정으로 세계 특허 협력 조합(PCT) 국제 특허를 출원하였습니다. 최근 한국어가 세계 젊은이들 사이에 가장 인기 있는 언어 가운데 하나로 떠오르고 있는 만큼 한국어의 영향 확대에 맞춰 세계로 웹폰트 서비스를 확대할 예정입니다.
① 웹폰트 경량화
산돌이 준비하는 웹폰트 서비스는 라틴 폰트에 비해 용량이 큰 한글 폰트를 서비스하는데 최적화되어 있습니다. 웹폰트 파일은 웹사이트에서 대용량 이미지 파일과 비슷한데요. 웹사이트는 이미 웹브라우저에 표시되었는데 뒤늦게 뜨는 이미지와 같은 상황이죠. 이를 최적화하기 위해 웹에서 이미지의 사이즈를 적당하게 조절하듯, 산돌 웹폰트 서비스 또한 웹사이트에 맞춰 웹폰트 용량을 최적화하는 기술을 제공합니다.
예를 들자면, 일반적인 인터넷 뉴스 기사는 평균 120개 내외의 한글 글자를 사용한다고 합니다. 이 뉴스 기사 텍스트에 웹폰트를 적용하기 위해 11,172자의 파일을 전달하는 대신, 해당 웹에 사용된 120여자만을 포함한 경량화 파일을 전달합니다. 웹폰트 파일이 경량화된 만큼 트래픽은 줄어들어 빠른 속도로 웹폰트를 서비스할 수 있는 것인데요. 만약 이목을 집중시키기 위해 15자 내외의 짧은 문구에 적용한다면 그 효율은 더 크게 체감할 수 있습니다.
② 웹폰트 보안기술
산돌 웹폰트 서비스*에는 사용자가 지정한 도메인에서만 웹폰트 파일을 사용할 수 있도록 제한하는 인증 기술이 적용되어 있습니다. 웹폰트가 무단으로 다른 웹사이트에 도용되는 것을 막을 수 있는 인증 기술인데요. 산돌 웹폰트가 적용된 웹사이트에서 사용된 Script Tag나 CSS 소스를 가져다가 다른 도메인의 웹사이트 소스코드에 적용하더라도 정상적인 사용이 불가하게 설정되어 있어요. 쉽게 이야기하자면 사용자가 지정한 도메인이 아니라면 시스템에서 웹폰트의 제공을 차단하는 것입니다.
*산돌의 웹폰트는 웹폰트를 적용하고자 하는 웹사이트의 도메인 주소(아직 도메인이 없는 경우는 IP주소)를 입력해야 합니다. 폰트 목록에서 원하는 폰트를 선택하는 2단계의 과정을 거쳐 사용자는 자신의 웹사이트 소스코드에 삽입할 수 있는 Script Tag와 CSS 정보를 받게 됩니다. 이 Script Tag와 CSS 정보를 사용자가 운영 중인 웹사이트의 소스코드에 추가하면 밋밋했던 웹사이트의 글자가 멋진 웹폰트로 바뀌는 모습을 보실 수 있습니다. 여기서 웹사이트는 사용자가 웹사이트 또는 웹서버의 관리 권한을 가지고 있거나, 아임웹, 카페24 또는 티스토리와 같이 HTML 수정 권한이 제공되는 웹빌더 또는 블로그 서비스 등을 이용할 수 있습니다.
웹폰트 경량화 및 보안기술은 기존 웹브라우저의 제약을 넘어, 누구나 다양한 폰트를 이용하여 표현할 수 있는 시작점이 될 것으로 생각됩니다. 산돌의 새로운 기술이 적용된 웹폰트는 현재 베타서비스를 진행하고 있어요. 간편하게 웹폰트를 사용할 수 있도록 Script Tag와 CSS 정보를 제공하며, 산돌구름의 회원이라면 누구나 자신의 웹사이트에 웹폰트를 적용해 볼 수 있습니다. 경량화된 웹폰트 기술을 통해 보다 빠른 속도의 웹폰트를 경험할 수 있습니다. 현재는 베타서비스로 산돌의 브랜드 폰트만으로 제공하지만, 조만간 산돌구름에 입점한 다양한 브랜드 폰트도 만나 볼 수 있을 것으로 기대하고 있습니다.
*산돌구름 웹폰트 베타서비스 (링크)
|
윤현진
|
IT랩팀
|
산돌 IT그룹에서 개발자로 일합니다. |
인사이트
웹사이트와 웹폰트
웹사이트는 일반적으로 텍스트와 이미지라는 정보의 나열로 구성되어 있습니다. 이때 텍스트는 폰트를 이용해서 화면에 출력되는데요. 사용하는 폰트에 따라 웹사이트의 인상이 달라지기 때문에, 웹사이트에 있어 폰트는 매우 중요한 요소라고 말할 수 있습니다.
기존의 폰트는 사용자의 PC에 폰트 파일이 설치되어야 웹사이트에서 사용할 수 있었어요. 하지만 웹폰트는 사용자의 PC에 폰트를 설치하지 않고도 웹사이트에서 원하는 폰트를 사용할 수 있게 하는 기술입니다. 웹폰트를 이용한다면 기본 폰트만을 사용해야 하는 제약을 벗어나, 디자이너의 의도를 정확하게 반영한 웹사이트를 제작할 수 있어요.
Windows, MacOS, iOS, Android 등의 운영체제는 라이선스 문제로 설치된 기본 폰트가 서로 다릅니다. 때문에 기본 폰트를 사용한다고 해도 웹사이트는 각기 다른 환경의 문제로 제각기 다른 디자인으로 보일질 수밖에 없었어요. 웹폰트의 등장은 운영체제나 기종에 구애받지 않고 동일한 사용자 경험을 제공할 수 있는 혁신이었습니다.
웹폰트의 현실
웹폰트의 장점은 앞서 이야기한 것 외에도 다양합니다. 관련 정보를 태그로 달아야 하는 번거로움 없이 웹사이트의 검색 경쟁력을 유지할 수 있으며, 자동 번역 기능에도 쉽게 연동되어 글로벌화에도 용이해요. 하지만 장점이 다양한 만큼 근원적인 문제를 몇 가지 가지고 있어요.
첫번째는 트래픽이 증가한다는 것입니다. 폰트 파일은 글자의 디자인 정보를 담고 있어요. 일반적으로 라틴 폰트는 글자 수가 많지 않기 때문에 수십 KB정도의 용량이지만, 한글 폰트*의 경우 수백 KB부터 디자인에 따라 10MB가 넘을 정도로 용량이 큽니다.
*한글 폰트는 제작 효율을 위하여 사용 빈도가 높은 2,350자 ~ 2,780자 정도의 글자만 디자인하는 일이 많았습니다. 그러나 웹환경에서 사용해야 하는 웹폰트는 한글 확장(11,172자)까지 모두 갖추고 있어야 합니다. 웹사이트에서 어떤 용도로 사용될지 모르기 때문입니다.
폰트 파일을 웹환경에서 사용하기위하여 웹폰트 파일 형식(WOFF)으로 변경하면 약 50% 정도 용량이 줄어들고, 더욱 최신 파일 형식(WOFF2)를 이용하면 거기서 30~50% 정도가 추가로 줄어듭니다. 하지만 여전히 한글 웹폰트의 용량은 웹에서 사용하기에 부담스러운 것이 현실이에요.
웹폰트 용량에서 시작된 트래픽 문제는 자연스럽게 웹사이트의 로딩 시간으로 연결됩니다. 웹폰트도 웹사이트를 표시하는 하나의 리소스이기 때문에 다운로드에 시간이 걸립니다. 기술이 발전하면서 인터넷 속도는 점점 더 빨라지고 있지만, 사용자의 접속 환경에 따라서 인터넷 속도는 천차만별이에요. 간혹 웹사이트가 열리면서 이미지가 조금 뒤에 보였던 경험은 누구나 한 번쯤 있을 텐데요. 이와 마찬가지로 웹폰트를 다운로드하는 시간 때문에 텍스트도 조금 뒤에 보일 수 있습니다.
이렇게 웹폰트의 다운로드 시간으로 인해 발행하는 상황을 웹브라우저는 크게 2가지 방식으로 처리합니다. 첫 번째는 웹폰트를 다운로드 받기 전까지는 기본 시스템 폰트로 텍스트를 보여주다가, 다운로드가 완료되면 웹폰트로 바꿔 표시하는 FOUT(Flash of Unstyled Text) 방식. 그리고 두 번째는 웹폰트를 다운로드 받기 전까지는 텍스트를 숨겨두다가, 완료되면 웹폰트로 텍스트를 표시하는 FOIT(Flash of Invisible Text) 방식입니다. 이 외에도 몇 가지 방식의 변주가 있고 각각의 장단점이 있는데요. 이러한 처리 방식은 모두 웹폰트가 가진 문제점을 보완하기 위한 대안으로 사용되고 있습니다.
두 번째는 라이선스에요. 현재 사용 중인 대부분의 웹폰트는 무료로 공개된 OFL(Open Font License) 라이선스이고, 상업용 웹폰트 사용은 활성화되지 않은 편인데요. 웹폰트는 말 그대로 웹에서 사용하는 것이고, 웹에서 사용한다는 것은 누구에게나 공개한다는 말과 같아요. 상업용 폰트를 웹폰트(WOFF)로 변경하여 사용하는 순간, 해당 폰트(폰트 파일 속의 디자인 정보)를 웹상에 오픈하는 것을 의미합니다.
때문에 특정 상업용 폰트가 꼭 필요한 경우에는 폰트 회사로부터 금액을 지불하고 웹폰트용 라이선스와 폰트 파일을 구매하여 적용하고 있어요. 일반적으로 폰트 회사들은 웹에 폰트가 공개되는 상황을 감안해 웹폰트를 높은 가격으로 책정하고 있습니다. 이처럼 상업용 폰트를 웹폰트로 사용하기 어렵기 때문에 국내 웹폰트 환경*은 아직까지 활성화되지 못했어요.
*해외 웹폰트 시장은 국내와는 조금 다릅니다. 라틴 폰트의 경우 글자 수가 한글 폰트에 비하여 적은 만큼 폰트 파일의 크기가 작기 때문에 웹사용성이 높습니다. 또한 오랜 역사만큼 자유롭게 사용 가능한 무료폰트의 수가 많아 선택의 폭이 넓습니다. 영미권 유명 웹사이트를 방문해 보면 사이트의 디자인 컨셉에 맞는 다양한 웹폰트가 사용되고 있습니다.
*영미권 웹사이트 사례를 보면 별다른 보안 기술 없이 웹폰트를 사용하는 것을 볼 수 있습니다. 라이선스 관련 인식 때문일 수도, 잦은 소송 사례 때문일 수도 있지만 폰트가 유출되는 것에 대한 우려는 찾아보기 힘듭니다. 그러나, 국내의 상황은 조금 다릅니다. 폰트 제작 업체마다 입장이 다를 수는 있지만, 한 개의 폰트를 만들기 위해서는 11,172자를 일일이 디자인해야 하기 때문에 폰트 파일이 유출되지 않도록 신경을 쓰고 있습니다. 따라서, 대부분의 폰트 제작 업체들은 폰트 파일이 공개되는 웹폰트 파일 제공에 소극적일 수밖에 없습니다.
한글에 최적화된 새로운 웹폰트 기술
산돌은 이러한 국내 웹폰트 환경을 개선하고 웹에서도 제약 없이 폰트를 사용할 수 있는 환경을 만들고자 했습니다. 이를 위해 앞서 이야기한 문제점들을 보완할 수 있는 방안을 고민했어요. 그 결과 트래픽 문제를 해결하기 위해 웹폰트 용량을 최적화하고, 라이선스 문제를 해결하기 위해 웹폰트를 보호할 수 있는 보안기술을 개발할 수 있었어요. 그리고 2023년 하반기부터 새로운 웹폰트를 서비스하기 위해 준비하고 있습니다.
*산돌은 웹폰트 서비스에 적용된 경량화 기술과 보안 기술에 대하여 특허 출원을 진행한 결과 2022년 특허청으로부터 특허 등록 결정을 받았습니다. 산돌 웹폰트 서비스는 웹폰트 사용으로 인한 시간 소모를 최소화하여 웹 사이트의 렌더링 속도를 향상시키기 위한 기술입니다.
*2023년에는 웹폰트 서비스 기술의 해외 특허 등록을 위한 과정으로 세계 특허 협력 조합(PCT) 국제 특허를 출원하였습니다. 최근 한국어가 세계 젊은이들 사이에 가장 인기 있는 언어 가운데 하나로 떠오르고 있는 만큼 한국어의 영향 확대에 맞춰 세계로 웹폰트 서비스를 확대할 예정입니다.
① 웹폰트 경량화
산돌이 준비하는 웹폰트 서비스는 라틴 폰트에 비해 용량이 큰 한글 폰트를 서비스하는데 최적화되어 있습니다. 웹폰트 파일은 웹사이트에서 대용량 이미지 파일과 비슷한데요. 웹사이트는 이미 웹브라우저에 표시되었는데 뒤늦게 뜨는 이미지와 같은 상황이죠. 이를 최적화하기 위해 웹에서 이미지의 사이즈를 적당하게 조절하듯, 산돌 웹폰트 서비스 또한 웹사이트에 맞춰 웹폰트 용량을 최적화하는 기술을 제공합니다.
예를 들자면, 일반적인 인터넷 뉴스 기사는 평균 120개 내외의 한글 글자를 사용한다고 합니다. 이 뉴스 기사 텍스트에 웹폰트를 적용하기 위해 11,172자의 파일을 전달하는 대신, 해당 웹에 사용된 120여자만을 포함한 경량화 파일을 전달합니다. 웹폰트 파일이 경량화된 만큼 트래픽은 줄어들어 빠른 속도로 웹폰트를 서비스할 수 있는 것인데요. 만약 이목을 집중시키기 위해 15자 내외의 짧은 문구에 적용한다면 그 효율은 더 크게 체감할 수 있습니다.
② 웹폰트 보안기술
산돌 웹폰트 서비스*에는 사용자가 지정한 도메인에서만 웹폰트 파일을 사용할 수 있도록 제한하는 인증 기술이 적용되어 있습니다. 웹폰트가 무단으로 다른 웹사이트에 도용되는 것을 막을 수 있는 인증 기술인데요. 산돌 웹폰트가 적용된 웹사이트에서 사용된 Script Tag나 CSS 소스를 가져다가 다른 도메인의 웹사이트 소스코드에 적용하더라도 정상적인 사용이 불가하게 설정되어 있어요. 쉽게 이야기하자면 사용자가 지정한 도메인이 아니라면 시스템에서 웹폰트의 제공을 차단하는 것입니다.
*산돌의 웹폰트는 웹폰트를 적용하고자 하는 웹사이트의 도메인 주소(아직 도메인이 없는 경우는 IP주소)를 입력해야 합니다. 폰트 목록에서 원하는 폰트를 선택하는 2단계의 과정을 거쳐 사용자는 자신의 웹사이트 소스코드에 삽입할 수 있는 Script Tag와 CSS 정보를 받게 됩니다. 이 Script Tag와 CSS 정보를 사용자가 운영 중인 웹사이트의 소스코드에 추가하면 밋밋했던 웹사이트의 글자가 멋진 웹폰트로 바뀌는 모습을 보실 수 있습니다. 여기서 웹사이트는 사용자가 웹사이트 또는 웹서버의 관리 권한을 가지고 있거나, 아임웹, 카페24 또는 티스토리와 같이 HTML 수정 권한이 제공되는 웹빌더 또는 블로그 서비스 등을 이용할 수 있습니다.
웹폰트 경량화 및 보안기술은 기존 웹브라우저의 제약을 넘어, 누구나 다양한 폰트를 이용하여 표현할 수 있는 시작점이 될 것으로 생각됩니다. 산돌의 새로운 기술이 적용된 웹폰트는 현재 베타서비스를 진행하고 있어요. 간편하게 웹폰트를 사용할 수 있도록 Script Tag와 CSS 정보를 제공하며, 산돌구름의 회원이라면 누구나 자신의 웹사이트에 웹폰트를 적용해 볼 수 있습니다. 경량화된 웹폰트 기술을 통해 보다 빠른 속도의 웹폰트를 경험할 수 있습니다. 현재는 베타서비스로 산돌의 브랜드 폰트만으로 제공하지만, 조만간 산돌구름에 입점한 다양한 브랜드 폰트도 만나 볼 수 있을 것으로 기대하고 있습니다.
*산돌구름 웹폰트 베타서비스 (링크)