노션 MCP 연동, 바이브코딩으로 게시판 만들기 By Windsurf(2)

복잡한 SQL 쿼리문 하나도 안쓰고 게시판을 만들 수 있을까요?
노션 MCP는 되더라구요.

지난 번에는 Windsurf 에서 노션 MCP를 연결했습니다.

https://itadventure.tistory.com/752

노션 MCP 연동, 바이브코딩으로 게시판 만들기 By Windsurf(1)

오늘은 후속편으로 노션 게시판을 만들텐데요.
MCP를 연동해서 대단한 걸 보실 겁니다.

xampp 환경에서 PHP로 진행하겠습니다.
'C:\xampp\htdocs\AIBBS' 폴더를 생성, 윈드서프에서 폴더를 열어 주세요.

클로드(Claude) 3.7 Sonnet(Think) 가 비록 1.2 크레딧을 소진하지만 일을 꽤 잘합니다.
다른 모델은 대충 만들고 '이어서 해드릴까요?' 물어보지만, 클로드는 상당히 많은 작업을 진행해 줍니다.
이 모델을 선택하고,

아래와 같이 프롬프트를 입력!
그리고 기다리시면 됩니다.

게시판을 만들려고 해. MCP 에 연결된 내 노션에 테이블을 만들고 PHP 언어를 사용해 앱도 만들어줘.
단, 첨부파일은 구현하지 마.

잠깐, 노션 API는 첨부파일을 지원하지 않습니다.
외부 링크로 연결하는 법도 있지만 해킹 이슈도 있고 익혀야 할 전문 IT지식도 필요해 넘어가겠습니다.

게시판 코딩은 꽤 시간 걸리는 작업인데요.
AI도 사람처럼 설계를 먼저 하고 테이블을 생성 후 코딩을 합니다.
아래와 같은 비슷한 문구가 나오면 설계가 끝난 것인데요.

나의 노션연동 페이지를 열면 '게시판' 이라는 서브 페이지가 생겼을 겁니다.
음 설마?

클릭하시면 노션의 데이터베이스 기능으로 게시판을 만든 것을 확인하실 수 있지요. 와우~
AI 가 구조를 설계해 노션에 집어넣은 건데요.
MCP 연결을 해놔서 가능한 것입니다.

30분 정도 기다렸을까요? 드디어 완성되었다고 합니다.

지금까지 노션 API를 활용하여 게시판 시스템을 성공적으로 구현했습니다. 아래에 구현된 주요 기능과 파일들을 정리해 드리겠습니다.

구현된 기능
노션 연동 데이터베이스 생성
게시판용 '게시판' 데이터베이스를 노션에 생성했습니다
제목, 내용, 작성자, 작성일, 카테고리 필드를 설정했습니다
웹 게시판 시스템 구현
게시글 목록 조회 (카테고리 필터링 기능 포함)
게시글 상세 조회
게시글 작성
게시글 수정
게시글 삭제

 

화면은 아래와 같네요.

이제 글쓰기 버튼을 누르니 작성 페이지가 나오네요.

`

하지만 글을 작성하면 100% 오류가 날 겁니다. 노션 API KEY를 설정하지 않았기 때문인데요.

'아니, MCP 설정에서 입력하지 않았나요?'

게시판은 컴퓨터만이 아니라 다른 서버에서도 작동이 되어야 합니다.
그렇기 때문에 MCP 설정이 안된 환경에서도 작동이 되어야 하기 때문이지요.

이런 사실을 몰라도 됩니다. 모른다고 가정하고 오류 화면을 캡쳐해서
채팅창에 복붙후 물어보시면 됩니다.

게시판을 작성하는데 오류가 발생했어. 확인해줘.

몇가지 문제를 확인하고 설명해주는데요.
API KEY 입력이 안되었다는 핵심을 딱 찝어 줍니다. 

밑줄친 config.php 를 클릭하면 소스창이 바로 열리는데요.

아래와 비슷한 설명이 있는 곳을 찾아서 내용을 지우고

노션 API KEY를 붙여 넣으시면 됩니다. 그리고 Ctrl+S 로 저장!

이제 게시글을 다시 작성하겠습니다.
오! 성공적으로 작성이 되고, 목록에 노출도 되네요.

게시글을 클릭하면, 조회 페이지가 나옵니다.

글을 하나 더 작성하고 노션 페이지를 확인하니 그동안 작성한 게시글이 누적된걸 확인할 수 있습니다.

제가 시도했을 때 한가지 문제가 있었는데요.
'내용'이 기록되지 않더라구요. 문제를 해결하겠습니다.
여러분이 시도할 때는 한번에 나올 수도 있습니다.

화면을 캡쳐해서 아래와 같이 프롬프트를 입력하였습니다.

다른건 잘 되는데 내용이 안 들어가네. 확인해줘.

다시 한번 글을 작성하고 조회를 하니 와우~ 이번에는 제대로 나옵니다.
제가 좋아하는 성경 말씀입니다 ㅎㅎ

노션도 확인해볼까요? 3번째 글 내용은 제대로 들어간 것을 확인할 수 있습니다.

 

이 게시판은 사실 보완할 점이 많습니다.
원래는 회원가입이 먼저 이루어지고, 게시글 수정도 본인으로 제한하는 등 그런 부분도 추가해야 합니다.
게다가 속도도 엄~청 느립니다.
노션에 연동해서 게시판을 만든다는게 사실 일반적인 일은 아니거든요.
하지만 초심자 입장에서 복잡한 SQL 문 하나도 사용하지 않고 이런걸 만들수 있다는
하나의 '보기'가 될것 같아 공유 드립니다.
응용하면 게시판이 아니라 자동 수집해서 노션에 통계를 작성하는 방식으로도 가능하겠지요.

필요하신 분에 도움이 되시길 바랍니다.
오늘도 방문해주신 모든 분들께 감사드립니다!

혹여라도 Windsurf AI 를 구독하실 분은 하단 링크 통해 구독하시면 저와 구독자님께 250 크레딧이 함께 제공됩니다! 후원하실 분은 참고해 주세요~!

https://windsurf.com/refer?referral_code=1apci34g8vgz0qom