Code6OfficeBETA
시작 전 준비

바이브 코딩 입문: 처음 시작하는 순서와 확인 방법

바이브 코딩의 뜻부터 도구 준비, 첫 요청, HTML 파일 확인과 수정까지 완전 초보자의 시작 순서를 안내합니다.

바이브 코딩은 무엇인가요?

바이브 코딩은 만들고 싶은 것을 자연어로 AI에게 설명하고, AI가 작성한 코드를 실행·확인·수정하면서 결과물을 만드는 방식입니다. 여기서는 요청하기 → 파일 확인 → 실행하기 → 결과 확인 → 한 가지 수정하기를 기본 과정으로 배웁니다.

AI가 “완료했습니다”라고 답해도 원하는 결과가 구현됐다는 뜻은 아닙니다. 파일이 만들어졌는지, 화면이 열리는지, 바꾼 내용이 반영되는지 직접 확인해야 합니다. 첫 목표는 큰 앱이 아니라 내 컴퓨터에서 열리는 웹페이지 한 장입니다.

HTML은 페이지의 내용과 구조, CSS는 색과 간격 같은 모양, JavaScript는 클릭 후 변화 같은 동작을 담당합니다. 처음부터 모두 외우지 않아도 됩니다. 이 과정에서는 HTML 파일 안에 간단한 CSS를 넣어 시작합니다.

아무것도 준비하지 않았다면 이 순서로 시작해요

  1. 내 컴퓨터와 운영체제 확인: Mac과 Windows 중 내 경로를 찾습니다.
  2. 계정·구독·API 비용 구분: 설치와 사용 권한, 별도 결제를 구분합니다.
  3. AI 코딩 도구 고르기: 도구 하나를 선택합니다. 모두 설치하지 않습니다.
  4. 실습 폴더 만들기: 기존 파일이 없는 빈 폴더를 준비합니다.
  5. 시작하기의 도구별 경로: 선택한 도구를 설치하고 로그인합니다. 터미널 도구를 선택했다면 터미널 열기를 먼저 읽습니다.
  6. 첫 HTML 페이지 만들기: 생성된 파일을 브라우저로 열고 한 문장을 수정합니다.

내가 어느 단계까지 했는지 확인하면서 진행하세요. 도구가 열려도 로그인이 끝나지 않았다면 아직 첫 요청을 실행할 수 없는 경우가 있습니다. 지원 환경과 사용 권한은 선택한 도구의 공식 안내에서 확인합니다.

AI에게 보내는 요청과 터미널 명령은 달라요

아래 문장은 AI 코딩 도구의 대화 입력칸에 넣습니다. 일반 터미널 명령줄에 붙여넣는 명령어가 아닙니다. 선택한 도구에서 실습 폴더를 연 뒤 사용하세요.

나는 코딩을 처음 시작해.
현재 연 폴더가 어디인지 확인해줘.
아직 파일은 수정하지 말고, 이 폴더가 비어 있는지와
index.html 파일 하나를 만들 때 확인할 내용을 설명해줘.
설치·결제·외부 공개는 진행하지 마.

응답에 나온 폴더 경로가 내가 만든 실습 폴더인지 확인합니다. 경로가 다르면 파일을 만들기 전에 원하는 폴더를 다시 엽니다. 실제 파일 생성 요청은 첫 HTML 실습에 이어집니다.

첫 성공의 기준은 세 가지예요

  • 실습 폴더 안에 index.html이 존재합니다.
  • 브라우저로 열었을 때 요청한 제목과 문장이 보입니다.
  • 문장을 하나 바꾸고 저장·새로고침하면 변경이 보입니다.

이 단계에서 회원가입·결제·데이터베이스·도메인은 구현하지 않습니다. 로컬 파일은 아직 인터넷에 공개한 서비스가 아닙니다. 첫 성공 뒤에는 종료하고 다음 날 이어 하기, 그다음 앱 구현 초급 가이드로 이동합니다.

참고 자료와 검증 범위

공식 한국어 자료 확인: 2026-11-15. 아래 자료로 웹페이지·HTML의 기초 설명을 확인했습니다. 도구별 설치·로그인 검증 여부는 각 설정 글의 안내를 따릅니다. 첫 파일 예제의 실행 확인 범위는 첫 HTML 실습에 표시합니다.

다음으로 읽어보세요내게 맞는 AI 코딩 도구 고르기 ↗