📝 [웹사이트 제작 3편] 노션(Notion)을 내 웹사이트의 완벽한 데이터베이스(CMS)로 쓰는 법

🤔 MySQL, 백엔드? 비개발자는 그런거 모릅니다

📌 한 줄 요약: 복잡한 백엔드 개발 없이, 노션(Notion)을 웹사이트의 데이터베이스(헤드리스 CMS)로 활용하여 콘텐츠를 무료로 관리하는 방법이다.

나만의 웹사이트를 만들려다 '데이터베이스(DB) 연동'이라는 거대한 장벽에 부딪혀 포기한 경험이 있는가? 다행히 복잡한 코딩이나 SQL 지식은 필요 없다. 엑셀이나 메모장처럼 직관적으로 다룰 수 있는 노션(Notion)의 '표(Table)' 기능이 완벽한 웹사이트 데이터베이스(CMS) 역할을 대신해주기 때문이다.

노션이라는 앱이 아직 낯설고 처음이더라도 전혀 겁먹을 필요 없다. 복잡한 개발 지식을 새로 배울 필요 없이, 그저 일상적인 메모장처럼 직관적으로 다루기만 해도 이 도구가 내 웹사이트의 훌륭한 백오피스 역할을 완벽하게 수행하기 때문이다.

💡 노션 데이터베이스: 세상에서 가장 쉬운 헤드리스 CMS

📌 한 줄 요약: 노션을 '헤드리스 CMS'로 활용해 화면(프론트엔드)과 데이터(백엔드)를 분리한다.

처음 웹사이트를 기획할 때만 해도 MySQL 같은 진짜 데이터베이스를 서버에 직접 구축해야 하나 고민했다. 하지만 '유지비 0원'으로 웹사이트 만들기에 도전하기로 한 이상, 무겁고 복잡한 백엔드 환경은 사치였다.

해답은 노션을 일종의 '헤드리스 CMS(Headless CMS)'로 사용하는 것이었다. 헤드리스 CMS란 유저의 눈에 보이는 프론트엔드(껍데기)와 데이터를 저장하는 백엔드(알맹이)가 완전히 분리된 구조를 말한다.

쉽게 말해 껍데기는 클라우드플레어(Cloudflare)가 전 세계에 빠르게 뿌려주고, 알맹이인 글과 이미지는 오직 노션에만 저장해 두는 방식이다. 복잡하고 무거운 워드프레스 관리자 페이지에 접속할 필요 없이, 평소 쓰던 노션 앱에서 편하게 글을 쓰고 수정하면 깃허브 액션의 빌드(업데이트) 과정을 거쳐 내 웹사이트에 고스란히 반영된다.

▲ 프론트엔드와 백엔드가 완전히 분리된 헤드리스 CMS 아키텍처의 데이터 흐름도

📊 노션 API 연동의 핵심: 딱 2개의 'Key'만 챙기자

📌 한 줄 요약: 깃허브 등 외부 서버와 노션을 안전하게 연결하기 위해서는 API 키와 데이터베이스 ID가 필요하다.

그렇다면 깃허브 액션(GitHub Actions)은 어떻게 내 노션에 있는 글을 쏙쏙 빼갈 수 있을까? 노션 API 연동을 위해 우리가 챙겨야 할 준비물은 딱 두 가지다. 복잡한 데이터 호출 코드는 깃허브가 알아서 처리해 주니, 우리는 시스템에 이 두 개의 '열쇠'만 정확하게 채워 넣으면 된다.

🚀 실전 꿀팁: 자주 발생하는 권한 오류 해결과 발행 스케줄링

📌 한 줄 요약: API 키 발급 후 연결 세팅을 완료하고, 노션 표에서 원하는 글만 선택적으로 배포할 수 있다.

1. 블로그의 뼈대가 되는 노션 표(Table) 만들기
데이터를 연동하기 전, 글을 작성하고 관리할 공간부터 세팅해야 한다. 노션에서 빈 페이지를 열고 /표를 입력해 '표 데이터베이스'를 생성하자. 이것이 앞으로 내 웹사이트의 모든 글이 담길 든든한 백오피스가 된다. 처음부터 너무 복잡하게 짤 필요 없이 기본적으로 제목, 작성일, 태그 정도의 열(속성)만 만들어두면 블로그를 운영하기 위한 뼈대가 완성된다.

2. 주의사항 (연결 권한 오류)
DB를 만들고 API 키까지 발급 받았다고 끝이 아니다. 내가 처음 세팅할 때 3시간 넘게 삽질했던 부분인데, 키만 넣고 바로 코드를 돌리면 '접근 거부(Access Denied)' 에러가 난다. 반드시 방금 만든 노션 DB 페이지 우측 상단의 ... (더 보기) 메뉴를 누르고 하단의 ‘연결 (Connections)’ 탭으로 들어가, 발급받은 API 통합 이름을 검색해 '초대'를 해줘야 한다. 이 과정을 거쳐야 외부 서버(깃허브)에서 내 노션 데이터를 정상적으로 긁어갈 수 있다.

3. 실무 꿀팁 (체크박스를 활용한 발행 스케줄링)
글을 쓰다 말고 임시 저장만 해두고 싶을 때는 어떻게 할까? 앞서 만든 노션 표(Table)에 ‘상태 (체크박스)’ 속성을 꼭 하나 추가하자. 나는 이 체크박스에 '☑️ 체크 표시'한 글만 외부 서버가 인식해서 실제 웹사이트에 퍼블리싱하도록 코드를 세팅해 두었다. 이렇게 관리하면 원할 때만 글을 세상에 오픈하는 콘텐츠 통제가 가능해진다.

🙋‍♂️ 데이터베이스 셋업, 나도 했던 고민들 (Q&A)

(👉 질문을 클릭하면 자세한 답변이 펼쳐집니다)

📚 웹사이트 제작 9부작 시리즈 전체 목차

Pixoas에서는 웹사이트 제작을 쉽게 따라 할 수 있도록 9편의 튜토리얼로 쪼개어 연재한다.
차근차근 따라오면 어느새 나만의 개인 웹사이트가 완성되어 있을 것이다.

• 💡 [웹사이트 제작 1편] 유지비 0원? 워드프레스 대신 노션 택한 이유
• 🎨 [웹사이트 제작 2편] AI로 코딩 없이 웹사이트 뼈대 구축하기
• 📝 [웹사이트 제작 3편] 노션을 내 웹사이트의 무료 DB(CMS)로 쓰는 법 (현재 글)
• ☁️ [웹사이트 제작 4편] 요금 0원! 클라우드플레어 무료 호스팅 세팅
• ⚙️ [웹사이트 제작 5편] 노션 글 자동 발행! 깃허브 액션 연동 가이드
• 🚨 [웹사이트 제작 6편] 노션 사이트 이미지 엑스박스(깨짐) 완벽 해결
• 📈 [웹사이트 제작 7편] 구글 SEO 상위 노출 세팅 및 커스텀 도메인
• 💰 [웹사이트 제작 8편] 구글 애드센스 승인: 가치 없는 콘텐츠 피하기
• 🤖 [웹사이트 제작 9편] 챗GPT로 수익형 블로그 기획 및 글감 확장

이 시리즈는 특정 서비스를 무조건 추천하기 위한 글이 아니다. 내가 직접 여러 방법을 비교하고 운영하면서 선택한 구조를 공유하는 기록에 가깝다. 이어지는 4편에서는 완성된 프론트엔드 뼈대와 노션 DB를 전 세계 캐시 서버에 올려 무료로 서비스하는 클라우드플레어 세팅 과정을 공유할 예정이다.

✅ 마무리 정리

1. 복잡한 서버나 DB 구축 없이, 노션(Notion)의 데이터베이스(표)를 웹사이트의 헤드리스 CMS로 완벽하게 활용할 수 있다.
2. 깃허브 등 외부와의 자동 연동을 위해서는 '프라이빗 API 키'와 '데이터베이스 ID' 두 가지가 필수이며, 반드시 노션 DB 페이지에 해당 API를 초대(연결)해 주어야 권한 오류가 발생하지 않는다.
3. 노션 속성에 상태(체크박스)를 추가하면, 임시 저장과 발행 시점을 내 마음대로 조절하며 완성된 글만 선택적으로 배포하는 효율적인 콘텐츠 관리가 가능하다.