항공권 예약하기​

여행을 떠나는 걸 자꾸 망설이고 있다면 일단 교통편과 숙박을 큰 고민하지 말고 일단 예약하는 방법을 추천한다. 특히 여행 날짜까지 최소 몇 주에서 몇 달 정도 텀을 두면 좋다. 실제 여행을 가는 시기는 한참 나중이니 당장 여행 준비를 할 부담을 덜 수 있고, 환불하기는 번거로우니 어떻게든 여행을 가게 된다. 이번 밴쿠버 여행의 경우 캐나다에 이민 간 지인의 집에서 머물 예정이었기 때문에 일단 항공권부터 예약했다. 퇴사 후 쉬는 기간이다보니 일정의 제약도 없었고 가장 비행기 값이 쌀 때 가면 되겠다 싶었다.

내가 예약한 항공권은 캐나다 밴쿠버 국제 공항 직항이었고, 항공사는 Air Canada였다. 가격은 엄마와 나 합쳐서 2명에 왕복 275만원이었는데, 이 정도면 꽤 싼 가격이라고 한다. 경유해서 타기엔 체력적 한계가 있는 엄마를 모시고 가는 여행이라, 무조건 직항으로 예약해야 했다. 캐나다 밴쿠버 직항은 거진 국내 항공사(대한항공, 아시아나항공) 아니면 캐나다 항공사 Air Canada를 타야 했다. 국내 항공사 가격이 Air Canada에 비하면 몇십만원에서 백만원 정도 더 비싼 편이었다. 캐나다 정도 되는 나라의 메인 항공사면 크게 서비스 질이 부족할 리도 없어서 가격이 싼 Air Canada를 택했다.

항공권 검색은 네이버 항공권 예약, Skyscanner 등 몇 개의 항공권 예약 서비스를 살펴봤다. 사실 이런 가격 비교 사이트 중에서 특정 사이트가 유독 싼 가격을 제공하기는 어렵기 때문에, 대충 2-3개 정도의 사이트만 둘러보고 가장 싼 가격으로 예매하는 것이 속 편하다고 생각한다. 내가 유독 싼 가격으로 예매할 수 있었던 것은 그냥 충분히 일찍 예매했기 때문이었다. 9월 중순에 출발하는 비행기였는데 5월 말 쯤 예매했기 때문에 얼추 4개월 정도 미리 예약한 셈이다.

마주치는 사람마다 미소가 예쁘다. 밴쿠버 여행에서 가장 기억에 남는 점이다. 물론 탁 트인 하늘도, 나무 사이로 보는 햇살도 아름답다. 그래도 자연 경관 보다는 길 가는 사람들의 행복한 모습이 한국에서 조금 더 보기 어려운 풍경이라 더 기억에 남은 듯 하다.

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에 대한 이해가 필요하고 당연히 기초적인 프로그래밍이 가능해야 한다. 다만 프로그래밍 난이도가 높다는 건 당연히 그만큼 자유도가 높다는 뜻이기 때문에 가장 끌렸던 방식이기도 했다.