바이브코딩 실험기
1바이브코딩은 “코드를 대신 치는 것”이 아니다
요즘 AI를 활용한 개발 방식으로 바이브코딩(Vibe Coding)이라는 말을 자주 듣습니다. 많은 분들이 “AI에게 말로 시키면 코드를 만들어주는 것”으로 이해하시는데, 틀린 말은 아니지만 실제로 끝까지 진행해보면 그보다 훨씬 넓은 개념이라는 것을 알게 됩니다.
“아이디어를 말로 설명하면, AI 에이전트가 기획자·개발자·테스터·운영자의 역할을 오가며 실제 작동하는 결과물로 완성해가는 과정”
이번 프로젝트에서는 사회적기업을 위한 AI 날씨 운영 코치라는 웹앱을 만들었습니다. 핵심 아이디어는 간단했습니다.
“날씨 때문에 생길 수 있는 손해를 사회적기업이 미리 막을 수 있도록, 실시간 기상정보 API를 운영 의사결정 언어로 바꿔보자.”
2아이디어: 날씨 데이터를 ‘운영 판단’으로 번역하기
일반적인 날씨 앱은 온도, 비, 바람, 미세먼지 같은 정보를 보여줍니다. 하지만 돌봄·복지·외근·배송·야외 행사·농업·시설관리 같은 일을 하는 사회적기업의 질문은 조금 다릅니다.
- 오늘 야외 활동을 계속해도 될까?
- 어르신 방문 일정을 조정해야 할까?
- 보호자에게 미리 연락해야 할까?
- 강풍이면 간판이나 천막을 철거해야 할까?
- 미세먼지가 나쁘면 실내 프로그램으로 바꿔야 할까?
- 몇 시까지 운영 결정을 내려야 할까?
즉, 단순한 날씨 정보보다 중요한 것은 행동 지침입니다. 그래서 앱의 방향을 “업종과 지역만 고르면, AI가 날씨 데이터를 읽고 오늘의 운영 리스크와 권장 액션을 알려주는 도구”로 잡았습니다.
3Hermes AI 에이전트를 활용한 작업 방식
흥미로웠던 점은 제가 코드를 한 줄씩 직접 작성한 것이 아니라, Hermes AI 에이전트에게 목표를 설명하고 작업을 맡겼다는 점입니다.
제가 한 일
- 만들고 싶은 서비스의 목적 설명
- 화면에서 어색한 부분 지적
- 데이터가 잘못 해석되는 부분 수정 요청
- 중장년층도 읽기 쉬운 UI 요구
- 실제 API와 연결되도록 요청
- 배포 후 화면을 보고 다시 피드백
Hermes가 한 일
- 프로젝트 파일 구조 파악
- HTML / CSS / JavaScript 수정
- Python 로컬 서버 작성
- 기상청 API 프록시 구성
- AirKorea 대기질 API 연동
- 회귀 테스트 작성
- 브라우저에서 실제 화면 검증
- Vercel 프로덕션 배포
- Obsidian 프로젝트 문서 정리 · Git 커밋 준비
즉, Hermes는 단순한 챗봇이 아니라 능동적인 PM + 개발팀 + QA 담당자처럼 움직였습니다. 이것이 제가 생각하는 AI 에이전트 기반 바이브코딩의 핵심입니다.
4실시간 기상정보 API를 이용한 바이브코딩
이번 프로젝트의 서브주제입니다. 사용한 데이터 흐름은 크게 세 가지입니다.
4-1. 기상청 단기예보 API
기온, 강수 확률, 풍속, 하늘 상태, 시간대별 예보를 가져옵니다. 이 데이터는 단순히 숫자로 끝나지 않고 운영 메시지로 번역됩니다.
즉, API 데이터가 현장 언어로 번역되는 것입니다.
4-2. 기상청 특보 API
특보 데이터는 폭염·강풍·호우 같은 상황을 파악하는 데 쓰입니다. 사회적기업에게 특보는 단순한 뉴스가 아니라 운영 중단, 일정 변경, 고객 안내의 근거가 됩니다. 특히 돌봄·복지·배송·야외체험 업종에서 매우 중요합니다.
4-3. AirKorea 대기질 API
미세먼지·초미세먼지·오존 등 민감계층에게 중요한 위험요소를 판단합니다. 여기서 중요한 점은 자료가 없을 때 ‘낮음’으로 판단하지 않는 것이었습니다. 데이터가 없으면 위험이 낮은 것처럼 보일 수 있지만, 실제 운영 도구에서는 위험한 판단이기 때문입니다.
5핵심은 ‘한 번에 완성’이 아니라 ‘피드백 루프’
이번 작업은 한 번에 완성되지 않았습니다. 화면을 보고 계속 피드백을 주었습니다. 예를 들어 이런 문제들이 있었습니다.
- AI 분석 의견이 너무 길고 읽기 어려움
- 중요한 판단 근거가 추상적으로 보임
- “자료 없음”이 낮은 위험처럼 오해될 수 있음
- 오늘 권장 액션 카드의 내용이 잘려 보임
- 지도 이미지가 화면 의도와 맞지 않음
- 헤드라인 문구가 서비스 메시지를 충분히 설명하지 못함
특히 인상적이었던 건 마지막 문제였습니다. 오늘 권장 액션 카드에 내용이 없는 것처럼 보였는데, 실제로는 CSS grid 배치 문제로 본문이 번호 배지 쪽 28px 폭 안에 들어가 있었습니다. Hermes는 이 문제를 다음 순서로 해결했습니다.
- DOM에서 실제 문구 존재 여부 확인
- CSS 계산값 확인
- 본문 <p>의 폭이 28px로 잡히는 원인 분석
grid-column: 2를 명시해 본문을 정상 컬럼에 배치- 로컬 브라우저에서 시각 검증
- Vercel에 다시 배포
- 공개 URL에서 최종 확인
“말로 지적하고, AI가 원인을 추적하고, 코드 수정과 테스트와 배포까지 이어가는 반복 작업” — 이것이 바이브코딩의 본질입니다.
6중장년층·비전문가를 위한 UI 설계
이번 앱은 기술 데모이지만 사용자를 개발자로 상정하지 않았습니다. 사회적기업 현장 담당자, 중장년층, 비전문가도 이해할 수 있어야 했습니다.
- 글자를 크게
- 카드형으로 구분
- 어려운 기술 용어 최소화
- “위험도”보다 “무엇을 해야 하는가”를 강조
- 판단 근거는 실제 수치로 제시
- 자료 없음은 회색으로 표시하고 판단 보류 처리
- 버튼과 선택지를 명확하게 배치
7테스트와 검증까지 포함한 바이브코딩
AI가 코드를 만들어준다고 그대로 믿으면 안 됩니다. 이번 프로젝트에서는 회귀 테스트를 함께 만들었습니다.
또한 브라우저에서 실제 화면을 열어 헤드라인 반영, 권장 액션 표시, 본문 잘림 여부, 자료 없음 상태 표시, 판단 근거 수치, 공개 URL 정상 동작을 확인했습니다. 바이브코딩이라고 검증을 생략하는 것이 아닙니다. 오히려 AI 에이전트를 활용하면 검증을 더 자주, 더 빠르게 반복할 수 있습니다.
8배포와 프로젝트 정리
최종 앱은 Vercel에 배포했습니다. 👉 socialweatherservice.vercel.app
프로젝트가 끝난 뒤 Hermes는 다음 작업도 수행했습니다.
- Git 저장소 초기화 · 민감파일 제외 설정
- 로컬 커밋 생성
- Obsidian 프로젝트 관리 노트 생성
- 프로젝트 스냅샷 ZIP 저장
- API 키가 ZIP에 포함되지 않았는지 검증
개발, 배포, 테스트, 문서화, 지식관리까지 하나의 흐름으로 이어진다 — 이것이 AI 에이전트의 강점입니다.
9이번 프로젝트에서 얻은 인사이트
첫째, API는 데이터가 아니라 ‘의사결정 재료’다
기상정보 API는 숫자의 집합이지만, 사용자는 숫자가 아니라 “계속할지, 멈출지, 바꿀지, 알릴지, 언제까지 판단할지”라는 결정을 원합니다. AI는 데이터를 사람의 의사결정 언어로 바꾸는 데 강점이 있습니다.
둘째, 바이브코딩은 비개발자에게도 강력하다
전문 개발자가 아니어도 아이디어·사용 장면·문제점을 설명할 수 있다면 AI 에이전트가 실행 가능한 형태로 만들어줍니다. 사람은 방향을 잡고, AI는 구현과 검증을 반복합니다.
셋째, 화면 피드백이 중요하다
AI가 만든 결과는 반드시 실제 화면으로 확인해야 합니다. 코드상으로는 맞아도 화면에서는 잘릴 수 있습니다. 이번 ‘오늘 권장 액션’ 카드 문제가 대표적입니다.
넷째, 사회적기업에는 이런 POC가 특히 유용하다
한정된 인력으로 많은 운영 판단을 해야 하는 사회적기업에게 날씨·공고·후원자 관리·보고서·현장 안전·고객 안내 같은 업무는 AI 에이전트와 잘 맞습니다. 이번 프로젝트는 그중 ‘날씨 기반 운영 의사결정’을 작은 POC로 구현한 사례입니다.
10마무리: Hermes는 바이브코딩의 ‘실행 파트너’다
이번 프로젝트는 단순한 날씨 앱이 아니라, 실시간 기상정보 API를 활용해 사회적기업의 운영 리스크를 줄이는 작은 AI 코치입니다. 그리고 그 제작 과정은 Hermes AI 에이전트를 활용한 바이브코딩의 좋은 예시였습니다.
“AI 에이전트 시대의 개발은 코드를 잘 치는 능력보다, 문제를 잘 설명하고 결과를 검증하며 반복 개선하는 능력이 더 중요해진다.”
앞으로 이런 방식의 바이브코딩은 교육, 컨설팅, 사회적기업 POC, 업무 자동화, 데이터 기반 의사결정 도구 제작에 더욱 넓게 활용될 수 있을 것입니다.
댓글
댓글 쓰기