바이브 코딩으로 하루만에 앱 출시하기
프로덕트 디자이너가 코드 한줄 입력없이 앱을 출시했다.
갑작스런 동기부여
오랜만에 친한 개발자 형을 만났다.
형은 본업을 하면서 사이드 프로젝트로 앱을 만드는데, 요즘 AI 퀄리티가 엄청 좋아졌다고 말했다. 물론 나도 업계 트렌드는 항상 듣기 때문에 익히 알고는 있었지만, 경각심을 크게 느끼지는 않고 있었다.
카페에서 형은 나에게 바이브 코딩하는 모습을 바닥부터 보여주기 시작했다.
형: “어떤 거 만들어볼까? 말만해”
나: “요즘 영어 공부 중이어서, 말해보카 같은 영단어 학습 앱?”
그렇게 말해보카를 카피해서 만들기 시작했고, 나는 놀라움을 금치 못했다. 형이 프롬프트를 몇줄 입력할 때마다 AI가 말해보카의 UX 플로우를 비슷하게 만들고, UI 퀄리티도 기대이상으로 만들어주었기 때문이다.
그렇게 카페에서 시간가는 줄 모르게 몰입되었고, 신기함과 동시에 경각심이 들었다. AI가 디자이너를 대체하진 못하겠지만, 디자이너가 AI를 다루는 방식에 따라 미래가 달라질 시대가 이미 눈앞에 와 있었다.
많은 것이 느껴지는 하루였다. 가만히 있다간 몇년뒤 일자리를 잃을 것만 같은 두려움이 내 머릿속을 스쳤고, 이제부터라도 제대로된 경험을 해봐야겠다는 생각을 했다.
그렇게 다음날 나는 신형 맥북을 구매했다.
본격적인 바이브코딩
맥북을 구매 후 본격적으로 프로젝트를 시작했다.
오전 11시
평소에 나는 보드게임을 좋아해서 가볍게 습작 하나 만들어보자는 생각으로 ‘스컬킹 점수 계산기’를 만들어보기로 했다. (보드게임 ‘스컬킹’은 규칙은 굉장히 쉬운데, 점수 계산이 까다로워 입문자가 접하기에 불편한 부분이 있었고, 만들어진 앱들은 시원찮아서 내가 만드는게 낫겠다는 생각을 하곤했다.)
스컬킹 점수기록 시트마침 구글에서 안티그래비티라는 IDE(개발하는 툴)가 새로나와서 사용했는데, 지피티 UX처럼 대화형식으로 진행할 수 있어서 엄청 쉬웠다. 대화를 하다보니 금방 기본 사용량이 초과되서 클로드와 제미나이 중 고민하다가 제미나이를 구독했다.
보통 PRD를 작성하여 명확한 요구사항이 제시된 상태로 진행하는 것을 추천하지만, 첫 프로젝트이고 차한잔하며 가벼운 마음으로 시작한 프로젝트여서 생각나는대로 프롬프트를 입력하였다.
오후 3시
‘헉 이정도라고?’
앱의 UX/UI가 어느정도 잡혀가기 시작했다. 게임 시작부터 종료까지의 흐름이 자연스럽게 이어졌고, UI도 나름 괜찮아보였다.
[빠르게 UI를 만들 수 있었던 이유]
제미나이, 클로드와 같은 AI 에이전트에는 원하는 ‘스킬’을 학습시켜서 개발할 수 있도록 할 수 있다는 것을 배웠다. 마치 매트릭스의 네오가 쿵푸하는 방법을 금방 배우듯, 자신이 원하는 능력을 AI에 주입시키면 그 능력을 금방 발휘하는 것이었다.
나는 클로드 코드에서 제공하는 frontend-design 스킬을 먹여서, 디자인을 시켰더니 놀랍게도 먹이기 전과 후가 확연히 차이가 났다.
오후 6시
전체적인 틀보다 오히려 디테일 챙기는데 시간이 많이 필요했다.
UI의 섬세한 조절, 다국어처리, 게임규칙 오류 바로잡기, 사용자 가이드, 다양한 유즈케이스, 네비게이팅, 로컬 스토리지 저장에 대한 이슈 등 굉장히 라이트한 앱이라고 생각했는데, 생각보다 할게 많았다.
오후 9시
구글 광고를 달고 웹과 앱 배포를 준비하기 시작했다. 직접 광고를 달아본적이 없어서 자세히는 몰랐었는데 이번에 에드센스와 에드몹에 대해 조금 더 이해할 수 있게 되었다.
[광고 달면서 새로 발견한 사실]
광고배너가 UI 중간 영역에 안달린다길래 뭔가 싶었는데, 웹뷰에는 NativeAd를 붙일 수 없다는 사실을 확인했다.
“아.. 웹만 만들어놓고 앱은 그냥 웹뷰로 감싸고 있었구나..”
AI가 웹과 앱을 다른 프레임워크(리액트와 스위프트UI)로 만들고 있는줄 알았는데, 리액트로 웹만 만들어놓고 네이티브에는 웹뷰를 끼워넣고 있다는 사실을 그제서야 알게되었다.
물론 간단한 앱이고 웹과 앱의 빠른 유지보수를 위해서라면 지금 택한 방식이 베스트지만, 코드를 안보고 채팅만하다보니 뭘로 만들어져 있는지도 모르고 작업한 것이었다. 덕분에 Capacitor를 통한 웹과 앱 싱크에 대해 공부할 수 있었다.
다음날
UX와 자잘한 오류를 수정하고 (끊임없는 디테일과의 싸움..), 배포하는데 시간을 쏟았다.
웹은 버셀에 깃 레포를 연결해서 배포하기 시작했고 (웹은 나름대로 쉬웠다), 앱은 개발자 등록부터 ASO를 위한 고민까지 생각보다 이것저것 할게 많았다. (해외 앱스토어 대응도..ㅠㅠ)
그렇게 이틀만에 모든 작업을 마치고 웹과 앱 모두 출시할 수 있었다. (웹 링크, iOS 앱스토어 링크)
느낀점
1 / 아이디어와 실행력만 있다면 금방 출시할 수 있다는 것이 신기했다. 하지만, 요술램피 지니처럼 한방에 모든 것이 이루어지는 건 아니어서 숙련도를 더 올려야겠다는 생각이 들었다.
2 / 아무리 자잘한 요청이라도 기다리는데 생각보다 시간이 오래걸려서 대기하는데 쏟은 시간이 굉장히 많았다. (침착맨 보면서 작업했음)
3 / 안티그래비티만 제공하는건지는 모르겠는데, 다른 주제로 여러개의 요청을 보내는 것이 굉장히 유용했다. 예를들어 UI 스타일, 퍼포먼스 이슈, 버그 등 이슈를 병렬적으로 처리할 수 있었다.
4 / 바이브 코딩을 통해 평소 어렴풋이 알던 것에 대해 조금 더 이해할 수 있게 됐다. 개발, 배포, 광고 등..
5 / 프로덕트가 괜찮더라도 ASO가 제대로 안되어있으면 상위 노출이 안되어서 넘나 슬펐다. 역시 서비스라는 것은 프로덕트 빌딩 외적으로도 노력이 필요하다는 것을 다시금 깨달았다.
스컬킹 좋아하시는 분들 제가 만든 앱을 활용해서 플레이해보세요!! 기회가 된다면 저랑도 같이해요 ㅎㅎ
