TTF vs OTF vs WOFF: 글꼴 형식 차이와 선택법

TrueType은 넷 중 가장 오래된 형식입니다. Apple이 1991년 System 7과 함께 내놓았고, 이듬해 Microsoft가 Windows 3.1에 채택했습니다. TrueType 글꼴은 모든 글자를 2차 곡선으로 그리는데, 곡선 구간마다 제어점이 하나뿐이라 초기 하드웨어에서도 가볍게 그릴 수 있었습니다. 또한 힌팅을 담고 있습니다. 힌팅은 글꼴 안에 든 작은 프로그램으로, 글자의 줄기와 곡선을 픽셀 격자에 맞게 살짝 옮겨 저해상도 화면에서도 글자가 또렷하게 보이도록 합니다. .ttf 확장자는 지금도 이런 2차 곡선 윤곽을 가진 글꼴을 뜻합니다.

OpenType은 1996년 Microsoft와 Adobe가 발표한 형식으로, 새로운 윤곽 방식이라기보다 일종의 포장재입니다. TrueType 윤곽을 담을 수도 있고, CFF 테이블에 저장된 PostScript 윤곽을 담을 수도 있습니다. PostScript 윤곽은 구간마다 제어점이 두 개인 3차 곡선을 씁니다. OpenType은 이 윤곽에 고급 타이포그래피용 레이아웃 테이블을 더합니다. 표준 합자와 임의 합자, 스몰 캡, 올드스타일 숫자, 스타일 세트, 문맥 대체 글리프, 커닝이 여기에 들어갑니다. 관례상 CFF 기반 OpenType 글꼴은 .otf로 저장하고, TrueType 윤곽을 쓰는 OpenType 글꼴은 .ttf 확장자를 그대로 씁니다.

WOFF와 WOFF2는 웹을 위해 만든 포장 형식입니다. WOFF는 2009년에 초안이 나와 2012년 W3C 권고안이 되었고, 글꼴 테이블을 하나씩 zlib으로 압축합니다. WOFF2는 2018년 W3C 권고안이 되었으며 Brotli 압축으로 바꾸고 글리프 데이터를 먼저 전처리해, 보통 WOFF보다 약 30% 작습니다. 곁가지 형식도 세 가지 있습니다. EOT는 Internet Explorer 전용 웹 글꼴 형식이었고, SVG 글꼴은 초기에 Safari에서만 쓰던 임시방편이었으며, 2016년 OpenType 1.8에 추가된 가변 글꼴은 여러 굵기나 너비를 파일 하나에 담습니다.

TTF든 OTF든 설치하면 되고, 둘 중 무엇인지 고민할 필요는 없습니다. Windows 10과 11에서는 둘 다 마우스 오른쪽 버튼을 누르고 설치를 고르면 되고, macOS에서는 둘 다 서체 관리자에서 열리며, Linux 데스크톱은 글꼴 캐시가 새로 고쳐지면 ~/.local/share/fonts에 넣은 글꼴을 인식합니다. Word, Photoshop, Figma 데스크톱 앱, Affinity, LibreOffice 모두 두 형식을 읽습니다. 디자이너가 같은 패밀리를 두 형식으로 보내 왔다면, 보통 OTF는 서체 디자이너가 직접 작업한 원본이고 TTF는 오래된 소프트웨어용으로 변환한 파일입니다.

차이가 문제가 되는 경우는 많지 않습니다. 일부 커팅기·자수 프로그램, 게임 엔진, 마이크로컨트롤러용 디스플레이 라이브러리는 TrueType 윤곽만 이해하기 때문에 CFF 기반 OTF가 깨져 보이며, 이럴 때는 OTF를 TTF로 변환해야 합니다. 반대로 데스크톱에서는 WOFF나 WOFF2를 바로 설치할 수 없습니다. 이 파일들은 브라우저용으로 포장된 것이기 때문입니다. 한 패밀리는 한 가지 버전만 설치하세요. 내부 이름이 같은 TTF와 OTF가 함께 있으면 글꼴 메뉴가 헷갈리고 앱이 엉뚱한 쪽을 고를 수 있습니다.

현재 버전의 Chrome, Edge, Firefox, Safari는 모두 WOFF2를 읽으므로, @font-face 규칙에서 WOFF2를 첫 번째, 많은 경우 유일한 소스로 두면 됩니다. 분석 도구에 대략 2016년 이전 브라우저, 예를 들어 오래된 Android WebView나 TV 내장 브라우저가 아직 잡힌다면 그때만 WOFF 줄을 뒤에 추가하세요. 브라우저는 src 목록을 순서대로 훑어 지원하는 첫 번째 형식을 내려받기 때문에, 대체 형식을 넣어도 최신 브라우저 방문자에게는 아무 부담이 없습니다. 데스크톱용 TrueType 파일이 이미 있다면 TTF WOFF 변환으로 대체 파일을 한 번에 만들 수 있습니다.

일부 이메일 빌더나 오래된 CMS처럼 플랫폼이 강제하는 경우가 아니라면, 사이트에 TTF나 OTF 원본을 그대로 올리지 마세요. 브라우저는 문제없이 렌더링하지만, 서버가 글꼴을 gzip으로 압축하지 않는 한 파일이 압축 없이 전송되고, 누구에게나 바로 설치할 수 있는 데스크톱용 사본을 건네는 셈이 됩니다. 아래 예시의 font-display: swap 줄은 글꼴이 도착할 때까지 최대 3초 동안 글자를 숨기는 대신, 대체 글꼴로 글자를 즉시 보여 주다가 글꼴이 도착하면 바꿔 끼우라고 브라우저에 지시합니다.

가능하면 파일을 자체 도메인에서 호스팅하세요. 이제 Chrome, Safari, Firefox는 사이트별로 캐시를 분리하므로 공용 CDN에서 받은 글꼴이 다른 웹사이트에서 재사용되지 않으며, 자체 호스팅하면 DNS 조회와 연결 한 번을 아낄 수 있습니다. <link rel="preload">는 첫 화면에 쓰이는 한두 가지 굵기에만 넣으세요. 모든 스타일을 미리 불러오면 이미지와 대역폭을 다투게 됩니다.

라틴 문자 본문용 굵기 하나를 WOFF2로 저장하면 보통 20–60 KB입니다. 같은 글꼴을 압축하지 않은 TTF로 두면 두세 배 커지는 경우가 많고, 그리스 문자, 키릴 문자, 베트남어까지 담은 패밀리는 스타일 하나당 200 KB를 넘기도 합니다. 한중일 글꼴은 차원이 다릅니다. CJK 글꼴은 굵기 하나에 수만 개의 글리프가 들어 있어 WOFF2로 압축해도 보통 수 MB에 이르며, 페이지가 글자를 보여 주기 전에 불러오기에는 지나치게 큽니다.

서브셋은 페이지에서 쓰지 않는 문자를 덜어 내는 작업이고, unicode-range는 파일이 어떤 문자를 담당하는지 브라우저에 알려 주어 페이지에 실제로 그 문자가 있을 때만 파일을 내려받게 합니다. Google Fonts는 CJK 글꼴에 바로 이 방식을 써서, 패밀리마다 작은 조각 여러 개로 나눠 필요할 때 불러옵니다. 직접 쓰는 글꼴이라면 글꼴 변환기의 남길 문자 옵션으로 라틴 + 악센트나 직접 입력한 문자만 남기도록 파일을 줄인 뒤 서버에 올리세요. 컴퓨터에 설치할 글꼴은 모든 문자를 유지하세요.

TrueType 계열 글꼴이라면 TTF에서 OTF로, 또는 그 반대로 바꾸는 일은 컨테이너만 바꾸는 작업입니다. 윤곽 테이블, 메트릭, 레이아웃 기능이 그대로 옮겨집니다. 눈여겨볼 경우는 CFF 기반 OTF를 TTF로 바꿀 때입니다. 3차 곡선은 2차 곡선 형식에 그대로 복사할 수 없으므로, 곡선마다 하나 이상의 2차 곡선 구간으로 다시 그리며 오차는 한 픽셀보다 훨씬 작은 범위로 맞춥니다. PostScript 힌트도 옮길 수 없기 때문에 OTF TTF 변환 도구는 힌팅 옵션을 유지, 제거, 자동 힌팅 중에서 고르게 합니다.

가장 흔한 변환은 웹용 글꼴을 다시 데스크톱용으로 바꾸는 것입니다. 테마나 디자인 키트를 받았는데 .woff나 .woff2 파일뿐이라 Word나 Figma에서 쓸 수 없는 경우입니다. WOFF TTF 변환은 압축을 풀고 원래 테이블을 다시 써내므로 글리프, 커닝, 기능이 들어간 그대로 나옵니다. 다만 웹 버전에서 이미 빠진 것, 예를 들어 서브셋으로 제거된 문자나 용량을 아끼려고 지운 힌트는 되살릴 수 없습니다.

변환 문제는 대부분 힌팅, 레이아웃 기능, 가변 축 세 가지에서 비롯됩니다. 아래 목록은 변환 후 눈에 띄기 쉬운 증상과 그 일반적인 원인을 정리한 것입니다.

글꼴 파일은 작은 데이터베이스이며, 그중 세 부분을 보면 대부분의 궁금증이 풀립니다. name 테이블에는 패밀리 이름, 스타일 이름, 버전, 저작권 문구, 그리고 흔히 라이선스 URL이 들어 있습니다. macOS 서체 관리자에서는 정보 보기에서, Windows에서는 글꼴 미리 보기의 첫 몇 줄에서 확인할 수 있습니다. 글리프 범위는 그 글꼴로 어떤 언어를 조판할 수 있는지 알려 줍니다. 라틴 문자 전용 글꼴은 폴란드어, 튀르키예어, 베트남어 문자 중 없는 글자를 아무 경고 없이 다른 서체로 대체합니다. 가변 글꼴이라면 fvar 테이블에 굵기 100–900이나 너비 75–125 같은 축이 나열됩니다.

무엇이든 온라인에 올리기 전에 라이선스는 한 번 확인할 가치가 있습니다. 상업 폰트 회사는 데스크톱, 웹, 앱 라이선스를 따로 파는 경우가 많고, 데스크톱 라이선스는 보통 정해진 대수의 컴퓨터에 설치하는 것만 허용할 뿐 웹사이트 방문자에게 파일을 제공하거나 모바일 앱에 포함하는 것은 허용하지 않습니다. 글꼴을 변환하면 파일 형식이 바뀔 뿐 라이선스는 바뀌지 않으므로, 데스크톱용 TTF로 만든 WOFF2에도 TTF와 같은 조건이 적용됩니다. Google Fonts의 대부분을 차지하는 SIL Open Font License 글꼴은 변환, 서브셋, 자체 호스팅이 모두 허용됩니다.

글꼴 고민은 대부분 파일이 어디에 놓일지로 정리됩니다. 컴퓨터에 설치하거나 앱에 포함한다면 TrueType이나 OpenType을, 브라우저가 내려받는다면 압축된 웹용 형식을 쓰세요. 아래 표는 흔한 작업별로 골라야 할 형식과 그 형식을 얻는 변환 방법을 정리했으니, 역사는 건너뛰고 필요한 파일로 바로 가면 됩니다.

두 범주 사이에 걸친 작업도 있습니다. EPUB 3는 TTF, OTF, WOFF를 모두 받으므로 전자책은 어느 쪽 형식이든 쓸 수 있습니다. SVG 글꼴 파일은 벡터 그래픽과 같은 계보에 속하지만, 지금은 브라우저보다 일부 플로터·각인 소프트웨어에서 주로 쓰입니다.