"a"가 내 머릿속을 휩쓴 이유: 숨겨진 폰트 기능 해제하기

카테고리

디자인

서브카테고리

디자인 툴

대상자

웹 디자이너, 프론트엔드 개발자, 특히 Next.js와 Tailwind CSS를 사용하는 개발자

핵심 요약

• 폰트의 글리프(glyph)는 동일한 문자에 대해 서로 다른 디자인을 제공하며, font-feature-settings 속성을 통해 조절 가능
• Next.js + Google Fonts 사용 시 OpenType 기능 제한 발생 → 자체 호스팅이 필수적
• "cv02"와 같은 OpenType 기능 코드를 통해 "a" 글리프의 스타일 변경 가능

섹션별 세부 요약

1. 동일한 폰트가 왜 다른가?

• Brittany Chiang의 포트폴리오와 작성자의 사이트에서 Inter 폰트 사용 확인
• "a" 글리프의 두 가지 형태(두층 vs 한층)를 시각적으로 비교
• 동일한 폰트지만 디자인 차이로 인한 혼란 발생

2. 글리프와 OpenType 기능

• 글리프(glyph): 동일한 문자에 대한 대체 디자인 (예: "a"의 두 종류)
• OpenType 기능: 폰트에 포함된 확장 기능 (예: cv02는 한층 "a" 스타일)
• font-feature-settings: "ss07"과 같은 CSS 속성으로 글리프 변경 가능

3. Next.js + Tailwind CSS의 한계

• next/font/google을 통해 Google Fonts 불러올 경우 OpenType 기능 지원 미비
• 폰트 가로채기(font-feature-settings) 적용 실패
• 자체 호스팅이 필요한 이유: 모든 글리프 변형을 활용하기 위해

4. 자체 호스팅 구현 방법

• Inter 폰트 다운로드: GitHub에서 InterVariable.woff2 파일 직접 다운로드
• Next.js 설정: next/font/local을 사용해 로컬 폰트 등록
• CSS 적용: globals.css에 --font-sans--font-feature-settings 속성 정의

결론

• OpenType 기능을 활용해 폰트 디자인을 세부적으로 제어할 수 있음
• Google Fonts 사용 시 자동으로 지원되지 않는 기능이 존재 → 자체 호스팅을 통해 확장성 확보
• font-feature-settings: "cv02"와 같은 코드를 사용해 "a" 글리프의 현대적인 스타일 적용 가능