이모티콘이나 이모지등이 널리 활성화되면서 웹페이지에서 이러한 경향을 다소 늦었지만 적극적으로 수용하려는 시도가 지속되어 왔습니다.

아이콘을 사용해 보다 직관적으로 사용 경험을 제공할 수 있고, 군더더기 설명을 줄일 수 있어 깔끔한 사이트 구현도 가능합니다.

이렇게 웹 페이지에서 아이콘을 구현하는 여러가지 방법이 있지만 가장 널리 사용되는 것이 바로 폰트어썸 (Font Awesome) 아이콘 폰트입니다.

폰트어썸 (Font Awesome) 공식 페이지 살펴보기

1. 폰트어썸 (Font Awesome) 적용 시 woff2관련 404 에러

폰트어썸 (Font Awesome)이 등장한지 어느 정도 시간이 걸려서 일반적인 웹사이트에서 이를 적용하는 것은 어렵지는 않습니다.

그러나 이를 적용하는 과정에서 아무래도 열가지 장애를 만나게 되는데요.

이 중 오늘 이야기하는 woff2를 표현하지 못하고 404에러를 뿜어내면서 적용되지 못하는 현상을 어떻게 해결할 것인지에 대해 그동란 뻘짓하면서 알아낸 내용을 공유하고자 합니다.

이는 webpagetest.org에서 테스트해보면 다른 항목들은 제대로 작동하는데 woff2는 작동하지 않는 것을 알 수 있습니다.

2. 폰트어썸 (Font Awesome) 적용 시 점검 사항

왜 이런 문제가 발생하는 것일까요?

저도 처음에는 어떻게 접근해야할지 몰라서 너무 당황했고 몇달동안 그냥 무시했습니다.

사이트 운영에서 큰 문제는 없었기 때문에요. 아마 어느 부분이제대로 표현되지 않았을텐데 그냥 감내하기로 한것이지요.

그러는 가운데 이문제를 한번 풀어야겠다고 마음먹고 엄청난 구글링 작업에 들어갔습니다.

2.1. MIME 타입에 woff2가 등록되었는지 확인

그러면서 어쩌면 당연하겠지만 woff2를 MIME 타입에 등록한다는 사실을 알게되었습니다. 초심자라 모르는게 너무 많군요!!!!!!

  • 폰트, 이미지, 텍스트 등 대부분의 형식들은 MIME 타입을 등록합니다.
  • woff2 파일 형식이 등장했던 시기에 이 파일을 woff2를 어떻게 등록할 것인지에 대한 가이드가 많이 있었습니다.

아는 nginx라면 /etc/nginx/mime.types라는 파일에 정의되어 있습니다. 여기에서 woff2가 제대로 등록되어 있는지 확인해보면 됩니다.

대부분 아래처럼 등록이 되어 있습니다.

font/woff   woff;
font/woff2   woff2;

2.2. 웹서버 설정 확인 – woff2가 전부 반영되었는지

웹서버 설정에서 별다른 설정을 하지 않았다면 별 문제가 없을지도 모릅니다.

그러나 대부분 내용이 쉽게 변하지않는 파일의 경우 속도 향상을 캐싱하도록 만드는 옵션을 적용하고는 합니다.

아래는 nginx에서 적용했던 옵션인데요.

location ~ \.(?:asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|ogv|otf|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|t?gz|tif|tiff|ttf|wav|webm|wma|woff|wri|xla|xls|xlsx|xlt|xlw|zip)$ {
    expires 31536000s;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
}

여기를 보시면 woff는 있는데 woff2는 없다는 것을 알 수 있습니다.

이 옵션이 사용 유무를 결정하는 것은 아닐텐데요. 여기에 없다는 이유로 woff2는 작동하지 않더군요.

그래서 여기 리스트에 woff2를 넣어주었습니다. 그랬더니 아무일 없었다는 듯 작동하더군요..

조금 허무했습니다. 최종 적용 옵션입니다.

location ~ \.(?:asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|ogv|otf|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|t?gz|tif|tiff|ttf|wav|webm|wma|woff|woff2|wri|xla|xls|xlsx|xlt|xlw|zip)$ {
    expires 31536000s;
    include /etc/nginx/security-headers.conf;

여기서 include /etc/nginx/security-headers.conf;를 삽입한 이유를 간단히 설명하죠.

이전에 설명한 “[쇼핑몰 보안] NGINX에서 HTTP 보안 헤더(Security Headers) 적용 時 주의점“에서 설명한 내용과 같습니다.

즉 nginx는 보안 헤더관련 명령이 뒤에 나오면 앞에서 설정한 모든 보안 헤더관련 옵션이 무효화됙 때문에 보안 헤더 적용을 파일을 블러오는 것으로 처리했기 때문입니다.

[참고] Apache와 IIS에서 woff2 등록 방법

아마 최근에 설치된 최신 웹서버라면 woff2는 기본으로 등록되어 있겠지만 Apache와 IIS에서 woff2를 등록하는 방법은 아래와 같다고 합니다.

Apache에서 woff2 등록하기

.htaccess 파일에 아래 내용을 추가합니다.

# MIME Mappings
AddType font/woff .woff
AddType font/woff2 .woff2

IIS에서 woff2 등록하기

IIS 엡서버를 사용하는 경우에는 woff2는 아래와 같은 스니펫(snippet)을 추가해 해결할 수 있습니다.

<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
  </system.webServer>
</configuration>

댓글 남기기

Close Menu
×
×

Cart