소개
워드프레스로 홈페이지를 운영하다 기존 플러그인 만으로는 원하는 결과물을 얻기 쉽지 않아 플러그인 개발을 하느니 차라리 CMS 없이 웹 앱을 만들어보자는 생각으로 새 홈페이지를 만들면서 DB도 기존 mySQL에서 serverless DB로 migration하는 작업을 n8n을 이용해 시도해 보자는 생각으로 n8n 스터디를 시작했습니다. 그런데 웹 앱을 만드는 과정에서 Cursor를 접하게 되었고, MCP를 이용해 Cursor에서 DB까지 제어할 수 있어 이를 이용해 간단한 서비스를 만들어 봤습니다.
진행 방법
Cursor를 이용해 SPA를 만들어달라고 했습니다. 제가 코딩을 잘 몰라서 간단한 HTML, CSS, JS만 사용하라고 명령했고, 한번에 많은 기능을 요청하기 보다는 기본적인 기능부터 하나씩 만들어갔습니다. 모델은 claude 3.7, gemini 2.5를 번갈아 가면서 썼고 error는 그냥 프롬프트에서 고치라고 해도 계속 헤메는 경우 F12 신공으로 주로 해결했습니다. 웹 앱의 기능은 구글 로그인, LaTex를 이용한 수식이 포함된 게시글 작성, Desmos API를 이용한 그래프 포함 게시글 작성 등을 구현해봤습니다. 사용자 관리 및 이미지가 포함되지 않은 글에 대한 DB는 neon을 이용했는데 MCP 지원이 supabase 보다 더 잘 돼서 좋았습니다. 지금은 supabase도 잘 되는 것 같습니다. 간단한 pdf나 이미지는 supabase storage를 이용했고, 무료로도 파일당 50mb라 충분했습니다. 배포는 netlify CLI를 이용해 cursor에서 진행했고 이 과정이 간단하고 빨라서 간단한 수정사항은 바로 배포하면서 테스트했습니다. 커서 프롬프트는 'HTML, CSS, JS를 이용해 간단한 웹 앱을 만들려고 해. 원하는 기능은 구글 로그인, 간단한 글 작성이야. DB는 neon MCP를 이용해서 처리해줘.' 이렇게 한 후 Agent가 묻는 간단한 질문들에 대답하면서 진행했습니다.
결과와 배운 점
코딩을 몰라도 웹 개발 을 할 수 있다는 점이 재미있었고 시행착오없이 한번에 만들어 지지는 않지만 포기하지 않고 거듭 수정에 수정을 시키다보면 점점 원하는 결과물이 만들어지는 과정이 신기했습니다. 앞으로의 계획은 간단한 웹 앱에서 시작했지만 원한 기능들을 조금씩 붙여나가면서 상품화를 해보려고 합니다. 이 과정도 지피터스와 함께할 예정이니 앞으로 조금씩이라도 계속 공부하고 공유할 수 있도록 하겠습니다.