비개발자 AI 바이브코딩으로 앱 만들기, 진짜 될까?
하루만에 바이브 코딩으로 앱 만들기 사례로 알아보고 따라해보자!
안녕하세요~ 4년 차 UI/UX 디자이너 비니예요!
오늘은 요즘 제가 푹 빠져 있는 주제로 찾아왔어요. 바로 AI로 앱 만들기...!!
디자이너로 일하면서 항상 생각했거든요.
내가 직접 내 서비스 앱을 만들어볼 수 있으면 얼마나 좋을까?
그러다 유튜브에서 AI로 하루 만에 앱을 개발하는 영상을 봤는데, 내용이 진짜 흥미롭더라고요!
외주개발사 똑똑한개발자의 대표이자 유튜버 ai 서대표님이 클로드 코드(Claude Code)를 활용해서
비개발자의 청약 올인원 플랫폼 만드는 과정을 돕는 내용이었거든요 :)
그래서 오늘은 그 내용을 정리하면서,
비개발자가 AI로 앱을 만든다는 게 어디까지 가능한지 이야기해 볼게요~
(이 글은 해당 영상을 참고했어용!)
AI 바이브코딩으로 앱 개발, 비개발자도 진짜 가능해요?
클로드 코드 활용 청약 플랫폼 개발 과정
영상에서 서대표님의 도움을 받아
한 비개발자 대표님께서 청약이 어려운 사람들을 위한 올인원 플랫폼인 부프로를 개발했어요.
청약 진단부터 주기적인 정보 제공, 당첨 후 서류와 세금 문제까지 한 번에 해결하는 서비스였는데요.
클로드 AI의 팀 에이전트 기능을 활용해서 명령어 하나로 AI 에이전트 팀을 만들고,
리더가 팀원에게 업무를 할당하는 방식으로 진행하더라고요...!
이때 사용한 플러그인은 슈퍼파워스라는 건데,
여러 AI 에이전트에게 역할을 부여해서 동시에 작업할 수 있게 해주는 거예요.
AI 기획서 작성과 기술 스택 선정
가장 인상 깊었던 건 AI한테 앱 기획서 작성을 요청하는 부분이었어요.
마크다운 포맷으로 기획서를 뽑아내고, 거기서 기술 스택도 정리하더라고요.
프런트엔드는 Next.js, 백엔드는 슈퍼베이스, AI 엔진은 구글 Gemini,
결제는 토스 페이먼트, 푸시 알림은 카카오 알림톡으로 세팅했어요.
여기서 중요한 포인트가 있었는데요!
AI가 생성한 기획서를 그대로 쓰면 안 되고,
사람이 직접 다듬는 작업이 꼭 필요하다는 거예요.
중복되는 기술은 줄이고, 개발자들이 자주 쓰는 기술 위주로 스택을 조정해야
추후 수정이 쉬워진다고 하더라고요!
예를 들어 결제 시스템은 토스 페이먼트 하나로 줄이고,
앰플리튜드 같은 유료 분석 도구는 과감히 빼는 식이었어요!
외부 데이터 연동과 관리자 페이지 구성
청약 정보 같은 외부 데이터를 연동하려면 비용이 발생한다고 해요.
그래서 청약홈, LH, SH 같은 공공 정보는 매일 수기로 입력하는 방안도 함께 고려해보시더라고요.
회원을 그룹화해서 맞춤 정보를 제공하는 방식도 같이 기획했고요~
관리자 페이지에서 시스템 프롬프트를 수정하고 고도화할 수 있도록 구성하는 부분도 인상적이었어요.
사용자 웹과 관리자 웹은 별도의 Next.js 프로젝트로 분리하고,
공통 부분은 모노레포 방식으로 관리하더라고요!
AI 앱 개발 과정에서 겪는 현실적 문제
하드코딩 데이터와 동적 생성 문제
AI가 만든 결과물을 보면 UI는 꽤 괜찮아요.
근데 문제는 데이터가 하드코딩되어 있는 경우가 많다는 거...ㅠㅠ
다른 사용자가 접속해도 똑같은 화면이 보이는 거죠.
리포트 내용은 실제 AI 분석 결과로 동적 생성이 필요하고,
채팅 기능도 실제 AI 모델을 연결해야 제대로 작동해요.
이런 부분을 기획서에서 핵심 요구 사항으로 분류해두는 게 중요해요.
로그인 오류와 온보딩 프로세스 문제
테스트하다 보니 온보딩이 로그인 없이도 진행되고, 채팅도 비로그인 상태에서 가능한 상황이었어요!카카오 로그인도 동작하지 않았고요.
초기에 기능 연동은 나중에 하고 디자인 퀄리티만 먼저 뽑아달라고 요청했기 때문에 발생한 문제인데,
이런 부분은 하나하나 피드백을 줘야 한다고 해요.
뒤로 가기 버튼이 없거나, 로그인 후 유저 정보가 안 쌓이는 디테일도 체크해야 했어요.
AI 수정 요청 효율적으로 하는 방법
수정할 때 팁이 하나 있는데요~
여러 수정 사항을 모아서 한 번에 요청하는 게 훨씬 효율적이에요!
UI 작업이 끝나면 백엔드와 데이터베이스 연동을 요청하고,
AI한테 기획서를 기반으로 작업을 시키면 알아서 진행해줘요.
오류가 발생하면 오류 메시지를 캡처해서 AI한테 보여주면 해결 방법까지 안내해준대요!
AI 앱 배포와 환경 변수 설정 방법
깃허브 코드 업로드와 버셀 배포
개발이 끝나면 깃허브에 프라이빗 레퍼지토리를 만들어서 코드를 업로드하고,
버셀(Vercel)로 배포하는 과정을 거쳐요.
이때 환경 변수 설정이 중요한데, API 키 같은 민감한 정보를
코드 외부에서 관리해야 보안 이슈가 없거든요.
앱과 어드민에 각각 필요한 환경 변수를 AI한테 요청하면 목록을 정리해줘요~
배포 후 도메인 설정 변경과 자동 배포
배포 후에는 로컬 호스트로 설정했던 부분을 배포된 도메인 링크로 바꿔줘야 해요.
수정 사항이 생기면 깃허브에 푸시하면 버셀에서 자동으로 배포해주니까 편하더라고요!
외부 서비스 연동도 이 단계에서 진행하는데, 연동 방법이 어려우면 AI한테 물어보면 안내해줘요.
AI 앱 개발의 장점과 한계
비개발자가 AI 코딩으로 얻는 것
솔직히 놀라웠던 건 과거에 몇 달이 걸리던 작업을 하루 만에 해낼 수 있다는 거예요...!!
AI한테 명확하게 지시하고 반복적으로 피드백하면 꽤 쓸 만한 결과물이 나와요.
그리고 이 과정에서 개발 환경이나 데이터 연동 같은 전체 체계를 이해하게 되니까,
나중에 개발자와 소통할 때도 훨씬 수월해져요.
AI가 이해할 수 있는 언어로 지시하는 게 핵심이라는 것도 배웠고요~
혼자 100% 완성이 어려운 이유
근데 현실적으로 비개발자가 혼자 100% 완성하기는 어렵더라고요 ㅠㅜ
정교하게 기획하고 디테일을 잡다 보면 시간도 꽤 걸리고,
외부 서비스 연동이나 데이터베이스 설계 같은 부분은 전문가 도움이 필요해요.
무료 티어 할당량 초과로 결제가 필요한 상황도 생기고요.
저도 이 영상 보면서 내 서비스를 한 번 만들어보고 싶다는 생각이 진짜 강해졌거든요?
근데 혼자 하기엔 한계가 있으니까,
어느 정도 프로토타입을 만든 다음에 전문 개발팀한테 맡기는 게 현실적이겠다 싶었어요...ㅎ
서대표님이 운영하는 똑똑한개발자가 웹·앱 개발을 전문으로 하는 에이전시인데,
영상에서 직접 기술 스택을 선정하고 기획을 다듬는 과정을 보니까
똑똑한개발자의 실제 프로덕트를 만드는 노하우가 확실히 느껴졌어요.
UX 기획부터 디자인, 개발까지 한 번에 진행할 수 있으니까,
AI로 프로토타입 만들어보고 제대로 된 서비스로 발전시키고 싶을 때 딱이겠다 싶었어용!!!!
Ai, AX 컨설팅도 하시는 것 같던데, 비슷한 도움이 필요하신 분들은 아래 링크 참고하세요~
비개발자 AI 바이브코딩 앱 개발의 핵심은?
결국 AI를 활용한 앱 개발에서 가장 중요한 건 이 세 가지였어요.
AI한테 명확하게 지시하기
생성된 결과물을 직접 검토하고 수정하기
그리고 반복적으로 피드백해서 완성도를 높이기
비개발자도 AI랑 함께라면 서비스의 전체 구조를 잡고 프로토타입까지 만들어볼 수 있어요.
다만 완성도 높은 서비스로 가려면 전문가의 도움이 필요하다는 것도 잊지 마세요~!
오늘도 읽어주셔서 감사해요 :)
여러분도 AI로 나만의 앱 한 번 만들어보는 거 어때요?!