📘 6차시: 세상 밖으로 꺼내기 (배포와 갤러리 워크)

기나긴 기획과 험난했던 디버깅의 시간이 끝났습니다. 이제 생명 없는 코드 덩어리가 살아 숨 쉬는 하나의 앱으로 눈을 뜨는, ’배포(Deployment)’의 순간입니다.

1. It’s Alive! 내 브라우저에 띄우기 (로컬 구동)

가장 먼저 내 컴퓨터 안에서 제대로 작동하는지 테스트해야 합니다. 에디터에서 모든 파일이 정상적으로 저장(Ctrl+S)되었는지 확인하고, 터미널로 돌아옵니다.

터미널에 마법의 구동 명령어를 입력합니다.

npm run dev

엔터를 치면 백그라운드에서 수만 개의 코드가 조립되기 시작합니다. 에러 없이 모든 것이 정상이라면, 초록색 글씨로 다음과 같은 문구가 터미널에 나타납니다.

ready - started server on http://localhost:3000

이것은 “당신의 컴퓨터를 임시 웹 서버로 켰고, 3000번 포트에서 앱이 돌고 있습니다”라는 뜻입니다.

🌐 브라우저 접속하기

크롬이나 엣지 등 인터넷 브라우저를 엽니다. 주소창에 네이버나 다음 대신 아래 주소를 직접 타이핑합니다.

localhost:3000

🎉 축하합니다! 선생님이 직접 만드신 Antigravity 기반의 영재 비서가 눈앞에 펼쳐졌습니다. 직접 채팅창에 말을 걸어보세요. “안녕, 넌 누구니?“라고 했을 때, 1차시에서 선생님이 부여했던 그 오만방자한 혹은 친절한 페르소나 그대로 답변한다면 개발은 100% 성공한 것입니다.

2. 퇴근 전 개발자의 의식: GitHub에 영구 백업하기

localhost는 말 그대로 내 컴퓨터(Local)입니다. 컴퓨터 전원을 끄거나 터미널 창을 꺼버리면 이 봇도 흔적 없이 사라집니다. 소스코드를 영원히 안전한 클라우드에 백업해야 합니다. 그 저장소가 바로 **GitHub(깃허브)**입니다.

🗄️ 2.1 로컬 서버 끄기

터미널 창을 클릭하고 키보드의 Ctrl + C (컨트롤 키와 C키를 동시 누름)를 두 번 누르세요. 서버가 종료되고 다시 명령어를 칠 수 있는 상태가 됩니다.

🗄️ 2.2 깃허브 푸시 3단 콤보 명령어

아래 명령어 세 줄은 개발자들이 퇴근하기 전 숨 쉬듯 치는 명령어입니다.

# 1단계: 변경된 모든 파일을 포장재에 담아라
git add .

# 2단계: 이 포장 박스에 이름표를 붙여라 (메모 작성)
git commit -m "나의 첫 번째 영재비서 완성!!"

# 3단계: 기본 나뭇가지(main)로 설정해라
git branch -M main

이후 브라우저에서 github.com에 로그인하여 **[New Repository]**를 클릭해 빈 창고를 하나 만듭니다. 화면에 나타나는 git remote add origin https://github.com/내아이디/내저장소.git 명령어를 복사해서 터미널에 붙여넣고, 마지막으로 **git push -u origin main**을 치면 클라우드 업로드가 끝납니다.

3. 세상을 향해 쏘다: Vercel(버셸) 1분 배포의 기적

코드는 클라우드(GitHub)에 안전하게 올라갔습니다. 하지만 여전히 내 노트북을 켜고 npm run dev를 쳐야만 앱을 쓸 수 있죠. “집에 있는 내 스마트폰으로도, 다른 학교에 있는 동료 교사도 내 앱에 접속하게 할 순 없나요?” 있습니다. **호스팅(Hosting)**을 하면 됩니다. 그리고 그 호스팅을 1분 만에 무료로 해주는 마법 같은 서비스가 Vercel입니다.

🚀 Vercel 배포 스텝 바이 스텝

이 과정은 다소 복잡하니 천천히 따라오세요.

브라우저를 열고 vercel.com 에 접속합니다.
우측 상단의 Sign Up(가입) 또는 Log In 버튼을 누르고, **반드시 “Continue with GitHub” (깃허브로 로그인)**을 선택합니다.
대시보드 우측 상단의 검은색 버튼 **[Add New…] -> [Project]**를 클릭합니다.
화면 좌측에 내가 방금 GitHub에 올렸던 저장소(예: my-agent) 목록이 뜹니다.
해당 저장소 우측에 있는 회색의 [Import] 버튼을 과감하게 누릅니다.
Configure Project라는 복잡한 창이 뜨지만 절대 아무것도 건드리지 마시고, 하단에 있는 파란색 [Deploy(배포)] 버튼을 누릅니다.
화면에 수많은 코드가 쏟아져 내리며 집을 짓기 시작합니다. 약 1~2분 정도 멍때리고 기다리세요.
갑자기 화면에 거대한 폭죽이 터지면서 **“Congratulations!”**라는 문구가 뜹니다.

🔗 나만의 고유한 URL 획득

축하 화면 가운데에 뜬 이미지를 클릭하거나 대시보드로 가보세요. https://my-agent-abc1234.vercel.app 과 같은 고유한 인터넷 주소(URL)가 부여된 것을 볼 수 있습니다. 이제 이 주소만 있으면 전 세계 어디서든, 스마트폰이든 아이패드든 상관없이 선생님의 비서 봇에 접속할 수 있습니다!

4. 갤러리 워크 (서로의 봇 감상하기)

연수 전면에 띄워둔 패들렛(Padlet) QR 코드를 스마트폰으로 찍거나 주소를 치고 접속해 주세요.

성공하신 분들: 방금 Vercel에서 받은 배포 주소를 패들렛에 올리고 자랑해 주세요.
로컬(localhost)에서 멈추신 분들: 아쉬워하지 마세요. 그것만으로도 기적입니다. 내 노트북 화면을 스마트폰으로 찰칵 찍어서 사진을 올려주세요.

이제 자리에서 일어나 다른 선생님들은 어떤 기발한 페르소나와 프롬프트를 만들었는지 구경하고, 내 스마트폰으로 남이 만든 봇에 접속해서 말을 걸어보세요.

🏆 마지막으로: 우리는 왜 오늘 코딩을 배웠는가?

6시간 동안 터미널을 열고, 에러와 싸우고, 배포를 하면서 속으로 이런 생각을 하셨을지 모릅니다. “내가 개발자 할 것도 아닌데 왜 이렇게까지 고생해야 하지?”

선생님, 우리가 오늘 6시간을 투자해 만든 이 ‘조잡해 보이는 봇’ 하나가, 내일부터 당장 선생님의 행정 업무 시간 1시간을, 수업 기획 시간 2시간을 줄여줄 것입니다. 영재교육의 본질은 완벽한 폰트로 작성된 공문서가 아닙니다. 영재 아이들이 던지는 호기심 어린 엉뚱한 질문에 눈을 맞추고 웃으며 대답해 주는 그 찰나의 ’소통의 시간’입니다.

오늘 여러분이 직접 코딩해서 탄생시킨 이 AI 비서는, 바로 그 **‘아이들과 눈 맞출 시간’**을 벌어주기 위한 가장 강력한 도구입니다. 이 기술이 선생님들의 교직 생활을, 나아가 대구 영재교육의 미래를 더욱 따뜻하게 만들어 주길 기원합니다.

긴 시간, 그 누구보다 뜨거운 열정으로 임해주신 대구 선생님들, 진심으로 감사하고 존경합니다! 수고하셨습니다!