핵심 재정리
바이브코딩은 AI에게 자연어로 설명하며 결과를 보고 피드백하는 개발 방식입니다.
3과3-5
바이브코딩으로 웹사이트 만들기
Claude Code와 대화하며 코딩하는 바이브코딩으로 첫 웹사이트를 만듭니다
Practice Kit
수업 후 바로 남길 결과물
내 업무 연결
반복 업무 하나를 골라 AI에게 맡길 단위로 쪼갭니다.
작은 산출물
요약문, 체크리스트, 초안, 자동화 지시문 중 하나를 완성합니다.
AI에게 붙여넣을 복습 프롬프트
나는 비개발자 실무자입니다. "바이브코딩으로 웹사이트 만들기" 강의를 들었습니다.
내 업무 상황:
- 반복해서 시간이 걸리는 업무:
- 지금 막히는 지점:
- 오늘 30분 안에 만들고 싶은 결과물:
요청:
1. 이 강의의 핵심을 내 업무 기준으로 3줄 요약해줘.
2. 바로 실행할 수 있는 첫 작업 3개를 순서대로 정리해줘.
3. 내가 AI에게 붙여넣을 최종 프롬프트를 하나 만들어줘.
4. 결과물을 검수할 체크리스트를 5개로 만들어줘.검수 기준
- 오늘 만들 결과물이 한 문장으로 정리됐는가
- AI에게 맡길 일과 사람이 판단할 일이 분리됐는가
- 민감정보를 제거하거나 가명 처리했는가
- 결과물을 복사해 실제 업무 파일에 붙일 수 있는가
바이브코딩이란?
바이브코딩(Vibe Coding)은 2025년 Andrej Karpathy가 만든 용어입니다. 코드의 세부 사항을 외우고 직접 타이핑하는 대신, AI에게 원하는 것을 자연어로 설명하며 빠르게 결과물을 만들어가는 개발 방식입니다.
'느낌(vibe)으로 코딩한다'는 뜻입니다. 어떤 화면이 나와야 하는지, 어떻게 작동해야 하는지를 말로 설명하고, AI가 코드를 짜면 결과를 보고 피드백하며 발전시켜 나갑니다.
문과 출신도, 코드를 모르는 사람도 바이브코딩으로 실제 작동하는 웹사이트와 앱을 만들 수 있습니다.
첫 웹사이트 만들기 — 단계별 실습
빈 폴더에서 Claude Code를 시작해 간단한 소개 페이지를 만들어봅니다. Claude Code와의 대화 예시를 따라해보세요.
# 실습 대화 예시
사용자: 내 이름과 직업을 소개하는 간단한 웹페이지를 만들어줘.
배경색은 하늘색 계열, 이름은 크게, 중앙 정렬로 해줘.
이름: 김직원, 직업: 인사팀 대리
Claude Code: (index.html 파일 생성)
사용자: 괜찮은데, 이름 아래에 간단한 자기소개 문장도 추가해줘.
그리고 연락처 이메일 버튼도 넣어줘.
Claude Code: (파일 수정)
사용자: 이메일 버튼 색이 너무 밝아. 진한 파란색으로 바꿔줘.
마우스를 올리면 색이 살짝 어두워지는 효과도 넣어줘.
# 이렇게 대화하면서 점점 완성도 높은 페이지를 만들어갑니다!TIP: 처음에는 '이 코드가 뭔지' 이해하려 하지 마세요. 결과를 브라우저에서 보고 마음에 안 드는 부분을 말로 설명하면 됩니다. 이해는 나중에 자연스럽게 따라옵니다.
바이브코딩 성공의 3가지 원칙
첫째, 작게 시작하세요. 한 번에 완벽한 것을 요구하면 오히려 어렵습니다. '버튼 하나 추가', '색 바꾸기', '텍스트 수정'처럼 작은 단위로 요청하세요.
둘째, 자주 저장(커밋)하세요. 잘 작동하는 상태가 됐을 때 git commit으로 저장해두세요. 나중에 뭔가 잘못돼도 돌아갈 수 있습니다.
셋째, 결과 화면을 AI에게 보여주세요. '지금 이렇게 보이는데 이 부분이 이상해'라고 하면 AI가 문제를 파악하고 수정합니다. 스크린샷을 첨부하거나 오류 메시지를 복사해서 알려주세요.
핵심 정리
- ✓바이브코딩은 AI에게 자연어로 설명하며 결과를 보고 피드백하는 개발 방식입니다.
- ✓코드를 모르는 사람도 원하는 결과가 뭔지 말로 설명할 수 있으면 충분합니다.
- ✓작은 단위 요청, 자주 커밋, 결과 화면 공유가 바이브코딩 성공의 핵심입니다.
자주 묻는 질문
바이브코딩으로 만든 결과물은 실제로 쓸 수 있는 수준인가요?+
간단한 소개 페이지, 계산기, 폼 등은 충분히 실용적인 수준으로 만들 수 있습니다. 복잡한 기업용 시스템은 전문 개발자가 필요하지만, 개인 업무 도구나 간단한 웹사이트는 바이브코딩만으로도 충분합니다.
Claude Code 대신 다른 AI 코딩 도구를 써도 되나요?+
GitHub Copilot, Cursor, Windsurf 등 다양한 AI 코딩 도구가 있습니다. 이 과정에서는 Claude Code를 중심으로 배우지만, 원리는 모두 같습니다. 한 도구에 익숙해지면 다른 도구로 전환하는 것도 어렵지 않습니다.
학습 완료
현재까지 완료: 0개