바이브 코딩 시작하기 — 코드 몰라도 AI에게 말로 첫 웹 페이지 만드는 법

바이브 코딩 시작하기에 필요한 것은 프로그래밍 문법이 아니라 「무엇을 만들고 싶은지 말로 설명하는 능력」과 결과를 직접 열어 보는 습관입니다. 이 글은 코드를 한 줄도 써 본 적 없는 직장인이 대화형 AI에게 말로 요청해 내 컴퓨터에서 열리는 첫 웹 페이지 한 장을 만드는 과정을 단계별로 안내합니다. 설치할 프로그램 없이 브라우저와 메모장만으로 따라 할 수 있게 구성했습니다.

핵심 요약 (2026년 10월 기준)

• 바이브 코딩은 원하는 결과를 자연어로 설명하면 AI가 코드를 쓰고, 사람은 실행해 보고 고칠 점을 다시 말하는 방식입니다.
• 첫 실습은 「HTML 파일 하나」로 범위를 좁히면 설치 없이 메모장과 브라우저로 끝낼 수 있습니다.
• 요청 → 생성 → 실행 → 수정의 한 바퀴를 직접 돌려 보는 것이 첫날의 목표입니다.
• 수정 요청은 한 번에 하나씩, 화면에서 보이는 현상으로 말해야 결과가 안정적입니다.

🚀 바이브 코딩은 무엇이고, 정말 코드를 몰라도 시작할 수 있나요?

네, 첫 웹 페이지 정도는 코드를 몰라도 만들 수 있습니다. 바이브 코딩은 AI에게 만들고 싶은 결과를 평범한 말로 설명하고, AI가 쓴 코드를 실행해 보며 대화로 다듬는 개발 방식입니다. 이 말은 2025년 2월 AI 연구자 안드레이 카파시가 처음 쓰면서 퍼졌고, 영국 콜린스 사전은 2025년 11월 「vibe coding」을 올해의 단어로 선정했습니다.

다만 「몰라도 된다」는 말에는 조건이 붙습니다. 문법을 외울 필요는 없지만, 결과를 직접 열어 보고 의도와 다른 점을 정확히 설명하는 일은 사람이 해야 합니다. 사람의 역할이 「코드를 치는 사람」에서 「요청하고, 확인하고, 결정하는 사람」으로 바뀌는 것이지 사라지는 것은 아닙니다. 그래서 첫 실습은 결과를 눈으로 바로 확인할 수 있는 웹 페이지가 가장 좋습니다.

🗺️ 시작하기 전에 무엇을 준비해야 하나요?

대화형 AI 서비스 하나, 메모장 같은 텍스트 편집기, 웹 브라우저 세 가지면 충분합니다. ChatGPT·Claude·Gemini처럼 평소 쓰는 대화형 AI라면 어느 것이든 HTML 코드를 써 줄 수 있으므로 특정 도구를 새로 가입할 필요는 없습니다.

마지막 줄이 가장 중요합니다. 예를 들어 「팀원들이 이번 주 점심 메뉴를 고르는 투표 화면」처럼 쓰는 사람과 하는 일을 한 문장으로 적어 두면, 이후 AI가 엉뚱한 방향으로 갈 때 되돌아올 기준이 됩니다.

💻 첫 요청은 어떻게 써야 결과가 한 번에 나오나요?

목적·화면 구성·모양·제약 네 가지를 한 문단에 담으면 첫 결과의 완성도가 크게 올라갑니다. 특히 「HTML 파일 하나로, 외부 라이브러리 없이」라는 제약을 넣는 것이 입문자에게는 핵심입니다. 이 한 줄이 없으면 AI가 설치가 필요한 프레임워크나 여러 파일로 나뉜 구조를 제안해 첫날부터 막히기 쉽습니다.

네 요소를 합친 요청은 이렇게 됩니다. 「팀원들이 이번 주 점심 메뉴를 고르는 투표 페이지를 만들어줘. 제목 아래에 김치찌개·돈가스·쌀국수·샐러드 버튼 4개를 두고, 버튼을 누르면 그 메뉴의 득표 수가 1씩 올라가게 해줘. 흰 배경에 큰 글씨, 휴대폰에서도 보기 편하게. index.html 파일 하나에 모두 넣고 외부 라이브러리는 쓰지 마. 전체 코드를 처음부터 끝까지 한 번에 보여줘.」 마지막 문장은 코드 일부만 보여 주고 「나머지는 동일」이라고 줄이는 일을 막아 줍니다.

💻 AI가 준 코드는 어떻게 실행하나요?

코드를 메모장에 붙여 넣고 이름을 index.html로 저장한 뒤 그 파일을 더블클릭하면 브라우저에서 열립니다. 이 과정이 처음에는 낯설지만 세 번만 해 보면 손에 익습니다.

1. AI 답변의 코드 영역에 있는 복사 버튼으로 전체 코드를 복사합니다.
2. 메모장을 새로 열어 붙여 넣습니다.
3. 「다른 이름으로 저장」에서 파일 형식을 「모든 파일」로 바꾸고, 이름을 index.html, 인코딩을 UTF-8로 지정해 바탕화면에 저장합니다.
4. 바탕화면의 index.html을 더블클릭해 브라우저로 엽니다.
5. 버튼을 눌러 득표 수가 올라가는지 직접 확인합니다.

막히는 지점은 대부분 정해져 있습니다. 파일이 index.html.txt로 저장되면 브라우저 대신 메모장이 열리므로 파일 형식 설정을 다시 확인합니다. 한글이 깨져 보이면 저장 인코딩이 UTF-8인지 보고, 그래도 깨지면 AI에게 「한글이 깨져. head에 문자 인코딩 설정을 넣어줘」라고 요청합니다. 버튼을 눌러도 아무 반응이 없다면 코드가 중간에 잘렸을 가능성이 크므로 전체 코드를 다시 받습니다.

🔄 결과가 마음에 들지 않으면 어떻게 고쳐 달라고 하나요?

한 번에 하나만, 화면에서 보이는 현상을 그대로 말하면 됩니다. 「별로야, 다시 해줘」처럼 막연한 요청은 AI가 무엇을 바꿔야 할지 몰라 전체를 새로 쓰고, 그 과정에서 잘 되던 기능이 망가지기도 합니다.

「다른 부분은 바꾸지 마」와 「원인을 먼저 설명해줘」는 입문자에게 특히 쓸모 있는 두 문장입니다. 앞 문장은 수정 범위를 묶어 두고, 뒤 문장은 AI가 무엇을 왜 고치는지 읽으면서 자연스럽게 코드 구조를 익히게 해 줍니다. 수정이 잘 됐으면 그 버전의 파일을 index-v2.html처럼 따로 저장해 두면, 다음 수정이 망가졌을 때 바로 되돌아갈 수 있습니다.

⚠️ 첫 웹 페이지를 만들 때 흔히 하는 실수는 무엇인가요?

가장 흔한 실수는 처음부터 너무 큰 것을 한 번에 요청하는 것입니다. 로그인, 데이터 저장, 관리자 화면까지 한 문단에 담으면 AI가 그럴듯한 코드를 길게 써 주지만 어디가 틀렸는지 찾기 어렵습니다. 화면 하나와 기능 하나로 시작해 동작을 확인한 뒤 기능을 하나씩 붙이는 편이 결국 빠릅니다.

• 보안 정보 넣기: 회사 서버 주소, API 키, 고객 이름·연락처를 요청 문장이나 코드에 넣지 않습니다. 시험용 가짜 데이터로 충분합니다.
• 저장 기능 오해: 지금 만든 페이지는 새로고침하면 득표 수가 0으로 돌아갑니다. 여러 사람이 같은 결과를 보려면 서버나 데이터베이스가 필요하다는 점을 알고 다음 단계로 넘어갑니다.
• 확인 없이 공유: 휴대폰 화면, 버튼을 빠르게 여러 번 누르는 경우처럼 예외 상황을 직접 눌러 본 뒤에 동료에게 보여 줍니다.

📚 첫 페이지를 만든 다음에는 무엇을 배우면 되나요?

다음 단계는 요청을 더 정확하게 쓰는 법과 AI가 만든 결과를 검증하는 법입니다. 페이지 하나를 만들어 본 경험이 있으면 이 두 가지가 왜 필요한지 몸으로 이해한 상태라 훨씬 빨리 익힙니다.

1. 방금 해 본 사이클을 다른 예제로 한 번 더 돌려 보려면 무료 읽는 강의 첫 바이브 코딩 — 자연어로 기능 만들기를 따라 합니다.
2. 요청 문장을 다듬는 원칙은 좋은 프롬프트의 3원칙에서 정리합니다.
3. AI가 쓴 코드를 그대로 믿지 않고 확인하는 습관은 AI의 결과를 읽고 검증하기에서 다룹니다.

화면 하나를 넘어 데이터 연동, 자연어 디버깅, 커서(Cursor) 같은 AI 코딩 도구 환경, MVP 완성까지 순서대로 배우고 싶다면 누구나 쉽게 배우는 Vibe 코딩 과정의 12개 차시 구성을 참고할 수 있습니다.

❓ 자주 묻는 질문

무료 AI 서비스로도 바이브 코딩을 할 수 있나요?

HTML 파일 하나 수준의 작은 페이지는 대부분의 대화형 AI 무료 사용 범위에서도 만들어 볼 수 있습니다. 다만 하루 사용량 한도나 쓸 수 있는 모델은 서비스와 요금제마다 다르고 자주 바뀌므로, 각 서비스의 공식 안내에서 현재 조건을 확인하는 것이 정확합니다.

만든 페이지를 다른 사람도 인터넷으로 볼 수 있게 하려면 어떻게 하나요?

내 컴퓨터의 파일을 인터넷에 올리는 배포 단계가 필요합니다. 정적 웹 페이지를 올려 주는 호스팅 서비스가 여럿 있으며, 이 과정은 읽는 강의 바이브 코딩 시리즈의 배포 강에서 다룹니다. 처음에는 파일 자체를 메신저로 보내 동료가 브라우저로 열어 보게 하는 것만으로도 충분합니다.

코드를 전혀 읽지 않고 계속 만들어도 괜찮을까요?

개인용 작은 도구라면 가능하지만, 다른 사람의 정보를 다루거나 업무에 쓰기 시작하면 최소한 AI에게 「이 코드가 하는 일을 순서대로 설명해줘」라고 묻고 내용을 이해하는 단계가 필요합니다. 오류가 났을 때 무엇을 고쳐 달라고 할지 판단하는 힘도 여기서 생깁니다.

이 글은 2026년 10월 28일 기준으로, 용어 유래는 콜린스 사전의 2025년 올해의 단어 발표 보도를, 실습 절차는 누구나패스 읽는 강의 바이브 코딩 시리즈를 바탕으로 작성했습니다.