바이브코딩으로
웹서비스 만들기
코드를 쓰는 게 아니라, “이런 거 만들어줘”라고 말하면 됩니다.
오늘 수업이 끝나면 여러분만의 첫 웹페이지가 완성됩니다.
조진영
스마택트 대표 · 바이브코딩으로 smartact.kr 직접 기획·개발·운영
이 페이지는 ③ 기획수업 1차시 체험 실습입니다
준비 → 예제 → 기획 → API → 실전 → 배포. 여섯 단계로 웹앱을 만들고 운영하기까지. · 28~38차시 (통합 수강 시)
오늘의 목표
바이브코딩(Vibe Coding)이란? 코드를 직접 쓰는 대신, AI에게 “이런 느낌으로 만들어줘”라고 말해서 프로그래밍하는 방식입니다. 테슬라 AI 전 총괄 Andrej Karpathy가 만든 용어로,“가장 핫한 프로그래밍 언어는 영어(한국어!)”라는 의미입니다.
| 전통 코딩 | 바이브코딩 |
|---|---|
| 문법을 외운다 | 하고 싶은 말을 한다 |
| 에러를 직접 고친다 | AI에게 에러를 보여준다 |
| 구글링으로 해결 | AI와 대화로 해결 |
| 수개월 학습 필요 | 아이디어만 있으면 OK |
10회차 커리큘럼
※ DCE = 디지털 시민성 교육(Digital Citizenship Education) 포인트. 매 차시 말미 5~10분 명시적 토론.
바이브코딩 핵심 원칙
Google AI Studio 실습 흐름
aistudio.google.com 접속 후 Google 계정 로그인
아래 실습 워크시트에서 정보 입력 → 프롬프트 자동 완성
"복사하기" 버튼 클릭 → AI Studio 채팅에 붙여넣기
AI가 만든 코드를 메모장에 붙여넣기 → .html로 저장
저장한 파일을 브라우저에서 열어 결과 확인
수정이 필요하면 AI에게 다시 요청 → 반복
실습 워크시트
입력 칸을 채우면 프롬프트가 자동 완성됩니다. 복사해서 Google AI Studio에 붙여넣으세요.
나의 정보 입력하기
입력하면 아래 프롬프트가 자동으로 완성됩니다.
나는 웹서비스를 만들고 싶은 초보 개발자입니다.
아래 아이디어를 웹서비스로 기획해주세요.
[나의 아이디어]
- 서비스 이름 (가칭): {{서비스이름}}
- 어떤 문제를 해결하나: {{해결할문제}}
- 주요 사용자: {{대상사용자}}
- 핵심 기능 (하고 싶은 것): {{핵심기능}}
[요청]
1. 이 서비스의 핵심 가치를 한 문장으로 정리해주세요
2. 필요한 페이지 목록을 만들어주세요 (메인, 상세, 마이페이지 등)
3. 각 페이지에 들어갈 핵심 요소를 정리해주세요
4. MVP(최소기능제품)로 먼저 만들 것과 나중에 추가할 것을 구분해주세요
5. 비슷한 서비스 레퍼런스 3개를 알려주세요
표로 정리해주세요.* 위 입력 칸을 채우면 {{변수}} 부분이 자동으로 바뀝니다 (0/4 입력됨)
완벽한 아이디어가 아니어도 괜찮습니다. 대충 써도 AI가 정리해줍니다!