First Vibe

바이브코딩 첫 실습

AI 도구를 한 번도 써 본 적이 없어도 됩니다. 폴더 만들기 → 회의록 양식 → CSV 현황 → 기록 도구 → 미니 대시보드를 10개 장으로 나눠, 각 장의 카드를 그대로 복붙하면 오늘 당장 쓰는 도구가 됩니다. 총 약 183분 분량. 기준 2026-08.

시작 전 약속

외울 필요 없습니다. 각 장의 에이전트에게 복붙 카드를 복사해 붙이고, 결과가 나오면 지금 하기를 직접 확인한 뒤 다음 장으로 가세요. 옆 사람과 코드가 달라도 결과가 같으면 정상입니다.

작업폴더에는 실제 기업 자료나 개인정보를 두지 마세요 — 에이전트는 폴더 전체를 읽습니다. 연습은 가상 데이터로 합니다.

폴더회의록CSV 현황기록 도구대시보드내 업무로

1약 8분입문
바이브코딩, 완전 처음
바이브코딩이 무엇인지, 챗봇과 에이전트가 어떻게 다른지, No-code와 무엇이 다른지. 개념만 읽어도 되는 장.
· 바이브코딩을 한 문장으로 설명하기
· 챗봇과 에이전트의 차이 말하기
시작
2약 10분입문
시작 준비 — 도구와 작업폴더
어떤 도구를 골라야 하는지(결제·설치 권한 기준), 왜 작업폴더가 필요한지, 첫 파일로 세팅을 확인하는 법.
· 내 상황에 맞는 도구 고르기
· 작업폴더를 만들고 첫 파일로 세팅 확인하기
시작
3약 10분입문
요청 5칸 — 잘 시키는 공식
무엇을·어떤 파일로·어디에 저장·어떤 형식·제약 — 다섯 칸만 채우면 에이전트가 헤매지 않습니다. 실패하는 요청과 되는 요청.
· 다섯 칸으로 요청문 작성하기
· 챗봇식 요청과 에이전트식 요청 구분하기
시작
4약 20분입문
실습 1 · 회의록 양식 만들기
회의록_양식.html을 만들고 항목을 추가해 고치고, 상담기록·점검일지 양식까지 한 요청으로 만듭니다. HTML이 왜 좋은지도 배웁니다.
· 더블클릭하면 열리는 HTML 문서 만들기
· 파일명을 지목해 기존 파일 고치기
시작
5약 20분입문
실습 2 · 파일 불러와 현황 보기
CSV 파일명만 말해 전체 건수·항목별 집계를 시키고, 결과와 계산 과정을 파일로 남깁니다. 에이전트가 지어내는 답을 걸러내는 검증 3단계.
· 파일명만으로 CSV 집계 시키기
· 150행을 전부 다뤘는지 확인하기
시작
6약 30분입문
실습 3 · 나만의 기록 도구
상담기록 도구를 HTML 파일 하나로 만듭니다. 카드 3장(뼈대→화면 다듬기→기능 추가)을 순서대로내면 완성됩니다. 다른 업무로 바꾸는 법까지.
· 브라우저에 저장되는 기록 도구 만들기
· 선택지 항목을 정확한 값으로 맞추기
시작
7약 30분입문
실습 4 · 데이터 붙이기 (표·검색·그래프)
방금 만든 도구에 CSV 불러오기·전체 검색·막대그래프를 붙입니다. 빈 칸 처리와 '값이 너무 많은 열' 처리가 핵심입니다.
· CSV 파일을 브라우저에서 표로 불러오기
· 전 열 대상 즉시 검색 붙이기
시작
8약 30분입문
실습 5 · 간단한 대시보드
요약 카드(전체 건수·합격률·최다 항목·최근 일자)를 위쪽에 배치하고, 보고서 문장 자동 생성과 인쇄까지 붙입니다. '분모'의 함정도 배웁니다.
· CSV를 불러오면 자동으로 채워지는 요약 카드 만들기
· 빈 칸이 있는 데이터의 분모 처리하기
시작
9약 15분입문
실습 6 · 내 업무로 바꾸기
상담기록 카드를 안전점검일지로 바꿔 봅니다. 어떤 데이터로 칸만 바꾸는 것과 보존 지시가 핵심이고, 파일 백업과 안전도 짚습니다.
· 기존 카드로 다른 업무 도구 만들기
· 기존 파일 보존 지시하기
시작
10약 10분입문
마무리 · 혼자 이어가기
첫 주에 해 볼 일, 막혔을 때 절차, 한도 관리까지 정리합니다. 이 코스를 끝내면 루프공방의 다른 길로 이어집니다.
· 첫 주 실천 계획 세우기
· 막혔을 때 도움 청하기 (막힌 부분 그대로 말하기)
시작

다음 코스: 비전공 완전 입문(웹앱 배포까지) · 개발 지식 지도 · 막히면 챌린지에 올리기