▶️ 이 포스팅에서 다루는 것
오픈소스에서 노션을 블로그로 활용하려는 시도는 여럿 있었고, 우피라는 상용화된 서비스도 있다.
이번 챕터는 노션을 CMS로 다루는 다른 오픈소스 프로젝트별 기능들을 정리해보려 한다.
📌 HTML에 CSS, JS를 rewrite 하는 방식 (Fruitionsite)
📌 노션DB를 Headless CMS로 활용하는 프론트 앱을 따로 만들어 배포하는 방식 (Nobelium)
📌 노션에 완전 호환되는 프론트 앱을 따로 만들어 배포하는 방식 (nextjs-notion-starter-kit)
깃허브 속 오픈소스들은 크게 이 세가지 방식으로 노션 블로그를 만들었다.
⚡ 블로그 활용성 비교
ㅤ | Notion | |||
웹 바이탈 | 👎 Slow | 👎 Slow | 👍 fast (SSG) | 👍 fast (SSG) |
카테고리(태그) | 🚫 | 🚫 | ☑️ | ☑️ |
사이드바 ToC | 🚫 | 🚫 | 🚫 | ☑️ |
CSS, JS 수정 | 🚫 | ☑️ | ☑️ | ☑️ |
JS Framework
확장성 | 🚫 | 🚫 | ☑️ next.js | ☑️ next.js |
SEO 최적화 | 🚫 | ☑️ sitemap.xml | ☑️ RSS feed | ☑️ RSS feed, sitemap.xml |
검색기능 개선 | 🚫 노션 기본 검색 | 🚫 노션 기본 검색 | ☑️ 인터렉티브, 빠름, 그러나 본문 내용 검색 안됨 | 🚫 노션 기본 검색 |
커스터마이징
난이도 | 🚫 | 쉬움
Vanilla JS | 중간
next.js | 어려움
next.js, Typescript |
디자인 완성도 | 노션 기본 | 노션 기본
+ 불필요 Nav 제거
+ CSS/JS커스텀 가능 | 최소기능만 기본 탑재되어, 너무 심플함 | 매우 뛰어남 |
▶️ 노션 페이지 공유 (디폴트)
😉 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 : blog.over.ist 생성 및 트러블슈팅 일지
😉 Advenced Features
클라이언트와 Notion 서버 사이에 응답 내용을 수정해주는 서버가 하나 있음
- 기본 기능에서
Notion 사용해보기버튼 없애준다.
- URL Pretty (한글지원)
- 모든 DOM 태그 작성가능(style, script 등)
- 덕분에 웬만한 건 다 개발할 수 있다!
- Cloudflare Pages와 연동하여 리액트와 같은 JS 라이브러리를 쓸 수 있다.
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를 안함ㅠ
- blog.over.ist 생성 및 트러블슈팅 일지
- 이미지, 북마크 등 리소스 가져올 때 경로 에러남
- 서버리스 앱을 배우고 활용하는 수고 필요한데, 아래 과제들을 해결할 수 있다면 도전해볼만 하다.
- 사이트맵 생성 자동화 및 포스트 별 meta태그 적용 등 SEO 최적화 직접 해결해야 함.
- 한글 URL 지원 직접 해야 함
- SSG 빌드 및 CI/CD 직접 해야 함
- TOC 직접 개발해야 함
- 카테고리 네비게이션 생성 직접 해야 함
- 노션 검색기능 개선
📝 총평
Notion 기본 템플릿만으로 표현 가능한 홈페이지라면 유용하다. Workers를 쓰지 말고 Next.js로 리빌딩하여 확장 기능들이 달린 SSG Pages로 제작해볼 만 하지만 만들어야 할 게 너무 많다. 차라리 우피를 쓰는게 낫다.
▶️ Nobelium
- Demo : https://nobelium.vercel.app/
- Github : https://github.com/craigary/nobelium
😉 Advenced Features
노션 DB를 Headless CMS로 활용하여 Next.js를 통해 정적페이지 빌드
👍 모든 블록을 React 컴포넌트로 표현 가능 (캘린더 제외) : react-notion-x 사용
🚀 매우 준수한 바이탈 : react-notion-x로 해석한 블록을 next.js로 정적 빌드
🖇️ SEO 최적화 해결 : 포스트별 URL Slug, Description을 직접 설정 가능, RSS feed제공 (sitemap.xml은 없음)
🏷️ 태그 지원 : 태그 입력 지원, 태그별 검색 가능
🔎 빠른 검색기능 지원 : React state를 활용해서 타이핑시 동적 리렌더링 (티스토리에서 구현 불가능한 아주 편리한 기능)
🏁 글 발행 상태 설정 가능 : 발행/비공개 설정
🧑💻 활발한 오픈소스 : 버그 제보 수정 등 오픈소스 활동 매우 활발함 (버려두지 않은 서비스)
완성된 퀄리티가 있는 노션 블로그 서비스
기술스택
- Generation: Next.js로 정적 페이지로 빌드
- Page render: react-notion-x
- Style: Tailwind CSS
- Comments: Gitalk, Cusdis 외 댓글 기능 확장 가능
노션 DB를 CMS로 사용
거의 모든 노션 블록, 레이아웃을 표현 가능
🤔 Challenges
- sitemap.xml 없음 : SEO 최적화시 feed 뿐만 아니라 sitemap.xml도 함께 제출되어야 좋음 (구글SEO가이드)
- ToC, 사이드바는 기본기능으로 구현되어 있지 않음
- react-notion-x는 노션과 100%호환되지 않음, 버그 조금 있음
- ex) 컬렉션 뷰에서 필터링 기능 반영 X
📝 총평
노션의 기본 기능은 조금 빠지지만, 블로그 서비스로 쓰기 아주 강력한 오픈소스.
▶️ nextjs-notion-starter-kit
- Demo : https://transitivebullsh.it/
😉 Advenced Features
react-notion-X 개발자가 만들고 next.js로 빌드한 블로그 서비스
🦋 디자인 : 노션 레이아웃을 준수하면서 각색한 화려한 디자인
👍 모든 블록을 React 컴포넌트로 표현 가능 (캘린더 제외) : react-notion-x 사용
👏 사이드 ToC 지원 : CSS 버그 직접 고쳐야함
🏷️ 태그 지원 : 태그별 보기 지원
🚀 매우 준수한 바이탈 : react-notion-x로 해석한 블록을 next.js로 정적 빌드
🖇️ SEO 최적화 해결 : 포스트별 URL Slug, Description을 직접 설정 가능, RSS feed, sitemap.xml 제공
🔎 검색기능 지원 : 노션 기본 검색기능과 동일, 다소 느리다.
🧑💻 활발한 오픈소스 : 버그 제보 수정 등 오픈소스 활동 매우 활발함
🤔 Challenges
- CSS 버그나 하자 조금씩 있음. 아래 이슈에는 일부만 작성.
디자인 수정 (TOC, Breadcrumbs, Darkmode, CSS)
Updated Oct 16, 2022
- react-notion-x는 노션과 100%호환되지 않음, 버그 조금 있음. 제보는 자주 들어오는데, 직접 고치진 않는다.
- 한글 URL을 지원하지 않는다. 직접 수정해야 함.
📝 총평
괜찮은 디자인, 상당히 괜찮은 노션 호환성, 완성된 블로그 기능 그러나 잔버그가 다소 있음.