[Flutter] Flutter에 Figma Variable Fonts 적용하기

* Flutter Extends Extended Korea 2023 세션을 듣고 정리한 글입니다.

 

 

Variable font는 사용자가 유형과 아이콘을 제어할 수 있도록 하는 새롭고 혁신적인 글꼴 형식이다.

Variable fonts support in Figma

Variable fonts support in Figma

 

기존의 Flutter에서 custom font를 적용하는 방법은 다음과 같았다.

 

1. assets/fonts 폴더 안에 폰트들을 넣는다.

 

2. pubspec.ymal 파일에서 import한다.

 

3. TextStyle 안에 fontFamily로 적용한다.

 

이러한 기존의 방법은 필요한 모든 폰트를 fonts 폴더 안에 넣고, import 해야하기 때문에 파일 관리가 어렵다.

 

 

Variable font를 적용하기 위해서는, variable 폰트 하나만 import 하면 된다.

아래 사진에서 PretendardVariable 폰트만 import 하면 그 아래에 있는 모든 폰트들을 사용할 수 있다.

 

TextStyle에서 폰트를 적용할 때는 fontVariations 속성을 지정해준다.

wght는 굵기를 의미한다. FontVariation('wght', 400.0)은 굵기를 400.0으로 지정하는 것이다.

 

Font-style에는 다음과 같은 것들이 있다.

 

1. wght: font-weight

2. wdth: font-stretch

3. sint: font-style 중 기울기

4. ital: font-style 중 이태리채

5. opsz: font-optical-sizing

 

 

구글 폰트에 들어가면 variable font를 제공하는 폰트를 확인할 수 있다.

 

https://fonts.google.com/

Google Fonts

 

 

마지막으로, variable font의 장점을 정리해보자면 다음과 같다.

 

1. font file 관리가 용이하다.

2. pubspec.yaml 코드가 간결하다.

3. 디자이너의 요청을 더욱 쉽게 받아줄 수 있다.

4. 개발로 표현할 수 있는 방법이 더욱 풍부해졌다.

5. font-style theme 정리가 더욱 간결해졌다.

 

 

발표자님이 마지막에 하신 말씀이 기억에 남아서 적어둔다.

개발자에겐 '기술'은 중요하다. 하지만 더욱 중요한 것은 기술이 아닌 디자인, 모션, 인터렉션 같은 딱 잘라 설명하기 힘든 내공이다.  - Google UX Developer 김종민 -