[바이브코딩] Kiro와 gemini-cli를 사용해 바이브코딩으로 웹서비스 구축하기

서울우먼잇츠 팀트랙 스터디에 참여 중이다. 바이브코딩이 메인 주제인 스터디인데, 처음 한 달은 구글클라우드스킬부스트를 통해 스킬 뱃지를 획득했고 이후 한 달은 바이브코딩을 적용해 실제 서비스를 구축해보기로 했다. 업무를 하면서 vscode에 깃허브 코파일럿을 연결해 조금씩 사용하고는 있지만, 바이브코딩으로 서비스를 만들어 보는 것은 처음이라 너무 재밌을 것 같다는 기대를 갖고 시작했다. 데이터를 들여다보고 예측 모델링을 하는 작업이나 해봤지, 나만의 서비스를 만드는 것부터도 처음인지라 기대가 컸다.

 

---

서비스 기획하기

 

바이브코딩을 위해 어떤 도구를 사용하던 간에 중요한 건 "구체적으로 어떤 서비스를 만들고 싶은가"에 대해 스스로 정의하는 것이라고 생각했다. 무엇을 할지 정해야 코드도 그에 맞게 짜여질 것이고, 결과도 생각한 대로 잘 나올 것이기 때문이다. 바이브코딩은 개발하는 과정의 공수를 줄이는 편의를 위한 것이지, 대충 아이디어 던져주고 기획부터 맡겨버리는 건 아니라고 생각했다. 만약 그런 식으로 모든 걸 맡겨버린다면 결과가 기대치에 달하지 않아 수정 작업에서 시간도 많이 들테고 토큰 부담도 커질 것이다.

 

처음 개인으로 만드는 서비스인만큼 관심 있는 주제로 접근하는 편이 좋을 것이라 생각하여 주제는 '마라톤'으로 선정했다. 처음에는 "다가오는 마라톤 일정마다 과거 날씨 조회와 본인의 실력, 목표 시간에 따른 전략 제공 서비스"를 생각했는데, 할 일이 너무 많을 것 같아서.. 생성형 AI를 사용하면서도 단순할 것 같은, "마라톤 준비 일정 수립 서비스"를 기획했다. 지금도 사용하고 있는 모 어플의 맞춤형 계획 생성을 떠올리며 대략 이런 식으로 진행하면 되겠다는 것을 GPT에게 전달했다. 구체적인 기획서 작성은 서비스 기획자로 페르소나를 부여한 이 친구가 할 거니까..😄

 

 

서비스 이름은 깃허브 레파지토리를 만들면서 4yourun이라고 정의했는데, 지금 보니 계획에 대한 단어가 없어서 좀 분명하지 않은 것 같다는 아쉬움이 든다. 아무튼 저 대화 이후에 모바일 친화적으로 개발하는 것을 고려해서 써달라고 하니 아래와 같은 기획서(더보기 클릭으로 확인 가능) 를 작성해주었다. 기술 스택은 gemini를 제외하고는 내가 할 줄 모르는 것들이고, 모바일 요구사항도 무슨 뜻인지 정확히 모르겠지만.. 바이브코딩으로 극복할 것이라 믿고 이 기획서를 갖고 아래 단계를 진행했다.

 

🧩 서비스명 : 4YourRun
마라톤 목표 달성을 위한 AI 기반 개인 맞춤형 러닝 플래너 (단, 모바일 중심 설계 필수 !!)

✅ 1. 주요 목표

- 사용자가 참가할 마라톤 정보를 입력하면 최근 러닝 기록과 비교해 생성형 AI(Gemini)를 활용한 맞춤형 훈련 계획을 주차별로 제공
- 시각적으로 정리된 결과 화면 제공

✅ 2. 사용자 입력 데이터 (Form Input 구조)

📍Step 1: 마라톤 정보 입력

항목,필수, 입력 타입, 예시
----------------------------
대회 이름, O, 텍스트, 서울 마라톤
대회 일자, O, date picker, 2025-11-03
거리, O, select dropdown, [5km, 10km, Half, Full]
목표 시간, O, 숫자 3칸 입력 (시/분/초), 3시간 45분 00초

📍Step 2: 최근 러닝 기록 입력

항목, 필수, 입력 타입, 예시
------------------------------
기록 날짜, X, date picker, 2025-08-25
기록 거리, X, 숫자 입력 (km), 10
기록 시간, X, 숫자 3칸 입력 (시/분/초), 0시간 55분 00초

단, 최근 러닝 기록 입력은 필수가 아님. 
따라서 최근 러닝 기록이 있는지를 먼저 확인하고 사용자가 있다고 하면 입력하는 화면을 제공해야 함

✅ Validation 기준
- 목표 일자는 오늘 날짜보다 미래여야 함
- 거리/시간은 모두 입력되어야 생성형 AI에게 요청 가능함
- 최근 러닝 기록 입력의 기록날짜는 오늘 날짜에서 최대 6개월 이내만 허용함

✅ 3. 결과 화면 구성 (GPT 응답 기반 출력 구조)

📍Week별 훈련 플랜 카드

필드명, 설명, 예시
---------------------
주차 (week), 몇 주차인지, Week 1
총 목표 거리, 그 주의 러닝 거리, 30km
훈련 구성, 각 훈련 유형 요약, Easy Run 2회, LSR 1회 (15km)
훈련 목표 요약, 주간 훈련 목적 설명, 기본 거리 확보 + 심폐 적응

📍전체 요약 출력

총 주차 수: 예) 9주
총 예상 훈련 거리: 예) 310km
추천 평균 주간 거리: 예) 35km
주간별 그래프: 거리 변화 추이 그래프 포함
GPT 피드백: 슬럼프 시 대처 팁, 템포 조절 팁 등


✅ 4. 페이지 구성 (IA)

페이지, 설명
-------------
/, 홈 – 서비스 소개, 시작하기 버튼
/plan, 마라톤 정보 & 최근 기록 입력 폼
/result, AI가 생성한 주간 훈련 계획 결과 화면

- 홈 화면에서 시작 버튼을 누르면 이후에 plan 폼이 등장함
- 마라톤 정보 폼과 최근 기록 입력 폼은 각각 step1, step2로 페이지 분리됨
- step2에서 제출 버튼 클릭하면, 생성 ai가 답변 생성하는 동안 달리기 하는 사람들이 화면에서 가로로 지나가야 함(매우 중요)
- 답변이 모두 완성되면, 다음 화면 result에서 결과를 제공함.
- 먼저 Week별 훈련 플랜 카드를 테이블 형태로 예쁘게 제공함. 그 아래에는 전체 요약본(예상 훈련 거리, 평균 주간 거리 등)을 예쁘게 제공함.



✅ 5. 기술 스택 제안

영역, 기술
-----------
프론트엔드, Next.js (TypeScript)
스타일링, Tailwind CSS (반응형 모바일 우선)
백엔드 API, Next.js API routes or 서버리스 함수
Gemini 통신, Google Gemini-2.5-flash-lite
배포, Vercel (GitHub 연동 자동 배포)

✅ 6. 모바일 UX 요구 사항

- 기본 해상도 기준: 모바일(375px~430px) 중심
- 모바일 상단에 고정된 단계 진행 표시 (Step 1 / Step 2 / Result)
- 카드뷰, 입력 폼, 버튼 모두 엄지 조작 기준 디자인
- 결과 요약은 스크롤 UX 고려 (터치 & 스와이프)
- 다크모드 대응 X (선택사항)

 

 

---

AWS Kiro를 이용해 바이브코딩 개발하기

 

8월말 쯤에, AWSKRUG에서 진행하는 Kiro 소개 세미나에 참석했다. 지금 가입하면 추가 크레딧을 받을 수 있다는 좋은 정보를 듣고 첫 바이브코딩을 위한 도구로 Kiro를 선택했다. Kiro의 채팅창에서는 Vibe와 Spec 이렇게 두 방향성을 갖고 바이브코딩을 할 수 있다고 한다. 이미 기획서는 있으니, 이걸 바탕으로 계획을 세워줄 Spec 모드를 사용했다. 언어모델은 Claude Sonnet 4를 사용했다.(지금 선택지에는 이거 뿐이어서..ㅎ)

 

기획서를 던져주었더니 별다른 설명을 하지 않았음에도 Spec 모드여서 그런지, 바로 내용을 이해하고 계획을 세웠다. Kiro는 바이브코딩을 시작하기 전에 requirements, design, tasks 파일을 생성하고 사용자에게 검토를 요청한다. 물론 맘에 들지 않는 건 직접 수정해도 된다. 작성된 tasks 중에 주차별 목표 거리와 누적 거리를 시각화하는 단계가 있었는데, 이해하기도 좋고 결과도 더 예쁘겠지만 불필요하게 시간이 많이 들 것 같고 왠지 오류도 잦을 것 같아서 해당 단계는 직접 삭제했다.

 

기획서를 Plan 모드에서 던졌더니 바로 필요한 문서들을 생성했다

 

requirements.md

design.md

tasks.md

 

이렇게 tasks.md까지 생성하고 나면, 채팅창을 통해 단계별로 수행하라고 지시하여 바이브코딩을 진행할 수 있다. 또는 직접 tasks.md에서 저 단계별 앞에 있는 [ ] 를 클릭해서 코딩할 수도 있다. 이 서비스는 총 14개 Task가 정의되었는데 생각보다 많아서 신기했다. 굉장히 정밀하게 작업을 진행하는구나 싶었다.

 

터미널에서 테스트나 라이브러리 설치 등을 진행해야 할 때는 직접 run을 눌러줘야 했다. 계속 지켜봐야 해서 불편하긴 하지만, 이 친구가 엉뚱한 것을 하거나 불필요하게 너무 많은 시도를 할 때는 제어하는 목적으로 사용자의 개입은 필요한 것 같다.

 

아무튼 무려 14개 Task를 거쳐 그럴 듯한 화면이 만들어지긴 했다. npm run dev로 보았을 때 특별한 문제는 없어 보였다. 진짜 문제는 배포를 위한 단계에서 발생했다.

---

gemini-cli를 이용한 트러블슈팅

 

문제는, 배포를 위해 Vercel에 올렸을 때 개발 환경에서는 미처 확인하지 못한 에러가 발생했다는 점이다. 이를 해결하기 위해 여러 차례 Kiro 잡도리..를 시도했는데 에러는 잡지 못하고 테스트 시간만 너무 소비되는 느낌이 강하게 들었다. 스터디원들에게 고민을 공유했는데 gemini-cli를 사용해보라는 조언을 받아서 설치 후 바로 트러블슈팅에 사용해보았다.

 

가이드에 따라 윈도우 버전으로 설치 후, 로그인하면 터미널에서 바로 gemini를 사용할 수 있다. 작업 중인 폴더로 이동한 후에 gemini 명령어로 바로 실행해보았다.

 

gemini-cli 실행 화면

 

그리고 Kiro를 잡도리하던 시간이 무색하게, 몇 번의 명령어만으로 깔끔하게 오류를 해결했다. 이유는 구체적으로 알기 어렵지만, Kiro는 직접 계획한 많은 테스트들을 수행하면서 하나가 틀리면 하나를 고치고 그에 따라 사이드이펙트가 발생하고.. 하는 복잡성 때문에 트러블슈팅에 어려움을 겪은 것이 아닐까 추측한다. npm run lint, npm run build 수행하고 오류 발생하면 고치라는 동일한 명령에도 다른 식으로 대처하는 것을 보고나니, 하나의 도구에만 의존하지 말고 여러 도구를 사용하며 각각의 장점을 최대한 활용하는 방식으로 바이브코딩을 해야겠다고 생각했다.

 

---

Github push 및 Vercel에서 배포하기

 

 

개발 환경에서 문제가 없다는 것을 확인한 후, 깃허브에 푸시하고 다시 vercel에서 배포를 시도했다. 업데이트된 main 브랜치를 인식한 후 배포를 클릭했더니 얼마 지나지 않아 상태가 error가 아닌 ready인 것을 확인할 수 있었다.

 

https://github.com/jieunk311/4YourRun

GitHub - jieunk311/4YourRun: GenAI supports your healthy running.

 

 

이제 됐다^^.. 안심하면서 기본으로 제공되는 도메인으로 접속해보니.. 연결이 비공개로 설정되어 있지 않다며 오류가 발생했다. 크롬 시크릿모드에서 실행해보니 최초에는 접속 가능하던데, 다시 처음부터 시도해보려고 하니 마찬가지로 오류가 발생했다. 몇 년전에 vercel에서 한국 도메인을 막았다나 뭐라나..🤣

 

웹은 안될 것 같아서 내 핸드폰의 사파리 브라우저로 접속하니 되긴 했다. 모바일 친화적으로 만들으라고 의도한 것이 잘 먹힌 것 같아 뿌듯했다. 다소 반응이 느리고 길이가 다른 컴포넌트도 있고, 값 입력했을 때의 색깔이 흐려서 아쉽기도 하지만, 직접 개발한.. 아니 내가 AI와 합작해서 서비스를 만들었다는 점이 그저 신기하고 뿌듯X10000했다.

 

시작 화면 / 정보 입력 화면

과거 기록 입력 화면

훈련 계획 생성 화면(애니메이션이 있어요.. 처음엔 거꾸로 달리길래 이모티콘 뒤집으라고 했었네요..ㅎ)

AI에 의해 생성한 훈련 계획

 

그렇지만 동일한 브라우저로 재접속했을 때는 역시나 오류^^..!! 다른 방법이 필요했다.

 

---

도메인 연결하기

 

 

도메인은 vercel에서 구매하거나 다른 호스팅 업체에서 구매한 것을 등록할 수 있다. 배포한 프로젝트의 Settings > Domains에서 Add Domain 버튼을 클릭해 진행한다. 나는 내도메인.한국 이 사이트에서 무료로 사용할 수 있는 도메인을 발급받아 연결했다. 도메인을 몇 개월마다 바꿔야한다는 불편함이 있지만 개인 프로젝트용이니 감수하고 첫 시도로 사용해볼만 한 것 같다.

 

최초 시도는 역시나 실패했다. 인증을 해야한다면서 CNAME이나 TXT와 같이 DNS 고급설정 값을 주는데, 내도메인.한국의 도메인 설정 페이지에서 vercel에서 주는 이 값을 입력해야 한다. 그런데 나는 이 값 뿐만 아니라 IP연결에 내 랩탑의 공인 IP를 넣어서 계속 연결에 오류가 났던 것으로 추정한다. 배포는 vercel에서 하는데 왜 내 ip를 넣었던 건지..? 아무튼 하라는 인증만 하면 된다. . 성공했다면 몇 초 지나지 않아 바로 파란색 체크를 확인할 수 있다.

 

실패인 경우

성공인 경우

 

이제 어떤 브라우저에서든(아마도) 아래 링크로 접속하면 서비스를 사용할 수 있다!🎉

https://4yourrun.kro.kr/

4YourRun - AI 마라톤 훈련 플래너

 

 

그런데 지금 다시 실행해보니 글씨도 진한 색으로 잘 보이고, 컴포넌트 길이도 맞고.. 그럴 듯 해보이는 것 같기도..ㅎㅎ 언제 고쳐진 건지 모르겠지만 아무튼 서비스 동작에는 제한 없다. 

 

---

바이브코딩을 이용한 웹서비스 개발 후기

 

 

이번 프로젝트는 스터디 팀원들의 도움 덕분에 완성했다. 특히 vercel이나 내도메인.한국처럼 개인 프로젝트를 위한 유용한 도구들을 소개해준 덕분에 빠르게 방향을 잡을 수 있었다. (본 지면(?)을 빌려 감사드립니다.🙇‍♀️👍👍)

 

기획서만 작성했을 땐 몰랐는데 직접 개발 계획을 받아보고 나니, 모바일 최적화나 gemini 연동, 단위/통합 테스트까지 고려할 점이 정말 많아서 까마득했다. 나는 웹개발자가 아닌데 이걸 직접 처음부터 구현해야 했다면 얼마나 시간이 걸렸을까 싶었다. 기술이 이렇게나 발전했다는 점에서 새삼 감탄했다.

 

지금까지 이 웹서비스 개발을 위해 지불한 비용은 단돈 23원..! vercel도 무료(빌링 정책이 있지만 개인이 작은 용도로 사용한다면 무료로도 가능) 도메인도 무료.. 지불은 Gemini API에서만 했다. 이정도면 부담 없이 바이브코딩으로 생각만 해왔던 서비스 개발을 시도해 볼 법하다고 생각한다. 앞으로 서비스를 사용하는 사람들이 얼마나 될지는 알 수 없지만 좀 늘어난다 할지라도 부담스러운 비용은 아닐 것이라고 예상한다.

 

물론 보안이나 데이터 적재/관리 요소들은 이번 단계에서는 다루지 않았다. 또한 무료 도메인이기 때문에 주기적으로 변경해야 한다는 아쉬움도 있다. (본 서비스의 도메인은 12월 이후 변경될 수 있습니다) 훈련 생성 결과도 저장할 수 있다면 좋겠고, 접속 환경에 맞춰 보여주는 언어도 변경되면 좋겠다는 요구사항은 나중에 고도화 개발을 한다면.. 그때 하는 것으로 해야겠다.

 

다음에는 도메인도 직접 구매해서 연결해보고 싶고(아직 비용은 알아본 적 없지만) 좀 더 큰 규모의 서비스도 시도해보고 싶다. 생각보다 훨씬 재밌었고, 배우는 것도 많았던 프로젝트였다.

 

---

참고

 

https://aws.amazon.com/ko/blogs/korea/introducing-kiro/

Kiro: 프로토타입에서 프로덕션 레벨까지 지원하는 스펙 기반 Agentic IDE 출시 | Amazon Web Services

https://vercel.com/docs

Vercel Documentation

https://github.com/google-gemini/gemini-cli

GitHub - google-gemini/gemini-cli: An open-source AI agent that brings the power of Gemini directly into your terminal.

https://xn--220b31d95hq8o.xn--3e0b707e/

내도메인.한국 - 한글 무료 도메인 등록센터