스마택트바이브코딩 10회차 · 그림 사전게임으로 배우기 →
바이브코딩 그림 사전

모르는 말이 나와도,
손을 멈추지 마세요.

말은 외우지 않아도 돼요. 실제 수업 화면으로 찾고, 마을 지도로 기억하고, 그래도 모르면 목수(AI)에게 쉬운 말로 물어보면 돼요.

1세 가지 약속

처음 듣는 말이 나오면 이 세 가지만 기억하세요.

모르면 바로 목수에게 물어요

수업을 멈추지 말고, 이 한 줄을 복사해 ○○○ 자리만 바꿔 보내세요.

방금 나온 ○○○ 이 무슨 뜻이야? 우리 수업 마을 비유로 한 줄, 내가 할 일 한 줄로 알려 줘.

빨간 글자는 읽지 말고 복사해요

오류를 해석하는 건 목수 몫이에요. 통째로 복사해서 이 말과 함께 붙여 넣으세요.

이 빨간 글자가 나왔어. 무슨 일인지 쉬운 말로 한 줄, 내가 할 일을 알려 줘. 네가 고칠 수 있으면 고쳐 줘. (여기에 빨간 글자를 통째로 붙여 넣기)

모든 말을 알 필요는 없어요

화면의 말은 세 칸으로 나뉘어요. 꼭 알 말은 26개뿐이고, 나머지는 「아, 그거」거나 목수 몫이에요.

세 칸 보러 가기

2마을 지도 — 한 장으로 보는 10차시

수업에서 만나는 말은 모두 이 마을 어딘가에 살아요. 왼쪽 내 컴퓨터에서 만들고, 가운데 인터넷을 거쳐, 오른쪽 세상 사람들에게 보여 줘요. 그림을 누르면 설명으로 가요.

목수와주고받는 것 부탁 쪽지프롬프트「해도 될까요?」허락 창작업 계획표계획서빨간 쪽지오류 메시지 ① 내 컴퓨터 — 울타리 안2 ~ 4차시 · 나만 보여요 울타리작업 폴더목수안티그래비티작업대터미널 · 파워쉘 보일러개발 서버나만 보는 미리보기로컬호스트정해진 서랍public 폴더 세이브 포인트깃 · 커밋비밀의 방.env 파일금고에 안 넣는 짐.gitignore ② 인터넷4 ~ 6차시 · 금고와 자판기 인터넷 금고깃허브 · 저장소자판기버셀버셀의 비밀 칸환경 변수 ③ 세상 사람들5 ~ 9차시 · 누구나 봐요 가게 문 열기배포 · Ready이름표도메인 두 도서관서치 콘솔전화번호부디엔에스 손님 세는 기계구글 애널리틱스식당 주문에이피아이 푸시 Import 배포 열쇠

← 휴대폰에서는 지도를 옆으로 밀어 보세요 →

울타리에서 고치기→세이브 포인트 찍기(커밋)→금고에 올리기(푸시)→자판기가 저절로→Ready = 가게 문 열림

이 다섯 칸이 5차시의 「네 박자」예요. 10차시까지 계속 이 길을 돌아요.

3화면의 말은 세 칸이에요

처음 보는 말이 나오면 먼저 어느 칸인지만 보세요. 3번 칸이면 그냥 지나가면 돼요.

1꼭 알 말 26개 · 마을 말로 기억해요

작업 폴더안티그래비티프롬프트계획서허락 창터미널개발 서버로컬호스트public 폴더깃깃허브푸시버셀배포에이피아이API 키.env 파일.gitignore환경 변수재배포도메인디엔에스서치 콘솔사이트맵구글 애널리틱스오류 메시지

2「아, 그거」 보이면 알아보기만 해요

저장소 · 리포지토리 금고 속 내 칸 하나main 브랜치 세이브가 쌓이는 기본 줄기Import 버셀이 금고를 불러오기Deployments 버셀의 공개 기록 목록템플릿 똑같은 저장소를 찍어 내는 틀레코드 · A · CNAME 전화번호부의 한 줄메타 태그 화면엔 안 보이는 정보 한 줄robots.txt 검색 로봇에게 주는 안내판측정 ID 손님 세는 기계의 번호표반응형 휴대폰에서도 안 깨지게개발자 도구 (F12) 휴대폰 화면 미리 보기 등Node.js 보일러가 돌아가게 하는 연료README.md 금고 맨 앞 소개서AGENTS.md · CLAUDE.md 목수가 먼저 읽는 메모

3목수 몫 읽지 않아도 돼요

node_modules 폴더package.json · package-lock.jsontsconfig.jsoneslint.config.mjsnext.config.tspostcss.config.mjs8436d68 같은 커밋 번호npm install 때 쏟아지는 글자노란 warning 글자route.ts · page.tsx 속 코드import · exportTypeScript · Tailwind

화면에 이런 이름이 보여도 멈추지 마세요. 목수(AI)가 알아서 만들고 고치는 파일과 글자예요.

4꼭 알 말 26개

큰 글씨가 마을 말, 아래가 진짜 이름이에요. 수업에서는 마을 말로 먼저 떠올리고, 진짜 이름은 화면에서 알아보기만 하면 돼요.

2차시

울타리

작업 폴더 my-first-site

목수(AI)가 일해도 되는 범위. 이 폴더 밖은 건드리지 않아요. 이름은 영어 소문자와 - 로.

화면 보기화면 보기
2차시

목수

안티그래비티 Antigravity

한국어로 부탁하면 코드를 짜고 명령을 대신 실행해 주는 AI 작업 도구.

화면 보기화면 보기
1·2차시

부탁 쪽지

프롬프트 prompt

목수에게 보내는 한국어 부탁 글. 「무엇을, 어디만」 고칠지 분명할수록 딱 필요한 만큼 움직여요.

2차시

작업 계획표

계획서 Implementation Plan

목수가 일을 시작하기 전에 「이렇게 하겠습니다」 하고 내미는 계획. 훑어보고 「Proceed」.

화면 보기
2차시

「해도 될까요?」

허락 창 Allow …?

목수가 작업대에서 명령을 실행하기 전에 묻는 창. 보통 「Yes, allow this time」 → 「Submit」.

화면 보기
2차시

작업대

터미널 · 파워쉘 Terminal · PowerShell

명령이 실제로 실행되고 글자가 올라가는 까만 창. 우리는 직접 치지 않고 읽기만 해요.

2차시

보일러

개발 서버 npm run dev

만드는 동안 사이트를 내 컴퓨터에서 켜 두는 장치. 켜 두면 고칠 때마다 화면이 저절로 바뀌어요. 끌 때는 작업대에서 Ctrl + C.

화면 보기
2차시

나만 보는 미리보기

로컬호스트 localhost:3000

내 컴퓨터 안에서만 열리는 주소. 다른 사람은 못 봐요. 숫자(3000, 3001)는 바뀔 수 있어요.

화면 보기화면 보기
3차시

정해진 서랍

public 폴더 public

사진 같은 파일을 두는 서랍. 여기 넣어야 페이지에 뜨고, 파일 이름이 그대로 주소가 돼요.

4차시

세이브 포인트

깃 · 커밋 git · commit

지금 상태를 한 줄 메모와 함께 저장하는 일. 게임처럼 언제든 이 지점으로 돌아올 수 있어요.

화면 보기화면 보기
4차시

인터넷 금고

깃허브 · 저장소 GitHub · repository

세이브 포인트를 인터넷에 보관하는 곳. 저장소(리포지토리)는 금고 속 내 칸 하나.

화면 보기화면 보기
4차시

금고에 올리기

푸시 push

내 컴퓨터의 세이브 포인트를 깃허브 금고로 올리는 일. 커밋 → 푸시 순서.

화면 보기
5차시

자판기

버셀 Vercel

금고에 올리면 저절로 사이트를 인터넷에 공개해 주는 곳. 처음 한 번만 금고와 연결(Import).

화면 보기화면 보기
5차시

가게 문 열기

배포 · Ready Deploy · Ready

사이트를 누구나 보게 공개하는 일. Ready 가 떠야 끝, Error 면 옛 화면이 그대로.

화면 보기화면 보기
6차시

식당 주문

에이피아이 API

프로그램끼리 주문을 주고받는 창구. 내 사이트가 메일 회사·AI 회사에 「이것 좀 해 줘」 주문해요.

6차시

멤버십 카드

API 키 API key

주문할 자격을 보여 주는 열쇠. 남이 보면 내 이름으로 주문할 수 있으니 절대 공개 금지.

화면 보기
6차시

비밀의 방

.env 파일 닷 이엔브이

멤버십 카드 같은 비밀을 넣어 두는 파일. 금고(깃허브)에는 올라가지 않아요.

화면 보기
6차시

금고에 안 넣는 짐

.gitignore 깃 이그노어

깃이 못 본 척할 파일 목록. 여기에 .env 가 있어야 비밀이 안전해요.

화면 보기화면 보기
6차시

버셀의 비밀 칸

환경 변수 Environment Variables

공개된 사이트는 내 컴퓨터의 비밀의 방을 못 봐요. 그래서 버셀에 따로 이름과 값으로 적어 둬요.

화면 보기화면 보기
6차시

다시 문 열기

재배포 Redeploy

같은 코드를 다시 공개하기. 비밀 칸에 새 열쇠를 넣은 뒤에는 꼭 한 번.

화면 보기
7차시

이름표

도메인 domain

내 사이트 이름표. 예: kimsma.shop. vercel.app 주소는 셋방 주소, 도메인은 내 간판.

7차시

전화번호부

디엔에스 DNS

이름표와 숫자 주소를 잇는 전화번호부. 한 줄 한 줄을 레코드(A·CNAME)라고 해요.

8차시

사이트 지도

사이트맵 sitemap.xml

우리 사이트의 쪽 목록. 도서관(검색)에 내면 책장에 빨리 꽂혀요.

9차시

손님 세는 기계

구글 애널리틱스 GA4 · 측정 ID

방문자를 세고 기록하는 도구. 측정 ID(G-…)는 번호표라 공개돼도 괜찮아요.

모든 차시

빨간 쪽지

오류 메시지 Error

읽고 해석하려 하지 말고 통째로 복사해서 목수에게 「쉬운 말로 설명해 줘」.

화면 보기화면 보기

5이 화면이 나오면

모두 실제 수업 화면이에요. 빨간 네모만 보면 돼요. 사진을 누르면 크게 보여요.

2·3차시안티그래비티 — 목수의 작업장

4·5차시깃 · 깃허브 — 세이브 포인트와 인터넷 금고

5차시버셀 — 자판기와 가게 문 열기

6차시비밀 열쇠 — 멤버십 카드와 비밀의 방

6차시빨간 쪽지 — 오류가 났어요

6차시별 오늘의 3단어

한 번에 세 개만. 수업 시작 전에 오늘 차시 카드만 보고 들어오세요.

A4 PDF 받기
1차시

나의 문제에서 첫 기획까지

  1. 바이브코딩말로 부탁해서 만드는 코딩. 코드는 목수가 써요.
  2. 프롬프트목수에게 보내는 부탁 쪽지
  3. 에이전트부탁을 받아 직접 움직이는 AI = 목수
2차시

안티그래비티로 첫걸음

  1. 작업 폴더울타리. 목수가 일하는 범위
  2. 터미널작업대. 명령이 돌아가는 까만 창
  3. localhost나만 보는 미리보기 주소
3차시

내 페이지에 옷 입히기

  1. public 폴더사진을 두는 정해진 서랍
  2. 파일 확장명이름 끝 .jpg .png — 프롬프트와 똑같이
  3. 반응형휴대폰·PC 어디서나 안 깨지게
4차시

세이브 포인트 — 깃과 깃허브

  1. 커밋세이브 포인트 찍기
  2. 깃허브인터넷 금고
  3. 푸시금고에 올리기
5차시

한 사이클 천천히

  1. 버셀자판기. 올리면 저절로 공개
  2. 배포가게 문 열기
  3. Ready「문 열었습니다」 표시
6차시

API와 비밀의 방

  1. API 키멤버십 카드. 절대 공개 금지
  2. .env비밀의 방
  3. 환경 변수버셀의 비밀 칸 + Redeploy
7차시

도메인 붙이기

  1. 도메인내 사이트 이름표
  2. DNS이름표와 숫자 주소를 잇는 전화번호부
  3. 레코드전화번호부의 한 줄(A · CNAME)
8차시

검색 등록과 공유

  1. 서치 콘솔구글·네이버 두 도서관에 등록
  2. sitemap.xml사이트 지도
  3. 미리보기 카드카톡에 뜨는 제목·그림(og)
9차시

구글 애널리틱스

  1. 애널리틱스손님 세는 기계
  2. 측정 IDG- 로 시작하는 번호표. 공개 OK
  3. 실시간 보고서지난 30분 손님 수
10차시

갤러리 워크 · 마무리

  1. 네 박자고치기 → 커밋 → 푸시 → Ready
  2. README금고 맨 앞의 사이트 소개서
  3. 열쇠 지키기수업 끝나면 키 정리·로그아웃

7화면 퀴즈 — 2분

다시 읽기보다 떠올려 보기가 오래 남아요. 수업 시작 전에 한 번씩 풀어 보세요.

퀴즈 화면

8이렇게 공부하면 빨리 익숙해져요

말을 외우는 공부가 아니라, 화면을 알아보는 공부예요.

  1. 화면부터 찾아요

    낯선 화면이 나오면 「이 화면이 나오면」에서 같은 화면을 찾아요. 빨간 네모만 따라 누르면 돼요.

    그림과 말을 함께 보면 더 오래 남아요

  2. 하루 3단어만

    오늘 차시 카드 세 개만 봐요. 나머지는 「아, 그거」 칸에 맡겨 두세요.

    한꺼번에 많이 넣으면 다 흘러나가요

  3. 지도에 손가락으로 짚어요

    수업 끝에 오늘 한 일을 지도에서 짚으며 말해 보세요. 「울타리에서 고치고, 세이브 찍고, 금고에 올렸어요.」

    이야기 한 줄로 이으면 순서가 기억나요

  4. 다음 시간 전에 퀴즈 2분

    지난 시간 화면을 떠올려 맞혀 봐요. 틀려도 괜찮아요. 틀린 문제가 가장 오래 남아요.

    다시 읽기보다 꺼내 보기가 효과가 커요

  5. 짝에게 30초 설명

    「커밋이 뭐예요?」를 짝에게 마을 말로 설명해 보세요. 설명이 막히는 곳이 내가 아직 모르는 곳이에요.

    가르쳐 보면 내가 아는 게 확실해져요

  6. 목수가 쉬운 말로 말하게

    아래 「쉬운 말 규칙」을 한 번 넣어 두면 목수가 처음부터 쉬운 말과 마을 비유로 대답해요.

    모르는 말이 애초에 덜 나와요

9쉬운 말 규칙 넣기 — 한 번이면 끝

목수(안티그래비티)에게 「어려운 말엔 괄호로 쉬운 말을 붙이고, 우리 수업 비유로 말해 줘」라는 규칙을 넣어요. 한 번 넣으면 모든 대화에 적용돼요.

  1. 에이전트 칸 위 「…」 → 「Customization」
    에이전트 칸 위 「…」 → 「Customization」오른쪽 에이전트 칸 맨 위의 점 세 개를 누르면 메뉴가 나와요.
  2. 「Rules」 탭에서 「+ Global」
    「Rules」 탭에서 「+ Global」Global = 모든 폴더에 적용. 이 폴더에만 쓰려면 「+ Workspace」.
  3. 열린 GEMINI.md 에 규칙 붙여 넣기
    열린 GEMINI.md 에 규칙 붙여 넣기아래 「규칙 복사」 단추를 누르고, 열린 칸을 한 번 눌러 Ctrl + V.
  4. Ctrl + S 로 저장
    Ctrl + S 로 저장오른쪽 목록에 「# 쉬운 말 규칙 … Global」이 생기면 끝이에요.
쉬운 말 규칙안티그래비티 · 클로드 · 코덱스 어디에 넣어도 돼요 파일로 받기
# 쉬운 말 규칙

나는 코딩을 처음 배우는 사람이다. 대답할 때 아래 여덟 가지를 꼭 지켜 줘.

1. 어려운 말을 처음 쓸 때는 바로 뒤 괄호에 쉬운 말을 붙인다.
   예: 커밋(세이브 포인트 찍기), 푸시(인터넷 금고에 올리기), 배포(인터넷에 공개하기)
2. 내가 할 일은 번호를 매겨 한 번에 세 개까지만 말한다.
3. 내가 눌러야 할 단추는 화면에 보이는 글자 그대로 「 」 안에 적는다.
   예: 「Yes, allow this time」 누르기
4. 오류가 나면 먼저 「무슨 일인지」를 한 줄로, 그다음 「내가 할 일」을 적는다. 네가 고칠 수 있으면 네가 고친다.
5. 명령어는 내가 직접 치지 않아도 되게 네가 실행한다. 실행하기 전에 무엇을 하는 명령인지 한 줄로 알려 준다.
6. 일이 끝나면 「지금 상태」를 한 줄로 알려 준다.
   예: 사이트가 켜져 있어요. localhost:3000 을 열어 보세요.
7. 비유는 우리 수업의 마을 비유로 맞춘다.
   안티그래비티=목수, 터미널=작업대, 작업 폴더=울타리, 개발 서버=보일러, localhost=나만 보는 미리보기,
   커밋=세이브 포인트, 깃허브=인터넷 금고, 버셀=자판기, API=식당 주문, API 키=멤버십 카드,
   .env=비밀의 방, .gitignore=금고에 안 넣는 짐, 도메인=이름표, DNS=전화번호부,
   서치 콘솔=도서관 등록, 애널리틱스=손님 세는 기계
8. 대답은 한국어로 한다.
규칙을 넣은 뒤 목수의 대답

넣고 나면 이렇게 대답해요

같은 질문(「nothing to commit 이 무슨 뜻이야?」)에 목수가 커밋(세이브 포인트 찍기), 울타리(작업 폴더), 푸시(인터넷 금고에 올리기)처럼 수업 비유를 붙여 대답하고, 끝에 「지금 상태」를 한 줄로 알려 줬어요.

실제로 넣고 물어본 화면이에요(2026-10-14, Gemini 3.8 Flash). 교육장 컴퓨터는 수업 뒤 지워질 수 있으니 집 컴퓨터에도 한 번 넣어 두세요.