Vibeollio
← 블로그 목록
AI코딩Cursor비개발자Vercel배포초보자가이드

AI 코딩 처음 시작하는 비개발자를 위한 첫날 가이드: Cursor 설치부터 첫 배포까지

비개발자도 2시간 안에 할 수 있는 AI 코딩 가이드. Cursor 설치부터 메모 앱 만들기, Vercel 배포까지 단계별 튜토리얼.

Vibeollio 팀-
AI 코딩 처음 시작하는 비개발자를 위한 첫날 가이드: Cursor 설치부터 첫 배포까지

"코딩을 배워야겠다는 생각은 있었지만, 어디서부터 시작해야 할지 몰라 미루고 있나요?"

AI 기술의 발전으로 비개발자도 이제 실제 웹 서비스를 만들 수 있는 시대가 됐습니다. 특히 Cursor라는 AI 코딩 도구를 사용하면 처음 배우는 사람도 몇 시간 안에 동작하는 앱을 만들고 배포할 수 있습니다. 이 가이드는 완전한 초보자가 오늘 시작해서 오늘 배포까지 경험하도록 설계했습니다.

1단계: 필수 도구 3가지 설치 (15분)

먼저 필요한 것은 3가지입니다. 각각 무료입니다.

Cursor 설치하기

cursor.com에 접속해서 "Download" 버튼을 클릭하세요. Windows 또는 Mac 버전을 선택하고 설치합니다. 설치 후 실행하면 GitHub 계정으로 로그인할 수 있습니다. GitHub 계정이 없다면 먼저 github.com에서 무료 가입하세요.

Node.js 설치하기

nodejs.org에서 LTS(장기 지원) 버전을 다운로드해서 설치합니다. 설치 후 터미널(Mac의 경우 Terminal, Windows의 경우 Command Prompt)을 열고 아래를 입력해 설치 확인:

node --version

버전 번호가 나타나면 설치 완료입니다.

Vercel 계정 만들기

vercel.com에서 GitHub 계정으로 가입합니다. 나중에 앱을 배포할 때 사용합니다.

2단계: 첫 프로젝트 폴더 생성 (5분)

터미널을 열고 다음을 입력합니다:

mkdir my-memo-app
cd my-memo-app
npm create vite@latest . -- --template react
npm install

이 명령어들이 하는 일은:

  • 새 폴더 생성
  • React라는 웹 개발 도구 설치
  • 필요한 파일들 자동 생성

완료되면 Cursor에서 이 폴더를 엽니다. (File → Open Folder → my-memo-app 선택)

3단계: Cursor로 메모 앱 만들기 (60분)

Cursor의 핵심은 "자연스럽게 원하는 것을 설명하면 AI가 코드를 작성한다"는 점입니다.

메모 앱 요구사항 작성하기

Cursor의 왼쪽 사이드바에서 "Composer" 또는 "Chat" 탭을 열고, 다음과 같이 입력합니다:

다음 기능을 가진 React 메모 앱을 만들어줘:
1. 메모 제목과 내용을 입력할 수 있는 폼
2. 추가 버튼을 누르면 아래에 메모 목록으로 표시
3. 각 메모의 삭제 버튼
4. 간단한 스타일 (흰색 배경, 파란 버튼)
5. 메모는 localStorage에 저장되어 새로고침해도 유지

AI가 자동으로 코드를 생성하고 파일에 반영합니다. 대부분의 경우 첫 시도에서 동작하는 코드를 얻습니다.

실시간 미리보기

터미널에서 다음을 입력하면 브라우저에서 앱이 실행됩니다:

npm run dev

http://localhost:5173 주소가 나타나면 클릭해서 앱을 봅니다. 메모를 입력하고 추가해보세요. 제목과 내용이 목록에 나타나고, 삭제도 됩니다.

조정이 필요한 경우

예를 들어 "버튼 색깔을 빨간색으로 바꿔줘" 또는 "메모 목록을 카드 형태로 보여줘"라고 입력하면 AI가 즉시 수정합니다. 코드를 이해하지 못해도 상관없습니다. 원하는 결과를 설명하는 것이 중요합니다.

4단계: GitHub에 업로드 (20분)

Vercel에 배포하려면 먼저 코드를 GitHub에 올려야 합니다.

GitHub 저장소 생성

github.com에 로그인하고:

  1. 오른쪽 상단 + 아이콘 → "New repository" 클릭
  2. 저장소 이름: my-memo-app
  3. "Create repository" 클릭

코드 업로드

생성된 페이지의 지시사항을 따릅니다. 터미널에서:

git init
git add .
git commit -m "Initial commit: memo app"
git branch -M main
git remote add origin https://github.com/[YOUR_USERNAME]/my-memo-app.git
git push -u origin main

[YOUR_USERNAME]은 본인의 GitHub 사용자명으로 바꿉니다.

5단계: Vercel에 배포하기 (15분)

Vercel에 로그인하고:

  1. "Add New" → "Project" 클릭
  2. 방금 업로드한 my-memo-app 저장소 선택
  3. "Deploy" 버튼 클릭

1~2분 후 배포가 완료되고, Vercel이 생성한 URL(예: my-memo-app-abc123.vercel.app)로 접속할 수 있습니다. 이것이 당신의 첫 웹 서비스입니다.

누구든 이 URL을 통해 당신의 메모 앱에 접속할 수 있습니다.

다음 단계: 더 나아가기

이제 기초를 경험했으니 다음을 시도해보세요:

  • 메모에 색상 태그 기능 추가
  • 메모를 날짜별로 정렬하는 기능
  • 검색 기능 추가

Cursor에 원하는 기능을 설명하면 AI가 코드를 작성해줍니다.

당신의 다음 프로젝트를 Vibeollio에 공유하세요

오늘 배포한 메모 앱이 처음이라면, 다음 프로젝트는 더 흥미로울 겁니다. 할 일 관리 앱, 간단한 쇼핑몰, 설문조사 도구 등 무엇이든 만들 수 있습니다.

당신이 만든 프로젝트가 실제로 동작하고 사람들에게 도움이 될 수 있다면, Vibeollio에 프로젝트를 등록해보세요. 더 많은 사람들이 당신의 작업을 발견하고 피드백을 줄 수 있습니다. 또한 다른 개발자들의 프로젝트를 보면서 아이디어를 얻을 수도 있습니다.

AI 코딩은 이제 선택이 아닌 기본 스킬입니다. 오늘 시작한 것이 내일의 아이디어를 현실로 만드는 첫걸음이 될 수 있습니다.

다른 글 읽기