Frontend Development | August 3, 2024
Notion 을 CMS 로 활용하기
돈 한 푼 들이지 않고 간지폭풍 블로그 페이지를 만들어 보자.
많은 개발자들이 본인이 습득한 지식과 경험들, 또는 본인의 생각을 글에 담아 블로그에 포스팅합니다. 시간이 지나면 혹여나 잊어버릴 본인을 위해, 그리고 독자가 본인의 목적를 달성할 수 있도록 말이죠.
본인이 가진 값진 것들을 남들에게 아낌 없이 나누고자 하다니, 어찌 이리 이타심 넘치는 생태계가 있단 말입니까? 개발자들은 리얼로다가 참 멋있는 사람들 같습니다.
블로그를 활동을 자주 하는 사람이라면, 누구나 한번쯤 이미 만들어진 플랫폼을 사용하는 것 보다는 본인만의 기똥찬 블로그를 만들어 운영해 보고 싶다는 생각을 하셨을 겁니다.
필자의 경우 게을러 터져서 블로그를 자주 쓰진 않지만, 남들과 다른 개성을 띄지 못하면 발작을 일으키는 홍대병 말기 환자라 더욱 그랬습니다.
그러나, 일반적으로 블로그를 만들기 위해서는 프레젠테이션 외에 쓰기, 수정, 삭제 같은 관리를 위한 기능들을 모두 구현해야 하고 이는 꽤 귀찮은 작업입니다. 데이터베이스와 서버도 구축해야 하고, 클라이언트와 상호작용하기 위한 API, 콘텐츠 관리 페이지도 직접 만들어야 하니까요.
요즘은 Markdown 파일을 프로젝트 디렉토리에 추가하고 내용을 읽어 파싱하는 방식으로 이 기능들을 간단하게 대체하기도 하지만, 직접 사용해 보기도 만들어 보기도 한 입장으로서 관리하는 경험이 그닥 좋진 못 하다 느꼈습니다.
그래서 저 같이 게으르고 조금은 특별하고 싶으나 돈은 없는 당신을 위해 (아니라면 죄송합니다), 한 푼의 돈도 들이지 않고서 높은 수준의 작성 경험을 제공하는 웹 페이지를 구현할 수 있는 방법을 소개드려 보겠습니다. 멋진 블로그를 만드시는데에 조금이나마 도움이 되셨으면 좋겠습니다.
CMS
앞서 말씀드렸 듯, 블로그 글과 같은 일종의 콘텐츠를 제작하려면 콘텐츠를 관리하는 도구가 필요하고, 이를 CMS (Content Management System) 라고 합니다.
설명이 좀 뜬금 없었나요? 결국 이 글의 주제는 콘텐츠 관리 도구를 대체하는 것이기 때문에, CMS 라는 개념에 대해 먼저 알고 가면 좋을 것 같아 말씀드립니다.
CMS 는 작업자가 프로그래밍 없이도 콘텐츠를 손 쉽게 제작할 수 있도록 다양한 기능들을 제공합니다.
하지만 전통적인 CMS 는 프레젠테이션을 위한 기능들이 자체적으로 의존되어 있기 때문에 더 높은 자유도를 필요로 하는 경우에는 한계가 있습니다.
이를 위해 Headless CMS 라는 개념이 등장했습니다. Headless CMS 는 말 그대로 보여지는 것에 의존되지 않은, 프레젠테이션을 분리하여 콘텐츠에 필요한 데이터만을 자유로운 형식, 순서로 구성할 수 있는 CMS 를 일컫습니다.
대표적인 플랫폼으로는 요즘 주목을 받고 있는 Sanity, Shopify 등이 있습니다.
이 글에서는 Notion 을 CMS 로 활용하여 블로그를 만들어 볼 겁니다.
Notion 의 데이터는 정해진 형식이 있기 때문에 완전한 Headless CMS 는 아니지만, 데이터만 사용하고 프레젠테이션은 직접 구현할 수 있다는 점에서 전통적인 CMS 보다는 Headless CMS 에 조금 더 가까울 것입니다.
Notion
Notion 은 메모, 문서 정리, 프로젝트 관리, 데이터베이스, 페이지 호스팅까지 범용적인 용도로 사용할 수 있는 도구이며, 대다수의 개인 또는 조직에서 목적에 맞게 활용하고 있습니다.
우리는 콘텐츠의 메타데이터는 데이터베이스로 관리하고, 콘텐츠의 본문은 데이터베이스 열마다 하위 페이지를 생성해 본문을 작성할 것입니다.
먼저 데이터베이스를 만들어 봅시다. 페이지를 하나 생성하고, 인라인 데이터베이스를 추가합니다.
이제 데이터베이스에 콘텐츠의 메타데이터를 컬럼으로 정의하면 됩니다. 텍스트, 선택, 다중 선택, 날짜 등 다양한 프로퍼티 유형을 제공하니, 본인의 입맛에 맞게 메타데이터를 구성해주시면 되겠습니다.
저는 제목, 설명, 시리즈, 상태, 발행일에 대한 컬럼들을 추가해 봤습니다.
데이터베이스의 열별로 첫 번째 컬럼에 커서를 가져다 대면 열기
버튼이 노출됩니다. 클릭하셔서 하위 페이지를 생성하신 후 본문을 작성해주시면 됩니다.
마크다운 문법부터 자체적으로 다양한 블럭들을 제공하니, 편리하게 문서를 작성하실 수 있습니다.
Notion API
연동하기
Notion SDK
헤헤 아직 작성 중 ~