웹폰트 사용

dudgus5766·2022년 3월 31일

Junior Developer

목록 보기

6/18

회사에서 로딩 페이지를 html과 css로만 만들어 달라는 요청과 함께 subset파일 이용해서 브라우저에 맞게 폰트 적용해달라는 한 가지 요청을 더 받게 되었다.
subset은 뭐고 브라우저에 맞는 폰트가 뭔지 알아보자!

웹폰트(Web Font)?

말 그대로 웹에서 사용되는 폰트이다.
일반 폰트와 달리 웹폰트는 웹페이지 내에서 사용할 목적을 갖는다.

@font-face

웹사이트를 방문한 사용자의 컴퓨터에 폰트가 없으면 제작자가 의도한 폰트로 화면을 보여줄 수 없기 때문에 CSS 즉 스타일시트 내에서 'font-family'속성 정의를 통해서 사용하게 되는데 대체 폰트를 지정하기 위함이다.

하지만 '@font-face'는 제작자가 의도한 글꼴이 없을 경우 직접 서버에서 다운로드 한 후 적용할 수 있도록한 것이 특징!

@font-face
@font-face는 CSS2에서 사용하던 것으로 'Embedded Open Type(EOT)'포맷 라이센스로 인해 Microsoft의 웹 브라우저인 인터넷 익스플로어에서만 사용되어 왔다.
그러나 사파리 3.1의 릴리즈와 함께 라이센스 문제를 해결한 Tyue Type Font(TTF)와 Open Type Font(OTF)를 웹 페이지에 웹 폰트처럼 사용 할 수 있게 되었다.
웹 브라우저가 웹 폰트 형식의 Downloadable Font를 다른 포맷으로 지원하기 시작하고, Web Open Font Format(WOFF) 지원이 일반화되었다.

기본 문법

@font-face {
    font-family: "폰트명";
    src: url("파일경로") format("파일형식/포맷");
    font-weight: <weight>;
    font-style: <style>
}
    
.title {
  font-family: "폰트명","fallback폰트명" ...;
}

웹폰트의 장단점

웹 폰트는 사용자가 가지고 있지 않은 폰트를 웹에서 사용할 수 있게 만든다. 웹이 발전함에 따라 사용자가 웹에서 정보를 얻는 과정의 경험(UX)을 개선하려는 노력이 행해지고 있다. 그런 노력 중 하나인 웹 폰트는 로컬의 폰트 설치 상황에 상관없이 웹에서 항상 원하는 타이포그래피를 사용할 수 있게 하는 기술이다.

장점

모든 플랫폼과 브라우저에서 동일한 경험을 제공
검색엔진 최적화
해상도 변화에 유동적
이미지를 줄여 접근성과 경험 향상
유지보수와 관리 용이

단점

확장성
한글 웹폰트는 경량화를 대부분 거치는데, 이 과정에서 자주쓰지 않는 글자들이 빠지게 된다. 대부분 커버가 되겠지만, 만약 다양한 사람들이 활동하는 커뮤니티 사이트를 운영한다면 웹폰트는 사용하지 않는 것이 좋다.
FOIT (Flash Of Invisible Text)
글자가 보이지 않다가 보이는 현상을 이야기한다. FOIT 현상은 웹폰트가 다운로드 되기 전까지 글자를 표시하지 않고 다운로드가 완료되면 표시되기 때문에 발생한다. 특히 한국어 웹폰트는 용량이 커서, 꽤 오랜시간 글자가 나오지 않는 경우가 종종 발생한다. 이런 경우 사용자들의 경험에 부정적 영향을 미칠 수 있다.

2016년에 미국의 상원 의원인 Mitt Romney에 관한 기사에서 웹 폰트가 로딩되기 전과 로딩된 후의 화면을 비교한 그림이다.

단어 "Not"을 웹 폰트로 지정해서 의미를 강조하려 했지만 웹 폰트의 로딩이 늦어져 "Not"이 없는 상태로 사용자에게 기사가 노출되었다. "Not"이 없이 노출된 시간은 불과 몇 초였지만 원래 의미와 정반대의 내용이 사용자들에게 전달되었다. 이 사건으로 인해 한때 미국에서 웹 폰트가 이슈가 되었다.

FOUT (Flash Of Unstyled Text)
글꼴이 깜빡이면서 바뀌는 현상이다. 글자가 기본 글꼴로 표현되었다가 웹폰트 다운로드가 완료되면 폰트가 바뀌면서 깜빡이게 된다. 이 현상은 간혹 레이아웃에 영향을 미치는 경우도 있다.
용량 (이 문제점 때문에 subset 파일을 이용 권한 것)
한글 웹폰트는 영문 웹폰트에비해 용량이 크다. 한글폰트는 완성형이기때문에 경량형으로 잡아도 최소 2,300자 정도이다. 경량화가 잘 된 한글폰트의 경우 용량으로 치면 약300KB정도 된다. 영문의 경우 100KB가 되지 않는 것에 비해 꽤 차이가 난다. (압축률이 높은 woff2로 표현된 spoqa han sans는 300KB 정도인 반면, 영문폰트인 Lato는 13KB에 불과하다.)

이 문제점은 밑에서 조금 더 자세하게 다뤄보겠다 ↓

웹 폰트 최적화 - 웹폰트 용량 줄이기

폰트 형식 변경 (WOFF2.0)

웹에서 사용할 수 있는 폰트 형식은 TTF, OTF 뿐 아니라 EOT, WOFF, WOFF2 처럼 다양하다.
그중에서도 WOFF2는 폰트에 최적화된 압축 및 처리 알고리즘을 사용하여 다른 형식에 비해서 30% 정도 파일 사이즈가 작다.

위의 형식들을 보았을 때 WOFF2 가 용량 및 최적화 면에서 뛰어나기에 WOFF2를 사용하는 것이 유리하겠지만 지원하지 않는 브라우저들이 존재해 다양한 브라우저 대응을 해야할 경우 일부 브라우저에서 의도한 결과물을 얻기 힘들 수 있다.

(출처 - CSS Web Fonts)

그렇기 때문에 여러 브라우저를 대응해야 할 때 다양한 폰트 형식을 추가하는 것이 좋다.

@font-face {
    font-family: 'Noto Sans Kr';
    src:
      local('Noto Sans'),
      local('NotoSans'),
      url('./fonts/noto-sans-kr.woff2') format('woff2'),
      url('./fonts/noto-sans-kr.woff') format('woff'),
      url('./fonts/noto-sans-kr.eot'),
      url('./fonts/noto-sans-kr.eot?#iefix') format('embedded-opentype'),
      url('./fonts/noto-sans-kr.otf') format('opentype');
}

local의 경우 컴퓨터 내장에 사용하고자 하는 폰트가 있는지 확인하는 코드이다. 이미 폰트가 존재 할 경우 굳이 따로 받아오는 것 보다 해당 폰트를 사용하는 것이 좋기에 명시하는 것이 좋다.

중요한 점은 폰트가 선언되는 순서이다. 브라우저가 폰트를 가져올 때 지원하는 형식 중 가장 첫번째 형식을 가져오게 되기 때문에 브라우저가 WOFF2 방식을 사용하게 하려면 최상단에 선언해야 한다.

subset 폰트

subset 폰트는 폰트 파일에서 불필요한 글자를 제거하고 사용할 글자만 남겨둔 폰트이다.

영어와 다르게 한글의 조합은 방대하기 때문에 총 11,172자가 존재하나 이를 모두 사용하지 않기 때문에 자주 사용하는 글자 등만 남겨두고 안쓰는 것들은 제외한 것을 의미한다. (보통 자주사용하는 것만 추린다면 2,350자가 나오게 된다. 스포카 한 산스처럼 아예 글꼴을 만들 때 2,350자만 넣는 케이스도 있다.)

마치며

디자이너로서 폰트 사용에서의 가장 중요한 점은 굴림과 바탕으로 밋밋하고 못난 디자인을 고급스럽게 바꾸자와 이 폰트가 유료인가 무료인가 였다.
하지만 개발자로서 폰트 사용에서의 가장 중요한 점은 디자이너가 좋은 서체를 활용하여 더욱 아름답고 멋진 디자인을 위해 노력한 그대로 보여주는 것. 대응 브라우저를 파악하고 웹 최적화를 통한 최적의 UX를 보여줘야 한다.