🛠 Variable 폰트, 더 유연해져 (feat. 개발자의 시선)

보통 폰트 토큰을 등록할 때,
Variable을 사용해서 fontWeight을 이용해
폰트의 두께 조절을 미디엄과 두 가지 폰트 토큰에 차이를 주는 방법도 있다는 걸 알게되었다.

-두둥-

(웬만해선 토큰을 많이 만드는 걸 지양하는 st)
개발자의 클린코드를 위해(?)
그래서 항상 라벨과 본문 텍스트의 차이를 굳이 굳이 주지 않았다.

Variable Font의 두께 조절도 있구나~ 알아가면 좋을 거 같다.

✅ 장점은
• 한 파일로 다양한 fontWeight 커버 → 용량↓
• weight 조절이 연속적이어서 디테일한 조정 가능
• 반응형 타이포그래피 구성에도 유리

⚠️ 그런데 단점은?

다크모드에서 Variable Font의 두께 조절은 정말 조심해야 하는데, 시각적 대비(contrast) 문제로 인해 더 뚜렷한 단점들이 생긴다.

• 검정 배경 위의 회색 텍스트(예: #A0A0A0)는
밝은 배경 위의 동일한 회색보다 훨씬 더 가늘고 흐리게 보인다.

• 특히 fontWeight: 400 이하는 다크모드에서 시인성이 급격히 낮아짐.

이미 마이크로 하게 디자인 시스템을 구축하는 나에게는
Variable까지 써서 fontweight 조절까지 하는 건 X!!
그냥 이런 경우도 있다는 것으로 끝내겠다.

빠르게 결과물을 내는 것에 집중을 하기로 🥲