소개
안녕하세요 뇌과학 18기 로보트 입니다 🤖🎶
스터디 목표는 저는 제가 겪고 있는 문제를 해결해주는 서비스를 만드는 것이었는데요,
그 중 하나는 ‘집중력’입니다.
특히 한번에 한가지 일에 집중하는 게 힘들어서 뽀모도로 서비스를 사용하고 있는데, 지겹더라고요. 그래서 뇌의 보상시스템을 자극해서 ‘집중력 요리사’를 만들었어요.
‘집중력 요리사’ 서비스 개요
집중하면 수상한 요리가 완성되는 뽀모도로 타이머입니다.
원하는 업무와 목표시간을 입력하고 집중을 시작하면, n분에 1개씩의 재료가 튀어나오고,
그리고 타이머가 끝나면 집중하면서 얻은 재료들로 만든 요리가 완성됩니다.
완성된 요리는 레시피북에 자동저장 -> 가챠효과와 수집욕구를 자극
진행 방법
나: 대략적인 서비스 기획안을 작성해서 던져줍니다.
Gemini: 기획안을 분석해 Vibe.AI(러버블)가 알아들을 최적의 프롬프트로 다듬어줍니다.
Vibe.AI(러버블): 프롬프트를 받아 실제 작동하는 코드를 순식간에 만들어냅니다.
나: 결과물을 테스트하며 버그를 찾고, 다시 Gemini와 함께 수정 프롬프트를 작성합니다.
이 과정을 반복하며 아이디어가 빠르게 현실이 되는 것을 보는 건 정말 짜릿한 경험이었으나, 테스트하는 과정에서 타이머와 인내심 배틀을 뜨는 저를 발견했어요.
1. PRD 작성 및 프로토타입 생성
제미나이와 함께 PRD를 만들고, 젠스파크로 서비스 디자인을 미리 뽑아두었어요.
다른 기수 분들 사례를 보니 디자인에 공수가 들어가는 것 같아 미리 한 번 점검해봤습니다.
AI 디자이너 기능으로 PRD를 넣었고 각 서비스 화면을 디자인해달라고 요청했습니다. 피그마 같이 디자인을 뽑아주네요! 이때 너무 설렜어요 바이브코딩하기 전이 가장 설레는 거 같아요.. 그 후는.. 인내심의 싸움..^^
한국 버전의 게임 스크린 샷
한국 요리 게임 스크린 샷
2. 러버블에서 구현
젠스파크로 이미지 생성하고 바보같게도 레퍼런스로 던져줄 생각을 못해서 AI스럽게 완성되었어요 ㅠㅠ 마음에 안 들어서 무한 수정 루프로 들어갔습니다. 결론적으로 원하는 결과는 구현하지 못했지만 과정도 나름 재밌었어요.
한국식 아침 식사 타이머 - 스크린 샷
개발과정의 시행착오 및 해결방법
문제 1: 아 맞다 이거 타이머지; 테스트 과정도 시간과의 싸움
타이머 기반 서비스이다 보니, 테스트 과정은 시간고문이었어요. 5분마다 재료가 잘 나오는지, 60분을 설정했을 때 파이 차트가 오차 없이 채워지는지, 최종 요리는 제대로 완성되는지 확인 해야했어요.
그래도 '타이머멍'을 때리기도 하고, "다음 재료는 뭘까?"기대하기도 하고, 돌싱글즈 보면서 "10분 뒤에 재료 나오니까 확인해야지!" 하는 식으로 저만의 미션이 생기기도 했습니다. 테스트하면서 제가 영업 당했어요.
문제 2: 내가 생각한대로 안 고쳐줌
타이머 시각화가 생명인데 죽어도 원하는대로 안 만들어지더라구요.
머릿속 설계도는 뚜렷했는데, 타이머 시간 흘러갈 때 채워지는 부분 강조해줘~ 이런식으로 모호하게 말하게 됐습니다.
개발용어를 몰라서 서로 다른 걸 생각할 수도 있겠다! 싶었어요.
• 해결책: '구성요소 리스트' 생성
Gemini에게 역으로 “서비스를 구성하는 모든 요소의 이름을 개발용어로 리스트업해줘”라고 요청,
Time Progress Bar, Ingredient Emoji 같은 정확한 용어를 확보하고 프롬프트 작성시간이 효율화되었어요.
(Before) 👎: "타이머가 이상해요. 시간이랑 그림이 따로 놀아요."
(After) 👍: "**Timer Component**의 Time Progress Bar가 채워지는 속도와 중앙의 Digital Clock 숫자가 일치하지 않으니, 두 요소의 타이밍을 완벽하게 동기화해주세요."
다른 유형의 음식을 보여주는 한국 앱의 스크린 샷
그 결과 아직 갈 길이 멀지만 .. 타이머를 파이차트 형식으로 구현하는 것까지는 성공했어요!
디자인도 오즈의 마법사 스타일로 바꿔달라고 요청했습니다.
결과와 배운 점
기획하는 과정은 참 즐거웠는데 실력의 한계와 마주하며,, 새벽에 타이머를 보고 있는 직장인 좀비 가 되어가는 저를 발견했습니다..
무지성으로 제미나이에게 해결책을 강요하다보니 뇌가 무기력해지는 것 같아 이것도 주의해야겠습니다.
그래도 퇴근하고 쉬기 바빴는데 바이브코딩 덕분에 몰두하는 자급자족 취미가 생긴 것 같아 뿌듯했습니다🤖❤️
남은 과제
숫자 타이머와 파이차트 흐름 통일
디자인 수정 (타이머 모양 및 크기, 시침 추가 등)
재료 팝업 시점 수정
사용자 테스트하기
-> 회사 동료에게 보여줬더니 요리가 딱히 기대되지 않는다고 하더라고요ㅠㅠ
완성 전이지만 새로 만들고 싶은 것이 계속 떠올라서 고민 중입니다!
