Part 2.2 첫 앱 만들기: Cursor로 10분 만에 프로토타입

주의: 꼭 커서가 아니어도 괜찮습니다. 원하는 AI 코딩 어시스턴트를 사용하세요. 흐름을 잘 이해하고 따라오시면 됩니다. 어떤 모델인지도 큰 상관은 없습니다.

드디어 직접 만들어볼 시간입니다.

이론만 계속 읽으면 지루하죠. 오늘은 실제로 Cursor를 열고, AI한테 요청하고, 작동하는 앱을 만들어보겠습니다.

목표는 간단합니다. 10분 안에 작동하는 할 일 관리 앱을 만드는 것.

완벽한 앱이 아닙니다. 프로토타입입니다. "와, 진짜 되네?"를 경험하는 게 목표입니다. 세부적인 기능은 나중에 추가하면 됩니다.

준비물

시작하기 전에 이것들이 필요합니다:

Cursor 설치 (이전 글 참고)
Node.js 설치
- nodejs.org에서 LTS 버전 다운로드
- 설치 후 터미널에서 node -v 치면 버전 나오면 성공

Node.js가 뭐냐고요? 자바스크립트를 컴퓨터에서 실행할 수 있게 해주는 프로그램입니다. 지금은 그냥 "필수 프로그램"이라고만 알아두세요.

Step 1: 프로젝트 생성 (2분)

Cursor를 열고, 터미널을 엽니다.

터미널 여는 법:

상단 메뉴 → Terminal → New Terminal
또는 단축키: Ctrl+` (백틱, 숫자 1 왼쪽 키)

터미널이 열리면 이렇게 입력합니다:

npx create-next-app@latest my-todo-app

엔터를 치면 몇 가지 질문이 나옵니다:

Would you like to use TypeScript? → Yes
Would you like to use ESLint? → Yes
Would you like to use Tailwind CSS? → Yes
Would you like to use `src/` directory? → No
Would you like to use App Router? → Yes
Would you like to customize the default import alias? → No

TypeScript, Tailwind CSS는 Yes로 하세요. 나머지는 기본값(엔터)으로 해도 됩니다.

설치가 끝나면:

cd my-todo-app

(만약 next 16버전이라면 아래처럼 커맨드가 나옵니다. default를 사용합니다.)

이제 Cursor에서 이 폴더를 열어야 합니다.

File → Open Folder → 방금 만든 my-todo-app 폴더 선택

왼쪽에 파일 목록이 보이면 성공입니다.

Step 2: 개발 서버 실행 (1분)

터미널에서:

npm run dev

이런 메시지가 나옵니다:

▲ Next.js 16.x.x
- Local: http://localhost:3000

브라우저를 열고 localhost:3000으로 접속하세요.

Next.js 기본 화면이 보이면 성공입니다. 이제 이걸 할 일 앱으로 바꿔보겠습니다.

(왼쪽 하단의 N은 Next를 뜻합니다)

Step 3: AI한테 요청하기 (5분)

여기서부터가 진짜 바이브코딩입니다.

Composer 열기: Cmd+I (Mac) / Ctrl+I (Windows)

오른쪽에 큰 입력창이 열립니다. 여기에 이렇게 입력하세요:

간단한 할 일 관리 앱을 만들어줘.

기능:
1. 할 일 추가하기 (입력창 + 추가 버튼)
2. 할 일 목록 보기
3. 완료 체크하기 (체크하면 취소선)
4. 삭제하기

조건:
- app/page.tsx 파일 하나에 다 만들어줘
- Tailwind CSS로 스타일링
- 깔끔하고 심플한 디자인
- 데이터는 일단 로컬 state로 관리 (나중에 DB 연결할 거야)

Enter를 누르면 AI가 코드를 생성합니다.

AI가 app/page.tsx 파일을 수정하겠다고 할 겁니다. Accept 버튼을 눌러 적용하세요.

Step 4: 결과 확인 (1분)

브라우저에서 localhost:3000을 새로고침하세요.

할 일 앱이 보일 겁니다!

입력창에 할 일을 쓰고 추가 버튼을 눌러보세요
체크박스를 눌러보세요
삭제 버튼을 눌러보세요

작동하나요?

축하합니다. 방금 첫 번째 앱을 만들었습니다.

Step 5: 수정 요청하기 (1분)

뭔가 마음에 안 드는 게 있을 겁니다. 그럼 AI한테 수정을 요청하면 됩니다.

다시 Composer(Cmd+I)를 열고:

버튼 색깔을 파란색으로 바꿔줘.
그리고 할 일이 없을 때 "할 일이 없습니다" 메시지 보여줘.

또는:

디자인을 좀 더 예쁘게 해줘.
카드 형태로 만들고, 그림자 효과 추가해줘.

AI가 수정해주면 Accept 누르고, 브라우저 새로고침.

이 과정을 반복하면서 원하는 모습으로 만들어가는 겁니다.

여기서 잠깐: 에러가 났다면

에러가 날 수 있습니다. 당황하지 마세요.

브라우저에 에러 화면이 뜨면:

에러 메시지를 복사합니다
Composer를 열고 이렇게 요청합니다:

이런 에러가 나요:

[에러 메시지 붙여넣기]

수정해줘.

AI가 수정해줄 겁니다.

터미널에 빨간 글씨가 나오면:

마찬가지로 복사해서 AI한테 보여주세요.

바이브코딩에서 에러는 일상입니다. 에러 → AI한테 물어보기 → 수정 → 다시 확인. 이 사이클에 익숙해지세요.

지금 만든 코드 살펴보기

AI가 만든 코드를 한번 볼까요? app/page.tsx 파일을 열어보세요.

대략 이런 구조일 겁니다:

'use client'

import { useState } from 'react'

export default function Home() {
  const [todos, setTodos] = useState<string[]>([])
  const [input, setInput] = useState('')

  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, input])
      setInput('')
    }
  }

  // ... 나머지 코드
}

코드가 달라도 괜찮습니다. 원하는 기능이 돌아가는 것이 더 중요합니다.

또, 위 코드를 지금은 이해 못 해도 괜찮습니다. 나중에 코드 읽는 법을 배우면 됩니다.

일단은 "아, AI가 이런 코드를 만들어주는구나" 정도만 확인하세요.

로컬에서 작동 vs 배포

지금 만든 앱은 로컬에서만 작동합니다.

localhost:3000은 내 컴퓨터에서만 접속되는 주소입니다. 다른 사람한테 "이거 봐봐" 하고 링크를 보내도 안 열립니다.

다른 사람도 볼 수 있게 하려면 배포를 해야 합니다. 배포는 Part 5에서 자세히 다루겠습니다.

지금은 "내 컴퓨터에서 작동하는 앱을 만들었다"는 것만으로 충분합니다.

코드 저장하기 (Git) - 아직 Git을 모른다면 넘어가셔도 괜찮습니다. 나중에 배울거에요.

작동하는 코드는 꼭 저장해두세요.

터미널에서:

git add .
git commit -m "첫 번째 할 일 앱 완성"

이러면 현재 상태가 저장됩니다. 나중에 뭔가 망가뜨려도 이 시점으로 돌아올 수 있습니다.

Git에 대해서는 Part 2-4에서 자세히 다루겠습니다. 지금은 "작동하면 저장한다"만 기억하세요.

다음 단계 도전

기본 할 일 앱이 완성됐으니, 기능을 추가해볼까요?

Composer를 열고 이런 것들을 요청해보세요:

1단계: 마감일 추가

각 할 일에 마감일을 추가할 수 있게 해줘.
날짜 선택 input 추가하고, 목록에서 마감일 표시해줘.

2단계: 카테고리 분류

할 일에 카테고리를 추가해줘.
"업무", "개인", "기타" 중에 선택할 수 있게.
카테고리별로 색깔 다르게 표시해줘.

3단계: 로컬 저장

브라우저를 새로고침해도 데이터가 유지되게 해줘.
localStorage 사용해서 저장해줘.

한 번에 다 하려고 하지 마세요. 하나씩, 작동 확인하고, 저장하고, 다음 기능.

여기까지 오셨으면 아래와 비슷하게 나올 거에요.

잘 안 될 때 팁

"npm run dev가 안 돼요"

Node.js가 제대로 설치됐는지 확인하세요:

node -v
npm -v

버전이 안 나오면 Node.js를 다시 설치하세요.

"localhost:3000이 안 열려요"

터미널에서 npm run dev가 실행 중인지 확인하세요. Ctrl+C로 종료했다가 다시 npm run dev 해보세요.

"AI가 이상한 코드를 만들어요"

새 대화를 시작하세요. Composer에서 이전 대화를 지우고 처음부터 다시 요청해보세요.

프롬프트를 더 구체적으로 쓰는 것도 도움이 됩니다.

"뭔가 망가졌어요"

Git으로 저장해뒀다면:

git checkout .

이러면 마지막 저장 시점으로 돌아갑니다.

저장 안 했다면... 처음부터 다시 만드세요. 괜찮습니다. 두 번째는 더 빨리 만들 수 있습니다.

오늘 배운 것

프로젝트 생성: npx create-next-app@latest
개발 서버 실행: npm run dev
AI 요청: Composer (Cmd+I)로 기능 요청
수정 사이클: 요청 → 확인 → 수정 요청 → 확인
( 필수아님 ) 코드 저장: git add . + git commit -m "메시지"

마무리

첫 앱을 만들어봤습니다.

10분이 좀 넘었을 수도 있습니다. 괜찮습니다. 처음이니까요.

중요한 건 **"내가 뭔가를 만들었다"**는 경험입니다. 코드 한 줄 안 쓰고도 (거의) 작동하는 앱을 만들 수 있다는 걸 느끼셨을 겁니다.

물론 이건 시작일 뿐입니다. 실제 서비스로 만들려면 갈 길이 멉니다. 하지만 첫 발을 뗐다는 게 중요합니다.

다음 글에서는 터미널에 대해 다루겠습니다. 아까 npm run dev나 cd my-todo-app 같은 명령어들, 뭔지 모르고 따라치셨죠? 그것들이 뭔지 알아보겠습니다.