바이브 코딩 입문

강의 목표

오늘 강의의 목표는 코딩 문법을 외우는 것이 아닙니다.

수강생이 강의가 끝났을 때 아래 3가지를 경험하는 것이 목표입니다.

1. AI에게 원하는 프로그램을 설명할 수 있다.
2. 오류가 나도 다시 요청해서 고칠 수 있다.
3. 간단한 웹앱 하나를 직접 만들고 공유할 수 있다.

오늘 우리가 얻어야 하는 가장 중요한 결과는 "바이브 코딩이 뭔지 안다"가 아닙니다.

"나는 개발자가 아니지만 AI와 대화해서 프로그램 하나를 만들 수 있다."

이 느낌을 얻는 것이 가장 중요합니다.

1부. 바이브 코딩이란 무엇이고, 꼭 알아두어야 할 개념

"코딩을 한 줄도 못하는 사람이 프로그램을 만들 수 있을까?"

바이브 코딩이란?

전통적인 개발은 보통 아래 흐름으로 진행됩니다.

사람 -> 코드 작성 -> 프로그램

바이브 코딩은 아래 흐름에 가깝습니다.

사람 → AI에게 설명 → AI가 코드 작성

바이브 코딩을 할 때 우리는 개발자가 아니라 "AI 팀장" 역할을 수행합니다.

즉, 코드를 직접 전부 외우고 작성하는 사람이 아니라, AI에게 원하는 결과를 구체적으로 설명하고 결과물을 검토하며 수정 방향을 지시하는 사람입니다.

바이브 코딩의 핵심 원리

좋은 결과는 좋은 프롬프트에서 나옵니다.

나쁜 예시

계산기 만들어줘.

좋은 예시

초등학생도 사용할 수 있는 계산기를 HTML로 만들어줘.
덧셈, 뺄셈, 곱셈, 나눗셈 기능이 필요하고 모바일에서도 보기 좋게 만들어줘.

좋은 프롬프트의 5요소

좋은 프롬프트에는 보통 아래 5가지가 들어갑니다.

1. 무엇을 만들지
2. 누가 사용할지
3. 어떤 기능이 필요한지
4. 어떤 느낌의 디자인인지
5. 어떤 형태로 결과물을 받을지

예시

30대 직장인이 매일 업무를 정리할 수 있는 ToDo 앱을 만들어줘.

할 일 추가, 완료 체크, 삭제, 진행률 표시가 필요해.
모바일에서도 보기 좋고, 차분한 업무 도구 느낌이면 좋겠어.
HTML/CSS/JavaScript 한 파일로 만들어줘.

입문자를 위한 마음가짐

완벽할 필요는 없다

처음부터 완벽한 명령어를 넣으려 애쓰지 않아도 됩니다.

AI와 대화하며 고쳐나가는 것이 바이브 코딩의 묘미입니다.

개발 지식은 보너스

코딩을 몰라도 가능합니다.

다만 변수, 함수, 레이아웃 같은 기초 용어를 알면 AI에게 훨씬 정확하게 명령을 내릴 수 있습니다.

창의력이 곧 실력

이제 기술적인 구현은 AI가 많이 도와줍니다.

수강생은 "무엇이 사용자에게 재미있고 유익할까?" 를 고민하는 기획자가 되어야 합니다.

"오타가 나면 어떡하지?"라는 걱정은 접어두세요. AI는 여러분의 오타 속에서도 의도를 찾아냅니다. 편안하게 대화하듯 시작해 보세요.

2부. 알아두면 편한 핵심 용어와 배포 주의사항

프론트엔드

프론트엔드는 사용자가 직접 보고, 클릭하고, 입력하는 화면 영역입니다.

카페로 비유하면 손님이 보는 메뉴판, 테이블, 인테리어와 같습니다.

웹사이트에서는 버튼, 이미지, 글자, 입력창, 메뉴 등이 모두 프론트엔드에 해당합니다.

예시

• 네이버 첫 화면
• 인스타그램 피드
• 유튜브 영상 목록
• 쇼핑몰 상품 페이지

바이브 코딩에서는 아래와 같은 요청이 대부분 프론트엔드 작업입니다.

• 버튼을 크게 만들어줘.
• 모바일에서도 보기 좋게 해줘.
• 깔끔한 디자인으로 바꿔줘.

한 줄 정리: 사용자가 보는 화면

백엔드

백엔드는 사용자의 눈에는 보이지 않지만 서비스가 정상적으로 작동하도록 뒤에서 처리하는 영역입니다.

카페로 비유하면 주방에서 주문을 확인하고 커피를 만들고 재고를 관리하는 과정이 백엔드입니다.

웹서비스에서는 로그인 확인, 회원가입 처리, 결제 처리, 주문 관리, 데이터 계산 등의 역할을 담당합니다.

예시

• 로그인 정보 확인
• 쇼핑몰 주문 처리
• 결제 승인
• 예약 시스템 관리

한 줄 정리: 뒤에서 일하는 직원

저장

저장은 서비스에 필요한 정보를 보관하는 공간입니다.

카페의 고객 관리 노트나 재고 관리 장부와 비슷한 역할을 합니다.

사용자가 입력한 정보가 저장되어야 다음에 다시 접속했을 때도 데이터를 확인할 수 있습니다.

예시

• 유튜브 시청 기록
• 인스타그램 게시물
• 할 일 목록
• 고객 정보

저장이 없는 앱은 새로고침하면 모든 정보가 사라지고, 저장 기능이 있는 앱은 다시 접속해도 데이터가 유지됩니다.

한 줄 정리: 데이터를 보관하는 창고

배포

배포는 내 컴퓨터에서만 실행되던 프로그램을 인터넷에 공개하는 과정입니다.

집에서 만든 빵을 가게에 진열해 다른 사람들이 살 수 있게 하는 것과 비슷합니다.

배포 전에는 나만 사용할 수 있지만, 배포 후에는 인터넷 주소 URL이 생겨 누구나 접속할 수 있습니다.

예시

• 개인 홈페이지 공개
• 포트폴리오 사이트 공개
• 웹앱 서비스 오픈
• 온라인 예약 시스템 공개

한 줄 정리: 인터넷에 공개하기

브라우저

브라우저는 웹앱이 실행되는 공간입니다.

크롬, 사파리, 엣지 같은 프로그램이 브라우저입니다.

한 줄 정리: 웹앱이 열리는 무대

새로고침

새로고침은 페이지를 다시 불러오는 행동입니다.

저장 기능이 없는 앱은 새로고침하면 입력한 내용이 사라질 수 있습니다.

한 줄 정리: 앱을 다시 켜는 것

로컬 저장소

로컬 저장소는 내 브라우저 안에 데이터를 임시로 저장하는 방법입니다.

로그인 없이도 간단한 할 일 목록, 기록 앱, 습관 앱을 만들 때 자주 사용합니다.

한 줄 정리: 내 컴퓨터 브라우저 안의 작은 저장 공간

초보자를 위한 한 장 요약

바이브 코딩을 처음 시작하는 사람은 복잡하게 생각할 필요가 없습니다.

일단 아래 흐름만 이해해도 대부분의 웹서비스 구조를 이해할 수 있습니다.

화면(프론트엔드) → 기능(백엔드) → 저장(Database) → 공개(배포)

점차적으로 이런 경계를 생각하지 않아도 될 정도로 AI가 처리해주는 영역이 확장되고 있습니다.

배포 및 주의할 점

배포 전에는 AI에게 보안 검토를 요청하는 것도 좋은 방법입니다.

1. 개인정보와 API 키는 절대 노출 금지

AI Studio에서 만든 앱이 작동하려면 일종의 통행증인 API 키가 들어갈 수 있습니다.

API 키, 비밀번호, 토큰, 개인정보는 아무 데나 공개하면 안 됩니다.

주의점

• 코드를 복사해서 블로그나 카페에 그대로 올리면, 다른 사람이 내 통행증을 훔쳐 쓸 수 있습니다.
• API 키가 노출되면 사용량이 빠르게 소진되거나 비용이 발생할 수 있습니다.
• 배포 전에는 코드 안에 공개되면 안 되는 정보가 없는지 반드시 확인해야 합니다.

2. 무료 사용량에도 한도가 있다

무료 도구라고 해도 대부분 무제한은 아닙니다.

주의점

• 너무 많은 사람이 동시에 접속하면 서비스가 잠시 멈출 수 있습니다.
• AI에게 너무 긴 답변을 계속 요구하면 사용량이 빨리 소진될 수 있습니다.
• 실험용 앱과 실제 서비스용 앱은 구분해서 생각해야 합니다.

3. 저작권과 할루시네이션 주의

AI는 가끔 아주 자신 있게 틀린 정보를 말합니다.

특히 건강, 법률, 투자, 의학, 교육 정보처럼 사람의 판단에 영향을 주는 내용은 주의해야 합니다.

예시 문구

이 앱에서 제공하는 정보는 AI가 생성한 참고용 정보입니다.
중요한 결정은 반드시 전문가와 상의해 주세요.

4. 배포 전 미리보기는 필수

Build 메뉴에서 바로 배포 버튼을 누르기 전에 반드시 테스트를 거쳐야 합니다.

주의점

• 모바일에서 버튼이 너무 작지 않은지 확인합니다.
• 글자가 겹치지 않는지 확인합니다.
• 버튼을 직접 3번 이상 눌러봅니다.
• 입력, 삭제, 저장 기능이 제대로 작동하는지 확인합니다.

배포 전 체크리스트

• 개인정보가 코드 안에 들어가 있지 않은가?
• API 키가 공개되어 있지 않은가?
• 모바일에서 버튼이 잘 눌리는가?
• 새로고침해도 필요한 데이터가 남아 있는가?
• AI가 만든 설명이나 정보에 틀린 내용은 없는가?
• 저작권 문제가 있는 이미지나 문구를 쓰고 있지 않은가?

초보자용 보안 점검 프롬프트

이 코드를 배포하기 전에 보안상 위험한 부분이 있는지 확인해줘.
API 키, 개인정보, 외부에 공개되면 안 되는 정보가 있는지도 점검해줘.
문제가 있다면 초보자도 이해할 수 있게 수정 방법을 알려줘.

3부. Google AI Studio 소개 및 몸풀기 실습

Google AI Studio 소개

Google AI Studio는 웹에서 바로 AI 앱을 만들어볼 수 있는 도구입니다.

처음 바이브 코딩을 경험하기에 좋은 이유는 아래와 같습니다.

• 무료로 시작할 수 있습니다.
• 별도 설치 없이 웹에 접속해서 바로 사용할 수 있습니다.
• Gemini를 사용할 수 있습니다.
• 코드 생성과 미리보기가 강력합니다.

화면 구조 설명

기본적으로 아래 영역을 이해하면 됩니다.

• 사이드 메뉴: Build 선택
• 프롬프트 입력창: 원하는 프롬프트 입력
• 채팅창: AI와 대화하는 영역
• Preview: 결과물을 미리 확인하는 영역
• Code: 생성된 코드를 확인하는 영역

실습 방법

1. AI Studio 사이트에 접속하고 Google 계정으로 로그인합니다.
2. 사이트 주소: https://aistudio.google.com/
3. 왼쪽 사이드바에서 Build 메뉴를 선택합니다.
4. 아래에 주어진 프롬프트를 복사해서 채팅창에 입력합니다.
5. Build 버튼을 클릭합니다.
6. 오른쪽 미리보기 화면에서 결과를 확인합니다.
7. 마음에 들지 않는 부분을 다시 요청합니다.

Google AI Studio 접속 화면

몸풀기 실습 목표

AI Studio에서 프롬프트를 입력하고 결과물이 만들어지는 과정을 경험합니다.

처음부터 복잡한 앱을 만들기보다, 버튼 하나를 누르면 문구가 나오는 아주 간단한 웹페이지부터 시작합니다.

메인 프롬프트

HTML, CSS, JavaScript를 사용해서

"안녕하세요" 버튼을 누르면
"오늘도 좋은 하루입니다."
라는 문구가 나오는 웹페이지를 만들어줘.

한 파일로 만들어줘.

인사 버튼 실습 결과 화면(예시)

추가 프롬프트

처음 결과가 나온 뒤 바로 수정 요청을 해봅니다.

버튼을 더 크게 만들어줘.

배경색을 밝은 노란색으로 바꿔줘.

문구가 천천히 나타나는 효과를 넣어줘.

모바일 화면에서도 가운데 정렬되게 해줘.

핵심 메시지

처음에 완벽하게 말하는 것보다 보고, 고치고, 다시 요청하는 과정이 더 중요합니다.

바이브 코딩은 한 번에 정답을 맞히는 방식이 아니라, AI와 대화하면서 원하는 결과에 가까워지는 방식입니다.

4부. 실습: 나만의 계산기 만들기

목표

나만의 계산기를 만들어봅니다.

이 실습에서는 아래 흐름을 경험합니다.

1. 기본 기능 만들기
2. 디자인 수정하기
3. 기능 추가하기
4. 테스트하기

메인 프롬프트

HTML, CSS, JavaScript를 사용해서

사칙연산이 가능한 계산기를 만들어줘.

조건

- 모바일 지원
- 깔끔한 디자인
- 큰 버튼
- 숫자 표시창 포함
- 한 파일로 작성

추가 프롬프트

계산기가 만들어진 뒤 아래 요청을 하나씩 입력해봅니다.

버튼 색상을 파란색 계열로 변경해줘.

계산 기록을 아래에 표시해줘.

다크모드 기능도 추가해줘.

테스트 체크리스트

기능을 추가한 뒤에는 직접 눌러보면서 확인해야 합니다.

• 숫자 버튼이 잘 눌리는가?
• 더하기, 빼기, 곱하기, 나누기가 되는가?
• 0으로 나누면 이상한 결과가 나오지 않는가?
• 모바일에서 버튼이 너무 작지 않은가?
• 계산 기록이 너무 길어졌을 때 화면이 깨지지 않는가?

오류 점검 프롬프트

계산기에서 오류가 날 수 있는 상황을 찾아주고, 수정해줘.
초보자도 이해할 수 있게 어떤 부분을 고쳤는지도 설명해줘.

핵심 메시지

프로그램은 한 번에 완성되는 것이 아니라, 사용해보고 불편한 점을 다시 고치면서 좋아집니다.

5부. 실습: 숫자 맞추기 게임 만들기

목표

게임도 만들 수 있다는 경험을 합니다.

이 실습에서는 기능 구현뿐 아니라 사용자가 계속 쓰고 싶게 만드는 재미 요소를 추가해봅니다.

메인 프롬프트

1~100 사이의 숫자를 맞추는 게임을 만들어줘.

조건

- 입력창 제공
- 시도 횟수 표시
- 정답이면 축하 메시지
- 모바일 최적화
- 한 파일로 작성

추가 프롬프트

난이도 선택 기능 추가

배경음악 추가

최고 기록 저장 기능 추가

재미 요소를 더하고 싶을 때 아래 요청을 추가로 사용할 수 있습니다.

정답에 가까워질수록 힌트를 더 자세히 줘.

성공하면 축하 애니메이션을 보여줘.

실패 횟수가 많아지면 응원 문구를 보여줘.

다시 시작 버튼을 추가해줘.

최고 기록을 브라우저에 저장해줘.
새로고침해도 최고 기록이 유지되게 해줘.

테스트 체크리스트

• 1~100 사이 숫자만 입력되는가?
• 숫자를 입력하지 않았을 때 안내 문구가 나오는가?
• 정답보다 큰지 작은지 알려주는가?
• 정답을 맞히면 게임이 종료되는가?
• 다시 시작 버튼이 잘 작동하는가?
• 최고 기록이 저장되는가?

핵심 메시지

기능을 만드는 것과 사용자가 계속 쓰고 싶게 만드는 것은 다릅니다.

게임 실습에서는 "작동"뿐 아니라 "재미"도 함께 요청해보는 것이 중요합니다.

6부. 실습: 나만의 업무 도구 만들기

목표

실제 업무에 활용할 수 있는 작은 도구를 만들어봅니다.

계산기와 게임은 연습용에 가깝지만, 업무 도구는 실제로 내가 계속 사용할 수 있는 앱이 될 수 있습니다.

진행 방식

아래 예제 중 하나를 선택해서 만듭니다.

1. 기본 버전 만들기
2. 저장 기능 추가하기
3. 디자인 수정하기
4. 실제 내 상황에 맞게 항목 변경하기

예제 1. 할 일 관리 앱

메인 프롬프트

할 일을 등록하고 완료 체크할 수 있는 ToDo 앱을 만들어줘.

기능

- 할 일 추가
- 완료 체크
- 삭제
- 진행률 표시

한 파일로 작성

예제 2. 독서 기록 앱

메인 프롬프트

독서 기록 앱을 만들어줘.

입력 항목

- 책 제목
- 저자
- 별점
- 한줄평

목록 형태로 저장되게 해줘.

예제 3. 습관 추적기

메인 프롬프트

습관 인증 앱을 만들어줘.

습관명 추가
오늘 완료 체크
연속 성공일 표시

모바일 최적화

추가 프롬프트

업무 도구를 만든 뒤 저장 기능을 추가합니다.

아래 앱에 브라우저 저장 기능을 추가해줘.
새로고침해도 입력한 데이터가 유지되게 해줘.

업무 도구 개선 질문

내가 만들 앱을 고르기 어렵다면 아래 질문에 답해봅니다.

• 내가 반복해서 하는 일은 무엇인가?
• 엑셀이나 메모장으로 대충 관리하던 것은 무엇인가?
• 기록하면 나중에 도움이 되는 정보는 무엇인가?
• 버튼 하나로 줄이고 싶은 귀찮은 일은 무엇인가?

보완 추가 프롬프트

이 앱을 실제 업무에서 더 자주 쓰고 싶어.
사용자가 매일 쓰기 편하도록 기능과 화면을 개선해줘.
단, 너무 복잡해지지 않게 초보자용으로 유지해줘.

핵심 메시지

바이브 코딩의 진짜 가치는 "그럴듯한 예제"가 아니라, 내 생활과 업무의 작은 불편을 직접 도구로 바꾸는 데 있습니다.

7부. 오류 해결과 수정 요청법

왜 필요한가?

초보자는 앱을 만드는 것보다 오류가 났을 때 더 쉽게 포기합니다.

하지만 바이브 코딩에서는 오류도 AI에게 설명하고 고치면 됩니다.

중요한 것은 "안 돼요"라고만 말하는 것이 아니라, 어떤 상황에서 무엇이 안 되는지 알려주는 것입니다.

자주 쓰는 오류 해결 프롬프트

화면이 원하는 대로 작동하지 않아.
아래 문제를 기준으로 원인을 찾아서 고쳐줘.

문제 상황:
[여기에 문제 설명]

원하는 결과:
[여기에 원하는 동작]

현재 코드:
[코드 붙여넣기]

화면 수정 요청 공식

현재 디자인에서 아래 부분만 수정해줘.

수정할 부분:
원하는 느낌:
유지할 부분:

모바일에서도 깨지지 않게 해줘.

기능 추가 요청 공식

현재 앱에 아래 기능을 추가해줘.

추가 기능:
사용자가 누를 버튼:
저장 여부:

기존 기능은 유지해줘.

코드 설명 요청 공식

이 코드를 초보자도 이해할 수 있게 설명해줘.
전체를 너무 길게 설명하지 말고,
화면 부분, 기능 부분, 저장 부분으로 나누어서 설명해줘.

테스트 요청 공식

이 앱을 배포하기 전에 테스트해야 할 항목을 체크리스트로 만들어줘.
특히 모바일 화면, 버튼 동작, 저장 기능, 오류 상황을 중심으로 점검해줘.

8부. 실습: 내 아이디어 구현하기

목표

참가자 각자가 만들고 싶은 것을 선정하고, AI와 대화해서 작은 앱으로 구현합니다.

가장 중요한 질문은 이것입니다.

"무엇을 만들고 싶은가?"보다 "어떤 문제를 해결하고 싶은가?"가 더 중요합니다.

아이디어 예시

• 가계부
• 식단 기록
• 운동 기록
• 글감 저장소
• 버킷리스트
• 강의 관리 시스템
• 고객 상담 기록

1단계. 아이디어 작게 줄이기

처음부터 큰 서비스를 만들려고 하면 어렵습니다.

먼저 1시간 안에 만들 수 있는 가장 작은 버전으로 줄입니다.

내가 만들고 싶은 서비스는 [서비스명]이야.
초보자가 1시간 안에 만들 수 있는 가장 작은 버전으로 줄여줘.
기능은 3개 이하로 제한해줘.

2단계. AI에게 요청하는 공식

너는 20년 경력의 서비스 기획자이자 개발자야.

내가 만들고 싶은 서비스는 다음과 같아.

[서비스 설명]

대상:
목적:
필요 기능:
원하는 디자인:

HTML/CSS/JavaScript 한 파일로 제작해줘.

3단계. 보완 최종 제작 프롬프트

조금 더 구체적으로 요청하고 싶다면 아래 형식을 사용합니다.

너는 20년 경력의 서비스 기획자이자 프론트엔드 개발자야.

내가 만들고 싶은 서비스는 다음과 같아.

서비스 설명:
사용 대상:
해결하고 싶은 문제:
꼭 필요한 기능 3가지:
원하는 디자인 분위기:
저장 기능 필요 여부:
모바일 사용 여부:

HTML/CSS/JavaScript 한 파일로 만들어줘.
코딩을 모르는 사람도 수정 요청하기 쉽게 코드 구조를 단순하게 만들어줘.

4단계. 완성 후 개선 요청

이 앱을 처음 사용하는 사람이 헷갈리지 않도록 화면 문구와 버튼 이름을 더 쉽게 바꿔줘.

모바일에서 사용하기 편하도록 버튼 크기와 간격을 조정해줘.

이 앱을 실제로 배포하기 전에 부족한 기능이나 위험한 부분이 있는지 알려줘.

발표 질문

수강생이 만든 앱을 짧게 공유할 때 아래 질문을 사용합니다.

• 어떤 문제를 해결하려고 만들었나요?
• 누가 사용하면 좋나요?
• 가장 마음에 드는 기능은 무엇인가요?
• 다음에 추가하고 싶은 기능은 무엇인가요?

9부. 마무리

오늘의 목표는 코딩 문법을 외우는 것이 아닙니다.

오늘의 목표는 이것입니다.

내가 원하는 것을 AI에게 설명해서
작동하는 프로그램으로 바꿔본 경험

처음부터 큰 서비스를 만들 필요는 없습니다.

작은 도구 하나를 만들고, 직접 써보고, 불편한 점을 다시 고치는 것부터 시작하면 됩니다.

바이브 코딩의 실력은 코드를 얼마나 아느냐보다, 문제를 얼마나 구체적으로 설명하고 결과를 얼마나 잘 개선하느냐에서 나옵니다.

문제를 해결하는 가치를 제공하고, 원하는 기회와 돈을 만드시길 응원합니다.

부록. 많이 쓰는 바이브 코딩 도구 소개

Google AI Studio

웹에서 바로 접속해서 Gemini 기반 앱 제작을 실험해볼 수 있는 도구입니다.

처음 바이브 코딩을 경험하는 사람에게 적합합니다.

Claude Code

코드 기반 프로젝트를 AI와 함께 만들고 수정할 때 많이 쓰는 도구입니다.

파일이 여러 개 있는 프로젝트나 실제 개발 환경에 가까운 작업에 적합합니다.

Claude Code 화면

Codex

프로젝트 파일을 읽고, 수정하고, 실행하며 작업을 도와주는 AI 코딩 도구입니다.

기존 코드 수정, 웹앱 제작, 문서 정리, 자동화 작업 등에 활용할 수 있습니다.

Codex 화면