Overview

flutter 에서 pretendard 폰트를 적용해보자.

Pretendard

Pretendard는 웹 및 모바일 UI 디자인에서 많이 사용되는 오픈 소스 한글 서체이다. 주로 Apple의 시스템 폰트인 San Francisco와 Google의 Noto Sans, Roboto 같은 폰트를 대체하기 위해 설계되었다.

Pretendard의 주요 특징

• 다양한 문자 지원: Pretendard는 한글뿐만 아니라 라틴 문자, 일본어, 그리고 한자 등 다양한 문자를 지원합니다. 이는 다국어 웹사이트나 애플리케이션에서 일관된 글꼴 스타일을 유지할 수 있게 해줍니다.

• 가독성: Pretendard는 UI 및 UX 디자인에 최적화된 가독성을 제공합니다. 작은 화면이나 다양한 해상도에서도 읽기 쉽도록 설계되었기 때문에 모바일 환경에서도 매우 유리합니다.

• 고해상도 디스플레이 지원: Pretendard는 레티나 디스플레이나 4K 모니터와 같은 고해상도 디스플레이에서도 뛰어난 품질을 유지합니다. 이는 디자이너들이 다양한 디바이스에서 일관된 시각적 품질을 보장할 수 있게 해줍니다.

• 가변 글꼴 (Variable Font) 지원: Pretendard는 가변 글꼴을 지원하므로, 하나의 파일로 다양한 굵기(weight)와 스타일을 제공할 수 있습니다. 이는 웹페이지의 로딩 시간을 줄이고, 다양한 스타일의 조합을 가능하게 합니다.

• 웹폰트 최적화: Pretendard는 웹 환경에서 효율적인 로딩을 위해 최적화되어 있습니다. 글꼴 파일의 용량이 비교적 작아, 웹페이지의 성능을 저해하지 않으면서도 풍부한 타이포그래피를 구현할 수 있습니다.

Pretendard의 사용 이점

• 일관성: Pretendard는 다양한 운영체제와 브라우저에서 일관된 디자인을 유지할 수 있습니다. 이는 프로젝트의 비주얼 일관성을 유지하는 데 중요한 요소입니다.

• 디자인 유연성: Pretendard는 여러 굵기와 스타일을 제공하여 다양한 디자인 요소와 조화를 이룹니다. 이를 통해 텍스트 계층 구조를 쉽게 정의하고, 다양한 시각적 효과를 구현할 수 있습니다.

• 호환성: Pretendard는 CSS에서 쉽게 적용 가능하며, 다양한 웹 브라우저와 모바일 디바이스에서 잘 작동합니다. 이는 개발자들이 다양한 플랫폼에서 안정적인 텍스트 렌더링을 구현할 수 있게 해줍니다.

• 경량화: Pretendard는 가변 폰트로 구현되어 폰트 파일 크기를 줄이고, 여러 스타일을 하나의 폰트 파일로 제공하므로 페이지 로딩 속도를 향상시킬 수 있습니다.

• 자체 시스템 폰트와의 호환성: Pretendard는 Apple의 San Francisco와 유사한 디자인을 가지고 있어 macOS나 iOS 환경에서 시스템 폰트와 자연스럽게 어우러집니다. 또한, Windows 환경에서도 호환성이 뛰어나 시스템 전반에 걸쳐 일관된 사용자 경험을 제공합니다.

• 오픈 소스: Pretendard는 오픈 소스 폰트로서, 상업적 프로젝트에서도 자유롭게 사용이 가능합니다. 이는 라이선스 문제로부터 자유로울 수 있어 운영체제의 기본 서체로 채택하기에도 유리합니다.

결론

Pretendard는 다국어 지원, 고해상도 지원, 그리고 가변 글꼴 기능을 제공하여 디자인과 개발에 있어 다양한 이점을 제공합니다. 디자이너에게는 일관된 디자인 구현을, 개발자에게는 호환성과 경량화 이점을, 그리고 운영체제 관점에서는 시스템 전반의 통일성을 제공하는 매우 유용한 서체입니다.

폰트 다운로드

https://cactus.tistory.com/306

다운로드 후 압축해제하여 public > static > alternative 로 이동. .ttf 확장자를 사용한다.

ttf vs otf

일반적으로 flutter 는 ttf 와 otf 를 모두 사용가능하다. 하지만 글자를 변형하는 고급 기능을 사용할 것이 아니라면 용량이 작은 ttf 를 사용한다.

TTF

• TTF는 Apple과 Microsoft가 개발한 폰트 형식입니다. 벡터 기반의 형식으로, 대부분의 글꼴이 단일 곡선과 직선을 사용해 정의됩니다. 모든 글꼴 크기에서 안정적으로 작동하도록 설계되었습니다.
• 상대적으로 간단한 구조를 가지고 있으며, 주로 기본적인 타이포그래피 기능만을 제공합니다.
• 대부분의 운영체제와 프로그램에서 기본적으로 지원되며, 특히 Windows 환경에서 널리 사용됩니다.
• 일반적으로 OTF보다 크기가 작습니다.

OTF

• OTF는 Adobe와 Microsoft가 협력하여 개발한 폰트 형식입니다. OTF는 TTF의 확장된 버전으로, PostScript와 TrueType의 장점을 결합하여 만들어졌습니다. OTF는 더 복잡한 타이포그래피 기능을 제공하며, 고급 기능(예: 리가처, 소형 대문자, 다양한 글자 변형 등)을 포함할 수 있습니다.

• OTF는 TTF가 제공하는 기능 외에도 고급 타이포그래피 기능을 제공합니다. 예를 들어, 서체에 따라 다양한 글자 스타일이나 리가처(특정 글자 조합을 다르게 표시하는 기능)를 포함할 수 있습니다.

• OTF도 널리 지원되지만, 일부 오래된 시스템이나 소프트웨어에서는 OTF의 고급 기능이 제대로 지원되지 않을 수 있습니다.

• 더 많은 기능과 데이터를 포함하고 있어 TTF보다 파일 크기가 클 수 있습니다.

assets 에 폰트 가져오기

프로젝트 최상단에 assets 폴더 생성 -> fonts 폴더 생성 -> .ttf 파일 가져오기

pubspec.yaml 수정

pubspec.yaml 파일은 Flutter 프로젝트에서 매우 중요한 설정 파일로, 여러 가지 설정과 의존성을 관리하는 데 사용된다. 이 파일은 프로젝트의 메타데이터, 패키지 의존성, 자산 관리, 폰트 설정 등을 정의한다.

# The following section is specific to Flutter packages.
flutter:
  uses-material-design: true
  assets:
    - assets/fonts/
    - assets/icons/
    - assets/images/
  fonts:
    - family: Pretendard
      fonts:
        - asset: assets/fonts/Pretendard-Thin.ttf
          weight: 100
        - asset: assets/fonts/Pretendard-ExtraLight.ttf
          weight: 200
        - asset: assets/fonts/Pretendard-Light.ttf
          weight: 300
        - asset: assets/fonts/Pretendard-Regular.ttf
          weight: 400
        - asset: assets/fonts/Pretendard-Medium.ttf
          weight: 500
        - asset: assets/fonts/Pretendard-SemiBold.ttf
          weight: 600
        - asset: assets/fonts/Pretendard-Bold.ttf
          weight: 700
        - asset: assets/fonts/Pretendard-ExtraBold.ttf
          weight: 800
        - asset: assets/fonts/Pretendard-Black.ttf
          weight: 900

마무리하며

flutter_gen 패키지를 이용하여 assets 를 generate 후 가져오는 것도 함께 정리하자!