WOFF2
1. 개요
1. 개요
WOFF2는 웹 페이지에서 글꼴을 효율적으로 제공하기 위한 웹 폰트 파일 포맷이다. 구글이 주도하여 개발했으며, 2012년에 최초로 등장했다. 이 포맷은 웹 개발과 웹 디자인 분야에서 웹 폰트의 로딩 성능을 개선하는 데 중요한 역할을 한다.
WOFF2는 WOFF 포맷의 후속 버전으로, 더욱 진보된 압축 기술을 사용하여 파일 크기를 줄인다. 이는 웹 표준 기구인 W3C의 권고안으로 채택되어 현대적인 브라우저에서 널리 지원된다. 파일 크기의 감소는 웹사이트의 로딩 속도를 높이고, 사용자에게 더 나은 경험을 제공하며, 데이터 사용량을 절약하는 데 기여한다.
이 포맷은 트루타입 폰트나 오픈타입 폰트와 같은 기존의 글꼴 파일을 압축하여 패키징하는 컨테이너 역할을 한다. 따라서 웹폰트를 사용하는 모든 CSS 기반 프로젝트에서 활용될 수 있으며, 반응형 웹 디자인과 접근성 향상에 필수적인 요소가 되었다.
2. 개발 배경
2. 개발 배경
WOFF2는 웹 폰트 파일 포맷으로, 2012년에 구글에 의해 처음 제안되었다. 이 포맷의 개발은 웹에서 글꼴 사용이 급증하면서 발생한 성능 문제를 해결하기 위한 배경에서 시작되었다. 초기 웹 폰트 포맷인 EOT, TTF, OTF는 파일 크기가 커서 웹 페이지 로딩 속도를 저하시키는 주요 원인이 되었다.
이를 개선하기 위해 W3C 표준으로 채택된 WOFF 포맷이 등장했으나, 여전히 더 나은 압축 효율과 빠른 전송이 요구되었다. 구글은 구글 폰트와 같은 대규모 웹 폰트 서비스를 운영하며 축적한 경험을 바탕으로, 차세대 포맷인 WOFF2를 개발하여 제안하게 된다. 이는 웹 페이지의 로딩 속도를 개선하고 데이터 사용량을 줄여, 전반적인 사용자 경험을 향상시키기 위한 목적이었다.
3. 기술적 특징
3. 기술적 특징
3.1. 압축 알고리즘
3.1. 압축 알고리즘
WOFF2는 브로틀리 압축 알고리즘을 사용한다. 이 알고리즘은 구글이 개발한 무손실 데이터 압축 기술로, LZ77 및 허프만 코딩과 같은 기법을 결합하여 높은 압축률을 제공한다. WOFF가 사용하던 zlib 기반의 DEFLATE 알고리즘에 비해 브로틀리는 일반적으로 더 작은 파일 크기를 생성한다.
이 압축 방식은 특히 트루타입 폰트나 오픈타입 폰트의 테이블 데이터를 효율적으로 압축하도록 설계되었다. 브로틀리는 사전 압축 단계를 통해 데이터의 반복 패턴을 더 효과적으로 찾아내고, 압축된 데이터는 WOFF2 파일의 'compressedData' 필드에 저장된다. 결과적으로 동일한 글꼴 파일을 WOFF 포맷으로 변환했을 때보다 WOFF2 포맷에서는 파일 크기가 약 30% 정도 더 줄어드는 효과를 보인다.
이러한 향상된 압축률은 웹 폰트 사용의 가장 큰 장애물 중 하나인 파일 크기 문제를 완화한다. 더 작은 파일은 네트워크 대역폭을 덜 사용하고, 웹 페이지의 로딩 속도를 개선하며, 사용자의 데이터 요금 절감에도 기여할 수 있다. 브로틀리 알고리즘의 도입은 WOFF2가 웹 표준으로 채택되는 데 중요한 기술적 기반이 되었다.
3.2. 파일 구조
3.2. 파일 구조
WOFF2 파일의 구조는 WOFF 1.0의 구조를 기반으로 하여, 더 효율적인 압축을 위해 브로틀리 압축 알고리즘을 사용하는 점이 핵심적인 차이점이다. 기본적으로 폰트 파일(트루타입 또는 오픈타입)의 데이터를 브로틀리로 압축한 후, 메타데이터와 프라이빗 데이터를 담을 수 있는 구조로 감싸는 컨테이너 형식을 취한다.
파일은 크게 파일 헤더, 테이블 디렉토리, 압축된 폰트 데이터, 그리고 선택적인 확장 데이터 영역으로 구성된다. 파일 헤더에는 서명, 버전, 파일 전체 크기, 압축 해제된 원본 폰트 크기 등 기본 정보가 포함된다. 테이블 디렉토리는 원본 폰트 파일 내 각 데이터 테이블의 위치와 크기 정보를 담고 있으며, 이 정보를 바탕으로 압축된 데이터 블록을 해석한다. 모든 폰트 데이터는 단일 브로틀리 압축 스트림으로 처리되어 파일 크기를 최소화한다.
WOFF2는 WOFF 1.0에 비해 구조적 복잡성을 줄이고 압축 효율을 극대화하는 방향으로 설계되었다. 예를 들어, 트루타입 폰트의 글리프 데이터를 재배열하고 중복 정보를 제거한 후 압축하는 트랜스폼 과정을 도입하여, 동일한 글꼴에 대해 WOFF보다 훨씬 작은 파일 크기를 달성할 수 있다. 이러한 구조적 최적화는 웹 폰트의 로딩 속도와 대역폭 사용 효율을 크게 개선하는 데 기여한다.
3.3. WOFF와의 차이점
3.3. WOFF와의 차이점
WOFF2는 이전 버전인 WOFF 포맷의 한계를 극복하고자 개발되었다. 가장 핵심적인 차이는 압축 알고리즘에 있다. WOFF가 ZIP 기반의 DEFLATE 압축을 사용한 반면, WOFF2는 구글이 개발한 Brotli 압축 알고리즘을 채택했다. 이로 인해 동일한 글꼴 데이터를 더 작은 파일 크기로 압축할 수 있게 되었으며, 이는 웹 페이지의 로딩 속도 개선과 대역폭 절감에 직접적으로 기여한다.
파일 구조 측면에서도 차이가 있다. WOFF2는 메타데이터와 프라이빗 데이터 블록을 선택적으로 지원하며, 내부의 글리프 데이터를 더 효율적으로 재배열하고 압축할 수 있는 구조를 가진다. 이러한 구조적 최적화는 압축률을 한층 높이는 데 기여한다. 결과적으로 WOFF2는 WOFF에 비해 평균 30% 정도 더 작은 파일 크기를 제공하는 것으로 알려져 있다.
하지만 이러한 개선점에도 불구하고, WOFF2는 WOFF와의 완전한 하위 호환성을 제공하지는 않는다. 새로운 압축 방식과 구조를 사용하기 때문에, WOFF를 지원하던 구형 브라우저나 도구는 WOFF2 파일을 인식하지 못할 수 있다. 따라서 현대적인 웹 개발에서는 두 포맷을 모두 제공하여 호환성 범위를 최대화하는 것이 일반적인 관행이다.
4. 장점
4. 장점
WOFF2는 웹 폰트 파일 포맷으로, WOFF의 후속 포맷으로 개발되었다. 이 포맷의 가장 큰 장점은 우수한 압축 효율성이다. 구글이 개발한 Brotli 압축 알고리즘을 기반으로 하여, 동일한 글꼴 데이터를 WOFF 포맷보다 평균 30% 더 작은 파일 크기로 압축할 수 있다. 이는 웹 페이지의 로딩 속도를 개선하고 대역폭 사용량을 줄이는 데 직접적으로 기여한다.
파일 크기가 줄어들면 사용자 경험도 향상된다. 모바일 환경이나 네트워크 속도가 느린 지역에서도 웹 폰트를 더 빠르게 다운로드할 수 있어, 텍스트가 늦게 표시되는 현상을 줄일 수 있다. 또한, 웹사이트 운영자에게는 호스팅 비용 절감과 콘텐츠 전송 네트워크 사용 효율 증가라는 경제적 이점을 제공한다.
웹 표준으로 채택된 포맷이라는 점도 중요한 장점이다. 월드 와이드 웹 컨소시엄의 권고안으로 자리 잡았기 때문에, 주요 웹 브라우저들이 지속적으로 지원을 확대하고 있다. 이는 개발자들이 호환성 문제를 크게 걱정하지 않고도 폰트 파일을 최적화된 상태로 배포할 수 있게 해준다. 결과적으로 WOFF2는 현대 웹 개발과 웹 디자인에서 빠른 사이트 성능과 풍부한 타이포그래피 표현을 동시에 실현하는 핵심 기술 중 하나로 자리매김했다.
5. 브라우저 지원 현황
5. 브라우저 지원 현황
WOFF2는 2012년 구글에 의해 제안된 이후, 주요 웹 브라우저들의 지속적인 지원을 통해 현재는 사실상의 웹 폰트 표준 포맷으로 자리 잡았다. 초기에는 구글 크롬과 오페라 브라우저가 가장 먼저 이 포맷을 지원하기 시작했으며, 이후 모질라 파이어폭스, 애플 사파리, 마이크로소프트 엣지 등 모든 현대적인 브라우저가 WOFF2를 지원하게 되었다.
브라우저 지원 범위는 매우 넓어, 구글 크롬 36 버전, 파이어폭스 39 버전, 사파리 10 버전, 엣지 14 버전 이상부터 완전히 지원한다. 이는 대부분의 사용자가 접근하는 브라우저 환경에서 WOFF2 폰트를 안정적으로 사용할 수 있음을 의미한다. 특히 모바일 장치의 브라우저에서도 광범위하게 지원되어, 반응형 웹 디자인과 모바일 퍼스트 접근 방식에 필수적인 요소가 되었다.
개발자는 CSS의 @font-face 규칙 내에서 폰트 파일을 선언할 때, 우선적으로 WOFF2 포맷을 지정하고, 하위 호환성을 위해 WOFF 포맷을 대체 폴백으로 제공하는 것이 일반적인 방법이다. 이렇게 하면 WOFF2를 지원하는 최신 브라우저에서는 더 작은 파일 크기로 폰트를 로드하여 성능 이점을 얻고, 지원하지 않는 오래된 브라우저에서는 WOFF 포맷으로 폰트가 표시되도록 할 수 있다. 이러한 광범위한 지원과 성능상의 장점으로 인해 WOFF2는 현대 웹 표준과 웹 성능 최적화의 핵심 요소 중 하나로 평가받고 있다.
6. 사용 방법
6. 사용 방법
6.1. CSS에서의 선언
6.1. CSS에서의 선언
WOFF2 폰트 파일을 웹 페이지에서 사용하려면 CSS의 @font-face 규칙을 통해 선언해야 한다. 이 규칙은 사용자 정의 글꼴을 정의하고, 폰트 파일의 소스 위치와 형식을 명시하는 데 사용된다. 선언 시 src 속성 안에 폰트 파일의 URL을 지정하고, format('woff2')를 함께 명시하여 브라우저가 파일 형식을 인식하도록 돕는다. 또한 font-family 속성으로 폰트에 사용할 이름을 정의하고, font-weight나 font-style 등의 속성을 통해 글꼴의 세부 스타일을 지정할 수 있다.
실제 사용 예시는 다음과 같다. 먼저 @font-face 블록으로 WOFF2 폰트를 로드한 후, 선택자에서 정의한 font-family 이름을 사용하여 해당 글꼴을 적용한다. 이때 src 속성에는 WOFF나 트루타입 폰트 등 다른 형식의 폰트 파일을 대체 소스로 함께 나열하는 것이 일반적이다. 브라우저는 지원하는 첫 번째 형식의 파일을 다운로드하여 사용하므로, 호환성을 높이기 위해 WOFF2를 우선 순위로 두고 그 뒤에 구형 형식을 배치하는 것이 좋다.
이러한 선언은 HTML 문서의 <head> 섹션 내에 <style> 태그를 사용해 직접 삽입하거나, 외부 CSS 파일에 작성하여 링크로 연결할 수 있다. 구글 폰트와 같은 웹 폰트 서비스를 이용할 경우, 서비스에서 제공하는 코드 스니펫에 이미 최적화된 @font-face 선언이 포함되어 있어 이를 그대로 사용하면 된다. 올바르게 선언된 WOFF2 폰트는 페이지의 텍스트 요소에 적용되어 시각적 디자인을 향상시킨다.
