소개
워드프레스로 홈페이지를 운영하다 기존 플러그인 만으로는 원하는 결과물을 얻기 쉽지 않아 플러그인 개발을 하느니 차라리 CMS 없이 웹 앱을 만들어보자는 생각으로 새 홈페이지를 만들면서 DB도 기존 mySQL에서 serverless DB로 migration하는 작업을 n8n을 이용해 시도해 보자는 생각으로 n8n 스터디를 시작했습니다. 그런데 웹 앱을 만드는 과정에서 Cursor를 접하게 되었고, MCP를 이용해 Cursor에서 DB까지 제어할 수 있어 이를 이용해 간단한 서비스를 만들어 봤습니다.
진행 방법
역시 Cursor를 이용해 웹 앱 개발을 지시하였는데 이번에는 사용할 언어를 지시하지 않고 완전히 자연어로 원하는 기능만 묘사했습니다. 평소 구글 드라이브나 네이버 마이박스 등을 쓰면서 기능들이 쓸데없이 무거워서 맘에 안드는 점이 있었는데 저는 간단한 pdf만 여러곳에서 보면 되기 때문에 심 플한 클라우드 스토리지 기능을 하는 웹 앱을 만들라고 했습니다. 이전에 첫번째 웹 앱을 개발할때는 neon MCP만 잘 작동하고 supabase는 잘 안됐었는데 두번째 웹앱을 만들때 supabase에서 공식적으로 MCP를 발표해서 이것을 사용하니 이전과 달리 잘되었습니다. 사용한 프롬프트는 '간단한 pdf를 업로드하고 볼 수 있는 웹 앱을 만들어줘. supabase MCP를 이용하고, 구글 로그인도 구현해줘.' 정도로 시작하고 역시 agent의 질문에 답하면서 만들어 나갔습니다. 이전과 달리 기술 stack을 구체화하지 않았더니 커서가 Vite, React, TS를 이용해서 웹 앱을 만들었습니다. 배포는 역시 netlify CLI를 이용해서 커서 내에서 deploy할 수 있게 하였고, 이번에는 지난번보다 훨씬 간단한 기능의 웹 앱이었기에 첫 번째 배포 후 크게 수정할 사항이 없었습니다. F12에서 개발자 툴을 확인해봐도 console에 오류가 하나도 나지 않았습니다.
결과와 배운 점
사용할 언어/기술 스텍을 명시하지 않아도 커서가 알아서 지시받은 기능의 웹 앱을 개발한다는 점이 재미있었고, 어차피 코딩을 잘 모르기에 간단한 HTML, CSS, JS만 사용하라고 하는 의미가 없고 자유도를 높여 커서의 선택을 열어두어 Vite, React, TS로도 웹 앱을 개발하는 것을 [구경한 거지만..] 경험해서 신기했습니다. 앞으로의 계획은 다양한 개발 방법으로 간단한 사이트들을 더 만들어보고 각각의 장단점을 비교해보면서 웹 개발을 더 공부해볼 생각입니다. 이 과정도 지피터스와 함께하면서 공유하도록 하겠습니다.