1. 기획 단계: Claude와 함께하는 MVP 설계

무작정 코딩을 시작하기 전에 가장 먼저 해야 할 일은 Claude와 대화하는 것입니다. Claude는 단순한 챗봇이 아니라 여러분의 CTO(최고기술책임자) 역할을 수행합니다.
비전공자가 가장 많이 하는 실수는 처음부터 너무 거창한 기능을 넣으려다 포기하는 것입니다.

Claude가 제안하는 기술 스택을 메모해 두세요. 보통 Next.js와 Tailwind CSS 조합을 추천할 것입니다.
이 조합은 Cursor에서 코드를 생성할 때 가장 오류가 적고 세련된 디자인을 뽑아내기 좋습니다.

2. 환경 구축: Cursor 에디터 설치 및 설정

이제 실제 도구를 준비할 차례입니다. Cursor는 VS Code를 기반으로 만들어진 AI 특화 코드 에디터입니다.
기존 개발자들이 코드를 직접 칠 때, 우리는 Cursor 안에서 Claude에게 명령을 내립니다.

왜 Cursor인가?

단순히 코드를 복사해서 붙여넣는 방식은 파일이 많아지면 관리가 불가능해집니다. Cursor는 프로젝트의 전체 파일 구조를 이해하고 있기 때문에
“로그인 페이지 만들어줘”라고 하면 관련된 모든 파일을 한꺼번에 수정하거나 생성해줍니다.

• Composer (Cmd + I): 프로젝트 전체를 아우르는 대규모 수정을 요청할 때 사용합니다.
• Chat (Cmd + L): 특정 파일에 대해 궁금한 점을 물어볼 때 사용합니다.
• Tab (Autocomplete): AI가 다음에 올 코드를 예측하여 제안합니다.

3. 개발 단계: 자연어로 코드를 짜는 마법

본격적인 개발 단계입니다. 우리는 코드를 타이핑하지 않고 ‘지시’합니다. Cursor의 Composer 기능을 켜고 다음과 같이 입력해 보세요.

엔터를 치면 Cursor가 실시간으로 파일들을 생성하는 모습을 볼 수 있습니다. 만약 에러가 발생한다면 당황하지 마세요.
에러 메시지를 그대로 복사해서 Cursor 채팅창에 던지면 “아, 미안해. 이 부분을 수정할게”라며 즉시 해결책을 제시합니다.
개발은 이제 ‘논리적인 대화’의 과정입니다.

4. 데이터베이스: Supabase로 서버 없이 구축하기

사용자 정보를 저장하거나 게시물을 올리려면 데이터베이스(DB)가 필요합니다. 하지만 서버를 직접 구축하는 것은 비전공자에게 너무나 높은 벽입니다.
이때 해결사가 바로 Supabase입니다.

Supabase는 ‘Firebase의 오픈소스 대안’으로 불리며, 복잡한 백엔드 설정 없이 클릭 몇 번으로 DB를 만들 수 있게 해줍니다.
Cursor에게 “우리 프로젝트에 Supabase를 연동하고, 이메일 로그인을 구현해줘”라고 요청하세요.
Claude가 API 키를 어디에 넣어야 하는지, 어떤 설정을 바꿔야 하는지 친절하게 단계별로 안내할 것입니다.

5. 배포 단계: Vercel을 통한 전 세계 런칭

내 컴퓨터에서만 작동하는 서비스는 의미가 없습니다. 누구나 접속할 수 있도록 인터넷에 올려야 합니다.
Vercel은 Next.js로 만든 웹사이트를 배포하는 데 가장 최적화된 플랫폼입니다.

1. GitHub 계정을 만들고 내 코드를 업로드합니다. (이 과정도 Cursor에게 물어보면 명령어를 다 알려줍니다.)
2. Vercel에 로그인하고 GitHub 저장소를 연결합니다.
3. ‘Deploy’ 버튼을 누르면 끝! 이제 당신의 서비스는 고유한 URL을 갖게 됩니다.