재밌는 프로젝트가 하나 더 생겼습니다. 작년에 ⟨혹성의 아이⟩ 영화를 제작했던 친구에게 자신의 포트폴리오 홈페이지를 만들어 달라는 요청을 받았습니다. 이름하여 ⟨99haus⟩('구구하우스'라고 읽음). 작업물과 아티클을 공유하는 것을 목표로 하는 이 페이지의 요구 사항은 단순했습니다. '글을 쓰면 누군가 찾아서 볼 수 있는 것.'
정확히는, 만약 저만의 웹 사이트였다면 이 요구 사항은 매우 단순했을 것입니다. 글을 마크다운이나 HTML로 작성하여 배포하면 끝이기 때문이죠. 하지만 그 친구에게는 달랐습니다(어쩌면 저 혼자 다른 걸 수도 있겠습니다). 그 친구는 마크다운이나 HTML이 무엇인지 전혀 모르기 때문이죠. 저에게 조금이나마 의지가 더 있었다면 마크다운을 배워 보라고 시켰겠지만, 이미 자기 작업 하기에도 바쁜 사람인데 뭘 더 배우라고 시키겠습니까.
그래서 고민한 끝에, 콘텐츠 관리 시스템을 직접 구현해 보기로 결정했습니다. WordPress나 그누보드같은 솔루션도 있을텐데 왜 이걸 직접 구현할 생각을 했을까요? 지금 와서 생각해 보니 잘 모르겠습니다. 아마도, 서버리스 컴퓨팅과 Firebase Firestore를 활용해보겠다는 생각이었을 겁니다.
요구 사항
99haus를 개발하기 전, 저는 요구 사항을 다음과 같이 정했습니다.
- 서버리스 컴퓨팅과 Firebase Firestore를 활용한다. 그 이상의 자원은 활용하지 않는다.
- 배포되는 모든 콘텐츠는 관리자가 직접 관리할 수 있어야 한다.
- 게시글을 WYSIWYG 에디터로 작성할 수 있어야 한다.
1번은 제 개인적인 요구 사항이니 넘어가고, 2번도 뭐... 지극히 당연한 요구 사항이죠. 3번도 사실, 이전부터 알고 있었던 TOAST UI Editor를 활용하면 쉽게 해결할 수 있는 문제라고 생각했습니다.
간단히 끝날 프로젝트라는 생각으로 개발에 착수하면서, 친구의 디자인 시안대로 마크업과 스타일링을 완료했습니다. 관리자가 게시글을 관리할 수 있도록 관리자 페이지도 만들어 놨었죠. 이제, 게시글 등록과 WYSIWYG 에디터를 적용할 차례입니다.
의존성 충돌 문제
저는 WYSIWYG 에디터로 TOAST UI Editor를 선택하고자 했습니다. 웹 에디터로서 기본기를 갖춘 녀석이라고 생각했기 때문입니다. 저는 WYSIWYG 에디터를 적용하기 위해 TOAST UI Editor의 공식 문서에 적힌 대로 설치해보려고 했습니다. 그런데, 가장 큰 문제가 생겼습니다.
TOAST UI Editor의 최신 버전이 React 18 이상을 지원하지 않는다는 것이었습니다. 저는 이 프로젝트를 Next.js 14 버전으로 작업하고 있었는데, Next.js 14 버전은 React 18을 사용합니다.
막막했습니다. 다른 대안을 생각하지 않았기 때문입니다. 저는 그저 네이버 블로그에 글쓰듯이 글을 쓰면 그대로 올라가는 그런 걸 원했단 말입니다.
아, 이 친구가 마크다운을 할 줄 알았다면 얼마나 좋았을까? 아니면 마크다운을 기반으로 동작하는 Notion같은 에디터라도 있으면 좋을텐데...
...라고 생각한 순간, 뇌가 번뜩였습니다. "Notion API를 활용하면 되는 거 아닌가?"
이 방법을 사용한다면 Firestore에 게시글을 저장하고 불러올 필요도 없고, 콘텐츠 관리도 그냥 Notion에서 하면 되고, 게다가 일종의 WYSIWYG 에디터 역할도 해주니, Notion API를 활용하면 한 번에 모든 요구 사항을 충족할 수 있었습니다.
아, 그리고 가장 중요한 것. 이 친구는 Notion은 쓸 줄 압니다.
결론
콘텐츠 관리 시스템을 직접 구현하는 것은 쉽지 않은 문제라는 것을 알았습니다. WYSIWYG 에디터를 갖다 붙이기 이전에, 각 게시글마다 필요한 정보들을 input으로 받고, 여기에 유효성 검사를 적용하는 것만 하더라도 많은 노력이 필요하더군요. 게다가 글을 쓰다가 날라가는 것을 막기 위해 임시 저장 기능을 붙이는 것까지가 계획이었지만, 에디터와 씨름하느라 저의 정신력은 바닥난 상태였습니다.
반면 Notion API를 활용하면 위 문제들이 해결됩니다. 글을 쓰다가 날라갈 걱정을 하지 않아도 되고, Notion 페이지의 속성 기능을 사용하면 각 게시글마다 필요한 정보들을 input으로 받을 필요도 없습니다. 즉, Notion API를 활용하면 Notion을 데이터베이스처럼 활용할 수 있는 겁니다.
그러나 Notion API를 쓰는 것이 절대적인 해결책은 아닐 겁니다. WordPress나, 아니면 이 블로그처럼 gatsby를 활용하는 것이 어떻게 보면 가장 올바른 해결책일 수 있겠죠. 그렇지만 이 포트폴리오 사이트가 엄청 다양하고 강력한 CMS 기능을 요구하지도 않았기 때문에, 저는 가장 간단하게, 그리고 실험적인 방법으로 이 프로젝트를 진행해보고 싶었습니다.
다음 게시글에서는 Notion API를 적용하면서 생겼던 문제와 해결 과정을 공유하고자 합니다.