Skip to main content

지금은 맞고 그때는 틀리다 (기술 블로그 개편 여정)

· 11 min read
허민지

안녕하세요 백엔드팀 허민지입니다.

해당 글은 똑닥 기술 블로그 개편 과정에 대한 기록입니다. 1) 블로그 개편이 불가피했던 이유, 2) 여러 플랫폼과 프레임워크 비교, 3) 블로그를 재정비하며 개선한 점을 상세하게 작성해 보았습니다. 글이 도움이 되길 바라며 가벼운 마음으로 한 번 읽어봐 주시기 바랍니다.

meme

기술 블로그 개편이 필요한 이유​

첫 번째 이유는 기술 블로그를 활용하여 더 많은 인재를 영입하기 위함입니다. 기존 기술 블로그의 경우 채용 관련 섹션이 없었으며 블로그 포스트만 올릴 수 있도록 설계되었습니다. 기술 블로그는 기술 관련 글을 올리는 곳이기도 하지만 동시에 한 회사의 개발 문화와 이야기를 나누는 공간이기도 합니다. 많은 분의 기술 블로그 방문은 곧 자연스레 기술 블로그를 운영하는 회사에 대한 관심과 채용 공고 지원으로 이어집니다. 그렇기에 기술 블로그는 더더욱 채용과 떼어 놓고 볼 수 없다고 판단하였습니다.

두 번째 이유는 요즘 유행하는 프레임워크에 비해 기능이 미비하였습니다. 백엔드팀은 Jekyll 프레임워크로 2019년 블로그 신설 후 오랫동안 블로그를 유지보수하지 않고 있었습니다. 또한 팀 내에서 올해 언급된 기술 블로그 개선 사항 및 계획했던 개편, 확장 기능을 모두 추가하면 공사 기간과 사이즈가 점점 커져 갔습니다. 저는 기술 블로그 관리자로서 Jekyll을 커스터마이징하는 데 점점 한계를 느꼈고, 지금 백엔드 팀에게 Jekyll이 최선의 프레임워크인지에 대한 의문이 들었습니다. 결론적으로 저는 여러 조건을 고려했을 때 Jekyll로 하나씩 기능을 추가하거나 수정하는 것보다, 아예 새로운 프레임워크로 재정비하거나 다른 플랫폼으로 이전하는 방향으로 결정하였습니다.

tech-blog-improvements

팀 의견을 반영한 기술 블로그 개선점 메모

기술 블로그 플랫폼을 정할 때 고려했던 점​

먼저 기술 블로그 플랫폼/프레임워크 교체 시 중요하게 생각하는 부분을 우선 순위를 정하여 나열해 보았습니다:

  1. code snippet을 추가하기 쉬운가?
  2. 새로운 플랫폼/프레임워크로 이전 시 팀원들이 빠르게 적응할 수 있는가?
  3. 글을 작성하기 쉬운가? (a.k.a. 마크다운으로 쓸 수 있는가?)
  4. 커스텀 하기 쉬운가?
  5. 확장성 있는 플랫폼/프레임워크인가?
  6. 어느 정도 고정 관객을 확보할 수 있으면 좋겠다는 바람(욕심)

모든 조건을 만족시키는 플랫폼/프레임워크를 찾기는 어려웠지만 기존 프레임워크의 적합한 대체제를 찾기 위해서는 많은 조건을 고려할 수밖에 없었습니다.

타 기업 기술 블로그 비교

또한 본격적인 개편에 들어가기 앞서 타 기업 기술 블로그를 조사하며 어떤 플랫폼과 프레임워크를 주로 쓰는지 정리해 봤습니다. 많은 기업에서 미디엄과 GatsbyJS를 쓴다는 것을 알 수 있었습니다. 여기에 팀원 한 분이 적극적으로 추천하신 Docusaurus까지 총 3가지 플랫폼/프레임워크를 비교하고 하나를 최종 선택하기로 했습니다.

기술 블로그 플랫폼/프레임워크 비교​

1. 미디엄​

미디엄은 온라인 출판 플랫폼 중 하나이며 해당 플랫폼으로 많은 기업과 작가들이 본인만의 창작물과 글을 올리고 있습니다. 미디엄은 전문 출판 플랫폼인 만큼 일정한 관중을 확보할 수 있다는 점에서 매우 매력적으로 다가왔습니다. 하지만 역시 문제는 code snippet이었습니다. 코드 추가 작업이 단순하지 않다는 점에서 고민이 많았습니다.

2. GatsbyJS​

GatsbyJS는 자바스크립트와 리액트로 사용하여 정적 사이트와 앱을 만들 수 있는 프레임워크입니다.

3. Docusaurus​

Docusaurus는 Meta(페이스북)에서 출시한 오픈 소스이며 GatsbyJS와 동일하게 자바스크립트와 리액트를 사용하여 정적 사이트를 만들 수 있는 프레임워크입니다.

Gatsby vs Docusaurus​

GatsbyJS와 Docusaurus는 둘 다 공식 문서도 잘 되어있으며, 자바스크립트와 리액트 기반이고 커뮤니티가 잘되어 있어 질의응답이 쉽다는 점에서 매우 만족스러웠습니다. 둘 중 무엇을 선택해야 하나 고민하던 중 Docusaurus의 소개 페이지에 적혀있는 한 문단이 매우 설득력 있게 다가왔습니다.

”GatsbyJS는 다양한 기능과 풍부한 플러그인을 통해 Docusaurus에서 할 수 있는 대부분의 기능을 지원하고 있습니다. 하지만 GatsbyJS를 처음 사용하기 위해서는 기능을 학습하는 시간이 좀 더 필요합니다. GatsbyJS는 다양한 형태의 웹사이트를 만들어야 할 때 적합한 도구입니다. 반면에 Docusaurus는 온라인 출판 콘텐츠를 작성하고 게시하는 일에 최적화된 도구를 만드는 데 집중하고 있습니다.” - Docusaurus 소개 페이지

Docusaurus으로 확정!​

docusaurus-mascot

“문서화”에 초점을 맞춘 Docusaurus에게 설득되어 그렇게 백엔드 팀의 기술 블로그를 Docusaurus으로 재정비하기로 하였습니다. Docusaurus는 확장하기 좋은 프레임워크이며 저희가 기대했던 "채용공고 지원 연계"를 더 적극적으로 진행할 수 있다는 생각이 들었습니다. 또한 자바스크립트, 리액트 베이스인데다 코드도 올리기 쉬우며 심지어 복사 버튼 기능도 탑재하고 있었습니다.

개편된 기술 블로그를 소개​

  1. 채용 공고 섹션 추가

    개발팀 채용 공고를 추가하여 비브로스에 대한 관심에서 채용 공고 지원까지 이어질 수 있게끔 만들었습니다.

    bbros-recruit-home

    채용 페이지

    bbros-jd

    채용 상세 페이지

  2. 태그/키워드 페이지 추가

    Docusaurus에서 제공해주는 기능으로 블로그 포스트를 묶는 태그/키워드 페이지를 생성하였습니다.

    bbros-keyword

  3. 목차 자동 추가

    Docusaurus에서 마크다운을 바탕으로 목차를 자동 생성해줍니다.

    bbros-auto-content-for-post

  4. 다크 모드 기능 추가

    Docusaurus 다크 모드 기능으로 눈을 보호할 수 있습니다.

    bbros-home-page-dark-mode

(팁) Docusaurus Plugin으로 쉽게 이전 포스트 마이그레이션 하는 법​

Docusaurus의 plugin-redirect 플러그인으로 쉽게 마이그레이션을 진행할 수 있었습니다.

저는 plugin-redirect를 활용하여 .html이 붙은 링크로 요청이 들어올 시 .html만 뺀 주소로 redirect 해주는 방법을 선택하여 성공적으로 마이그레이션 작업을 완료하였습니다. Jekyll은 slug 뒤에 기본으로 .html이 붙어서 생성되니 Jekyll에서 마이그레이션 하실 때 해당 플러그인을 참고하시면 좋을 것 같습니다. 

// docusaurus.config.js
// 변환: blog.com/new-post -> blog.com/new-post.html
plugins: [
    [
      '@docusaurus/plugin-client-redirects',
      {
        fromExtensions: ['html'],
      }
    ]
  ],

마무리​

Docusaurus라는 훌륭한 오픈 소스를 활용하여 기술 블로그를 성공적으로 확장 개편할 수 있었습니다. 모두 즐거운 블로깅이 되시길 바라며 이만 글을 마치겠습니다. Docusaurus 만세!