코딩 경험 없이 전체 AI 제품을 만들었습니다 — 그 결과는?
Source: Dev.to
번역할 텍스트를 제공해 주시겠어요? 현재는 소스 링크만 포함되어 있어 번역할 내용이 없습니다. 텍스트를 알려주시면 한국어로 번역해 드리겠습니다.
제품이 하는 일
- Upload 고양이 또는 개 사진을 업로드
- AI generates Funko Pop 만화 스타일의 독특한 애니메이션 스티커 4개 생성
- Download MP4 비디오를 다운로드하여 어디서든 공유
현재 , 에서 라이브 중이며, Stripe를 통해 실제 결제를 처리하고, Cloudflare의 글로벌 엣지 네트워크에서 실행됩니다.
시작점
| ✅ | ✅ | ❌ |
|---|---|---|
| API가 무엇인지에 대한 기본 이해 | 배우고 반복하려는 의지 | 프론트엔드 개발 경험 없음 |
| React 또는 Next.js 사용 경험 없음 | ||
| CSS 프레임워크에 대한 지식 없음 |
저는 현재 “AI 코딩 부트캠프”에 참여하고 있습니다. 이 부트캠프의 전제는: 코딩 배경이 전혀 없는 사람이 AI 도구를 사용해 30일 안에 실제 제품을 만들고 출시할 수 있는가?
스포일러: 예. 하지만 쉽지는 않았습니다.
기술 스택 (AI가 선택함)
| 계층 | 기술 |
|---|---|
| 프레임워크 | Next.js 15 (App Router) |
| AI 이미지 생성 | Volcengine Doubao API |
| AI 비디오 생성 | Volcengine Doubao Video API |
| 인증 | NextAuth.js + Google OAuth |
| 결제 | Stripe Checkout |
| 호스팅 | Cloudflare Workers |
| 스타일링 | Tailwind CSS |
최종 코드베이스는 약 5,800줄의 TypeScript/React로 구성되어 있습니다. 작성 당시에는 약 10 % 정도만 이해했으며, 현재는 약 40 % 정도 이해하고 있습니다.
Source: …
내 워크플로우
Me: "I want users to upload a photo and see a preview"
AI: writes the upload component, API route, and file handling
Me: "The image preview looks too small"
AI: adjusts the CSS and layout
Me: "Now connect it to the Doubao API for sticker generation"
AI: writes the API integration with error handling and polling나는 한 줄도 코드를 직접 작성하지 않았지만, 다음을 해야 했다:
- 내가 원하는 것을 명확히 설명 – 생각보다 어렵다.
- 출력을 눈으로 검토 – 제대로 보이나? 동작하나?
- 문제가 생겼을 때 디버깅 – 오류 메시지를 복사해 AI에 붙여넣고, 수정 사항을 적용.
- 제품 결정을 내림 – AI는 사용자가 원하는 것을 알 수 없으니, 직접 판단해야 한다.
성공 사례
- 스캐폴딩: “Create a Next.js app with upload, payment, and result pages” → 몇 분 안에 완성.
- API 통합: Doubao, Stripe, Google Auth 연결 → 대부분 첫 시도에 정확함.
- UI 반복: “버튼을 크게 만들기”, “그라디언트 추가”, “애니메이션 적용” → 즉시 결과.
- 디버깅: 오류 로그 붙여넣기 → 약 80 % 정확도로 수정.
- 배포: 전체 Cloudflare Workers 설정을 단계별로 안내받음.
어려웠던 점
- 폐기된 라이브러리: AI가
@cloudflare/next-on-pages를 제안했지만, 이는 폐기된 상태이며 Next.js 15와 충돌한다. 오류 로그를 통해 이를 발견하고@opennextjs/cloudflare로 교체해야 했다. - API 품질 차이: 처음에 AI가 이미지 생성용으로 MiniMax를 추천했지만,
subject_reference가 사람에게만 적용되고 반려동물에는 동작하지 않았다. 테스트 후 Volcengine Doubao로 전환했다. - 복잡한 상태 관리: AI 생성용 폴링 로직이 버그가 많아 여러 차례 반복 수정이 필요했다.
- 프로덕션 엣지 케이스: 로컬에서는 정상 작동하던 것이 Cloudflare Workers에서는 실패 (async_hooks 문제, 파일 경로 차이 등).
첫 번째 성공
고양이 사진을 처음 업로드하고 네 개의 애니메이션 Funko Pop 스티커가 나를 바라보고 있던 순간을 절대 잊지 못할 거예요.
그 스티커들은 정말 귀여웠어요.
그것들은 실제로 내 고양이와 닮아 있었어요.
그때 깨달았어요 — 내가 이걸 만들었다는 걸.
나. “를 쓸 수 없는 사람.
측정항목
| 지표 | 값 |
|---|---|
| MVP까지 걸린 시간 | ~2 주 (시작부터 작동 제품까지) |
| 총 비용 | ~$50 (도메인 + Cloudflare + API 테스트 크레딧) |
| 코드베이스 규모 | ~5,800줄의 TypeScript/React |
| 내가 작성한 줄 수 | 0 |
| 이해도 | ~40 % (증가 중) |
Lessons Learned
- Read error messages even if you don’t fully understand them.
- Grasp the general architecture at a high level.
- Make product decisions that AI can’t make for you.
- Test relentlessly – local development is smooth, but deploying to production can require 2–3 days of debugging edge‑runtime issues, environment variables, and platform‑specific quirks.
It took me about a week to learn how to effectively communicate with AI coding assistants. Clear instructions, specific feedback, and iterative refinement are skills that develop over time.
AI can write any feature you describe, but deciding which features to build, the right user flow, and pricing still require human judgment.
향후 로드맵
- 🐰 더 많은 동물 지원 (토끼, 햄스터, 새)
- 📱 WhatsApp 스티커 팩 내보내기
- 🎨 맞춤 스티커 텍스트 및 이모지
- 🐾 애완동물 보호소를 위한 일괄 처리
모든 작업은 AI와 함께, 한 번에 하나의 프롬프트로 구축되고 있습니다.
직접 해보세요
Visit petsticker.shop – 애완동물 사진을 업로드하고, $2.99에 애니메이션 Funko Pop 스티커 4개를 받으세요.
결론
만약 당신이 비개발자이고 AI 코딩 도구가 실제 제품에 사용할 준비가 되었는지 궁금하다면 — 제 답은 예, 단 조건이 있습니다. 코드를 직접 작성하지는 않겠지만, 생각하고, 테스트하고, 반복해야 합니다.
이 게시물도 AI 도움을 받아 작성되었습니다. 하지만 제품은 매우 실제적입니다.