▶️ 이 포스팅에서 다루는 것

오픈소스에서 노션을 블로그로 활용하려는 시도는 여럿 있었고, 우피라는 상용화된 서비스도 있다.

이번 챕터는 노션을 CMS로 다루는 다른 오픈소스 프로젝트별 기능들을 정리해보려 한다.

📌 HTML에 CSS, JS를 rewrite 하는 방식 (Fruitionsite)

📌 노션DB를 Headless CMS로 활용하는 프론트 앱을 따로 만들어 배포하는 방식 (Nobelium)

📌 노션 레이아웃에 완전 호환되는 프론트 앱을 따로 만들어 배포하는 방식 (nextjs-notion-starter-kit)

깃허브 속 오픈소스들은 크게 이 세가지 방식으로 노션 블로그를 만들었다.

⚡ 블로그 활용성 비교

▶️ 노션 페이지 공유 (디폴트)

😉 Advenced Features

배포를 위한 별다른 노력이 필요 없다. 내가 만든 노션 레이아웃과 템플릿을 그대로 활용 가능하다.

🤔 Challenges

지난 포스트에서 다룬 내용으로, 장점이 곧 단점이 된다.

1️⃣ 로딩 속도 느림 (FCP 1.6초)

2️⃣ 카테고리 트리 표현 어려움

3️⃣ 사이드바에 ToC 표현 어려움

4️⃣ 페이지 상단에 Page Progressbar와 같은 커스텀 CSS, JS 추가 어려움

5️⃣ 한글 URL, meta tag작성, sitemap.xml과 같은 SEO가 어려움

6️⃣ 검색기능이 안정적이지 않음 (너무 느림)

우측 상단에 Notion 사용해보기 버튼 삭제조차 안된다.

▶️ fruitionsite.com

Demo & guide : https://fruitionsite.com/
Trouble shooting Docs : notion.over.ist 생성 및 트러블슈팅 일지

😉 Advenced Features

클라이언트와 Notion 서버 사이에 응답 내용을 수정해주는 서버가 하나 있음

기본 기능에서 Notion 사용해보기 버튼 없애준다.
URL Pretty (한글지원)
모든 DOM 태그 작성가능(style, script 등)
- 덕분에 웬만한 건 다 개발할 수 있다!
Cloudflare Pages와 연동하여 리액트와 같은 JS 라이브러리를 쓸 수 있다.
How to Deploy a React App With Cloudflare Workers | CodeForGeek

How to Deploy a React App With Cloudflare Workers | CodeForGeek

The release of Workers Sites made it super-easy to deploy static applications to Cloudflare Workers. And with the rise of JAMStack-like architectures, static

codeforgeek.com

Cloudflare Workers 서버리스 앱이란

JS 기반으로 작성된 코드에 따라 서버리스 API를 제공해주는 기능
- Wrangler를 활용하여 git 연동 및 CI/CD 가능
- Cloudflare Pages, Key Value DB 사용 가능
- URL에 따른 라우팅 처리기 작성
- Browser V8 Engine 기반 스크립트 작성하여 응답

fruitionsite 작동 원리

Cloudflare workers 서버리스 앱에서 notion page를 fetch 한다.
fetch된 notion pages에서 base url을 교체하고, prettyurl이 있으면 노션 page-id와 교체한다.
Cloudflare workers 서버리스 앱에 작성된 style, script등 하드코딩된 태그를 붙여 응답한다.

🤔 Challenges

완제품이 되기엔 너무 심플한 라이브러리

KV DB도 쓰지 않는데, 굳이 요청 수 10만 회인 workers를 쓸 필요가 없다. 빌드 500회 제한인 대신 트래픽이 무제한인 pages를 활용하는 게 더 바람직하다.
- 단 이때 workers 내장 모듈인 HTMLRewriter를 직접 구현해야 한다. (어렵지 않을 듯)
로딩 속도 해결 안됨
- 노션 공유문서를 재작성해서 가져오는 방식이라, web vital이 더 느리다.
- Cloudflare CDN 캐싱을 쓸 경우 조금 더 빠르긴 하지만, Cloudflare Free 플랜은 한국 리전을 주지 않아 딱히 성능개선이 안됨.
설치시 트러블슈팅 필요
- Issue들이 다소 제보되었지만, 해결법이 나왔음에도 PR Merge를 안함ㅠ
- notion.over.ist 생성 및 트러블슈팅 일지
이미지, 북마크 등 리소스 가져올 때 경로 에러남
서버리스 앱을 배우고 활용하는 수고 필요한데, 아래 과제들을 해결할 수 있다면 도전해볼만 하다.
- 사이트맵 생성 자동화 및 포스트 별 meta태그 적용 등 SEO 최적화 직접 해결해야 함.
- 한글 URL 지원 직접 해야 함
- SSG 빌드 및 CI/CD 직접 해야 함
- TOC 직접 개발해야 함
- 카테고리 네비게이션 생성 직접 해야 함
- 노션 검색기능 개선