Cursor AI와 MCP로 복잡한 마이그레이션 프로세스를 체계적으로 접근하고, 디버깅 과정 없이 성공적으로 완료한 실제 사례를 공유합니다.
이 과정에서 적용된 전략적 접근법과 도구 활용 능력이 여러분의 프로젝트를 원할히 수행하는 데 도움이 되길 바랍니다! 😊
AI 노코드 툴로 포트폴리오 사이트 만들기: v0 vs Lovable 비교 분석
저번에 작성한 사례에서 무료 사용자에게 적합한 웹,앱 디자인 툴로 Lovable을 선택했습니다!
Lovable은 풀스택 애플리케이션을 지원하며, 제시한 프롬프트와 요구사항에 맞춰 원하는 디자인을 효과적으로 구현해주었습니다. 그러나 생성되는 소스코드를 분석한 결과, 기본적으로 React와 Vite 기반으로 프론트엔드 작업을 진행해주었습니다.
Vite는 뛰어난 개발 경험과 빠른 빌드 속도를 제공하지만, 본질적으로 클라이언트 사이드 렌더링에 최적화되어 있어 검색 엔진 최적화와 초기 로딩 성능 측면에서 제약이 있었습니다. 저는 이러한 한계를 인식하고 Next.js의 다양한 렌더링 방식과 SEO 최적화 기능을 활용하기 위해서 Next.js 기반으로 코드를 수정해야 겠다고 생각했습니다.
렌더링 방식? SEO? - 간단 개념 설명
렌더링은 웹 브라우저가 서버로부터 받은 데이터를 사용자가 볼 수 있는 시각적인 형태로 변환하여 화면에 그리는 일련의 과정입니다. 웹 설계도를 받아 실제 건물을 지어 사용자에게 보여주는 행위입니다!
CSR : 고객이 주방에서 재료를 받아 직접 요리를 완성하는 것
장점 : 초기 로딩 후 페이지 간 이동이 매우 빠르고 상호작용 풍부
EX): Facebook, Gmial
SSR : 주방에서 완성된 요리를 고객 테이블로 바로 가져다 줌
장점 : 검색 엔진이 페이지 내용 쉽게 파악 -> SEO에 유리, 초기 로딩 속도 빠름
EX): 뉴스 사이트, 블로그
SSG : 미리 모든 요리를 준비해두고 고객이 주문하면 즉시 서빙!
장점 : 매우 빠른 로딩 속도
EX): 회사 홈페이지나 제품 소개 페이지
ISR : 기본적으로는 미리 준비된 요리를 서빙하지만 시간이 지나면 새로운 재료로 요리 준비
장점 : 하이브리드 방식으로 속도와 콘텐츠 업데이트 모두 지원
EX): 전자상거래 사이트, 콘텐츠 관리 시스템 등
SEO(Search Engine Optimization)
검색 엔진이 페이지의 내용을 정확히 파악하고 관련 검색어에 대해 적절히 노출시킬 수 있도록 웹사이트의 구조와 내용을 최적화하는 것
온라인 쇼핑몰이나 서비스 업체 웹사이트처럼 새로운 고객을 찾아야 하는 비즈니스에서는 필수
Next.js는 CSR 뿐만 아니라 SSR, SSG, ISR 등 다양한 렌더링 전략을 지원해 이러한 다양성은 성능 최적화와 사용자 경험 향상에 큰 장점을 제공합니다.
Cursor AI를 활용한 전략적 접근
마이그레이션 작업은 호환성 문제, 데이터 손실 위험, 복잡성(계획, 실행, 테스트 등 복잡한 절차 필요), 비용 및 시간 등의 문제로 상당히 숙련된 개발자가 진행하며 팀 단위로 진행하는 경우가 많습니다. 단순한 라이브러리 교체가 아니라 애플리케이션의 아키텍처적 전환을 포함하는 작업이므로 시스템 전체 구조를 이해해야 하면서 다양한 개발 지식이 필수적이죠!
하지만 우리에게는 숙련된 개발자 그 이상의 실력자 Cursor와 훌륭한 AI Agent가 있습니다.
제가 마이그레이션 작업을 진행한 순서는 다음과 같습니다.
1. Lovable chat 모드로 소스코드와 아키텍쳐 분석한 문서 작성
- 기존 애플리케이션의 기능과 요구사항을 명확히 문서화
2. Git Clone을 통해 기존 Lovable 프로젝트의 소스코드를 Cursor 환경으로 가져오기
- 프로젝트의 전체적인 구조와 의존성을 보존하는 것에 중점
3. 작성한 PRD 문서를 토대로 Cursor에 @ 로 문서주고 코드 이해시키기
- AI가 프로젝트의 전체적인 맥락을 이해하고 최적의 마이그레이션 전략을 수립할 수 있도록 충분한 정보를 제공
4. 마이그레이션 PRD 문서를 Task Master MCP 활용해서 Task 분리하기!
Task Master MCP는 마이그레이션 작업을 논리적 단위로 분할하고 각 단계별 완료 조건을 정의
5. 분류한 Task 확인 후 Cursor에게 작업 실행시키기!
리버스 메타 프롬프팅(Reverse Meta Prompting)으로 AI에게 추가 정보 요청하도록 유도
https://petalite-tuna-6c9.notion.site/Prompt-200394aaa2f480869cacc4998ce4a3d1
마이그레이션 진행 과정 및 결과
일단 Cursor에게 맥락을 정확히 주고 Task로 할 일까지 미리 쪼개니까 훨씬 작업이 빨리 진행되었습니다. 특히 저는 소스코드가 작성된 2개의 프로젝트 폴더인 랜딩페이지와 대시보드 페이지를 하나로 합쳐야 했기 때문에 작업의 순서가 매우 중요했죠.
그리고 그동안 커서를 사용해 봤을 때 맥락을 제대로 줬어도 이 친구가 제가 원하는 곳에 폴더를 만들어주지 않거나 다른 폴더에 코드를 작성해주는 경우도 꽤 발생했기 때문에
작업할 새 프로젝트 폴더와 아키텍쳐 구조를 미리 설계해 주었습니다.
작업을 진행하면서 vite.config.ts 설정 파일을 next.config.js로 바꿔 준다거나
package.json 파일에서 필요한 라이브러리들의 의존성을 제가 원하는 버전에 맞춰 잘 수정해주었습니다. 물론 작업이 오류 한 번 없이 완벽하게 진행되지는 않았습니다. 라이브러리 의존성 문제, 대시보드 페이지로 이동할 때 무한 리다이렉션 문제가 발생했지만 오류 발생 횟수가 현저히 적었습니다.
이후 npm install, npm run dev를 통해
로컬 환경에서 웹 페이지가 잘 나오는 것을 확인하고 Vercel에 배포까지 진행했습니다!
jinmini.com
물론 아직 DB나 백엔드 작업은 진행하지 않았지만,
Lovable로 초기 웹 사이트 디자인부터 마이그레이션 Vercel 배포까지의 시간이
총 4시간이 걸렸다는 사실에 저조차 놀라게 되었습니다.
배운 점과 나만의 꿀팁!
사실 마이그레이션 작업은 전반적인 개발 지식이 필요한 작업이라고 생각했고 프론트엔드 개발 경험이 3개월 정도에 불과한 상황에서, "과연 디버깅 없이 원활하게 작업을 진행할 수 있을까?"라는 근본적인 의문이 있었습니다.
하지만 실제 작업 과정에서 AI 도구들의 강력함을 체감할 수 있었습니다.
핵심은 단순히 도구를 사용하는 것이 아니라, 원하는 작업에 대한 정확한 맥락 제공과 체계적인 작업 분해에 있었습니다.!
Reverse Meta Prompting의 중요성
부족한 정보가 있을 때는 AI에게 능 동적으로 추가 정보를 요청하도록 유도하는 것이 중요합니다. "더 자세한 정보가 필요하면 질문해 주세요"와 같은 명시적인 지시를 통해 AI가 역으로 필요한 정보를 파악하고 요청할 수 있도록 하는 것이 중요하다고 생각합니다! 비판적 사고와 정보 검증을 통해 더욱 능동적인 협업 파트너로 AI를 사용하실 수 있습니다!