
Cursor로 웹 제작 MVP를 2시간 만에 만들기: 프롬프트 하나로 LP 완성까지의 실전
요약
Cursor와 Claude 3.5 Sonnet을 활용하여 2시간 만에 웹 랜딩 페이지(LP) MVP를 제작하는 실전 프로세스를 소개합니다. 프롬프트 기반의 코드 생성부터 실시간 프리뷰, 배포 및 수정 단계까지의 효율적인 워크플로우를 다룹니다.
핵심 포인트
- Cursor와 Claude 3.5 Sonnet 조합으로 개발 속도 극대화
- 프롬프트 기반의 뼈대 생성 및 실시간 브라우저 프리뷰 활용
- 수요 검증을 위한 MVP 제작 도구로서의 가치 강조
- 명확한 사양 정의와 디자인 참고를 통한 프롬프트 품질 관리
Cursor로 웹 제작 MVP를 2시간 만에 만들기: 프롬프트 하나로 LP 완성까지의 실전
중소기업의 웹사이트 담당자와 자주 이야기하는 주제가 있습니다. "우선 형태를 보여주고 싶다", "광고를 돌리기 전에 LP(Landing Page)가 필요하다". 외주를 맡기면 2주, 사내에서 만들려고 하면 시간이 걸립니다. 그러한 과제를 Cursor(AI 에디터)와 Claude 3.5 Sonnet 모델로 해결하는 사례를 소개합니다.
Cursor란
Cursor는 AI를 통합한 코드 에디터입니다. 자연어 지시로 HTML/CSS/JS, Next.js, React 등의 코드를 생성하며, 브라우저 프리뷰 기능도 내장하고 있습니다. API 키(OpenAI/Gemini/Claude 계열)를 설정함으로써 자신만의 프롬프트로 자유롭게 개발할 수 있습니다. 저는 프롬프트에 Claude 3.5 Sonnet 계열의 모델을 지정하여, 비용을 억제하면서도 정밀도 높은 코드 생성을 실현하고 있습니다.
실제 개발 플로우 (2시간 만에 LP 작성)
1. 프롬프트로 「뼈대」 만들기 (20분)
먼저, 사양서와 API 키, 디자인 방침을 정리한 프롬프트를 준비합니다.
다음 사양으로 랜딩 페이지를 만들어 주세요.
- 목적: 신상품 예약 판매 접수
- 구성: 히어로(Hero), 특징 3가지, 고객의 소리, FAQ, 신청 폼
...
Cursor는 컨텍스트(Context)를 유지하면서 코드를 출력합니다. 한 번의 프롬프트로 골격이 만들어지기 때문에, 수동으로 HTML을 작성하는 것보다 압도적으로 빠릅니다.
2. 프리뷰로 조정 (30분)
Cursor의 내장 브라우저로 실시간으로 확인하면서 색상, 여백, 폰트를 미세 조정합니다. CSS 변수를 사용하고 있기 때문에, 한 곳을 변경하면 전체에 반영되어 외관 조정이 원활합니다. 이미지 플레이스홀더(Placeholder)도 배치한 후, 실제 이미지로 교체하면 완성입니다.
3. 본편화 (30분)
정적인 LP가 완성된 후, WordPress 사이트에 포함하는 경우에는 WordPress의 테마 디렉토리에 파일을 전송하고, 쇼트코드(Shortcode)나 고정 페이지로 등록합니다. 다만, LP는 단독으로도 충분히 기능하기 때문에, Vercel 등에 배포하여 일시적으로 공개하는 케이스도 많습니다.
4. 클라이언트 확인 및 수정 (40분)
이 단계에 이르면 이미 「작동하는 LP」가 존재하기 때문에, 피드백은 "이 부분을 파란색으로 해줘", "FAQ를 추가해줘"와 같은 구체적인 수정 지시로 집중됩니다. 히어링(Hearing) → 수정 → 확인의 사이클이 빨라져, 결과적으로 2시간 정도에 MVP(Minimum Viable Product, 실용 최소한의 제품)로서 성립합니다.
효과와 메리트
| 항목 | 기존 외주 | Cursor 활용 |
|---|---|---|
| 소요 시간 | 2~4일 | 2~3시간 |
| ... |
중요한 것은, 이 LP를 「본편으로 사용할 것인가」가 아니라 「수요를 검증할 것인가」에 가치를 두고 있다는 점입니다. 광고를 집행하기 전에 Cursor로 LP를 완성하고, Google Analytics 등으로 전환율(Conversion Rate)을 측정합니다. 수치를 확인한 뒤에 외주를 통해 본격화하는, 식의 전략을 취할 수 있습니다.
주의점
Cursor는 강력하지만, 프롬프트의 품질이 출력에 직결됩니다. 사양을 명확히 하고 디자인 참고 URL을 첨부하면 더욱 정밀도가 높아집니다. 또한, 복잡한 CMS 연동이나 결제 처리는 별도의 구현이 필요합니다. 처음에는 「정적인 정보 제공형 LP」로서 Cursor의 능력을 최대한 활용하고, 점진적으로 범위를 넓혀가는 운용을 권장합니다.
요약
웹 제작에 있어 「형태로 만드는 속도」는 경쟁력입니다. 특히 중소기업의 DX(Digital Transformation) 예산은 한정되어 있어, 스피드감 있는 검증 사이클이 중요해집니다. Cursor는 이를 위한 강력한 도구이지만, 사용하는 사람(제작 측)의 프롬프트 능력과 무엇을 만들 것인가(테스트하고 싶은 가설)가 모두 갖춰져야 비로소 가치를 발휘합니다.
코바야시 WEB 시스템에서는 웹사이트 제작, LP 작성, 인프라 구축을 일괄 지원하고 있습니다. 우선 「2시간 만에 프로토타입을 만드는」 단계부터 비용 대비 효과를 검증해 보지 않으시겠습니까?
Discussion

AI 자동 생성 콘텐츠
본 콘텐츠는 Zenn AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기