14개 정거장을 따라가면 수업에 나오는 말이 저절로 손에 익어요. 실제 수업 화면에서 직접 눌러 보고, 단어 카드를 뒤집어 여권에 도장을 모으세요.
여행 시작 →
나사이트를 만들고 싶은데… 코드는 하나도 몰라요.
목수괜찮아요! 저는 목수예요. 한국어로 부탁 쪽지(프롬프트)만 주시면 제가 지을게요.
나말로 부탁해서 만든다고요?
목수네, 그걸 바이브코딩이라고 해요. 저는 안티그래비티라는 작업장에 살아요.
목수어디서 일할까요? 일할 곳을 울타리로 정해 주세요.
나바탕화면에 my-first-site 폴더를 만들었어요.
목수좋아요. 이 울타리(작업 폴더) 안에서만 일할게요. 밖은 절대 안 건드려요!
안티그래비티를 처음 켰어요. 일할 울타리(폴더)를 고르려면 어디를 누를까요?
「Open Folder」로 바탕화면의 my-first-site 폴더를 골라요.
내가 만든 폴더예요. 이 폴더를 믿는다고 답해 주세요.
「Yes, I trust the authors」 = 이 울타리 안에서 일해도 좋아요.
나첫 페이지를 만들어 줘.
목수먼저 작업 계획표를 보여 드릴게요. 괜찮으면 「Proceed」!
목수명령을 실행할 땐 꼭 여쭤볼게요. 「해도 될까요?」 창이 뜨면 「Yes, allow this time」 → 「Submit」.
새 부탁을 하기 전에 새 대화를 열어요. 어디를 누를까요?
오른쪽 위 「+」 = 새 대화. 지난 이야기와 섞이지 않아요.
목수가 작업 계획표를 내밀었어요. 읽어 보고 「좋아요, 진행해요」를 눌러 주세요.
오른쪽 위 파란 「Proceed」 = 계획대로 진행.
목수가 「이 명령 실행해도 될까요?」 하고 물어요. 이번만 허락하려면?
「Yes, allow this time」 = 이번 한 번만 허락. 그다음 「Submit」.
「Yes, allow this time」을 골랐어요. 이제 어디를 눌러야 대답이 전달될까요?
고른 다음 「Submit」을 눌러야 목수가 일을 다시 시작해요.
목수가 파일 4개를 고쳤어요. 고친 걸 모두 받아들이려면?
「Accept all」 = 끝난 공사 확인 도장.
목수까만 창은 제 작업대(터미널)예요. 글자는 제가 칠게요. 읽기만 하세요.
나사이트를 켜 줘!
목수보일러(개발 서버)를 켰어요. localhost 주소로 열면 나만 보는 미리보기!
보일러 켜기: 「사이트를 켜줘」라고만 부탁하면 돼요.
목수가 작업대에서 npm run dev 를 대신 실행해요.
「Allow starting dev server…?」 보일러를 켜도 되냐고 물어요. 이번만 허락하려면?
「Yes, allow this time」 → 「Submit」. 보일러(개발 서버)가 켜져요.
보일러가 켜졌어요. 나만 보는 미리보기 주소를 눌러 열어 보세요.
localhost 주소는 내 컴퓨터 안에서만 열려요.
localhost 에서 처음 열린 내 페이지!
아직은 나만 보여요. 세상에 여는 건 5차시 자판기에서.
나제 사진도 넣고 싶어요.
목수사진은 정해진 서랍(public 폴더)에 넣어 주세요. 이름은 영어로 짧게!
사진 이름이 Gemini_Generated_Image… 처럼 길어요. 짧은 영어 이름으로 바꾸려면 오른쪽 클릭 메뉴에서?
「이름 바꾸기」 → my-photo.png 처럼 영어 소문자로. 프롬프트에도 똑같은 이름을 적어요.
사진을 정해진 서랍(public 폴더)에 넣는 장면이에요.
public 에 넣은 파일만 페이지에 뜰 수 있어요.
서랍에 넣은 사진이 내 페이지에 떴어요!
목수에게 「public 의 my-photo.png 를 제목 아래 넣어줘」라고 부탁했어요.
목수잘 됐을 때마다 깃발을 꽂아 둬요. 이게 세이브 포인트(커밋)예요.
나게임처럼 언제든 돌아올 수 있는 거네요!
git status 를 했더니 이렇게 나왔어요. 무슨 뜻일까요?
nothing to commit = 새로 찍을 세이브 포인트가 없어요. 정상!
「Allow committing changes?」 세이브 포인트를 찍어도 되냐고 물어요. 이번만 허락!
커밋 = 세이브 포인트 찍기. 허락하면 지금 상태가 저장돼요.
깃허브의 Commits 화면 — 내가 찍은 세이브 포인트 앨범이에요.
한 줄이 세이브 하나. 맨 위가 가장 최근.
목수컴퓨터가 고장 나도 괜찮게, 세이브를 인터넷 금고(깃허브)에 올려요.
나올리는 걸 푸시라고 하죠?
목수맞아요! 커밋 → 푸시. 찍고, 올리고.
인터넷 금고에 빈 칸을 만들어요. 이름을 적었으면 무엇을 누를까요?
「Create repository」 = 금고 칸 만들기 끝.
「Allow pushing commit to GitHub?」 금고에 올려도 되냐고 물어요.
푸시 = 세이브 포인트를 인터넷 금고에 올리기.
금고(깃허브)에 올라간 파일 목록이에요. 여기에 없어야 정상인 파일은?
.env(비밀의 방)는 금고에 올라가면 안 돼요. 목록에 없으니 안전!
목수자판기(버셀)를 금고에 한 번만 이어 두면, 금고에 올릴 때마다 저절로 가게 문이 열려요(배포).
나맨 위 줄에 Ready 가 뜨면 끝!
자판기(버셀)에 가입해요. 금고와 바로 이어지는 방법은?
「Continue with GitHub」. 깃허브로 가입해야 금고와 연결돼요.
금고 속 my-first-site 를 자판기에 넣으려면?
「Import」 = 금고를 자판기에 연결.
Congratulations! 가게 문이 열렸어요.
누구나 볼 수 있는 vercel.app 주소가 생겼어요.
푸시할 때마다 자판기가 새 줄을 만들어요.
맨 위가 최신. 이름이 내 커밋 메모와 같아요.
공개가 끝났는지 어디를 보면 될까요? 맨 위 줄의 표시를 눌러 보세요.
Ready = 「문 열었습니다」. Error 면 옛 화면이 그대로.
나손님이 남긴 글을 메일로 받고 싶어요.
목수메일은 이웃 식당(리센드)에 주문해요. 주문 창구가 API, 주문 자격이 멤버십 카드(API 키)예요.
메일을 대신 부쳐 주는 식당(리센드)에 왔어요. 가입하려면?
「Get Started」로 가입해요.
멤버십 카드(API 키)를 만드는 메뉴는 어디에 있을까요?
왼쪽 메뉴 「API Keys」.
새 멤버십 카드를 만들어요.
「Create API key」. 카드 번호는 딱 한 번만 보여요!
카드 권한을 골라요. 메일 「보내기만」 되는 카드로 하려면 어느 줄을 고를까요?
Permission 에서 「Sending access」 = 메일 보내기만 되는 카드.
목수멤버십 카드는 남이 보면 큰일! 비밀의 방(.env)에 넣어요.
목수그 전에 금고에 안 넣는 짐 목록(.gitignore)에 .env 가 있는지 먼저 확인!
비밀을 넣기 전에 「금고에 안 넣는 짐 목록」부터 열어요. 어느 파일일까요?
.gitignore = 깃이 못 본 척할 목록.
목록 안에서 비밀의 방(.env)을 숨기는 줄을 찾아 눌러 보세요.
.env* 줄이 있으면 통과!
비밀의 방(.env 파일)을 새로 만들어요. 새 파일 아이콘은?
탐색기 위 「새 파일」 아이콘 → 이름에 .env
.env 만 회색이에요. 무슨 뜻일까요?
회색 = 깃이 못 본 척하는 파일. 비밀의 방 문이 잘 잠겨 있어요.
나내 컴퓨터에선 되는데 공개 주소에선 안 돼요…
목수자판기는 비밀의 방을 못 봐요. 버셀의 비밀 칸(환경 변수)에 따로 넣고, 다시 문 열기(Redeploy)!
자판기의 비밀 칸을 열어요. 왼쪽 메뉴 어디일까요?
「Environment Variables」 = 버셀의 비밀 칸.
비밀 칸에 새 열쇠를 넣으려면?
「Add Environment Variable」.
이름과 값을 넣었어요. 저장하려면?
오른쪽 아래 「Save」.
저장했더니 파란 알림이 떴어요. 새 열쇠를 적용하려면?
「Redeploy」 = 가게 문 다시 열기. 이걸 안 하면 적용이 안 돼요!
한 번 더 확인해요. 다시 문을 열려면?
창 안의 「Redeploy」를 한 번 더.
목수빨간 쪽지 괴물이 나타났어요! 겁먹지 마세요.
목수읽고 해석하지 말고, 통째로 복사해서 저한테 주세요. 같이 물리쳐요!
내 컴퓨터에선 되는데 공개 주소에서만 이 빨간 글이 떠요!
공개된 사이트는 내 컴퓨터의 비밀의 방을 못 봐요. 버셀 비밀 칸에 열쇠 + Redeploy!
친구 메일로 보내기를 눌렀더니 이 쪽지가 떴어요!
리센드 연습 카드는 가입한 내 메일로만 보낼 수 있어요. 받는 메일을 내 메일로!
고친 뒤 공개 주소에서 다시 보내기 → 「보냈어요!」
보스 처치! 빨간 쪽지는 복사해서 목수에게 주면 대부분 풀려요.
나주소가 너무 길어요. 내 이름으로 된 간판을 달고 싶어요.
목수이름표(도메인)를 사서 달아요. 전화번호부(DNS)에 한 줄(레코드)을 적어야 손님이 찾아와요.
이름표(도메인)를 사기 전에 그 이름이 비어 있는지 찾아봐요. 어디에 적을까요?
검색 칸에 원하는 이름을 적고 「검색」. 이름이 비어 있으면 「선택」 단추가 보여요.
kimsmashop.shop 이 2,200원이래요! 사기 전에 꼭 함께 볼 값은?
EVENT 값은 보통 첫해만이에요. 줄 그은 원래 값처럼 다음 해 갱신 값이 훨씬 비쌀 수 있으니 같이 봐요.
목수검색에 나오려면 구글·네이버 두 도서관에 등록해요.
목수사이트 지도(sitemap.xml)도 내면 책장에 빨리 꽂혀요.
구글 도서관(서치 콘솔)에 내 사이트 등록을 시작하려면?
「시작하기」 → 오른쪽 「URL 접두어」 칸에 내 주소. 소유 확인 = 확인표 붙이기.
네이버 도서관(서치어드바이저)에서 내 사이트를 등록하는 곳은?
「웹마스터 도구」에서 사이트를 등록하고 사이트 지도(sitemap.xml)를 내요.
나오늘 손님이 몇 명 왔을까?
목수문 옆에 손님 세는 기계(애널리틱스)를 달았어요. 축하해요, 가게 주인님!
손님 세는 기계(구글 애널리틱스)를 달기 시작하려면?
「지금 시작하세요」 → 계정·속성 만들기 → G- 로 시작하는 측정 ID(번호표)를 받아 목수에게 「달아 줘」.
카드를 뒤집을 때마다 도장이 찍혀요. 빈 칸은 그 정거장으로 돌아가 채워 보세요.
이 여행자는 목수와 함께 14개 정거장을 지나
내 가게를 열었습니다.