개발 생초보의 바이브 코딩으로 앱 만들기 (1) : 아이디어부터 기획서까지

⭐️26/01/14 앱이 출시 되었습니다!!
https://apps.apple.com/us/app/star-clear/id6757729574

Star Clear App - App Store

 
**완성된 코드는 아래 깃헙에서 확인할 수 있습니다.
https://github.com/kiteday/Star-Clear/tree/main/src/screens

Star-Clear/src/screens at main · kiteday/Star-Clear

 
이 글을 쓰는 기준 현재는 광고까지 넣어서 앱스토어 등록을 앞두고 있다.
일단 아이디어 구체화 전,, 어떤 스펙과 어떤 앱을 만들었는지부터 설명해보겠다.
 
✩ 기능

• 떨어지는 별을 잡는 모바일 게임
• 타임오버가 되기 전
• 노란별 : 점수 획득, 파란별 : 점수 차감, 폭탄 : 목숨 차감

 
기술스펙

•  Frontend: React (TypeScript), Vite, Tailwind CSS
• Mobile Bridge: Capacitor
• Monetization: Google AdMob

 
[글을 들어가기 전에..]
본 프로젝트는 바이브 코딩을 이용해 앱을 만들고 출시까지를 목표로 합니다.
"제가 개발을 0.1도 모르는데 저도 할 수 있을까요?"라고 물으신다면 본 프로젝트는 부적절합니다.
 
정말 초심자시라면 모바일 앱은 웹페이지보다 난이도가 높기 때문에 웹 페이지를 구성하고 띄우기부터 시작하시길 추천드립니다. (물론 불가능하다는 아닙니다!)
 
반대로 이 프로젝트는 다음과 같은 분에게 적절합니다.

• 이미 한 개 이상 언어에 능숙하신 분. (코드의 동작 원리를 기본적으로 이해하고 빠르게 다른 언어로 습득할 수 있는 사람)
• 오류 메세지를 읽고 원인을 파악 후 수정할 수 있는 분 
• 완전히 다른 언어 및 환경이어도 기본적인 가상환경, 버전 등에 대해 이해할 수 있는 사람.

이렇게 기본적으로 코드를 알면서 새로운 즐거움을 찾기 위해 바이브 코딩을 적용해보고 싶은 분들이 본 프로젝트에 더욱 적합합니다. 

---

새해가 다가오니 2025년 한 해를 마무리하는 글들이 쏟아졌다. 그 중 구독하고 있는 한 뉴스레터에서 25년도는 바이브 코딩의 해라고 해도 손색없을 수준이라는 글을 읽었다. 바이브 코딩이라,, 지피티가 없던 시절 알고리즘, 자료구조 등을 배운 마지막(?) 세대라 그런지 왠지 나에게도 조금은 어색하게 느껴져 그렇게 많이 시도하지 않았었다. 바이브 코딩을 경험해보고 싶어서 몇 달 전에 몇 시간 만에 웹사이트 만들기를 해본 게 거의 전부이다.
그치만 그 글을 읽고 나니 이번에는 좀 더 바이브 코딩의 세계를 씹고뜯고맛보고즐겨보고 싶어졌다. 동시에 이 새로운 세계를 알고싶어 바이브 코딩으로 앱을 만들어보게 되었다.
(좀 더 구체적인 기획 배경 글을 추후에 작성 예정입니다.)
 
그래서 뭘 만들까 고민하다가 "접근성 좋은 앱을 만들어서 광고를 달면 100원이라도 벌 수 있지 않을까?"라는 생각이 들었고 곧바로 실행에 옮겼다. 그러나 나는 실제로 AI 모델 아키텍쳐를 알면 알았지 바이브 코딩은 1도 잘 모르는 AI 연구 및 개발자가 아닌가! 그래서 정보를 좀 찾아 보았다. 내가 읽은 글들 중 실제 구체화 및 실행에 도움이 되었던 글은 다음과 같다.
 

비개발자, 클로드 코드로 외주 개발 시작하기 | 요즘IT

 

바이브 코딩을 시작하는 실무자를 위한 안내서 | 요즘IT

 

노코드의 미래: 구글 제미나이 앱 빌더 실전 가이드 (할일 앱, 게임, 챗봇 만들기)

 

#side_projects – 노마드 코더 Nomad Coders

내가 읽었던 프로젝트 글을 찾기가 어려워 커뮤니티 링크를 그냥 첨부한다. 거기서 바이브 코딩으로 마음챙김 앱을 만들었다는 글의 기술 스펙 및 이용한 모델을 확인할 수 있었다.
 
 
그리고 앞으로 바이브 코딩에 대해 좀 더 전문적으로 한다면 읽어볼만한 글도 함께 첨부한다.
 

Codex vs. Claude Code (Today)

 

A Guide to Claude Code 2.0 and getting better at using coding agents

 
 
이걸들 말고도 굉장히 좋은 글들과 정보가 찾아보면 많이 있으니 필요에 따라 (본인이 개발하는 것과 목적에 따라) 찾기를 추천한다!!
나의 경우에는 잘 모르는 분야의 코딩을 해야 완벽주의에 대한 스트레스가 적어서 완료하기 쉬울 것 같았다. 그래서 선택한 것이 모바일 앱 만들기. 그 중에서도 가장 간단한 잡기 게임으로 시작해보려고 했다.
 
뭘만들지 결정했다면? 이젠 AI를 선택할 차례.
현존하는 모델들이 기본적인 코드를 다 잘 작성한다지만,, 그렇기에 더 어떤 AI 서비스를 쓸 지 고민이 되곤한다. 나는 여러 프로젝트에서 가장 많이 본 Claude를 써보기로 했다.
 
https://claude.ai/new
 

 
Claude 자체를 완전 처음 사용해본 건 아니지만? 그래도 자주 사용하지 않은 서비스라 플랜에 대한 이해 없이 일단 무료 플랜으로 시작했다. 
 
먼저 만들려는 앱 구체화 및 이를 바탕으로 요구사항 기술서를 상세하고 자세한 버전으로 작성했다.
 

 
세부 사항 조율 등은 질의 응답으로 결정한 뒤, 최종적으로 기술요구서와 나의 이해를 위한 아키텍쳐를 짜달라고 했다. 
물론 100% 제안을 따르지 않고 불필요한 것과 필수적인 기능은 직접 판단하여 가지치기를 했다.
 

 
대화 몇 번으로 손쉽게 웹페이지를 제작해준다. 하지만 내가 필요한 것은 웹이 아니고 앱!!
 
참고로 앱은 웹보다 더 숙련된 실력이 필요하다. 그래서 가장 먼저 필요한 기능만 남겨두고 가지치기도하면서 좀 더 내 상상 속 앱에 특화된 형태로 기술서를 만들고자 했다. 
 
 

기술 요구서 일부분

 
예를 들어,
나는 바이브 코딩을 이해하기 위해 이 프로젝트를 실행한 것이기 때문에 간단한 게임 시스템을 원했다. 그래서 기술 요구서에 있던 콤보 시스템과 보스 스테이지 같은 방식은 제했다.
 
동시에 프론트와 앱제작은 내가 잘 모르는 분야이기 때문에 기존에 내가 했던 방식들과 이게 어떻게 다른지, 왜 이 과정이 필요한지 함께 알고자 했다.

나는 Python과 Pytorch를 위주로 개발해왔기 때문에 Anaconda를 가장 많이 쓰곤 했는데 이렇게 내가 잘 알고 있는 개념과 현재 이 코딩에서 적용하려는 개념이 어떻게 다른지 이해하며 넘어갔다.

이렇게 순조롭게 코딩을 진행하던 중 아뿔사..!
Claude 무료버전에 사용 리밋이 있던 걸 몰랐던 것이다...
 
하지만 아직 코딩을 직접하지 않아서인가?
결제할만큼 Claude가 다른 서비스에 비해 좋은지는 모르겠다. 결국 매력을 느끼지 못한 나는 결국 기술서만 가지고 다른 서비스로 넘어간다.
(2편에 계속.)
 
2편 바로가기
https://kiteday.tistory.com/88

개발 생초보의 바이브 코딩으로 앱 만들기 (2) : 코드를 짜보자.