Gatsby 사이트에 Font, Color Palette, Icon Set 적용하기.

개발자 혼자 블로그를 만들 때 가장 취약한 부분은 디자인이다. 1부터 Z까지 혼자서 진행하는 프로젝트에 이는 굉장히 큰 벽으로 다가온다. 사실 블로그의 기능은 사실 대동소이하며 중요한 건 사용자에게 보여지는 디자인이기 때문이다. 이 글은 개발자 혼자서 Weezip 블로그를 만들며 Font와 Color, Icon을 어떻게 사용했는 지에 대한 이야기다.

Gatsby의 공식 문서에서 웹 폰트를 설정하는 방법에 대한 가이드가 나와있는데 예제에서는 Google의 Open Sans 체를 사용하고 있다. 내가 블로그에 적용하기로 마음먹은 폰트는 Google의 Noto-Sans-KR체다. Pretendard와 함께 많이 쓰이는 폰트로 알고 있다.

가이드에서 제공해주는 대로 라이브러리를 설치했는데, 나는 npm 대신 yarn을 이용했다.

가이드의 내용대로 gatsby config를 설정해 주면서 Noto-Sans-KR 체로

과

을 수정해준다. 이후 해당 이름을

에 설정해서 폰트를 적용할 수 있다.

이제

태그에

스타일을 설정한다. 혹시나 지원이 안되는 경우에 사용될 다른 OS별 기본 폰트들을 나열해준다. 이 기본적으로 나열해주는 목록은 Chat-GPT에게 물어봤다.

본문의 글씨가 검은색인 경우도 #000 보다는 #222 또는 #333 정도가 되어야 사람의 눈에 더 잘 읽히고, 마찬가지로 흰색인 경우도 #fff보다는 그보다 조금 낮은 단계의 컬러가 더 편안하게 보인다고 한다.

색상마다 예쁜 hex 컬러를 디자인 토큰으로 만들어두고 사용하려고 한다. 특히 글씨의 색, 사이트의 메인 컬러 등에 대해서는 확실히 정해둘 필요가 있었다. 컬러 팔레트를 결정하기 위해 외부 사이트를 찾아 다녔고,

라는 사이트를 발견하였다. 여러 색상 팔레트와 그에 따른 hex 코드를 제공해주고 있다.

라는 사이트에서는 내가 입력한 hex값을 기준으로 다른 명도와 채도를 적용한 컬러들을 단계별로 보여준다. 이를 활용해 다양한 variant color들을 생성할 수 있었다.

가장 중요한 것은 고뇌하기 보다는 시간을 사용하지 않고 빠르게 넘어가자고 생각했다. 자칫하다가는 개발 자체가 유야무야 될 수도 있기 때문에 개발자 혼자서 사이트 만드는데 디자인이 처음부터 예쁠 수가 있나! 라는 변명과 함께 디자인 개선을 차차 해나가기로 했다.

애플 iOS 17 디자인 키트와 구글 Material 3 디자인 키트를 알게 되었다. 두 키트 모두 다크 테마 대응을 위한 팔레트가 모두 정리되어 있었는데, iOS 17 의 컬러 팔레트를 적용하기로 했다. 덕분에 계속 해오던 컬러 값에 대한 고민과 최근에 릴리즈한 다크 테마에 대한 대응을 쉽게 해결할 수 있게 되었다.

이게 바로 세계적인 대기업인가…!

컬러 팔레트 외에도 폰트 스타일, 아이콘, 컴포넌트 등 여러 디자인 자료들이 정리되어 있어 추후에도 참고하기 좋을 것 같다.

여기서 문제는 나는 멘탈 모델에 맞는 아이콘이 무엇인지는 알지만 그 리소스가 없다는 것이다. 메뉴에 햄버거 메뉴를 적용하고, 화살표를 적용하는 등 가장 기본적인 것들조차 리소스가 없어 적용하지 못하는 상황에서 나를 구원해줄 free svg 제공 사이트를 찾았다. 바로

를.

15만개 이상의 svg 아이콘들을 제공해주는 오픈 소스 아이콘 세트 덕분에 svg를 손쉽게 구하게 되었다. 이를 바로 가져다 쓰면 추후 유지보수에 좋지 않으므로, 사용하려는 아이콘 별로 컴포넌트화 시켜서 사용했다. props를 활용해 방향, 크기, 색상에 대해 커스텀할 수 있도록 했는데 화살표 아이콘으로 예를 들면 다음과 같다.

좋은 사이트들 덕분에 손쉽게 gatsby.js에 font, color, icon을 적용하여 꾸밀 수 있었다. 만약 내가 처음부터 다 해야되었다면… 여기서 블로그 프로젝트는 멈춰졌을 수도 있다.

역시나 다양한 도구와 사이트들이 있다는 걸 안다는 것만으로도 작업은 쉬워질 수 있다라는 걸 다시금 느낀다.