바이브코딩 시작하기, 첫 앱부터 오류 해결과 배포까지

바이브코딩은 만들고 싶은 것을 말로 설명하고, AI가 만든 코드를 실행하면서 결과를 고쳐 가는 방식입니다. 처음에는 로그인이나 결제 없이 움직이는 작은 앱으로 시작하세요. 이 가이드는 도구 고르기 → 첫 앱 만들기 → 오류 고치기 → 저장과 배포를 직접 해보는 순서로 이어집니다.

코딩을 처음 접한다면 아래 체크리스트부터 눌러보세요. 글에서 만드는 결과물과 확인할 동작을 먼저 볼 수 있습니다.

첫 결과물부터 만나보세요

체크리스트 실행하기내 체크리스트 만드는 순서

할 일 입력 → 추가 → 완료 체크 → 새로고침 후 유지 확인. 회원가입 없이 열리고, 이 예제의 할 일은 현재 브라우저에 저장됩니다.

파일을 바꾸며 따라가고 싶다면 하나의 체크리스트로 만들기·오류·수정·저장 실습을 시작하세요. 블로그 운영부터 해보고 싶다면 가짜 원고를 고치는 발행 전 검사 실습으로 시작할 수 있습니다.

지금 어디에서 막혔나요?

처음부터 모든 글을 읽지 않아도 됩니다. 지금 하려는 일에 맞는 글을 골라 시작하세요.

지금 상황	여기서 시작하세요
바이브코딩이라는 말을 처음 들었어요	뜻과 AI에게 맡길 일
터미널이 낯설고 도구부터 골라야 해요	터미널과 데스크톱 앱 비교
빈 화면에서 무엇을 요청할지 모르겠어요	첫 체크리스트 앱 만들기
화면은 열리는데 버튼이 안 돼요	오류를 찾고 작은 수정부터 요청하기
만든 앱을 다른 사람에게 보내고 싶어요	저장한 파일을 공개 링크로 배포하기
첫 앱 다음에 업무용 도구를 만들어 보고 싶어요	CSV 중복 정리 앱 제작과 검증
만들던 앱에서 막힌 부분만 맡기고 싶어요	부분 수정 의뢰 범위와 완료 기준
업무 자동화를 맡기기 전에 자료를 준비하고 싶어요	입력·예외·정답 샘플 3개 준비하기
AI로 만든 앱을 수정할지 다시 만들지 고민돼요	수정·재개발·진단 판단 기준과 PDF
견적서마다 포함된 범위가 달라 비교하기 어려워요	의뢰 범위·검수·추가 비용을 비교하는 PDF
AI로 만든 코드를 개발자에게 전달하고 싶어요	현재 코드·재현 순서·인계 자료 준비
반복 업무 중 무엇부터 자동화할지 고르고 싶어요	업무 자동화 후보와 첫 시험 정하기
엑셀 자동화와 웹앱 중 무엇을 쓸지 고민돼요	저장·동시 수정·권한으로 비교하기
MVP에서 어떤 기능부터 만들지 정하고 싶어요	핵심 행동·의뢰 범위와 검수 PDF
납품 후 지원 요청의 범위를 정리하고 싶어요	유지보수 요청 예시와 기록표 PDF

첫 앱 다음에는 업무 파일을 다뤄보세요

같은 고객의 두 번째 주문은 지우면 안 됩니다. CSV 중복 정리 앱을 만드는 과정에서 중복 기준과 제외할 행을 확인하고, 전체 코드·가상 파일·검사 코드를 내려받아 직접 바꿔보세요.

가상 주문 8행으로 실행하기

첫 앱은 얼마나 작게 만들면 좋을까요?

처음 목표는 입력한 할 일이 목록에 나타나는 것이면 됩니다. 여기에 완료 체크, 삭제, 새로고침 후 저장을 하나씩 붙여보세요. 가입·결제·외부 데이터 연결은 첫 결과를 확인한 뒤 별도로 다루는 편이 문제를 좁히기 쉽습니다.

첫 프로젝트 글에서 만든 체크리스트 화면입니다. 실행 예제와 함께 추가·완료·삭제·저장을 확인할 수 있습니다.

AI에게는 화면 이름만 주기보다 사용자의 행동과 결과를 적어주세요.

할 일을 입력하고 추가하는 체크리스트를 만들고 싶어.
추가하면 입력한 내용이 목록에 보여야 해.
완료 표시와 삭제 버튼을 넣고, 새로고침해도 목록이 남아야 해.
내 작업 폴더에 파일을 만들고, 내가 열어 볼 방법을 알려줘.

요청을 보내는 것만큼 결과를 직접 누르는 과정이 중요합니다. AI가 만들었다고 말한 기능이 실제로 되는지는 실행해서 확인해야 합니다. 구체적인 준비물과 복사할 요청문은 첫 프로젝트 실습에 있습니다.

도구 선택부터 배포까지, 이런 순서로 해보세요

각 단계에는 읽을 글과 끝났다고 판단할 행동을 함께 적었습니다. 한 단계의 결과가 확인되면 다음 단계로 넘어가세요.

단계	따라 할 글	끝났는지 확인할 행동
1. 작업 환경 고르기	실행 방식 비교 · 맥 설치 안내	전용 빈 폴더를 열고 AI에게 요청하기
2. 만들 범위 정하기	첫 기획과 리서치	누가 무엇을 입력하면 어떤 결과가 나올지 적기
3. 작게 만들고 수정하기	체크리스트 앱 실습	추가·완료·삭제·새로고침 후 저장 확인하기
4. 안 되는 곳 고치기	버튼 오류 해결 실습	같은 오류를 재현하고 수정 뒤 기존 기능도 누르기
5. 보관하고 공유하기	GitHub 저장 준비 · 배포 실습	비밀 값이 없는 파일을 올리고 다른 기기에서 공개 주소 열기

터미널은 컴퓨터에 글자로 명령을 입력하는 프로그램입니다. 아직 낯설다면 클릭 중심으로 작업할 수 있는 Claude Code 데스크톱 앱 안내에서 시작할 수 있습니다. 도구별 계정·요금·권한 조건은 해당 설치 글과 공식 안내에서 확인하세요.

설치한 도구를 갱신할 때는 클로드 코드 업데이트 방법에서 설치 방식별 명령과 실행 버전 확인 순서를 살펴보세요.

AI가 계속 틀리면 무엇을 해야 하나요?

먼저 기대한 결과와 실제 결과를 나눠 적으세요. “안 돼요”만 반복하면 AI가 확인해야 할 위치를 알기 어렵습니다. 누른 버튼, 같은 문제가 생기는 순서, 오류 문구, 바로 전에 바꾼 내용을 모읍니다.

이 블로그의 오류 실습에서는 버튼 이름을 잘못 연결한 체크리스트를 제공합니다. 오류본과 수정본을 각각 눌러보고, 왜 한쪽만 동작하는지 확인할 수 있습니다. 학습용으로 만든 사례이며 실제 사용자 사고를 옮긴 것은 아닙니다.

오류가 있는 버튼부터 직접 고쳐보기에서 오류 문구를 찾는 위치, AI에게 보낼 요청, 고친 뒤 검사할 행동까지 이어집니다. 설치·가입 없이 쓸 수 있는 질문 정리 도구도 함께 제공합니다.

어디까지 맡기고, 무엇을 직접 확인하나요?

화면과 코드를 만드는 일은 AI의 도움을 받을 수 있습니다. 다만 요구사항, 실제 동작, 공개 범위는 사람이 확인해야 합니다. Google Cloud의 바이브코딩 설명도 자연어 요청과 실행·피드백 과정을 설명하며, 만들어진 코드의 검토와 검증을 구분해 다룹니다.

• 개인 연습에서는 실제 고객 정보나 회사 문서 대신 가짜 데이터를 씁니다.
• AI에 오류를 보낼 때는 관련 문구와 파일 위치를 남기고 비밀키·개인정보를 가립니다.
• 공개 전에는 모바일 화면, 저장 방식, 코드와 파일의 비밀 값을 확인합니다. AI가 안전하다고 답한 것만으로 점검이 끝나지는 않습니다.
• 로그인·결제·개인정보를 처리하는 서비스를 운영하려면 권한과 데이터 처리에 대한 별도 설계·검토가 필요합니다.

처음부터 도구와 기능을 많이 붙일 필요는 없습니다. 오늘은 체크리스트의 할 일 하나를 추가하고, 마음에 안 드는 부분 하나를 수정해 보세요.

검증 기준

• 마지막 업데이트일: 2026-09-07
• 확인 환경: seoin.dev의 공개 실습과 관련 글을 기준으로 학습 순서를 구성했습니다. 체크리스트는 2026-09-06에 추가·완료·삭제·새로고침 저장을 확인했고, 오류 예제는 2026-09-07에 Orca 내장 Chromium으로 재현했습니다. 모든 AI 도구가 같은 파일을 생성한다는 뜻은 아닙니다.
• 주요 근거: Google Cloud 바이브코딩 설명 · MDN 브라우저 저장소 안내 · MDN querySelector