"Design System" 태그로 연결된 8개 게시물개의 게시물이 있습니다.

Google Analytics 플러그인 활용하기​

Docusaurus에 Google Analytics를 붙이려면 gtag 플러그인을 사용해야 한다. trackingID라는 값을 확인해서 config 파일에 추가만 하면 연결은 끝난다.

Google Analytics 사이트에 접속해서 측정 시작 버튼을 누른다.

Docusaurus의 호스팅 방법​

Docusaurus 가이드에서는 다양한 호스팅사를 기준으로 호스팅 방법을 설명하고 있다. 대부분이 국내에서 흔히 들어보기 어려운 서비스이고, 그나마 친숙한 서비스가 Github Pages이다. 일반적인 블로그 서비스를 쓰지 않고 직접 개인 홈페이지를 구축할 때 가장 큰 단점 중 하나가 어떻게든 서빙 비용이 든다는 점이다. Github Pages는 내 Github 계정 1개당 1개의 repository를 무료 웹사이트 호스팅 용도로 쓸 수 있게 하는 서비스다. 어차피 버전 관리에 Git을 쓴다면 호스팅 비용도 아낄 겸 Github Pages는 굉장히 편리한 선택이다. Github.io로 도메인이 고정되지만 개인 사이트에서 커스텀 도메인 연결은 필수가 아니라서 큰 단점은 아니고, 꼭 필요하다면 연결하는 것도 가능하다. 물론 나는 서빙 비용도 아끼는 마당에 굳이 도메인 연간 유지비를 쓰고 싶지 않았기 때문에 연결하지 않았다.

custom.css 활용하기​

설치 직후에 /src/css/custom.css 경로에 가면 기본 생성되어 있는 CSS 파일을 찾을 수 있다. 이 곳에 작성된 CSS는 Docusaurus에서 이미 만들어놓은 스타일보다 우선순위가 더 높은 것으로 적용되기 때문에 내가 원하는 스타일로 덮어쓰기 할 수 있다.

이번 포스트에서는 docusaurus.config.js에서 설정할 수 있는 내용 중 디자인적 요소에 영향을 미치는 부분만 따로 모아두었다.

docusaurus.config.js에 추가할 수 있는 설정들​

자주 쓰이는 필수 설정들은 설치 직후에 config 파일을 열어보면 이미 설정되어 있는 것을 확인할 수 있다. 그 외에도 내가 원하는 설정을 커스터마이징하거나 Docusaurus에서 제공하는 플러그인 같은 부가 기능을 추가할 때 config 파일을 편집하게 된다.

React 기초 훑어보기​

사실 React에 대한 이해가 전혀 없어도 Docusaurus를 쓰는 데 무조건 지장이 생기는 것은 아니다. Docusaurus가 제공하는 디자인을 거의 변경하지 않으면서 그대로 사용한다면 CSS로 커스터마이징하는 것으로 충분하다. 하지만 더 아는 상태에서 도구를 사용하는 건 그렇지 않은 상태와 분명한 차이가 있다. 결과적으로 React를 미리 공부하고 시작한 덕에 내 기대보다 더 많은 디자인 커스터마이징이 가능했다. 그래서 프로그래밍 기초 체력이 어느 정도 있는 사람이라면 Docusaurus를 써보기 전에 꼭 React 기초 개념을 공부하는 것이 좋다고 추천하고 싶다.

Design System을 알아보고 싶었던 이유​

Design System을 처음 알게 된 계기는 첫 회사에서 새로운 제품을 런칭 준비하면서 Design System 적용을 시작했을 때였다. 프로덕트 디자인에 대한 막연한 관심이야 많았지만, 업무에 도움 될만한 배경 지식을 어떻게 쌓아야 할지에 대해선 전혀 감이 없었다. 그러던 와중에 알게 된 Design System은 첫 인상부터 굉장히 흥미로웠다. 당시 알아보았던 바로는 Design System은 Atomic Design Methodology에 기반하고 있다. 가장 작은 디자인 요소에서 시작해서 그 요소들을 합치고 조합해나가는 과정에서 새로운 Component가 만들어진다. 디자인과 관련된 영역은 미적 감수성이 있어야만 들여다볼 수 있다고 생각했던 멋모르는 나에게 이해하기 명확하다는 점만으로도 더 자세히 들여다보고 싶다는 생각이 들었다.

Docusaurus로 개인 홈페이지 만들기​

블로그를 겸하는 개인 홈페이지를 만들고 싶다는 생각을 꽤 오래전부터 해왔다. 시도했던 적도 많고 다양한 툴을 사용했다. 만드는 게 어려워서 포기한 적도 있고, 블로그라고 할 만큼 꾸준히 글 쓰는 걸 실패해서 포기한 적도 많았다. 워드프레스, 노션, Docusaurus 등 다양한 도구를 써봤는데 Docusaurus는 그 중 단연 난이도가 높았던 방식이다. React에 대한 이해가 필요하고 당연히 기초적인 프로그래밍이 가능해야 한다. 다만 프로그래밍 난이도가 높다는 건 당연히 그만큼 자유도가 높다는 뜻이기 때문에 가장 끌렸던 방식이기도 했다.