바이브코딩으로 왁뿌볼 위젯을 만들어보자 | 비전공자 개발일지 외전

 

최근 서비스 개발로 AI를 사용해보다가
내 생각보다 개발 지식과 어려운 내용이 많이 들어가는 것 같아
환기를 위해 아주아주 간단하고 귀여운 서비스를 만들어봤다
 
그것은...왁뿌볼 위젯
 

 
완성본부터~
클릭하면 깨지는 버전, 타이핑하면 깨지는 버전 둘 다 만들었다.
 
이건 만드는데 30분도 안걸린 것 같고,
그마저도 AI가 일을 하길 기다리는게 절반 이상이었다.
개발 과정이랄 것도 사실 없지만 그래도 써보자면 다음과 같았다.
 

---

 

기획 의도
왁뿌볼? 크런치 슬랑이? 너무 비싸고 냄새난다

 
요즘 내 알고리즘을 장악한 왁뿌볼과 슬랑이
나도 어렸을 때 슬라임 같은 것들을 좋아했던 터라
동묘에 가서 두 개 정도 샀었다
 

문제는...냄새가 너무 심해서
만지고 나면 손을 꼭 씻고 싶다는 거!!!
그리고 요즘 말랑이 가격이 너무 비싸졌다.
난 저것들을 2000~3000원에 샀는데 요즘 인기있는 건 만 원도 넘는다더라..
 
그래서 할 일을 할 때 뭔가를 부수는 만족감과 청각적 만족감을 주면서도,
부담은 없는 나만의 왁뿌볼 위젯을 만들기로 했다.
 

코딩 과정
타이핑하면 깨지는 왁뿌볼 만들기 w. 코덱스

 
진짜 가볍게 생각하고 시작했어서 처음 코덱스에게 요청한 것은
 

 
진짜진짜 간단했다.
앱도 아니고,,,웹페이지도 아니고,,,
이걸 뭐라고 불러야 할지도 모르겠어서 위젯이라고 했는데
결과물을 보니 위젯이 맞았던 것 같다
 

 
다만 코덱스가 너무 과하게..;; 위젯을 기획해서
이런 저런 기획 내용을 다 빼고 심플하게
왁뿌볼과 소리 기능만 남겨달라고 했다.
 
AI가 왁뿌볼이란 걸 알까? 이미지도 안주고
텍스트만 쳤는데 이걸 이해할까? 반신반의 했는데
 

 
오... 꽤 그럴듯한 왁뿌볼 이미지를 만들어줘서 놀랐다.
실행을 해보았는데, 문제가 있었다.
 
1. 이미지 테두리에 초록 누끼가 제대로 따지지 않았다.
2. 깨지는 소리에 기계음이 많이 났다. 왁뿌볼을 깨는 소리가 아니라 기계음을 친 느낌..?
3. 서서히 왁뿌볼이 깨지는게 아니라 일정 타이핑이 누적되면 한 번에 깨졌다.
 

 
그래서 이런 식으로 수정 요청을 했다.
내가봐도 프롬프트가 개발 전문 지식이라곤 1도 없지만
그래도 AI가 잘 알아들었으면 됐다..ㅎㅎ
 
수정본을 보니 나머지는 잘 반영이 되었는데 소리가 문제였다.
기계음으로는 아무리 해도 왁뿌볼과 비슷한 소리를 낼 수 없었다.
 
그래서 인터넷에서 효과음 음원을 무료로 받아 코덱스에게 주었다.
다만 음원은 연결된 음이기 때문에, 음원에서 소리가 나는 구간을 나눠
랜덤으로 재생될 수 있게 해달라고 요청했다.
 

 
너믜너믜 똑똑하다...
(소리와 이미지 등 여러 번의 테스트와 수정을 거친 후)
아주 손쉽게 완성!!!
 

타이핑하면 깨지는 왁뿌볼

완성도가 내 기대보다 훨씬 잘나와서
배포까지 하고 싶었다.
 
그래서 깃헙 저장소를 하나 파고 파일을 올려달라고 요청했다.
 

 
너무 똑똑해...
이렇게 첫 번째 타입 왁뿌볼 완성
 

코딩 과정2
클릭하면 깨지는 왁뿌볼 w. 코덱스

 

아주 만족하며 쓰던 와중...문제가 있었다
생각보다 위젯이 거슬린다는 것
 
생각없이 블로그 글을 쓸 때는 괜찮았는데
ppt 작업을 한다거나, 일을 할 때는
이 소리가 아주 귀찮았다.
 
일할 때 스트레스 받으면 잠깐 만지고 노는게
이런 말랑이류의 묘미인데!!
 
그래서 일을 하다가 스트레스 받을 때
누르고 안정을 얻는 클릭 버전도 만들었다.
 

 
코덱스의 토큰을 아끼기 위해
다른 채팅창을 팠다
사실 앞 버전 만들다가도 토큰을 다 써서
몇 번 기다렸다..ㅎ
 
코덱스의 좋은 점은

컴퓨터 내 파일과 연동해놓은 프로젝트 파일을 만들 수 있어서

 

다른 채팅창을 파도 프로젝트 설명을 다시 할 필요 없이이전 작업을 이어서 할 수 있다!

 

오타 난발의 프롬프트도 잘 보듬어 주어 고맙다...

 
클릭 버전은 진짜 이 한 번의 채팅으로 완성되었다.
전 버전에서 소리에 많은 토큰을 썼기에
이번에는 소리 느낌..? 설명을 처음부터 줬다.
 
그랬더니 아주 만족스러운 결과가!!

 
바로 깃헙에 올리고
메인 브랜치로 통합시킨 뒤
 
배포 파일을 만들었다!!

 

Release wackppu-ball-clickandtype · inaeichoi/wackppu-ball-widget

 

배포 링크는 위와 같다.
 

 
1. 클릭 버전을 원하면 위의 것을,
타이핑 버전을 원하면 아래 것을 다운
 
2. zip 파일 압축을 해제한 뒤 run-widget/run-click-widget 실행

처음엔 이 화면이 나오는데 실행을 누르면 된다. 악성코드 안넣었어요...안심해주세요...

 
3. 왁뿌볼 즐기기!!!
 

---

 
진짜 별거 없는 위젯 개발기..ㅎㅎ
내딴엔 꽤 복잡한 서비스를 만들다가
이렇게 딸깍하면 나오는 위젯을 만드니
아주 재미있었다.
 
다음에 또 재밌는거 만들어야지
 
위젯 사용 후기
개발 훈수 환영합니다