바이브코딩 하는 법, 첫 체크리스트 앱 만들고 수정하기

바이브코딩 하는 법을 처음 익힌다면, 할 일을 추가하고 지우는 체크리스트부터 만들어 보세요. 이 글에서는 AI에게 HTML 파일을 만들어 달라고 요청하고, 브라우저에서 실행한 뒤 기능을 하나씩 수정합니다. 공개 링크로 배포하는 과정은 마지막에 연결한 별도 글에서 다룹니다.

코드를 처음부터 직접 작성하지 않아도 시작할 수 있습니다. 대신 원하는 동작을 적고, 만들어진 결과를 직접 눌러 확인해야 합니다. 이 글은 바이브코딩 시작하기의 첫 앱 실습입니다.

같은 앱을 만들고, 고치고, 저장까지 붙여 보세요

체크리스트를 네 파일로 나눴습니다. 처음 동작하는 버전, 학습용 오류를 넣은 버전, 고친 버전, 새로고침해도 목록이 남는 버전을 차례로 비교할 수 있습니다.

네 단계 실습 시작하기전체 소스·요청문·수정 차이 내려받기

설치 없이 결과부터 보고 싶다면 기존 완성 체크리스트를 눌러보세요. 할 일은 해당 브라우저에 저장되며 다른 기기로 공유되지 않습니다.

준비물 챙기기

파일을 만들 수 있는 AI 코딩 도구, 실습 전용 빈 폴더, 브라우저를 준비하세요. 이미 도구를 쓰고 있다면 새 도구를 추가로 설치할 필요는 없습니다.

1. 바탕화면에 first-checklist라는 빈 폴더를 만듭니다. 파일 탐색기 또는 Finder에서 새 폴더를 만들면 됩니다.
2. 쓰는 AI 코딩 도구에서 이 폴더를 엽니다. 작업 폴더를 고르는 화면에서는 다른 문서가 들어 있는 상위 폴더 대신 방금 만든 폴더를 선택합니다.
3. 아래 요청을 넣고, 파일 생성과 실행 과정에서 표시되는 작업 내용을 확인합니다.

도구가 아직 없다면 터미널과 데스크톱 앱 비교에서 방식을 고르세요. 터미널은 글자로 컴퓨터 명령을 입력하는 프로그램입니다. 클릭 중심으로 시작하고 싶다면 Claude Code 데스크톱 앱 안내, 맥에서 터미널을 쓰려면 맥 설치 안내로 이어집니다.

설치 전에 결과부터 보고 싶다면 위 실행 예제를 먼저 사용하세요. AI 도구의 계정과 요금 조건은 해당 공식 안내에서 확인해야 합니다.

만든 파일과 오류·수정본을 비교하기

AI가 만든 코드가 예제와 똑같을 필요는 없습니다. 요구한 동작이 되는지 비교하세요. 네 단계 묶음은 기존 체크리스트를 학습 순서로 다시 구성한 자료입니다. 포함된 요청문은 이번 실습용 예시이며 과거 AI 대화 원문이 아닙니다.

1. 01-start.html: 추가·완료·삭제를 확인합니다. 처음에는 저장 기능이 없어 새로고침하면 목록이 사라집니다.
2. 02-broken.html: 폼 이름을 연결하는 곳에 오타를 넣었습니다. 실제 TypeError와 멈춘 버튼을 확인합니다.
3. 03-fixed.html: 바뀐 한 줄을 fix.diff와 비교하고 기존 기능을 다시 누릅니다.
4. 04-saved.html: 같은 웹 주소에서 할 일을 넣고 완료 표시한 뒤 새로고침합니다. 항목과 완료 상태가 남는지 봅니다.

내 컴퓨터에서 저장까지 확인하는 방법은 실습 안내에 있습니다. 마지막 deploy/index.html은 공개할 때 쓸 단일 파일입니다. 배포 글의 같은 파일 준비 과정으로 이어서 내 공개 주소를 만들 수 있습니다. 실습 기록지에 성공한 동작과 남은 오류를 적어 보세요.

1단계: 첫 프롬프트 넣기

첫 요청을 기능 한 문장으로 뭉치지 않고 입력, 저장, 실행 조건으로 나눠서 적으면, AI가 원하는 결과에 훨씬 가깝게 만들어 줍니다.

아래 프롬프트를 AI 코딩 도구 입력창에 그대로 복사해 붙여 넣으면 됩니다. 아래 조건 중 원하는 기능을 확인한 뒤 요청하세요. 파일을 만들고 프로그램을 실행할 수 있는 도구라면 index.html을 저장하고 실행을 시도합니다. 권한이나 실행 환경에 따라 중간 확인이 필요할 수 있습니다. 로컬 서버는 내 컴퓨터 안에서만 웹페이지를 열어주는 프로그램입니다. 이때 받은 주소는 2단계에서 결과를 확인할 때 씁니다.

브라우저에서 실행되는 나만의 작업 체크리스트를 HTML 파일 하나로 만들어줘.

할 일을 입력하고 추가할 수 있게 해줘.
완료한 항목은 체크할 수 있게 해줘.
삭제 버튼도 넣어줘.
새로고침해도 목록이 남도록 브라우저 저장소를 사용해줘.

코딩을 모르는 사람도 이해할 수 있게 코드에 짧은 주석을 달아줘.

파일 이름은 index.html로 저장해줘.
완성한 뒤에는 로컬 서버를 실행해서 브라우저에서 확인할 수 있게 해줘.
현재 실습 폴더에서 내 컴퓨터 안에서만 접근하도록 실행해줘.
Python 3이 있다면 python3 -m http.server 8000 --bind 127.0.0.1 같은 방식으로 띄워줘.
필요한 프로그램이 없으면 임의로 설치하기 전에 상황을 설명해줘.
실제로 실행됐는지와 접속 주소를 알려줘. 실행하지 못했다면 구분해줘.

여기서 중요한 건 “체크리스트 앱 만들어줘”로 끝내지 않았다는 점입니다. 입력, 추가, 완료, 삭제, 저장, 로컬 실행. 이 여섯 가지 조건을 나눠서 줬습니다.

AI는 마음을 읽는 도구가 아닙니다. 하지만 조건을 나눠서 주면 꽤 잘 따라옵니다. 저는 이걸 의도 쪼개기라고 부르고 싶습니다. 바이브코딩을 잘하려면 멋진 문장보다, 원하는 결과를 작은 조건으로 쪼개는 게 먼저입니다.

2단계: 첫 결과 확인하기

첫 결과는 디자인보다 추가, 체크, 삭제, 새로고침 저장이 되는지만 확인하면 됩니다.

AI가 index.html 파일을 만들고 로컬 서버까지 띄웠다면, AI가 알려준 주소를 브라우저 주소창에 붙여 넣습니다. 1단계에서 요청한 주소는 이런 형태로 나옵니다.

• http://localhost:8000
• http://localhost:3000
• http://localhost:5173

숫자는 달라도 괜찮습니다. AI가 알려준 주소를 그대로 열면 됩니다.

처음 결과물은 대체로 단순합니다. 그래도 괜찮습니다. 첫 단계에서는 “돌아가는가”만 보면 됩니다.

확인할 것은 네 가지입니다.

1. 입력한 할 일이 목록에 추가되는가
2. 완료 체크가 되는가
3. 삭제 버튼으로 항목이 지워지는가
4. 브라우저를 새로고침해도 목록이 남는가

네 번째는 1단계 프롬프트에서 요청한 브라우저 저장소가 동작하는지 보는 것입니다. 브라우저 저장소는 브라우저가 내 컴퓨터에 데이터를 남겨두는 공간입니다.

이 네 가지가 되면 첫 결과는 성공입니다.

화면이 안 열리거나 버튼이 안 된다면

접속할 수 없다고 나오면 AI에게 실행 명령의 결과와 주소를 함께 보여주고 서버가 실행 중인지 확인해 달라고 요청하세요. 화면은 열리는데 버튼이 안 된다면 누른 순서, 기대한 결과, 실제 결과를 적습니다. 바이브코딩 오류 해결 실습에서 오류 문구를 찾고 필요한 부분만 고치는 순서를 따라 할 수 있습니다.

3단계: 다시 만들지 말고 수정하기

첫 결과가 마음에 안 들 때는 새로 만들기보다, 유지할 기능과 바꿀 기능을 나눠서 수정하는 편이 빠릅니다.

AI가 처음 만든 결과물은 대부분 애매합니다. 디자인이 밋밋하거나, 버튼 위치가 불편하거나, 저장 기능이 빠져 있는 식입니다. 여기서 포기하면 그냥 “AI가 대충 만들어준 코드”로 끝납니다. 바이브코딩은 여기서부터 시작됩니다.

화면이 밋밋할 때는 아래 요청을 그대로 붙여 넣으면 됩니다. 화면을 어떻게 나누고 어떤 색을 쓸지까지 적어주는 게 핵심입니다.

체크리스트가 너무 밋밋해.
왼쪽에는 오늘 할 일, 오른쪽에는 완료한 일을 나눠서 보여줘.
전체 색감은 흰색 배경에 초록색 포인트로 해줘.

기능을 더 붙이고 싶을 때는 이렇게 요청합니다. 마지막 줄에서 지금 있는 기능을 지켜달라고 못 박는 것이 이 요청의 핵심입니다.

할 일을 중요도별로 표시하고 싶어.
높음, 보통, 낮음 중 하나를 선택해서 추가할 수 있게 바꿔줘.
기존의 완료 체크와 삭제 기능은 유지해줘.

마지막 줄이 중요합니다.

기존의 완료 체크와 삭제 기능은 유지해줘.

이런 말이 컨텍스트 관리입니다. 컨텍스트 관리는 지금까지 만든 내용을 AI가 잊지 않도록 사람이 짚어주는 일입니다. AI는 새 기능을 넣다가 기존 기능을 망가뜨릴 때가 있습니다. 그래서 사람이 계속 “무엇은 유지하고, 무엇만 바꿀지”를 잡아줘야 합니다.

수정 요청을 반영하면 화면은 조금 더 앱처럼 바뀝니다.

여기까지 오면 만들고, 확인하고, 다시 수정하는 루프를 한 바퀴 돈 것입니다.

localhost:3000 뜻 이해하기

localhost는 내 컴퓨터에서만 열리는 테스트 주소이고, 3000은 그 앱이 쓰는 임시 포트 번호입니다.

localhost는 내 컴퓨터를 뜻하고, 뒤에 붙는 3000은 포트 번호입니다. 포트 번호는 내 컴퓨터 안에서 임시로 열린 웹앱 입구를 구분하는 숫자라고 보면 됩니다.

AI 코딩 도구가 http://localhost:3000으로 접속하라고 말한다면, 인터넷에 공개된 사이트가 아니라 내 컴퓨터에서만 열리는 테스트 화면을 보라는 뜻입니다.

이 글의 예시는 HTML 파일 하나라서 꼭 3000일 필요는 없습니다. 8000, 5173, 8765처럼 다른 숫자가 나오기도 합니다. 숫자 자체는 중요하지 않습니다. AI가 알려준 주소를 그대로 열어 결과를 확인하면 됩니다.

만든 앱 다른 사람에게 공유하기

다른 사람에게 보여주려면 로컬 파일을 인터넷 호스팅에 올리는 배포 과정이 필요합니다.

내 컴퓨터에서만 열리는 HTML 파일은 나만 볼 수 있습니다. 다른 사람에게 링크로 보내려면 배포가 필요합니다. 배포는 내 파일을 인터넷에서 접근 가능한 서버나 호스팅 서비스에 올리는 과정입니다. 앱을 공개 링크로 배포하는 실습에서 올릴 파일과 공개 주소를 확인하는 순서로 이어집니다. 서비스의 무료 사용 범위와 제한은 가입 전에 확인하세요.

다만 공유 전에 확인할 게 있습니다.

• 개인정보를 저장하지 않는가
• API 키처럼 다른 서비스에 접속할 때 쓰는 비밀 값이 코드에 들어가지 않았는가
• 모바일에서도 화면이 깨지지 않는가
• 새로고침했을 때 데이터가 예상대로 남거나 사라지는가

AI에게 점검을 요청하는 것은 보조 수단입니다. 공개할 파일과 설정에 실제 비밀 값이 없는지 직접 확인하고, 확신이 없으면 공유를 멈추고 검토받으세요. 비밀키가 이미 공개됐다면 해당 서비스에서 폐기하거나 교체해야 합니다. GitHub의 민감 정보 제거 안내도 자격증명 무효화를 먼저 설명합니다.

처음에는 로컬에서 만들고, 그다음 공유 가능한 링크로 배포하는 순서가 좋습니다.

자주 묻는 질문

정리

첫 프로젝트의 핵심은 완성도보다 만들기, 실행하기, 수정하기 루프를 한 번 경험하는 것입니다.

바이브코딩 첫 프로젝트는 복잡할 필요가 없습니다. HTML 파일 하나로 돌아가는 체크리스트만 만들어도 충분합니다.

이 과정에서 배울 수 있는 건 세 가지입니다.

1. AI에게 원하는 기능을 조건으로 쪼개서 말하는 법
2. 결과물을 브라우저에서 확인하는 법
3. 기존 기능을 유지하면서 한 부분씩 수정하는 법

처음부터 완벽한 앱을 만들려고 하지 않아도 됩니다. 먼저 작게 만들고, 실행하고, 다시 말해보면 됩니다. 그 반복이 바이브코딩의 시작입니다.

오늘 이 글에서 하나만 해본다면, 1단계의 첫 프롬프트를 그대로 넣어보면 됩니다. 결과물이 마음에 안 들면 이렇게 한 줄만 더 붙여보세요.

“기존 기능은 유지하고, 디자인만 조금 더 보기 좋게 바꿔줘.”

이 한 줄을 말하는 순간, 바이브코딩이 단순한 코드 생성이 아니라 컨텍스트를 이어가는 작업이라는 걸 느낄 수 있습니다.

체크리스트가 의도대로 동작하면 공개 링크로 배포하기로 이어가세요.

---

참고 자료: – Google Cloud – What is vibe coding? – GitHub – What Is Vibe Coding?

팀의 반복 업무나 입문 실습에 적용하고 싶다면 하고 싶은 작업과 막힌 지점 보내기

검증 기준

• 마지막 업데이트일: 2026-09-07
• 확인 환경: 공개 HTML 체크리스트 기능 검사는 2026-09-06 Chromium 390px·1280px 화면 기준입니다. 2026-09-07에는 제목·첫 준비 단계·오류 안내·공개 전 점검을 수정했습니다. 추가·완료·새로고침 저장·삭제·예시 추가와 ZIP 파일을 확인했습니다. 도구별 AI 응답이 항상 같은 파일을 만드는 것을 보장하지는 않습니다.
• 주요 근거: Python 로컬 서버 안내, MDN 브라우저 localStorage 안내, 이 글의 실행 가능한 예제

실습 자료 확인: 2026년 9월 7일, 버전 1.0.0. 데스크톱 브라우저와 390px 화면에서 기능을 검사했습니다. 확인 항목과 환경은 실습 검증 기록에 있습니다. 실제 초보자 관찰이나 Windows 실기기 검증 결과는 포함하지 않습니다.