🌱 레슨
바이브코딩이란? — 당신이 그 주인공
옛날엔 '언어'를 외웠어요. 이제는 원하는 걸 말로 시키면 AI가 만들어요. 당신은 코더가 아니라 디렉터예요.
① 오늘의 미션
오늘부터 우리가 할 일
당신은 이제 '우리동네 반찬가게' 사장님이에요. 온라인 가게를 0에서 만들어 갑니다.
오늘은 그 첫걸음 — 코드 한 줄 없이, 말로 가게 첫 페이지를 띄워볼 거예요.설명을 읽고, 오른쪽 터미널에서 직접 쳐보며 한 단계씩 나아가요. 손으로 해봐야 진짜 내 것이 됩니다.
설명을 따라 진행하면, 여기서 직접 쳐보게 돼요 👇
$ _
📚 「바이브코딩이란? — 당신이 그 주인공」 레슨 내용 전체 텍스트로 훑어보기
오늘부터 우리가 할 일
당신은 이제 '우리동네 반찬가게' 사장님이에요. 온라인 가게를 0에서 만들어 갑니다.
오늘은 그 첫걸음 — 코드 한 줄 없이, 말로 가게 첫 페이지를 띄워볼 거예요.설명을 읽고, 오른쪽 터미널에서 직접 쳐보며 한 단계씩 나아가요. 손으로 해봐야 진짜 내 것이 됩니다.
반찬가게 홈페이지를 만든다고 할 때, '바이브코딩'은 옛날 방식과 무엇이 가장 다를까요?
맞아요. 바이브코딩 = '이런 반찬가게 만들어줘'를 또렷이 전달하면 AI가 만든다. 당신의 역할이 타이피스트 → 사장님(디렉터)으로 바뀝니다. 👇
같은 '반찬가게 첫 페이지'를 만드는 두 방식이에요.
😓 전통 개발: HTML·CSS·JavaScript를 몇 달 배우고 → 상품 카드 하나하나 직접 타이핑 → 에러 디버깅…
가게 하나 열기도 벅차요.
가게 하나 열기도 벅차요.
✨ 바이브코딩: Claude에게 "인기 반찬 3개 보이는 첫 페이지 만들어줘" → 완성 → "장바구니 버튼도 넣어줘" → 수정.
코드 0줄, 사장님 의도만 전달.
코드 0줄, 사장님 의도만 전달.
이제 진짜 시작! 먼저 내 가게가 들어갈 폴더를 만들고 그 안으로 들어가요.
mkdir(폴더 만들기) + cd(그 안으로 이동)를 &&로 한 번에 실행해요.
mkdir my-shop && cd my-shop — 반찬가게 폴더를 만들고 그 안으로 들어가요좋아요! 빈 가게 터가 생겼어요. 이 폴더 안에 앞으로 모든 게 쌓입니다.
가게 터에서 Claude Code를 켜요. 이게 당신의 'AI 직원'이에요. 한 번 켜두면 계속 대화하며 일을 시킬 수 있어요.
claude — AI 직원(Claude Code)을 켜요이제 Claude에게 인기 반찬 3개 보이는 반찬가게 첫 페이지 만들어줘 라고 말하려고 해요.
무슨 일이 일어날까요?
맞아요. Claude Code는 한국어 의도를 알아듣고 진짜 파일(index.html)을 만들어요. 설명이 아니라 결과물이 나옵니다. 직접 시켜볼까요? 👇
Claude에게 그대로 말해보세요. 코드 0줄, 사장님 의도만 전달하면 돼요.
인기 반찬 3개 보이는 반찬가게 첫 페이지 만들어줘 — 원하는 걸 한국어로 말해요 (Claude와 대화)방금
index.html 이 진짜로 만들어졌어요. 더블클릭하면 브라우저에서 내 가게가 보여요!같은 요청도 구체적으로 말하면 결과가 좋아져요. 아래 빈칸에, 가격을 어떻게 보여달라고 할지 한 단어로 채워보세요.
좋아요! "굵게/크게/색을 넣어서"처럼 구체적으로 말할수록 한 번에 원하는 모습이 나와요. 막연한 "예쁘게"보다 훨씬 정확하죠.
이미 만든 페이지도 말로 고쳐요. 바이브코딩의 진짜 매력이에요 — 만들고, 보고, 고치고 반복.
각 반찬 카드에 장바구니 담기 버튼 넣어줘 — 장바구니 버튼을 추가해달라고 해요헤더 배경을 따뜻한 주황색으로 바꿔줘 — 가게 분위기도 바꿔봐요만들고 → 보고 → 말로 고치고. 이게 반복되는 게 바이브코딩이에요.
지금까지 한 걸 떠올리며, 바이브코딩 작업 순서를 맞춰보세요. (↑↓로 정렬)
정확해요! 폴더·Claude 준비 → 말로 요청 → 확인 → 수정. 이 한 바퀴를 돌리며 가게가 점점 완성돼요.
한 줄로
바이브코딩에서 중요한 건 코드 실력이 아니라, 만들고 싶은 걸 명확히 전달하는 능력이에요. 당신은 코더가 아니라 내 반찬가게 사장님입니다.다음 레슨에서
오늘 만든 첫 페이지를 이어서, LLM이 어떻게 내 말을 알아듣는지 그 원리를 들여다봐요. 가게는 계속 자랍니다. 🌱