Docusaurus로 개인 홈페이지 만들기
블로그를 겸하는 개인 홈페이지를 만들고 싶다는 생각을 꽤 오래전부터 해왔다. 시도했던 적도 많고 다양한 툴을 사용했다. 만드는 게 어려워서 포기한 적도 있고, 블로그라고 할 만큼 꾸준히 글 쓰는 걸 실패해서 포기한 적도 많았다. 워드프레스, 노션, Docusaurus 등 다양한 도구를 써봤는데 Docusaurus는 그 중 단연 난이도가 높았던 방식이다. React에 대한 이해가 필요하고 당연히 기초적인 프로그래밍이 가능해야 한다. 다만 프로그래밍 난이도가 높다는 건 당연히 그만큼 자유도가 높다는 뜻이기 때문에 가장 끌렸던 방식이기도 했다.
개인 홈페이지를 만드는 다양한 도구들
Docusaurus
Docusaurus를 처음 알게 된 건 회사 업무 때문에 사용자 가이드 웹페이지를 만들어야 했을 때였다. 사용자 가이드 제작에 개발 리소스를 투입할 수 없는 상황이었기 때문에 기본적인 프로그래밍이 가능한 내 능력만으로 웹페이지 개발이 손쉽게 가능해야 했다. 동시에 가이드 내용 자체는 일반적인 문서 작업 처럼 진행할 수 있다는 점이 장점이었다. 사용자 가이드 제작용 서비스로는 Gitbook도 있고, 요즘은 노션을 주로 사용하는 것 같다. 당시에는 노션을 잘 몰랐고 Gitbook은 유료 결제가 월별 구독으로 들어가야 하는 점이 번거로웠다. 큰 금액은 아니었지만 Docusaurus는 라이브러리라 무료이고, 프로그래밍이 전혀 불가능한 사람이 관리할 상황을 고려해야 하진 않았기 때문에 결과적으로 Docusaurus로 제작했었다.
Docusaurus는 기본적으로 사용자 가이드와 같은 Docs 관리용 라이브러리지만 개인/사업체용 웹페이지 제작용으로 쓰기에도 적절하다. 블로그와 Static page 제작을 지원하기 때문이다. 다만 Markdown, React에 대한 이해가 반드시 필요하다. 또한 Docusaurus 순정 상태를 거의 그대로 유지하지 않는 이상 소스 코드 충돌이나 기타 버그가 발생할 수 있는데 프로그래밍이 가능하지 않은 사람이라면 대처가 어렵다는 단점이 있다. 애초에 <서비스>가 아니라 <라이브러리>기 때문에 개발자가 타깃이고, 다만 모든 페이지를 직접 다 개발하는 것이 번거로운 사람을 위해 템플릿과 같은 역할을 한다고 보는 것이 맞다. 이런 특징 때문에 나처럼 개발자로 먹고 살 순 없지만, 프로그래밍을 툴처럼 사용하는 기초적인 능력이 있는 사람에게는 면허 없이 포크레인을 써서 땅을 파는 것과 같은(?) 효과를 발휘할 수 있다.
-
장점
- 직접 개발하는 만큼 커스터마이징할 수 있는 자유도가 가장 높음
- 마크다운 방식으로 포스트를 작성할 수 있음
-
단점
- 웹페이지 개발에 대한 기초 이해 + React에 대한 기초 이해가 필요함
워드프레스
한 10년 전에는 노코드 홈페이지 제작은 곧 워드프레스였지만, 요즘은 Wix 등 더 사용자 친화적인 도구들이 많이 나와서 워드프레스를 쓰는 경우는 잘 보지 못하는 것 같다. 학생 시절에 홈페이지 제작 외주를 하면서 꽤 깊게 다뤄봤는데 관리용 페이지가 잘되어 있어서 홈페이지 외주용으로는 제격이었다. 다만 디자인을 깔끔하게 만들기에는 CSS가 묘하게 깨지는 감이 있었고, PHP 기반이어서 HTML, CSS 정도만 아는 상태에서 커스터마이징에 여러 한계가 있었다. 그러한 한계를 방대한 커뮤니티에서 찾을 수 있는 플러그인으로 해결하곤 하지만, 당연히 플러그인마다 디자인 스타일이 다르다. 워드프레스는 사용했던 도구 중 디자인 측면에서 퀄리티를 높이기가 가장 어려운 편이었다. 다만 내가 겪었던 워드프레스는 거의 10년 전 기준이니 현재는 당시 겪었던 문제가 많이 개선됐을 거라 생각한다.
-
장점
- 설치와 함께 알아서 생성되는 관리용 페이지
- 방대한 써드파티 커뮤니티
-
단점
- 디자인 완성도를 끌어올리기 어려움
- 관련 자료나 커뮤니티가 대부분 영어 기반
노션
전천후 만능 도구로 쓰이는 노션이다보니 개인 블로그로 꾸민 사례도 쉽게 찾아볼 수 있다. 디자인적 완성도는 말할 것도 없고 페이지 하나하나를 꾸미는 재미는 가장 쉽고 자유롭다. 노션으로 글을 써서 SNS에 올린 적도 있었고 꽤 많은 내용을 셋팅했지만 웹 유입이 불리하다는 점 때문에 오래 쓰긴 어려웠다. 우피 같은 도구를 쓰면 구글 애널리틱스를 붙일 수 있지만 어디까지나 방문한 사람에 대한 정보를 알 수 있을 뿐, 노션 페이지 자체가 알아서 구글 검색에 노출되게 할 순 없었다. 나 스스로도 구글에 자료를 찾을 때 노션 페이지가 검색된 기억은 거의 없었다. 가끔씩 노션 페이지를 보게 되는 경우는 검색된 웹페이지에서 노션 페이지 링크를 걸어놓아서 클릭해서 넘어갔을 때 뿐이었다. 반드시 수익화를 하고 싶었던 것은 아니지만 그래도 아무도 보지 않을 글을 꾸준히 쓰는 건 어려울 게 뻔했다. 노션은 그런 점에서 자연스런 유입 증가가 애초에 불가능할 것처럼 보였기 때문에 장기적인 수단으로 쓰기엔 맞지 않다고 생각했다.
-
장점
- 가장 간편한 사용성만으로 가장 예쁜 디자인을 만들 수 있음
- 다양한 노션 템플릿을 참고할 수 있음
-
단점
- 웹 유입이 매우 불리함
- 방문자 분석 등, 본격적으로 웹페이지처럼 쓰려면 oopy같은 써드파티 도구가 반드시 필요함
웅덩이 파는 데 포크레인 써보기
처음 개인 홈페이지를 만들고 싶다고 생각했을 때 사실 어떤 내용을 보여주고 싶은지에 대한 계획은 구체적으로 없었다. 그저 개인적인, 그리고 홍보용 공간을 갖고 싶었고, 더 단순하게는 코딩 개인 프로젝트를 해보고 싶었다.
무엇을 배웠을까
1. 디자인 : Design System 구현을 위한 Figma의 Auto Layout, Property 기능 써보기
일단 만들고 보자는 생각으로 덤벼들었더니 예상하지 못한 어려움이 곳곳에 있었고, 결과적으로 더 많은 걸 배울 수 있었다. 위에 적었듯이 하나의 소프트웨어 제품을 만들 때 진행하는 단계를 간략하게 진행한 셈이었다. PM으로 일하면서 옆에서 구경만 했었던 Design System(이라고 하기엔 몹시 부끄럽지만) 기반의 Component 요소를 만들기 위해 Figma의 Auto Layout, Property 기능을 써보았다. Auto Layout 정도는 가끔씩 Figma로 간단한 디자인을 할 때 써보긴 했지만 이번에는 자동 생성되는 CSS를 같이 보면서 덩달아 CSS 다루는 법도 익힐 수 있었다.
2. 개발 준비 : React의 컨셉 이해, Docusaurus 파악하기
예전 회사에서 처음 Docusaurus를 쓸 때는 React를 전혀 모르는 상태였고, 그래도 사용은 가능했지만 가이드에 적힌 명령어를 전혀 이해하지 못하고 기계적으로 따라하다보니 커스터마이징이나 문제 상황에서 대처할 수 있는 여지가 굉장히 적었다. 그래서 이번에는 기초 개념이라도 React를 공부하고 써보자는 생각을 했고 노마드 코더의 무료 강의가 큰 도움이 되었다. Docusaurus를 처음 써 본 지도 시간이 꽤 흘러서 현재는 Docusaurus2가 나온 상태이다. 아주 가볍게 사용하는 용도라면 크게 달라진 점이 없지만 내부 API 구조가 꽤 바뀐 모양이 었다. 이번에는 레이아웃도 꽤 많이 건드릴 생각이었기 때문에 사용자 가이드 페이지를 좀 더 자세히 살펴보며 파악했다.
3. 개발 : 디자인 커스터마이징과 Docusaurus Swizzle 이해하기
Docusaurus 설치 직후 보게 되는 기본적인 디자인 레이아웃은 요즘 가장 흔히 볼 수 있는 깔끔한, 반응형 디자인으로 구성되어 있다. 그럼에도 당연히 커스터마이징은 필요하다. 인덱스 페이지의 내용을 전부 바꿔야 하고, 색상, 폰트, 간격 등을 조정해야 한다. 이 정도 셋팅은 예상했는지 설치 직후에 이미 style.css 파일이 생성되어 있다. 그래서 CSS 만으로 가능한 변화는 React에 대한 이해가 전혀 없어도 가능하다. 다만 동적인 변수값을 활용해야 하는 등, 정적인 디자인 변경 이상의 커스터마이징을 하려면 Docusaurus 라이브러리 코드를 직접 건드리는 작업이 필요하다. 이번 홈페이지 제작에서 가장 많은 삽질을 하고 시간을 보낸 단계가 바로 이 때였다. 내가 원했던 걸 100% 구현할 수 없었지만 그래도 대부분은 구현하고, 나중에 응용할 수 있겠다는 자신감을 얻었다.
Docusaurus는 Theme 커스터마이징을 지원하는 데 이를 Swizzle이라고 소개하고 있다. 간단히 말하면 Docusaurus에 이미 구현되어 있는 React Component 파일을 사용자가 수정할 수 있는 장치이다. 물론 이런 별도의 장치가 없더라도 라이브러리인 이상 어떻게든 수정은 가능하지만 이후 라이브러리 패치에 따른 호환성을 장담하기 어렵고, 나와 같은 초보 개발자에게는 불가능한 방법이다. 호환성을 완전히 보장할 순 없지만 나의 커스터마이징이 미칠 영향력을 판단하면서 손쉽게 내가 수정해야 하는 파일에 접근할 수 있도록 도움을 주는 것이 Swizzle의 역할이다.
4. 배포 : Github Pages 사용법 익히기
개발이 끝났으면 이제 배포해야 할 때다. 몇 년 전에 웹사이트 개발을 배우던 초기에 배포와 도메인 연결 개념을 이해하고 사용법을 익히기까지 꽤 어려움을 겪었었다. 그 때는 아주 단순하게 HTML + CSS + Jquery로 연습하던 시절이라 웹호스팅 사이트에 호스팅과 도메인을 결제하고 FTP로 소스 코드를 올린다는게 내가 알고 있는 배포 방식이었다. 이 방식은 현재도 유효하지만 월별 유지 비용이 든다는 단점이 있다. 그래서 개인 홈페이지 제작에 여러 무료 호스팅 방법이 활용되곤 하는 데 Github Pages는 그 수단 중 하나이다.
Github에서 계정당 1개의 username.github.io 도메인을 지원하는데 Github repository와 연결되어 호스팅 서버와 도메인을 한 번에 해결할 수 있다. 처음 써봤을 때는 배포 후에 제대로 도메인에 웹사이트가 표시되지 않아서 애를 먹었는데, 이번 프로젝트에서는 원활하게 배포를 진행할 수 있었다.
이제부터 이어지는 포스팅에서 그동안 배웠던 것과 문제를 해결한 과정을 순서대로 기록해둘 생각이다.
2. Design System 흉내를 위해 Figma 힐끗 보기 3. React 기초 훑어보고 Docusaurus 설치하기 4. Docusaurus config 톺아보기 (1) 5. Docusaurus config 톺아보기 (2) 6. Swizzle로 디자인 커스터마이징하기 7. Github Pages로 Docusaurus 웹사이트 호스팅하기 8. 구글 서치 콘솔 등록하고 사용자 인사이트 얻기