코딩 1도 모르는 마케터가 AI로 첫 앱 배포하기까지 - 처절했던 72시간의 기록

Day 0 (D-1): “나도 개발자 될 수 있을까?”

2024년 12월 1일 일요일 오후 3시.

저는 스타벅스에서 노트북을 펼쳤습니다.

목표: 3일 안에 앱 하나 만들어서 인터넷에 배포하기.

배경 설명을 하자면, 저는 뼈속까지 문과생입니다.

• 대학 전공: 경영학
• 직업: 마케팅 기획자 (8년 차)
• 코딩 경험: 0년 0개월 0일

Python이 뱀인 줄 알았고, Java는 커피 브랜드인 줄 알았습니다.

그런 제가 왜 갑자기 개발을?

회사에서 간단한 내부 도구가 필요했는데, 개발팀에 요청하면 “3개월 대기”라고 했습니다. “이거 그냥 엑셀 같은 건데 왜 3개월이나 걸려?”

그때 유튜브 알고리즘이 띄워준 영상:

“AI로 코딩 몰라도 앱 만들기”

“진짜 될까?”

반신반의하며 Cursor를 설치했습니다.

Day 1 (금요일): “Hello World도 에러 나는데요?”

오전 9시: 출근 전 1시간 투자

만들 앱: 간단한 Todo 리스트

• 할 일 추가
• 완료 체크
• 삭제

“이 정도면 쉽겠지?”

Cursor Chat에 입력:

Todo 앱 만들어줘

AI 응답:

// 코드 100줄 쏟아짐
import React from 'react';
import { useState } from 'react';
...

저의 반응: ”…이게 뭐야?”

import가 뭔지, useState가 뭔지 하나도 모르겠더라고요.

첫 번째 깨달음:

AI는 마법사가 아니다. 최소한의 가이드는 내가 줘야 한다.

오전 10시: 회사 화장실에서 유튜브 검색

“Cursor 사용법” 영상 5개 속성으로 봤습니다.

핵심 배운 것:

1. 구체적으로 요청해야 함
2. 기술 스택을 명시해야 함
3. 단계별로 나눠서 진행

점심시간 (12시): 재도전

다시 Cursor Chat에 입력:

Next.js 14로 Todo 앱 만들어줘.

요구사항:
- TypeScript 사용
- Tailwind CSS로 스타일링
- 로컬 스토리지에 데이터 저장
- 다크모드 지원

폴더 구조:
- app/: 페이지
- components/: 컴포넌트

먼저 프로젝트 초기 세팅부터 해줘.

AI 응답:

npx create-next-app@latest todo-app --typescript --tailwind --app

저: “이 명령어를 어디에 입력하죠?”

(터미널이 뭔지도 몰랐습니다)

오후 2시: 첫 번째 에러

유튜브로 “터미널 사용법” 검색 → 5분 영상 시청 → 명령어 입력

npx create-next-app@latest todo-app --typescript --tailwind --app

에러 발생:

npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /Users/...
npm ERR! errno -13

패닉.

“역시 안 되는구나…”

근데 Cursor Chat에 에러 메시지 복붙했더니:

AI:

# 권한 문제입니다. 이렇게 해보세요:
sudo chown -R $USER /usr/local/lib/node_modules

저: “sudo가 뭔데… 일단 해보자”

성공!

✔ Creating a new Next.js app in /Users/.../todo-app

두 번째 깨달음:

에러 메시지를 AI에게 그대로 복붙하면 해결책을 준다.

오후 6시: 퇴근 후 카페 이동

프로젝트 폴더 열기 성공.

Cursor Composer (Cmd+I)에 입력:

Todo 앱 메인 페이지 만들어줘.

기능:
1. 할 일 입력창
2. 추가 버튼
3. 할 일 목록 (체크박스 + 삭제 버튼)
4. 다크모드 토글

디자인:
- 미니멀한 느낌
- 파스텔 톤 색상
- 모바일 반응형

3분 후:

AI가 파일 5개를 자동으로 생성했습니다:

• app/page.tsx
• components/TodoList.tsx
• components/TodoItem.tsx
• components/DarkModeToggle.tsx
• app/globals.css

저: ”…진짜 되네?”

오후 7시: 로컬에서 실행

npm run dev

브라우저에서 localhost:3000 접속

화면에 뜬 것:

Error: Hydration failed because the initial UI does not match...

세 번째 에러.

Cursor Chat:

이 에러 왜 나와?

[에러 메시지 전체 복붙]

AI 답변:

다크모드 토글이 서버/클라이언트 불일치를 일으킵니다.
localStorage는 클라이언트에서만 작동하므로 useEffect로 감싸야 합니다.

수정할게요.

AI가 자동으로 코드 수정 → 저장 → 새로고침

성공!

화면에 Todo 앱이 떴습니다.

감동의 순간.

“내가… 만든 거야?”

밤 11시: Day 1 마무리

오늘의 성과:

• ✅ Next.js 프로젝트 생성
• ✅ Todo 앱 UI 완성
• ✅ 로컬에서 실행 성공

마주한 에러: 12개 해결한 에러: 12개

오늘의 교훈:

AI는 90%를 해준다. 나머지 10%는 에러 메시지 복붙하는 능력.

Day 2 (토요일): “기능 추가는 쉬운데 배포가 지옥”

오전 10시: 기능 추가

어제의 성공에 고무되어 욕심이 생겼습니다.

추가하고 싶은 기능:

1. 할 일 수정 기능
2. 우선순위 설정 (High/Medium/Low)
3. 필터링 (전체/완료/미완료)
4. 검색 기능

Cursor Composer에 한 번에 요청:

위 4가지 기능 전부 추가해줘.

AI:

[20개 파일 수정 시작]

10분 후:

✅ 모든 기능 추가 완료

테스트:

• 수정 기능: 작동 ✅
• 우선순위: 작동 ✅
• 필터링: 작동 ✅
• 검색: 작동 ✅

“이게 개발이야?”

너무 쉬워서 오히려 불안했습니다.

오후 2시: 배포 시도 (지옥의 시작)

“이제 인터넷에 올려야지.”

Cursor Chat:

이 앱을 무료로 배포하는 방법 알려줘

AI:

Vercel을 추천합니다.

1. Vercel 계정 생성
2. GitHub에 코드 푸시
3. Vercel에서 프로젝트 연결
4. 자동 배포

“GitHub? 그게 뭔데?”

오후 3시: Git 지옥

유튜브: “Git 초보자 가이드” 10분 영상 시청

배운 것:

• Git = 코드 버전 관리
• GitHub = 코드 저장소

터미널에서:

git init
git add .
git commit -m "Initial commit"

에러:

Author identity unknown

Cursor에 복붙:

AI:

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

설정 후 재시도 → 성공

오후 4시: GitHub 푸시

GitHub에서 새 Repository 생성

터미널:

git remote add origin https://github.com/username/todo-app.git
git push -u origin main

에러:

remote: Permission denied (publickey)

“뭐가 이렇게 많아!”

Cursor Chat:

GitHub 푸시할 때 Permission denied 에러 나는데?

AI:

SSH 키가 없어서 그렇습니다.

해결 방법:
1. HTTPS로 푸시 (간단)
2. SSH 키 생성 (권장)

HTTPS 방법:
git remote set-url origin https://github.com/username/todo-app.git
git push

HTTPS로 변경 → 성공!

오후 5시: Vercel 배포

Vercel 사이트 접속 → GitHub 계정 연동

“Import Git Repository” 클릭

프로젝트 선택 → Deploy 버튼 클릭

3분 대기…

화면에 뜬 메시지:

✅ Deployment successful!
Your site is live at: https://todo-app-xyz.vercel.app

링크 클릭.

내 앱이 인터넷에 떠 있었습니다.

“진짜 된다…”

오후 6시: 친구에게 자랑

카톡:

“야 내가 앱 만들었어! [링크]”

친구:

“오 신기하네. 근데 모바일에서 레이아웃 깨지는데?”

”…망했다”

오후 7시: 반응형 수정

Cursor Chat:

모바일에서 레이아웃 깨지는 문제 고쳐줘.

현재 문제:
- 입력창이 화면 밖으로 나감
- 버튼이 너무 작음
- 다크모드 토글 안 보임

AI:

// Tailwind CSS 반응형 클래스 추가
className="w-full max-w-md mx-auto px-4 sm:px-6"

수정 → Git 푸시 → Vercel 자동 재배포 (1분)

친구에게 다시 확인 요청:

“이제 괜찮네!”

성공!

밤 10시: Day 2 마무리

오늘의 성과:

• ✅ 4가지 기능 추가
• ✅ GitHub 푸시 성공
• ✅ Vercel 배포 성공
• ✅ 모바일 반응형 수정

마주한 에러: 18개 해결한 에러: 18개

오늘의 교훈:

개발보다 배포가 더 어렵다. 하지만 AI가 다 알려준다.

Day 3 (일요일): “완성도 높이기”

오전 11시: 디테일 추가

추가하고 싶은 것:

1. 로딩 애니메이션
2. 할 일 추가 시 애니메이션
3. 빈 상태 메시지
4. 키보드 단축키 (Enter로 추가)

Cursor Composer:

위 4가지 UX 개선 사항 추가해줘.
부드러운 애니메이션 원해.

AI:

// Framer Motion 설치 제안
npm install framer-motion

// 애니메이션 코드 자동 생성

10분 후 완성.

테스트:

• 할 일 추가 시 부드럽게 나타남 ✅
• 로딩 스피너 ✅
• 빈 상태일 때 귀여운 메시지 ✅
• Enter 키로 추가 ✅

“프로처럼 보이는데?”

오후 1시: SEO 최적화

Cursor Chat:

SEO 최적화해줘.
메타 태그, Open Graph, 파비콘 추가.

AI:

// app/layout.tsx 수정
export const metadata = {
  title: 'Simple Todo - 심플한 할 일 관리',
  description: '미니멀한 디자인의 할 일 관리 앱',
  openGraph: {
    title: 'Simple Todo',
    description: '심플한 할 일 관리',
    images: ['/og-image.png'],
  },
}

파비콘 생성:

Canva에서 간단한 체크 아이콘 제작 (5분)
→ public/favicon.ico 저장

오후 3시: 최종 테스트

체크리스트:

• 데스크톱 Chrome: 정상 ✅
• 데스크톱 Safari: 정상 ✅
• 모바일 iOS: 정상 ✅
• 모바일 Android: 정상 ✅
• 다크모드: 정상 ✅
• 로컬 스토리지: 정상 ✅

모든 테스트 통과!

오후 5시: 최종 배포

Git 푸시 → Vercel 자동 배포

최종 URL:

https://simple-todo-app.vercel.app

친구 5명에게 공유 → 모두 “잘 되네!” 피드백

오후 6시: 회고

72시간 동안:

• 작성한 코드: 직접 작성 0줄 (AI가 100% 생성)
• 마주한 에러: 37개
• 해결한 에러: 37개 (AI 도움으로)
• 배운 것: Git, GitHub, Vercel, Next.js 기초, TypeScript 기초

총 투자 시간:

• Day 1: 6시간
• Day 2: 8시간
• Day 3: 5시간
• 총 19시간

전통적 방법이었다면:

• 프로그래밍 기초 학습: 3개월
• Next.js 학습: 1개월
• 프로젝트 완성: 1주일
• 총 4개월

AI 덕분에 4개월을 19시간으로 압축했습니다.

배운 것들 (Lessons Learned)

1. AI는 마법사가 아니다

잘못된 기대:

“AI야, 앱 만들어줘” → 완성된 앱 나옴

현실:

“AI야, 이런 기능 추가해줘” → 코드 생성 → 에러 발생 → 에러 메시지 복붙 → 수정 → 반복

AI는 80%를 해준다. 나머지 20%는:

• 구체적인 요구사항 정리
• 에러 메시지 읽고 AI에게 전달
• 결과물 테스트

2. 에러는 배움의 기회

37개 에러를 만났지만:

• 패닉하지 않고 에러 메시지 복붙
• AI가 설명해주는 원인 이해 시도
• 같은 에러 두 번 안 만남

에러 덕분에 배운 것:

• npm이 뭔지
• Git이 뭔지
• 환경 변수가 뭔지
• CORS가 뭔지

3. 완벽주의 버리기

처음 목표:

“완벽한 Todo 앱 만들기”

실제 결과:

“작동하는 Todo 앱 만들기”

완벽하지 않아도 됩니다:

• 코드가 지저분해도 작동하면 OK
• 디자인이 평범해도 쓸 수 있으면 OK
• 나중에 개선하면 됨

4. 구체적으로 요청하기

나쁜 프롬프트:

Todo 앱 만들어줘

좋은 프롬프트:

Next.js 14로 Todo 앱 만들어줘.

기술 스택:
- TypeScript
- Tailwind CSS
- 로컬 스토리지

기능:
1. 할 일 추가/수정/삭제
2. 완료 체크
3. 다크모드

디자인:
- 미니멀
- 파스텔 톤

차이:

• 나쁜 프롬프트: 10번 수정 필요
• 좋은 프롬프트: 1번에 원하는 결과

비전공자를 위한 실전 팁

Tip 1: 유튜브가 최고의 선생님

막힐 때마다 검색:

• “Git 사용법” → 5분 영상
• “Vercel 배포” → 10분 영상
• “Next.js 기초” → 15분 영상

총 시청 시간: 2시간

Tip 2: 작은 것부터 시작

첫 프로젝트 추천:

• ❌ SNS 플랫폼
• ❌ 쇼핑몰
• ✅ Todo 앱
• ✅ 타이머 앱
• ✅ 메모 앱

이유:

• 기능이 단순함
• 3일 안에 완성 가능
• 성취감 빠름

Tip 3: 에러 메시지는 친구

에러 나면:

1. 패닉하지 말기
2. 에러 메시지 전체 복사
3. Cursor Chat에 붙여넣기
4. “이 에러 왜 나와? 고쳐줘” 입력
5. AI 답변 따라하기

90% 해결됩니다.

Tip 4: 배포까지 해야 진짜 완성

로컬에서만 작동:

• “나만 볼 수 있음”
• 성취감 50%

인터넷에 배포:

• “전 세계 누구나 볼 수 있음”
• 성취감 200%

Vercel 배포는 무료이고 3분이면 됩니다.

다음 프로젝트 계획

이번 성공에 고무되어 다음 프로젝트를 기획 중입니다:

아이디어: 회사 내부용 간단한 설문조사 도구

기능:

• 설문 생성
• 링크 공유
• 결과 차트
• CSV 다운로드

목표 기간: 1주일

이번엔 데이터베이스도 써볼 예정입니다 (Supabase).

결론: 코딩 몰라도 됩니다

72시간 전의 저:

• Python이 뭔지 몰랐음
• 터미널이 뭔지 몰랐음
• Git이 뭔지 몰랐음

72시간 후의 저:

• Next.js 앱 배포 성공
• Git으로 버전 관리
• Vercel로 자동 배포 설정

바뀐 것:

• 코딩 실력? 아니요 (여전히 초보)
• AI 활용 능력? 예 (에러 해결 능력)
• 자신감? 예 (뭐든 만들 수 있다는 확신)

핵심 메시지:

코딩을 배우려고 하지 마세요. AI에게 시키는 법을 배우세요.

2026년은 “코딩 능력”이 아니라 “AI 활용 능력”이 경쟁력입니다.

여러분도 할 수 있습니다.

지금 Cursor 설치하고 시작하세요.

3일 후, 여러분의 앱이 인터넷에 떠 있을 겁니다.

부록: 제가 사용한 도구들

필수 도구

• Cursor: AI 코드 에디터 (무료 플랜으로 시작)
• GitHub: 코드 저장소 (무료)
• Vercel: 배포 플랫폼 (무료)

선택 도구

• Canva: 파비콘 제작 (무료)
• ChatGPT: 개념 이해용 (무료)

총 비용: $0

다음 글 예고

다음 글에서는 **“데이터베이스 연동하기”**를 다룰 예정입니다.

• Supabase로 회원가입/로그인 구현
• PostgreSQL 데이터베이스 연동
• API 라우트 만들기

구독하고 알림 받으세요! 🚀

질문이나 피드백은 댓글로 남겨주세요. 여러분의 첫 앱 배포 성공 스토리도 기다립니다!