AWS S3에 폰트 업로드해서 사용하기
웹폰트
웹사이트를 만들 때면 항상 폰트에 대한 고민을 하게 된다. CSS에 폰트만 지정되어 있다면, 해당 폰트는 사용자의 컴퓨터에서 불러온다. 하지만 사용자의 컴퓨터에 폰트가 설치되어있지 않다면? 사용자는 우리가 생각하는 화면과는 다른 화면을 보게 된다. 요즘은 이 문제를 해결하기 위해 웹폰트를 많이 사용한다.
웹폰트는 사용자의 컴퓨터가 아닌, 개발자가 지정해놓은 위치에서 폰트를 가져와서 사용자에게 제공한다. 웹폰트를 사용할 경우, 사용자의 컴퓨터에 폰트가 없어도 우리가 원하는 폰트를 사용자가 사용할 수 있게 되는 것이다.
하지만 웹폰트를 사용할 때는 고려해야 할 것들이 많다. 웹폰트 파일의 크기, 전송 속도, 렌더링 순서와 방식 등을 고려해서 적용해야 한다. 이에 대해서는 잘 설명된 포스팅 URL을 참고
참고: https://d2.naver.com/helloworld/4969726
웹폰트 사용하기
웹폰트를 사용할 때는 주로 CDN을 활용하게 된다. 소규모의 웹사이트라면, AWS S3를 사용하면 된다. 이 포스트에서는 AWS S3를 활용한다.
AWS S3에 버킷을 생성하고, 준비된 폰트를 public 읽기 권한으로 업로드한다. 이 때, 파일 형식은 woff로 업로드 했다. 브라우저 범용성이 가장 좋은 폰트 포맷이기 때문이다. MS 브라우저 9.0 이상 및 기타 브라우저에서 모두 사용 가능하다. 성능을 높이려면 여러 포맷을 모두 활용하면 된다.
웹폰트 활용에 대해 더 알고 싶다면, 다음 글을 참고
CORS policy
AWS S3에 폰트 파일을 올려도, 바로 사용할 수는 없다. CORS(Cross-Origin Resource Sharing) policy 때문이다. 웹 폰트는 CSS 파일(혹은 SCSS 파일)에서 AWS S3의 파일 URL을 통해 불러오게 된다. 이 경우, 브라우저의 입장에서는 A 도메인에 정보를 요청했는데, B 도메인에도 정보를 요청해야 하는 것이 된다. 브라우저는 이를 보안상 위험하다고 간주하고 B 도메인에 보내는 요청을 하지 않는다. 그러면 사용자의 브라우저는 S3에 올라가 있는 웹폰트를 받아오지 못하고, 다른 폰트로 화면을 보여준다.
이를 해결하기 위해서는 CORS policy를 선언하고, A 도메인에 접속해도 B 도메인과 통신할 수 있도록 설정해야 한다.
참고: https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS
AWS S3 Bucket CORS policy 설정
CORS policy는 S3 Bucket에 선언한다.
1. ‘AWS S3 버킷 홈’에서 해당 bucket 클릭
2. ‘권한’ 클릭
3. ‘CORS 구성’ 클릭
4. ‘CORS 구성 편집기’에 본인의 CORS configuration 입력
예시)
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>https://jeesub.github.io</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>