Docusaurus 기술문서로 개발 이력서 작성하기

 

 

최근, 사내에서 Docusaurus를 활용해 기술문서 작성을 접할 기회가 있었습니다. 생각보다 가독성이 괜찮고 간단한 마크다운 작성법과 React 커스터마이징이 가능해 이력서로 사용해도 괜찮을 것 같았습니다. 기존의 Notion 이력서에서 전환하였습니다. 전환하게 된 배경과 Docusaurus로 이력서를 작성하며 느낀점을 적어보겠습니다.

 

 

Docusaurus란 ?

글에 들어가기 앞서 Docusaurus에 대해 먼저 소개해드리겠습니다. Docusaurus는 Meta에서 만든 오픈소스 프로젝트로 다양한 기업에서 사용하고 있는 SSG(Static site generator)툴 입니다. 오픈소스 프로젝트이다보니 커뮤니티 활동이 활발한 편이고 참고할 레퍼런스가 꽤 많았습니다. 공식문서에서 한국어도 어느정도 지원을 해주기때문에 어렵지 않게 접하실 수 있습니다.

 

 

현재는 React-Native, Ionic, Relay를 비롯해 많은 프로젝트에서 채택하여 사용하고 있으며, 최근에는 Line에서 관련 블로그 포스팅을 발표하였습니다. 

 

 

https://reactnative.dev/

React Native · Learn once, write anywhere

https://ionicframework.com/

Ionic Framework - The Cross-Platform App Development Leader

https://techblog.lycorp.co.jp/ko/docusaurus-as-a-technical-document-website 

기술 문서 사이트로 Docusaurus 활용하기

 

 

Jekyll, Astro, Gitbook을 비롯해 시중에 수많은 SSG툴이 있지만, 제가 느낀 Docusaurus의 장점은 빠른 구축, 훌륭한 공식 문서와 적당한(?) 커스터마이징이었습니다. 기본적으로 제공되는 테마 및 마크다운 컴포넌트로 충분했고 SEO 설정과 Multi Docs 플러그인 등으로 손쉬운 구축 환경을 제공하고 있습니다.

 

 

기존 Notion 이력서의 아쉬운점과 전환한 이유

Docusaurus로 마이그레이션 한 이유중 하나는 Notion 이력서에 대한 아쉬움도 있었습니다. 핸드폰으로 어디서나 편집이 가능하고 어플, 웹, 맥북 등 모든 플랫폼에서 연동가능한 접근성은 최대 장점이긴 하지만, 역시 나만의 이력서를 갖고싶은 욕망은 포기할수가 없나봅니다.

 

 

물론 제가 노션을 잘 활용못한면도 있기도 했습니다. 레퍼런스가 많아도 커스터마이징이 워낙 자유롭다 보니, 깔끔하게 Notion으로 작성하기가 쉽지 않았습니다.

 

 

경력이 조금씩 쌓이다보니 원페이지 틀을 유지하는 노션으로는 여러 프로젝트를 설명하기 어려운 면도 있었습니다. 프로젝트마다 기술스택, 새로운 기술 도입, 개발하면서 고려한 부분, 이슈 등 상세하게 풀어낼 곳이 필요했는데 저에게는 노션보다는 Docusaurus같은 기술문서 틀이 더 적합했던 것 같아요. 

 

 

Docusaurus 이력서 소개

 

Docusaurus로 마이그레이션 한 이력서는 아래 링크에 있습니다. 구축방법은 공식문서에서 튜토리얼을 통해 상세히 서술해주고 있으니 생략하고 작성한 이력서의 특징에 대해 간략히 소개해보겠습니다.

 

https://teveloper-docs.vercel.app/

Sihyung.log | Sihyung.log

 

메인 홈

이력서의 메인 홈은 소개문구를 깔끔한 타이핑 애니메이션으로 꾸몄습니다. React 컴포넌트를 사용할 수 있는 Docusaurus 덕분에 어렵지 않게 커스터마이징 할 수 있었습니다. 이력서에서 가장 먼저 접하는 화면인 만큼 간단한 문구를 통해 소개하는 화면을 노출시켰습니다.

 

 

 

이력서

 

 

 

포트폴리오

Docusaurus의 가장 큰 장점이 아닐까 싶은 폴더 기반의 포트폴리오 탭입니다. Docusaurus는 폴더 기반의 라우팅을 지원해 여러 mdx 파일을 한 폴더에 묶어 탭을 구성할 수 있습니다.

 

 

 

덕분에 다음과 같이 포트폴리오마다 상세한 히스토리와 기술스택, 트러블 슈팅 및 이슈를 서술할 수 있습니다. 텍스트 뿐만 아니라 사진, 영상, 코드블럭 등 다양한 방식으로 포트폴리오를 표현할 수 있습니다.

 

 

 

 

사이드 프로젝트

기본적으로 Docusaurus는 하나의 Docs를 제공하지만, 플러그인 설정을 통해 한 사이트에서 여러개의 Docs를 설정할 수 있습니다. 저는 사이드 프로젝트로 Flutter를 활용한 테니스 앱을 개발중인데, 라이브로 운영하며 생각보다 서술할 부분이 많아 Multi Docs로 추가했습니다.

 

 

 

React이지만 Flutter에 매력을 느껴 크로스 플랫폼을 개발한 내용과 Supabase를 서버로 채택한 내용, 유저분들의 앱 사용후기와 피드백 등을 docs 형식으로 작성해보았습니다.

 

 

 

 

자세한 내용은 링크를 통해 들어가면 확인하실 수 있습니다 😊

 

 

마치며

생각보다 작업시간이 많이 소요된  Docusaurus 이전작업이었습니다. 아무리 초기 구축이 편하다 해도 기본적인 레이아웃과 테마 및 SEO 작업, 무엇보다 mdx 파일 작성이 가장 오래걸렸네요. 그래도 어느정도 틀을 구축하니 이후엔 속도가 붙기 시작했습니다.

 

 

아무래도 Notion으로 작업할 때보다 접근성은 떨어지지만, 이제는 Github에서도 dev모드를 통해 코드를 손쉽게 수정할 수 있습니다. vercel을 통한 CI/CD 덕분에 어디서든 인터넷만 제공되면 손쉽게 수정할 수도 있구요.

 

 

Docusaurus 정말 매력적인 툴인것 같습니다. 꼭 이력서가 아니더라도 사내 문서작성이 필요할 경우에도 적극 추천드립니다. 

 

 

 

https://teveloper-docs.vercel.app/

Sihyung.log | Sihyung.log