Gatsby 사이트에 Font, Color Palette, Icon Set 적용하기.
작성 : 2023-04-14수정 : 2023-11-29
목차 펼치기
머리말
머리말
개발자 혼자 블로그를 만들 때 가장 취약한 부분은 디자인이다. 1부터 Z까지 혼자서 진행하는 프로젝트에 이는 굉장히 큰 벽으로 다가온다. 사실 블로그의 기능은 사실 대동소이하며 중요한 건 사용자에게 보여지는 디자인이기 때문이다. 이 글은 개발자 혼자서 Weezip 블로그를 만들며 Font와 Color, Icon을 어떻게 사용했는 지에 대한 이야기다.
Font 적용
Font 적용
Gatsby의 공식 문서에서 웹 폰트를 설정하는 방법에 대한 가이드가 나와있는데 예제에서는 Google의 Open Sans 체를 사용하고 있다. 내가 블로그에 적용하기로 마음먹은 폰트는 Google의 Noto-Sans-KR체다. Pretendard와 함께 많이 쓰이는 폰트로 알고 있다.
라이브러리 설치
라이브러리 설치
가이드에서 제공해주는 대로 라이브러리를 설치했는데, 나는 npm 대신 yarn을 이용했다.
설정
설정
가이드의 내용대로 gatsby config를 설정해 주면서 Noto-Sans-KR 체로
name
과
file
을 수정해준다. 이후 해당 이름을
font-family
에 설정해서 폰트를 적용할 수 있다.