바이브코딩이란? 코딩 몰라도 30분 만에 가계부 앱 만들기

바이브코딩으로 만든 가계부 앱 화면과 '코딩 몰라도 가계부 앱을 만들 수 있을까?' 문구

작성자

카테고리:

심화대상: 코딩을 처음 해 보는 누구나·읽는 시간 약 8분

이 글을 끝까지 읽으면
  • 바이브코딩이 무엇인지, 어디까지 되는지 알 수 있어요.
  • 코딩을 몰라도 30분 안팎이면 가계부 앱을 직접 만들어요.
  • 그대로 복사해 쓰는 요청문 3개를 얻어요.
  • 파일이 안 열리거나 한글이 깨질 때 바로 해결해요.
  • 백업부터 예산 경고까지, 앱을 키우는 방법도 알게 돼요.

오늘은 한글날이에요. 어제가 찬 이슬이 맺힌다는 한로였는데, 정말 아침저녁 공기가 달라졌습니다.

벌써 10월도 열흘 가까이 지났네요. 연초에 세운 계획은 잘 지키고 계신가요? 제 계획표에는 해마다 ‘가계부 꾸준히 쓰기’가 있었고, 해마다 2월쯤 조용히 사라졌습니다.

가계부 앱을 세 번 깔았다가 세 번 지웠어요.

날짜와 금액을 적으면 이번 달 수입과 지출을 보여 주는 것. 필요한 건 그게 전부였는데, 딱 그만큼만 하는 앱이 없었거든요.

문과 출신인 저는 바이브코딩도 남의 이야기로 여겼어요. 그러다 별 기대 없이 AI 창에 원하는 걸 한국어로 적어 봤습니다.

그게 그대로 동작했어요. 이 글은 그 과정을 처음부터 끝까지 정리한 기록입니다.

Q바이브코딩이란 무엇인가요?

코드를 직접 쓰지 않고, AI에게 말로 설명해서 프로그램을 만드는 방식이에요.

코드는 AI가 씁니다. 사람은 결과를 열어 보고, 고칠 점을 다시 말로 전해요. 원하는 모양이 나올 때까지 이걸 되풀이하면 됩니다.

바이브코딩 네 단계 — 말로 부탁, AI가 코드 작성, 저장하고 열기, 여기 고쳐 줘 반복

이 말은 OpenAI 창립 멤버인 안드레이 카파시가 2025년 2월에 처음 썼어요. 분위기(vibe)에 맡긴 채 대화만으로 만든다는 뜻이죠. 같은 해 11월에는 영국 콜린스 사전이 ‘올해의 단어’로 골랐습니다.

Q무엇부터 만들어 보면 좋을까요?

바이브코딩이 모든 프로그램을 대신 만들어 주지는 않아요. 처음이라면 왼쪽에서 고르세요.

시작하기 좋은 것 처음엔 어려운 것
파일 하나로 도는 계산기, 가계부, 체크리스트 회원가입·로그인이 필요한 서비스
내 컴퓨터에서만 쓰는 정리 도구 결제나 개인정보를 다루는 서비스
엑셀 대신 쓰는 간단한 입력 화면 여러 사람이 동시에 쓰는 프로그램

오른쪽도 불가능하진 않지만, 보안과 오류를 직접 판단할 일이 많아요. 가계부는 왼쪽입니다.

Q준비물은 무엇이 필요한가요?

설치할 프로그램은 없어요. 세 가지면 충분합니다.

  • AI 대화 서비스 하나 — 저는 클로드를 썼어요. 챗GPT나 제미나이도 같은 요청문으로 시작할 수 있어요.
  • 메모장과 브라우저 — 윈도우 메모장(맥은 텍스트 편집기), 평소 쓰는 브라우저.
  • PC — 휴대폰은 파일 저장 방법이 기기마다 달라서, PC 기준으로 설명할게요.

1단계: 바이브코딩 첫 요청문 쓰기

제가 처음 보낸 요청문이에요. 그대로 복사해서 써도 됩니다.

첫 번째 요청문 — 그대로 복사해서 쓰세요
가계부 웹페이지를 만들어 줘. 나는 코딩을 전혀 몰라.
- 파일 하나(HTML)로 만들어서, 메모장에 저장해 더블클릭하면 열리게 해 줘.
- 날짜, 수입/지출, 내용, 금액을 입력하고 '추가' 버튼을 누르면 목록에 쌓이게.
- 위쪽에 수입 합계, 지출 합계, 남은 돈을 크게 보여 줘.
- 잘못 넣은 건 지울 수 있게.
- 창을 닫았다 다시 열어도 기록이 남아 있게.
- 인터넷 연결이나 회원가입 없이 내 컴퓨터에서만 돌아가게.
- 한국어로, 휴대폰에서도 보기 좋게.

줄마다 이유가 있어요. 다른 앱을 만들 때도 이 다섯 가지만 챙기면 첫 결과가 훨씬 깔끔해요.

챙길 것 이렇게 적어요
내 수준 “코딩을 전혀 몰라” → 설치 없는 방식으로 만들어 줘요
실행 방법 “파일 하나로, 더블클릭하면 열리게”
화면 요소 입력 칸, 버튼, 합계를 하나씩
저장 방식 이 줄이 없으면 새로고침 때 기록이 사라질 수 있어요
지킬 조건 돈 기록이라 “내 컴퓨터에서만”

요청문 쓰는 원칙은 챗GPT·클로드·제미나이 질문법에 따로 정리해 두었어요.

2단계: 받은 코드를 저장하고 열기

AI가 긴 코드를 보여 줄 거예요. 내용은 읽지 않아도 됩니다. 전부 복사해서 파일로 저장하면 끝이에요.

윈도우

  1. 코드 상자 오른쪽 위의 복사 버튼을 누릅니다.
  2. 메모장을 열고 붙여 넣습니다.
  3. ‘파일 → 다른 이름으로 저장’에서 파일 형식을 모든 파일로 바꿉니다.
  4. 이름을 가계부.html로 적고, 인코딩은 UTF-8로 둔 채 저장합니다.
  5. 저장한 파일을 더블클릭하면 브라우저에서 열려요.

맥

텍스트 편집기에서 ‘포맷 → 일반 텍스트로 만들기’를 먼저 누른 뒤, 붙여 넣고 가계부.html로 저장하면 돼요.

3단계: “여기 고쳐 줘”, 바이브코딩의 핵심

첫 결과에는 요청한 기능이 다 들어 있었어요. 그런데 며칠 치를 넣어 보니, 모든 지출이 한 목록에 섞여 어디에 돈이 많이 나가는지 알기 어려웠습니다.

그래서 두 번째로 이렇게 요청했어요.

두 번째 요청 — 세 가지 고치기
좋아. 세 가지만 고쳐 줘.
1. 지출에 분류(식비, 교통, 생활, 교육, 의료, 여가, 기타)를 고를 수 있게.
2. 맨 위에 월을 고르는 칸을 넣고, 고른 달의 기록만 보이게.
3. 분류별로 이번 달에 얼마 썼는지 막대그래프로 보여 줘. 많이 쓴 순서로.

분류와 월 선택, 막대그래프가 생겼어요. 그런데 월급에 ‘식비’ 꼬리표가 붙어 있었습니다. 수입을 넣을 때도 분류 칸에 선택돼 있던 값이 그대로 저장된 거예요.

세 번째 요청은 한 줄이면 충분했어요.

세 번째 요청 — 한 줄 수정
수입(월급)에도 '식비' 꼬리표가 붙어. 수입은 분류 대신 '수입'으로 표시해 줘.
바이브코딩 첫 결과와 두 번 고친 뒤 가계부 화면 비교 — 분류, 월 선택, 지출 막대그래프가 추가됨

고쳐 달라고 할 때는 증상·기대·위치, 세 가지를 함께 적으세요.

  • 증상 — 무엇이 보이는지. “월급에 ‘식비’ 꼬리표가 붙어”
  • 기대 — 어떻게 되길 원하는지. “수입은 ‘수입’으로 표시해 줘”
  • 위치 — 화면 어디, 어떤 버튼을 눌렀을 때인지

“이상해, 다시 해 줘”라고만 쓰면 AI가 문제를 추측해야 해서, 멀쩡한 부분까지 바뀌기도 해요.

Q계산이 맞는지는 어떻게 확인하나요?

바이브코딩 결과물은 그럴듯해 보여도 틀릴 수 있어요. 꼬리표 같은 오류는 눈에 띄지만, 합계가 틀리면 한동안 모르고 쓰게 됩니다.

그래서 몇 건만 넣고 계산기로 대조해 봤어요.

수입 320만 원 − 지출 6건 65만 5,400원 = 254만 4,600원. 화면의 ‘남은 돈’과 같았습니다. 처음 한 번만 확인해 두면 그다음부터는 안심이에요.

Q파일이 안 열리면요? 자주 막히는 문제 5가지

증상 원인 해결
코드 글자만 보여요 가계부.html.txt로 저장됨 파일 형식을 ‘모든 파일’로 다시 저장
한글이 깨져요 인코딩이 UTF-8이 아님 저장할 때 UTF-8 지정
코드가 중간에 끊겼어요 답변 길이 제한 “끊겼어. 전체 코드를 처음부터 다시 보여 줘”
버튼이 반응이 없어요 코드 일부 오류 어떤 버튼인지 적어서 고쳐 달라고 요청
고쳤더니 다른 기능이 망가졌어요 수정 중 다른 부분이 바뀜 고치기 전 파일을 따로 저장해 두고 되돌리기

첫 번째는 저도 겪었어요. 이름 끝에 .txt가 붙어서, 열 때마다 코드만 보였습니다.

Q기록은 어디에 저장되나요?

바이브코딩으로 완성한 가계부 — 수입·지출·남은 돈, 분류별 지출 막대그래프, 거래 목록

인터넷에 올라가지 않아요. 지금 쓰는 브라우저 안에만 남습니다.

그래서 다른 PC나 브라우저에서는 안 보이고, 브라우저의 사이트 데이터를 지우면 함께 지워져요. 오래 쓸 생각이라면 백업 기능을 붙여 두세요.

백업·복원 버튼 추가 요청
기록 전체를 엑셀에서 열 수 있는 CSV 파일로 내려받는 버튼을 추가해 줘.
그리고 그 CSV 파일을 다시 불러와서 기록을 복원하는 버튼도 만들어 줘.

Q기능을 더 붙이고 싶다면요?

한 번에 하나씩 추가하고 확인하세요. 여러 개를 한꺼번에 시키면 오류가 늘어요.

기능 이렇게 요청해 보세요
예산 경고 “분류별 한 달 예산을 정할 수 있게 하고, 80%를 넘으면 주황색, 넘으면 빨간색으로 보여 줘.”
지난달과 비교 “고른 달과 바로 전 달의 분류별 지출을 나란히 비교하는 표를 추가해 줘.”
메모 검색 “내용에 들어간 단어로 기록을 찾는 검색 칸을 맨 위에 넣어 줘.”

위 요청문은 예시예요. 결과는 서비스마다 다를 수 있으니 추가할 때마다 확인해 보세요.

Q안전하게 쓰려면 무엇을 지켜야 하나요?

  • 계좌번호·카드번호는 넣지 않기 — AI에게 요청할 때도, 가계부에 적을 때도요. ‘마트 장보기 86,400원’이면 충분해요.
  • 고치기 전 파일 따로 저장하기 — 문제가 생기면 바로 되돌릴 수 있어요.
  • 회사 업무라면 규정부터 — 회사 자료를 AI에 넣어도 되는지는 회사마다 달라요.

자주 묻는 질문

Q. 무료로도 할 수 있나요?

서비스마다 무료 사용량이 달라요. 요청 세 번은 긴 작업이 아니지만, 정확한 한도는 각 서비스 안내를 확인하세요.

Q. 챗GPT나 제미나이로도 되나요?

같은 요청문으로 시작할 수 있어요. 다만 이 글의 화면은 클로드로 만든 것이라, 다른 서비스에서는 디자인이나 동작이 다를 수 있어요.

Q. 휴대폰에서도 쓸 수 있나요?

파일을 옮겨 휴대폰 브라우저로 열 수는 있어요. 다만 기록은 기기마다 따로 저장돼요. 합쳐 쓰려면 위의 CSV 백업·복원 기능이 필요합니다.

마치며

한 줄 정리

바이브코딩의 핵심은 코드가 아니라 설명이에요. 구체적으로 부탁하고, 결과를 한 번 확인하면 됩니다.

가계부처럼 작고 혼자 쓰는 도구부터 시작해 보세요. 바이브코딩을 익히기에 가장 좋은 연습이에요.

함께 읽으면 좋은 글


참고한 자료

작성: 노믹렌즈 · 자료 확인·실험: 2026년 10월 8일. 글 속 일화는 이해를 돕기 위해 재구성한 이야기이며, 가계부 예시 금액은 가상입니다. AI 서비스의 기능과 화면은 바뀔 수 있어요.