AI를 사용해 10분 만에 앱을 만들었어요 — 결과는? 🤖⚡
Source: Dev.to
어떻게 시작했는가
어제 아침에 차를 끓이며 생각했어요 — “오늘은 뭔가 새로운 걸 해보자.”
보통은 디버깅이나 코드 제안을 받기 위해 AI 도구를 사용해요. 전체 앱을 만드는 건? 한 번도 시도해 본 적 없어요. 저는 흔히 하는 생각을 가지고 있었죠 — “그래 그래, AI가 그렇게 대단하진 않잖아.”
그런데… 제가 틀렸어요.
목표: 간단한 습관 추적기 앱
저는 의도적으로 간단하지만 유용한 것을 만들고 싶었습니다: 사용자가 다음을 할 수 있는 습관 추적기:
- 일일 습관 표시
- 연속 기록 확인
- 동기 부여 인용구 받기
시간 제한: 10분.
타이머 시작. 시작합니다.
Timeline
Minutes 1–2: Idea & Setup
“간단한 습관 추적기 웹 앱을 HTML, CSS, 그리고 순수 JavaScript로 만들고 싶어요. 사용자가 일일 습관을 표시하고, 연속 일수(streak)를 확인하며, 동기 부여 인용구를 받을 수 있어야 합니다. UI는 깔끔하게 유지해주세요.”
응답은 2초 만에 도착했습니다 — 완전한 구조와 코드 스니펫.
Minutes 3–4: Copy‑Paste & First Run
ChatGPT가 다음 HTML 스켈레톤을 제공했습니다:
<!DOCTYPE html>
<html>
<head>
<title>Habit Hero</title>
<style>
body { font-family: Arial; max-width: 500px; margin: auto; padding: 20px; }
.habit { display: flex; justify-content: space-between; margin: 10px 0; }
.completed { text-decoration: line-through; color: gray; }
button { background: green; color: white; border: none; padding: 5px 10px; }
</style>
</head>
<body>
<h1>Habit Hero</h1>
<p>"Small steps every day"</p>
<!-- app content will be inserted here -->
</body>
</html>그리고 app.js 파일은 다음을 처리했습니다:
- 습관 배열 (Exercise, Read, Meditate)
- 완료 버튼 클릭
- 연속 일수 카운터
- 무작위 인용구
첫 실행 결과
- ❌ 습관이 표시되지 않음
- ❌ 연속 일수가 업데이트되지 않음
- ✅ 인용구 표시만 정상 작동
Minutes 5–6: Debugging with AI
오류를 복사해서 물었습니다:
“습관이 표시되지 않아요. 콘솔 오류: ‘Cannot read property
appendChildof null’”
ChatGPT의 답변:
“스크립트가 DOM이 로드되기 전에 실행되고 있어요. 스크립트를 body 끝으로 옮기거나
DOMContentLoaded를 사용하세요.”
스크립트 태그를 body 하단으로 이동했습니다.
✅ 완벽히 작동했습니다.
Minutes 7–8: UI Improvements
앱은 동작했지만 디자인이 지루했습니다. 물었습니다:
“UI를 더 깔끔하고 현대적으로 만들어 주세요. 그라디언트 배경, 카드 디자인, 그리고 더 나은 폰트를 추가해 주세요.”
AI는 즉시 다음과 같은 업데이트된 CSS를 제공했습니다:
- 선형 그라디언트 배경
- 박스‑쉐도우가 적용된 습관 카드
- 부드러운 호버 효과
- 개선된 타이포그래피
이제 전문적인 모습이 되었습니다.
Minutes 9–10: Local Storage & Polish
새로 고침 시 연속 일수가 초기화되는 것을 발견했습니다. AI에게 요청했습니다:
“
localStorage를 구현해서 습관과 연속 일수가 유지되도록 해 주세요.”
AI가 제공한 스니펫:
// Save to localStorage
localStorage.setItem('habits', JSON.stringify(habits));
// Load from localStorage
const saved = JSON.parse(localStorage.getItem('habits'));
if (saved) habits = saved;10분 후 — 최종 결과
10분 안에, 나는 다음을 만들었다:
- ✅ 작동하는 습관 추적기
- ✅
localStorage를 이용한 연속 횟수 카운터 - ✅ 매일 동기 부여 인용문
- ✅ 깔끔하고 현대적인 UI
- ✅ 모바일 반응형
친구에게 보냈다. 그가 말했다: “10분 만에 이걸 만들었어? 나한텐 이게 이틀 걸릴 거야.”
핵심 교훈
-
AI는 아직 개발자를 대체하지 않는다
AI가 코드를 작성했지만, 디버깅하고 요구사항을 정의하고 모든 것을 검증한 것은 나였다. AI가 **80 %**의 작업을 수행했으며, 중요한 **20 %**는 인간의 사고였다. -
프롬프트 엔지니어링은 실제 기술이다
잘못된 프롬프트: “앱을 만들어줘”
좋은 프롬프트: “localStorage를 사용하고, 깔끔한 UI와 동기 부여 인용구가 있는 habit tracker를 만들어줘”
구체적인 입력 = 더 나은 출력. -
AI 환각은 실제이다
어느 순간 AI가 JavaScript에 존재하지 않는 함수를 작성했다. 나는 직접 그것을 잡아야 했다. 기본을 모르면 AI가 자신 있게 오도할 수 있다. -
속도 향상은 실제다
보통 2–3 시간이 걸리는 작업을 10 분에 끝냈다. 품질 관리? 여전히 인간의 일이다.
내 최종 결론
AI 덕분에 나는 10× 빠르게 작업할 수 있게 되었다. 그것은 내 일자리를 빼앗지는 않았다. 내가 개발자가 아니었다면, 나는 다음과 같은 것을 알지 못했을 것이다:
- 오류가 왜 발생했는지 알 수 있었다
localStorage를 이해했다- 좋은 UI 결정을 내렸다
- 코드를 최적화했다
AI는 숙련된 개발자에게는 초능력이다. 초보자에게는 양날의 검과 같다 — 도움이 되지만, 의존성을 만들 수 있다.
보너스: 내 프롬프트 템플릿
직접 시도해 보려면 다음과 같이 사용하세요:
I need a [app type] with [features].
Tech stack: [HTML/CSS/JS or others].
UI should be [clean / modern / fun].
Extra requirements: [localStorage, API, etc.].어떻게 생각하시나요?
AI를 사용해서 무언가 만든 적이 있나요? 어떤 도구를 사용했나요? 경험은 어땠나요? 댓글을 남겨 주세요 — 모두 읽고 답변합니다.