worklesslabworklesslab

비개발자의 웹앱 48시간 만에 만들기

게으른요요
2025.11.19

Cursor + GPT + Vercel로 웹앱 만드는 실제 흐름


개발을 몰라도 웹앱을 만들 수 있다. 나는 지금까지 3개의 웹앱을 직접 만들고 배포했다.

가장 최근에 만든 ‘월구독 계산기’를 기준으로 내가 실제로 어떻게 만들었는지 과정을 공유한다.


1. 아이디어 작성

무엇을 만들지 먼저 정리한다. 비슷한 서비스가 있다면 스크린샷을 찍어두고, 비교 포인트도 기록해둔다.

나는 아이디어를 정리할 때 보통 GPT에게 그대로 넘기는데, 다음 내용을 포함해서 전달하는 편이다.


<아이디어 문서 예시>

개요

  • “월구독 서비스 계산기”를 만들고 싶다.
  • 웹 서비스 형태로 배포할 거다.
  • 개발은 Cursor로 진행할 거다.


역할 정의

  • GPT: PM(프로덕트 매니저) 역할 → 내가 낸 아이디어를 “제품 스펙”으로 기획하기
  • 나: 비개발자
  • 문서는 내가 이해 가능한 내용만 작성해야 한다 (중요!)
  • MVP(v0)에서 넣을 기능 / 빼도 되는 기능 / 이후 버전으로 넘길 기능을 구분해달라


기능 정의

  • 어디에서 얼마를 언제, 어떤 빈도로 지출하는지를 계산
  • 처음엔 사용자가 직접 입력
  • 나중엔 “구독 옵션 불러오기” 기능도 가능할 것 같음


참고자료

  • 유사 서비스 스크린샷 첨부
  • 벤치마킹 포인트 표시


2. GPT 기획 단계

위 내용을 GPT에게 전달하면 GPT가 기획을 정리한다.

이 과정이 정말 중요하다.

  • 내가 의도한 것과 다른 점이 있는지 확인
  • 빠진 기능이 있는지 점검
  • 너무 복잡하게 만들고 있지 않은지 조율


스펙(v0)이 확정되면 “이제 cursor에게 전달할 수 있는 문서 형태로 작성해줘”라고 하면 된다.


여기서 핵심은:

Cursor에게 넘길 문서에는 ‘내가 이해할 수 있는 수준의 설명만’ 있어야 한다.

GPT가 가끔 개발자처럼 답하는데, 이걸 그대로 전달하면 결국 Cursor와 나 둘 다 헷갈린다.

→ 이 단계에서 구조를 단순화하는 게 가장 중요하다.


3. Cursor에 전달

Cursor 프로젝트 폴더를 생성하고, GPT가 정리해준 문서를 그대로 붙여넣는다.

이 때, 다음과 같은 내용도 함께 추가한다:

  • 나는 “월구독 계산기”를 만들고 있다.
  • 너(Cursor)는 시니어 개발자다.
  • PM이 작성한 문서를 바탕으로 개발해줘.
  • 바로 구현하지 말고, 문서에 빠진 내용이 있으면 먼저 질문해줘.


Cursor는 거의 항상 질문을 하는데, 이런 식이다.

  • 문서에서 제시한 toKRW, monthlyKRW, yearlyKRW 등은 별도 유틸 파일로 분리할까요?
  • 옵션 A: app/utils/subscription.ts에 분리
  • 옵션 B: SubscriptionCalculator.tsx 내부에 포함
  • 권장: 옵션 A(분리). 재사용과 테스트에 유리.


그리고 이런 질문이 들어오는데, 비개발자인 나는 보통 바로 답하기 어렵다.

GPT에게 가져가되, 내 의견이 있는 경우 GPT에게 의견도 함께 전달한다.


4. Cursor 구현 시작

몇 차례 오가는 질문·답변이 끝나면 Cursor가 본격적으로 개발을 시작한다.

중간에 “Run해볼까요?”라고 물으면 그냥 눌러준다.

(무슨 말인지 모르기 때문이다. 결국 테스트 화면 기준으로 해야한다)


5. Test (반드시 해야 한다)

기능 개발이 끝나면 http://localhost:3000/에서 테스트한다.

단순한 기능이면 문제 없지만, 조금만 복잡해지면 거의 항상 처음엔 에러가 난다. 문제 상황을 정확히 전달하면 Cursor가 해결한다.

“에러 메시지”를 복사 붙여넣기하거나, “에러 상황을 설명하는 스크린샷 + 메시지”을 전달한다.


Cursor가 해결을 못하는 경우도 있다. Cursor가 뭔가 삽질을 하는 것처럼 보인다면, 당장 하는 일을 중단 시키자.

그리고 현재 상황을 요약하라고 한 뒤 GPT에게 그대로 내용을 전달한다. 대부분 GPT가 해결책을 제시해준다.


6. Github 올리기

Local 테스트가 끝났으면 이제 웹에 올릴 차례다.

  1. Github에 가입
  2. 새 repository 만들기
  3. Cursor에게 repository 주소를 주고, push하도록 지시

인증은 여러 방식이 있는데, 나는 SSL 방식이 가장 편했다. (정확히 몰라도 괜찮다. GPT와 Cursor가 내가 뭘 하면 될 지 안내해준다.)


7. Vercel 프로젝트 생성

Vercel.app 에 가입하고 프로젝트를 만든다.

  • Github repository를 연결하면
  • 자동으로 deploy(배포)가 된다.

가끔 에러로 배포가 안 되는데, 이때는 다시 Cursor에게 “현재 상황 요약 + 에러 메시지”를 그대로 전달하면 된다.


8. Domain 구입 및 연결

Vercel 기본 주소로도 접속할 수 있지만, 브랜드를 만들려면 도메인이 있는 게 훨씬 좋다.

나는 namecheap.com에서 구입했다.

  1. domain 구입
  2. vercel → project → domain 탭에서 도메인 추가
  3. namecheap → Domain list → Advanced DNS → record 추가
  4. 몇 분 기다리면 연결 완료

사실 이 부분도… atlas나 GPT에게 “도메인 연결 도와줘”라고 하면 끝난다.

끝!

이 과정을 마치면

비개발자도 웹앱 하나를 세상에 완성된 상태로 “배포”할 수 있다.