바이브 코딩 첫 경험

02이 차시를 마치면

• 1.바이브 코딩이 무엇을 대신해주고 무엇은 여전히 사람이 확인해야 하는지 구분해서 설명할 수 있다.
• 2.에디터형(VS Code)과 올인원형(Lovable, v0 등) 도구의 차이를 자신의 말로 비교할 수 있다.
• 3.이 과정이 VS Code와 Claude Code 조합을 쓰는 이유를 설명할 수 있다.
• 4.대화만으로 자기소개 웹페이지를 만들어 브라우저에서 직접 열어볼 수 있다.
• 5.AI의 '완료했다'는 말을 그대로 믿지 않고 직접 확인하는 습관을 시작할 수 있다.

03왜 필요한가

이직을 준비하다가 '자기소개 페이지 주소 하나쯤은 있어야겠다'는 생각이 들었다고 해보자. 만드는 법을 검색해보면 HTML, CSS, 자바스크립트, 서버, 배포까지 배워야 할 용어가 끝없이 나온다. 학원을 등록하자니 몇 달이 걸리고, 그렇다고 포기하자니 만들고 싶은 것 자체는 어렵지 않다 — 이름, 하는 일, 연락처 몇 줄이면 충분하다. '이 정도를 만드는 데 왜 이렇게 배울 게 많아야 하나'라는 질문에서 이 과정은 출발한다.

• ·코딩을 배우기로 마음먹어도 어디서부터 시작해야 할지 몰라 첫걸음을 떼지 못한다.
• ·만들고 싶은 건 간단한데, 배워야 한다는 목록(문법·프레임워크)은 끝이 없어 보인다.
• ·AI로 코딩이 쉬워졌다는 이야기는 들었지만, 정확히 무엇이 쉬워지고 무엇은 여전히 어려운지 감이 없다.
• ·도구가 너무 많아(Lovable, v0, Cursor, ChatGPT…) 뭐부터 써야 할지 고르는 것부터 막막하다.

04개념 설명

05실습 가이드

1. 1. 오늘 쓸 화면 확인하기

   • -실습실 컴퓨터(또는 미리 안내받은 대로 준비한 내 컴퓨터)에서 VS Code를 연다. 설치와 세부 설정은 다음 차시(02차시)에서 처음부터 다룬다 — 오늘은 이미 준비된 화면으로 바이브 코딩 자체를 먼저 경험한다.
   • -사이드바에서 Claude Code 대화창 아이콘을 찾아 클릭한다. 실습 직전 화면 구성은 확장 버전에 따라 이 교재와 다를 수 있다.
   • -대화창에 아무 말이나 입력해보고 응답이 오는지 확인한다.

   예상 결과 — Claude Code 대화창이 열리고, 입력한 메시지에 대한 응답이 돌아온다.

   안 될 때 — 대화창이 안 보이면 강사에게 화면 구성을 확인받는다. 응답이 없으면 인터넷 연결이나 로그인 상태를 먼저 확인한다.

2. 2. 새 프로젝트 폴더 준비하기

   • -바탕화면이나 문서 폴더처럼 찾기 쉬운 위치에 'my-intro'처럼 알아볼 수 있는 이름으로 빈 폴더를 하나 만든다.
   • -VS Code에서 '파일 → 폴더 열기'로 방금 만든 폴더를 연다.

   예상 결과 — VS Code 왼쪽 탐색기에 빈 폴더가 열려 있다.

   안 될 때 — 탐색기에 아무것도 안 보이면 정상이다 — 아직 파일이 없는 빈 폴더이기 때문이다. 폴더 자체가 안 열리면 경로에 한글이나 특수문자가 없는 위치로 옮겨본다.

3. 3. 자기소개 내용 미리 정리하기

   • -이름(또는 별명), 하는 일이나 관심사, 한 줄 소개, 연락 방법(선택) 등 페이지에 넣고 싶은 내용을 메모장에 3~4줄로 미리 적어둔다.
   • -사진을 넣고 싶다면 파일을 준비하되, 오늘은 사진 없이 텍스트만으로 시작해도 된다.

   예상 결과 — 페이지에 넣을 내용이 메모로 정리되어 있다.

   안 될 때 — 특별히 쓸 내용이 없다면 '지금 배우고 있는 것', '이 과정에서 만들고 싶은 것'을 소개 문구로 써도 충분하다.

4. 4. 첫 프롬프트로 페이지 요청하기

   • -P1-1 프롬프트의 [대괄호] 부분을 3단계에서 정리한 내 정보로 채워 Claude Code 대화창에 입력한다.
   • -응답이 끝날 때까지 기다린다. 완료 메시지와 함께 파일이 만들어졌다는 안내가 보일 것이다.

   예상 결과 — 탐색기에 index.html 같은 파일이 새로 생긴다.

   안 될 때 — 파일이 안 생기면 대화가 끝까지 완료됐는지(응답이 중간에 끊기지 않았는지) 확인하고, 안 끝났다면 '방금 하던 작업을 마무리해줘'라고 다시 요청한다.

5. 5. 브라우저에서 결과 확인하기

   • -탐색기에서 생성된 html 파일을 찾아 더블클릭하거나, VS Code 확장의 미리보기 기능이 있다면 그것을 사용해 브라우저로 연다.
   • -실제로 브라우저에 내 이름과 소개 문구가 보이는지 눈으로 확인한다.

   예상 결과 — 브라우저 창에 내가 요청한 자기소개 페이지가 뜬다.

   안 될 때 — 빈 화면이거나 글자가 깨져 보이면, 그 상태를 그대로 P1-4(복구 프롬프트)로 AI에게 설명한다.

6. 6. 마음에 안 드는 부분 고쳐 나가기

   • -색, 문구 위치, 폰트 크기 등 마음에 안 드는 부분을 한 번에 하나씩 P1-2 프롬프트 형태로 요청한다.
   • -요청할 때마다 브라우저를 새로고침해 실제로 바뀌었는지 확인한다.

   예상 결과 — 요청한 부분이 하나씩 반영되며 페이지가 원하는 모습에 가까워진다.

   안 될 때 — 여러 가지를 한 번에 요청하면 무엇이 반영됐는지 헷갈린다. 한 번에 한 가지씩만 요청하는 방식으로 되돌아간다.

7. 7. '완료했다'는 말 검증하기

   • -AI가 '완성했습니다', '모두 반영했습니다'라고 답해도 그 말만 믿지 않고, P1-3 프롬프트로 스스로 점검해달라고 요청한다.
   • -AI의 점검 답변과 별개로, 직접 브라우저를 새로고침해 눈으로 다시 확인한다.

   예상 결과 — AI의 점검 결과와 내 눈으로 본 화면이 일치한다.

   안 될 때 — AI의 점검 답변과 실제 화면이 다르면 그 차이를 그대로 알려주고 다시 확인해달라고 요청한다 — 이 어긋남 자체가 오늘 배운 '완료 선언 믿기' 주의사항의 실제 사례다.

8. 8. (선택) 다른 도구와 잠깐 비교해보기

   • -시간이 남으면 Lovable이나 v0 같은 올인원형 도구 중 하나에 가입해, 같은 자기소개 내용으로 페이지를 만들어본다.
   • -완성 속도, 코드가 어디에 저장되는지 보이는지, 내가 원하는 세부 수정이 얼마나 자유로운지를 오늘 VS Code에서 만든 결과와 비교해본다.

   예상 결과 — 두 방식의 체감 차이(속도, 자유도, 파일 소유감)를 한두 문장으로 말할 수 있다.

   안 될 때 — 가입이 막히거나 시간이 부족하면 건너뛰어도 된다 — 이 비교는 선택 실습이다.

9. 9. 오늘 결과 남겨두기

   • -완성된 폴더를 그대로 남겨둔다. 다음 차시에서 이 폴더를 그대로 이어받아 Git과 GitHub 배포를 실습한다.
   • -오늘 사용한 프롬프트와, AI가 그럴듯하게 둘러댔던 순간이 있었다면 짧게 메모해둔다.

   예상 결과 — 다음 차시에 바로 이어 쓸 수 있는 폴더와, 오늘의 프롬프트 기록이 남아 있다.

   안 될 때 — 메모를 안 했다면 지금이라도 대화창을 스크롤해 올라가 다시 확인하고 옮겨 적는다.

06실전 프롬프트

나에 대한 간단한 자기소개 웹페이지를 하나 만들어줘.

들어갔으면 하는 내용은 이거야.
· 이름(또는 별명): [이름]
· 하는 일 / 관심사: [하는 일이나 관심사]
· 한 줄 소개: [한 줄 소개 문구]
· 연락 방법(선택): [이메일이나 SNS 등, 없으면 생략]

나는 코딩을 모르니까 파일을 몇 개 만들었는지,
어떻게 열어서 확인하면 되는지도 같이 알려줘.

방금 만든 페이지에서 이 부분만 바꿔줘.

바꾸고 싶은 것: [예: 배경색을 좀 더 차분한 색으로]

다른 부분은 그대로 두고 이것만 반영해줘.
바꾼 뒤에 내가 새로고침하면 바로 보이는지도 알려줘.

방금 다 됐다고 했는데, 진짜 다 됐는지 스스로 점검해줘.

1. 내가 요청했던 항목([이름, 하는 일, 한 줄 소개, 연락 방법 등])이 실제 파일에 다 들어가 있는지 하나씩 확인해줘.
2. 빠졌거나 잘못 들어간 게 있으면 알려줘.
3. 있다면 지금 바로 고쳐줘.

점검 결과를 항목별로 '됨 / 안 됨'으로 정리해서 보여줘.

방금 만든 페이지를 브라우저로 열었는데 이렇게 나와.

[본 화면을 그대로 설명하거나 캡처 내용을 붙여넣기 — 예: 흰 화면만 뜸 / 글자가 깨져 보임]

내가 한 것: [파일을 연 방법을 그대로]

무엇이 문제인지 먼저 설명하고, 고친 다음
내가 뭘 다시 하면 되는지 순서대로 알려줘.

방금 만든 페이지가 어떤 구조로 되어 있는지
코딩을 전혀 모르는 사람도 이해할 수 있게 3문장 정도로 설명해줘.

파일이 하나인지 여러 개인지,
그 파일들이 서로 어떻게 연결되는지만 간단히 알려줘.

07이것만은 주의

08자가 점검

09과제

오늘 만든 자기소개 페이지에 실제 자신의 정보를 마저 채워 완성한다. 시간이 된다면 소개하고 싶은 프로젝트나 관심사를 한 항목 더 추가해보고, 실습 중 AI가 '완료했다'고 했지만 실제로는 반영되지 않았던 순간이 있었다면 무엇이었는지 함께 적어본다.

제출 형식 — ① 완성된 페이지를 브라우저에서 연 화면 스크린샷 ② 사용한 프롬프트 전체(수정 요청 포함) ③ '완료됐다'는 말과 실제 결과가 달랐던 순간(있었다면) 한두 줄 메모를 하나의 문서로 정리해 제출한다.

10더 알아보기

• Lovable — 대화만으로 웹앱을 만드는 올인원형 도구 — 오늘 8단계 비교 실습용
• v0 by Vercel — UI 컴포넌트 생성에 특화된 올인원형 도구 — 오늘 8단계 비교 실습용

바이브 코딩(Vibe Coding)

— 문법을 직접 작성하지 않고, 원하는 것을 말로 설명해 AI가 코드를 작성하게 하는 개발 방식.

에디터형 도구

— VS Code처럼 코드 파일이 내 컴퓨터 폴더에 그대로 남아, 어떤 서비스로도 옮기고 확장할 수 있는 개발 도구 유형.

올인원형 도구

— Lovable·v0처럼 가입만 하면 브라우저 안에서 대화로 화면과 코드가 동시에 만들어지는 개발 도구 유형.

다음 차시 예고 — 다음 차시에서는 오늘 만든 폴더를 그대로 이어받아, VS Code를 제대로 설치하고 Git으로 되돌릴 수 있는 상태를 만든 뒤 GitHub Pages로 처음 배포까지 해봅니다.