프롤로그
Docusaurus로 블로그를 만든 이유
반 년만에 블로그. 왜 docusaurus로 만들게 되었나요?
디자이너 커피입니다.
이번 포스팅에서는 블로그를 docusaurus로 만든 이유에 대해서 설명하고자 합니다.
블로그를 만드는 방법들
블로그 운영에는 다양한 방법들이 존재합니다. 크게 다음과 같이 세 가지 케이스로 축약할 수 있을 것 같은데요.
- 포털 사이트의 서비스를 이용
- SNS를 통한 포스팅 작성
- 직접 블로그 사이트를 구축
각각의 방법을 살펴봅시다.
1. 포털 사이트의 서비스를 이용
가장 일반적인 블로그를 운영하는 방법일 것 같습니다.
가장 쉽고 빠르게 블로그를 구성하고 운영할 수 있는 방법입니다.
포털 사이트의 아이디만 있다면 제공하는 서비스를 이용하면 됩니다.
네이버 블로그나 티스토리가 일반적이겠네요.
기본적인 SEO, 광고 기능들도 내장되어 있으며, 테마 커스터마이징, 블로그 친구 관리 등 다양한 관련 서비스 및 기능들을 함께 제공합니다. 글의 노출도도 높습니다. 따라서 일반적인 블로그 운영, 혹은 블로그를 통한 수익창출을 목적으로 한다면 해당 방법이 가장 적합한 선택지 일 것 같습니다.
그러나 블로그의 기본적인 레이아웃이 정해져있으므로 자유로운 커스터마이징은 어렵습니다. 예를들어 네이버 블로그 같은 경우, 마크다운기능이 제한적입니다. 블로그 에디터의 경우 취향의 차이가 생기기도 합니다. 따라서 비교적 자유로운 블로그 사이트를 만들고자 한다면 아쉬운 점이 생깁니다.
2. SNS를 통한 포스팅 작성
페이스북이나 인스타그램을 통한 포스팅을 블로그로 활용될 수 있습니다.
블로그의 형태를 생각했을 때 떠오르는 이미지가 네이버 블로그나 티스토리가 일반적이긴하지만, 목적에 따라 더 높은 활용도를 가질 수도 있습니다.
SNS 형태의 블로그의 가장 큰 장점은 접근성입니다. 페이스북이나 인스타그램은 모바일 시대 이후 많은 사람들이 이용하고 있으며, 다양한 방법을 통해 주변인, 관심사에 따라 작성한 글이 쉽게 노출됩니다.
따라서 일상에 대한 공유, 광고와 같은 타겟마케팅이 목적이라면 좀 더 효율적인 방법이 될 수 있습니다. 기존 블로그의 글 노출이 검색을 주로 통해 이루어진다면, SNS는 관심사를 통해 주로 노출됩니다.
또한 네트워크 서비스라는 명칭답게 좋아요와 같은 공감 표현, 댓글 등을 활발하게 활용할 수 있습니다 글의 작성도 매우 쉬운 점도 장점입니다. 대게 스마트폰의 기능을 충분히 활용할 수 있고, 이미지 업로드가 용이합니다.
그러나 SNS의 경우 커스타미이징이 매우 제한적입니다. 대게 카드형태의 UI의 뉴스피드로 작성이 되므로, 글의 형태나 이미지의 구성의 틀이 정해져있습니다. 글자 수 제한이 있는 경우도 있어 일반적인 블로그보다 포스팅의 길이가 비교적 짧아지게 됩니다.
그리고 휘발성이 매우 강합니다. 하나만 노출되는 것이 아니라, 수 많은 단편글들이 함께 노출되므로 글을 보는 사용자의 관심사에서 벗어나거나, 일정 시간이 지나고나면 다시 돌아보기 어렵습니다. 따라서 블로그의 목적이 중·장편의 글의 작성이거나, 공유보다 정리가 목적이라면, 이는 적합한 방법은 아닙니다.
3. 직접 블로그 사이트를 구축
사용자가 자유롭게 커스터마이징 한 사이트를 만들고 운영하는 전통적인 방식입니다.
직접 구성한다는 점이 양날의 검과 같습니다. 스스로 사이트를 구성할 수 있으므로 자유로운 사이트 커스터마이징이 가능합니다. 원하는 기능을 붙일 수도 있고, 원하는 페이지를 만들 수도 있습니다.
하지만 이를 직접해야 합니다. 따라서 관련된 지식이나 기술이 없다면 어려움이 따르는 방법입니다. 사이트의 노출도 1,2의 방법보다 비교적 적습니다. 노출도를 높이기 위해서는 직접 SEO를 처리해야되기 때문입니다.
개발 및 운영에 있어 어려움이 크지만 자유로운 나만의 사이트를 만들고 싶다면 가장 좋은 방법입니다.
각 방법 비교 요약
각각의 방법은 저마다의 장점과 단점이 있으므로 블로그의 이용목적에 따라 원하는 방식으로 블로그를 운영하는 것이 즣겠습니다.
| 구성 | 블로그 서비스 | SNS | 직접 개발 |
|---|---|---|---|
| 구축 난이도 | 쉬움 | 쉬움 | 어려움 |
| 운영 난이도 | 쉬움 | 쉬움 | 어려움 |
| 사이트 노출도 | 높음 | 높음 | 낮음 |
| 커스터마이징 | 보통 | 어려움 | 쉬움 |
| 장점 | 쉽고 빠른 시작, 다양한 기능 | 높은 노출도, SNS 이용자 간의 피드백 | 높은 자유도 |
| 단점 | 제한적인 커스터마이징과 포털의 종속성 | 커스터마이징이 불가능한 제한적인 구성, SNS채널에 종속됨, | 매우 높은 개발 및 운영 난이도 |
일반적인 블로그와 SNS 블로그의 차이
기본적으로 블로그는 하나의 페이지에 하나의 포스트가 이루어집니다. 그러나 SNS는 뉴스피드를 기반으로 한 페이지에 여러 포스트가 쌓이는 형태입니다. 이러한 차이는 페이지의 레이아웃의 차이를 만들어 냅니다.
하나의 페이지에서 하나의 데이터 묶음만 처리해도 되는 블로그에 반해 SNS 서비스의 포스트는 수많은 데이터를 하나의 페이지에서 처리해야됩니다. 많은 양의 데이터를 효율적으로 처리하기 위해서는 데이터의 포맷과 양을 제한할 필요가 있습니다. 이 때문에 글자 수 제한, 이미지 용량 제한이 블로그 서비스보다 제한적이게 되고, 커스터마이징도 어렵게 만듭니다.
내 선택은 직접 블로그 구축 그리고 Docusaurus
제가 선택한 방법은 3. 직접 블로그 구축입니다. 그 이유는 다음과 같습니다.
- 생각을 정리하기 위한 블로그가 필요하다.
- 자유롭게 커스텀할 수 있는 블로그를 만들고 싶다.
- 포트폴리오도 함께 보여주고 싶다.
- 직접 사이트를 만들어보고 싶다.
위와 같은 이유들로 인해 저는 직접 블로그를 구축하기로 했습니다. 그러나...
블로그를 만드는 건 만만치 않았다.
블로그를 다시 시작한 것은 반 년이 훌쩍 넘은 지금이지만, 그 사이 개인 사이트를 만들고자 했던 노력을 안한 것은 아니었습니다. 다만.. 계획대로 흘러가지 않았을 뿐.
블로그를 직접 만들어야겠다라는 계획을 세운 것은 바야흐로 2022년 1월. 이전에 티스토리로 블로그 글을 작성하다가 에디터의 불편함을 느끼고, 또한 포트폴리오를 정리하자는 생각에 계획을 실행에 옮겼습니다.
회사에서 리액트를 활용하고 있었고, 디자인을 하며 마크업까지 했기 때문에, 공부도 할겸 겸사겸사 만들자라는 생각에 시작했던 프로젝트.
가장 큰 문제는 바닥부터 블로그와 포트폴리오를 통합한 사이트를 만들겟다는 접근방식이었습니다.
포트폴리오로써 활용될 사이트라고 생각하니 너무 많은 리소스를 디자인에 할애하고 있었습니다. 스크롤 애니메이션, 반응형 디자인 등 레이아웃 개발에 더 많은 시간을 쏟게 되었습니다. 그렇다보니 정작 안에 들어갈 컨텐츠를 작성할 시간이 없었습니다.
두번째 문제는 처음 사용하는 개발 환경입니다. 회사에서 사용하던 기술스택이 리액트는 맞지만, NextJS를 활용하여 개발하던 것과 다르게, 개츠비는 처음 사용해 보았습니다.
정적사이트를 만드는데 SSR를 활용하는 NextJS는 과한 것 같다라는 생각에 활용하게 된 개츠비지만, NextJS와 다른 환경설정 및 graphql을 통한 데이터 처리 등 많은 시행착오를 겪었습니다.
그리고 처음으로 github pages를 통한 배포를 진행했는데, 이 과정에서 깃이 꼬이는 등 수 많은 시행착오를 겪게 되었습니다.
세번째는 회사업무였습니다. 당연히 블로그를 만들고하는 일은 즐겁고 흥미로운 일입니다. 그러나, 이 일을 위해 주된 일인 회사업무를 놓을 수는 없습니다.
그리고 3월부터 지금까지 바쁜 나날들이 계속되었습니다.😇 정말.. 바빴습니다. 물론 그 과정 중 THREEJS와 Blender를 활용하는 등 다양한 경험을 했습니다.
그러나 업무를 마치고 집에와서 블로그를 만들기에는 개발하기에는 피곤함이 앞섰습니다.
위와 같은 이유로 개츠비를 통한 블로그 개발은 중단되었습니다. 그리고 생각을 바꿨습니다. 통합 사이트를 만들지 말고, 블로그, 포트폴리오 사이트를 분리하자.
그리고 하나하나 완성한 이후에 통합하자. 무엇을 먼저할까 고민하다 그 동안의 경험을 정리하는 것이 우선되어야겠다는 생각을 했고, 블로그를 먼저 만들자는 결론을 내렸습니다.
그리고 발견한 Docusaurus
어떻게 블로그를 만들지 고민하던 중 회사에서 서비스 독스 페이지를 만들게 되었습니다. 관련된 서비스를 찾던 중 발견한게 바로 Docusaurus였습니다.
그리고 회사에서 적용하면서, 그리고 개인적으로 사용해보면서 느낀점.
이거.. 개좋다..! 😎
문서화를 위한 사이트를 만들기에 너무 잘되어있는 거 아닌가!! 역시 페이스북 인가! 하는 생각이 들 정도로 너무 잘 되어있고 편했습니다. 그리고 무엇보다 공식문서가 한글화가 되어 있었습니다. 저는 영어를 잘 못해서 독스 페이지를 읽을 때 항상 어려웠는데, 이는 정말 큰 장점이었습니다.
덕분에 빠르게 만들고 Vercel을 통해 배포하였습니다. (Vercel도 정말 쉽게 배포하고 관리할 수 있습니다. 적극 추천드려요.)
docusaurus를 통해 블로그 사이트를 만들면서 느끼던 장점을 정리하면 다음과 같습니다.
- 리액트 기반의 MDX 기능 제공
- 공식문서 한글화
- 쉬운 config.json 설정과 커스텀
1. 리액트 기반의 MDX 기능 제공
리액트를 베이스로 웹을 구성하는데 익숙한 저에게 익숙한 환경이었습니다. 따라서 컴포넌트를 불러와 활용할 수 있는 MDX도 비교적 편하게 적응할 수 있었습니다. 또한 자체적으로 MDX용 기능을 구현해 놓아서 이를 활용해 효과적인 정보구조작성을 하기에도 용이한 것 같습니다. 다음은 Docusaurus에서 제공하는 컴포넌트 중 일부입니다.
<Tabs>
<TabItem value="apple" label="Apple" default>
This is an apple 🍎
</TabItem>
<TabItem value="orange" label="Orange">
This is an orange 🍊
</TabItem>
<TabItem value="banana" label="Banana">
This is a banana 🍌
</TabItem>
</Tabs>
This is an apple 🍎
This is an orange 🍊
This is a banana 🍌
2. 공식문서 한글화
앞서 말했듯 Docusaurus의 공식문서는 한글화가 되어있습니다. 그것도 퀄리티가 굉장히 좋습니다. 커뮤니티에서 한글화를 한 것인지, 아니면 팀 내부에 한국분이 계신지 모르겠지만 정말 감사드립니다. 한글화가 되어있어 필요한 기능을 쉽게 찾아볼 수 있고 제공하는 문서 및 기능 역시 훌륭합니다. 만약 사이트를 만들고 싶은데 언어의 장벽 때문에 어려움을 겪고 계시다면 Docusaurus를 활용해보세요! 구글 검색보다 훨씬 빠르게 만들 수 있을거예요. 😎
3. 쉬운 config.json 설정과 커스텀
사이트를 만들기 위해 기본적인 설정이 다 세팅되어 있으며, 커스텀하기에도 정말 쉽습니다. 저에게 있어 생소했던 기능이 있다면 swizzle이라는 기능인데, Utterances를 통해 깃헙 댓글 기능을 구현하면서
활용해보니 효율적이라는 생각을 했습니다. 다음은 제 블로그 헤더 설정 중 일부입니다.
const config = {
...
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
navbar: {
title: "coffee_blog",
logo: {
alt: "coffeegom logo",
src: "img/icon/headerLogo.png",
},
items: [
{
type: "dropdown",
label: "Books",
position: "left",
items: [
{
label: "1. 러닝 디자인",
to: "/docs/category/1-러닝-디자인",
},
{
label: "2. 러닝 마크업",
to: "/docs/category/2-러닝-마크업",
},
{
label: "3. 유행에 대하여",
to: "/docs/category/3-유행에-대하여",
},
],
},
{ to: "/blog", label: "Notes", position: "left" },
{
href: "https://yuncoffee.github.io/",
label: "Canvas",
position: "left",
},
{
type: "search",
position: "right",
},
],
},
}),
}
module.exports = config
위처럼 UI 커스텀이 용이할 뿐 아니라 다양한 설정을 제공합니다.
마치며
정리하면 Docusaurus를 활용해 블로그를 만든 이유는 다음과 같습니다.
- 커스터마이징이 자유로운 사이트를 만들고 싶었다!
- 바닥부터 모든 것을 만드는 것은 그럴싸한 계획이었으나, 어려운 일이었다!
- 효율적인 컨텐츠 정리를 위해 포트폴리오와 블로그를 분리하여 사이트를 구성하자!
- Docusaurus는 블로그 사이트를 만들기에 효과가 굉장했다!
앞으로의 계획은 Docusaurus 스타일 커스텀보다는 컨텐츠 작성을 주로 하게될 것 같습니다만은, 또 모르겠습니다.
지금은 너무 그대로 테마를 카피해온 것 같아서, 어느 순간 레이아웃을 건드리고 있을지도?
혹시나 생각의 정리를 위한 블로그가 필요하면서 자유롭게 커스텀하고 싶은 욕구가 있으신 분들이라면
적극적으로 Docusaurus 추천드립니다!