바이브코딩으로 만드는 역사수업 웹앱

1. 미리보기에서 끝까지 풀기정답과 오답을 하나씩 고르고, 마지막 점수와 다시 풀기 버튼을 확인하세요.
2. 코드 창에서 게시 메뉴 찾기오른쪽 위 게시(Publish) 또는 웹사이트 게시를 선택하세요. 편집 화면을 다른 사람과 공유하는 버튼과 구분합니다.
3. 사이트 주소와 제목 확인하기현재 계정에서 제공되는 무료 주소를 선택하세요. 유료 도메인 구매나 업그레이드를 진행할 필요는 없습니다.
4. 게시하고 주소 복사하기게시가 끝난 뒤 표시되는 라이브 주소를 복사하세요. ‘디자인에 사용’만 보이면 웹사이트 형식을 선택한 뒤 게시합니다.
5. 다른 기기에서 열기휴대폰이나 시크릿 창에 주소를 붙여 넣어 퀴즈가 열리는지 확인하세요. 편집 권한을 요청하는 화면이라면 게시 주소를 다시 복사합니다.
6. 8쪽에 작품 주소 넣기아래 ‘내 작품 카드 만들기’로 이동해 게시한 주소를 넣으세요. 나중에 수정하면 원래 코드 대화에서 같은 사이트를 다시 게시합니다.

1. Canvas에서 앱 실행 확인하기미리보기에서 문제를 끝까지 풀어 보세요. 문서나 코드 설명만 나온다면 “버튼을 눌러 실행하는 웹앱으로 만들어 주세요”라고 요청합니다.
2. 공유 메뉴 열기Canvas 오른쪽 위 공유 및 내보내기 → 공유를 누르고, 앱 정보와 공유 대상을 확인하세요.
3. 링크를 복사하고 다른 기기에서 확인하기공유 링크를 열어 보고 로그인이나 권한 요청 여부를 확인하세요. 학교 계정은 관리자의 공유 정책이 적용됩니다.
4. 용도에 맞는 주소 선택하기Gemini 안에서 쓰는 공유 링크면 충분하다면 8쪽에 붙여 넣으세요. 로그인 없이 열리는 독립 웹사이트가 필요하거나 공개 공유가 제한되면 아래 HTML 파일로 배포 방법을 확인하세요. 학교의 공유 정책은 따라야 합니다.

1. index.html 파일 준비하기Gemini에는 “CSS와 JavaScript를 포함한 index.html 전체 코드를 제공해 주세요”라고 요청하세요. 코드 보기에서 복사해 저장하거나, HTML 다운로드가 제공되면 파일을 받습니다. Codex·Claude Code는 작업 폴더의 index.html을 사용합니다.
2. Netlify Drop 열기바탕화면에 my-class-app 폴더를 만들고 index.html을 넣으세요. 파일을 두 번 눌러 실행되는지 먼저 확인한 뒤, 아래 Netlify Drop 링크를 엽니다.
3. 구글 계정으로 먼저 로그인하기계정에 로그인하고 사용할 팀을 확인하세요. 무료 한도 안에서 진행하고, 유료 결제 화면이 나오면 강사에게 알려 주세요.
4. index.html이 든 폴더 올리기점선 영역에 my-class-app 폴더를 끌어다 놓습니다. 압축 파일은 먼저 풀고, 폴더를 열었을 때 index.html이 바로 보이도록 합니다.
5. 주소 복사하기배포가 끝난 뒤 표시되는 https://…netlify.app 주소를 복사합니다. 다른 기기에서 주소를 열어 퀴즈가 실행되는지 확인하세요.
6. 8쪽 링크 칸에 붙여 넣기다음 쪽에서 작품 카드를 만들어요.

동쌤의 웹앱들도 이 방법으로 올렸어요. 주소가 내가 정한 이름.web.app으로 깔끔하고, 나중에 학생 답을 실시간으로 모으는 데이터베이스(Firestore)도 같은 곳에 붙일 수 있어요. 첫 실습은 정적 웹페이지만 올립니다. Firebase의 무료 요금제(Spark) 한도 안에서 진행하고, 결제가 필요한 기능은 추가하지 않습니다.

아래는 직접 진행할 때의 순서입니다. AI와 진행하더라도 로그인 계정, 프로젝트 ID, index.html 위치를 함께 확인하세요.

1. Node.js 설치하기nodejs.org에서 LTS 버전을 내려받아 설치 안내를 따라 진행하세요. 학교 PC에서 설치가 막히면 강사에게 알리고 HTML 파일 배포 방법을 선택할 수 있습니다.
2. 명령 창 열기윈도는 시작 버튼을 누르고 cmd를 쳐서 「명령 프롬프트」를 열어요. PowerShell을 사용해도 됩니다. 다만 설치 안내가 PowerShell용인지 명령 프롬프트용인지 구분하세요. 맥은 「터미널」을 열어요.
3. Firebase 도구 설치하기아래 줄을 복사해서 명령 창에 붙여 넣고 Enter를 눌러요. 1~2분쯤 걸려요.

   npm install -g firebase-tools복사

   설치 권한 오류가 나면 오류 문구를 복사해 강사나 사용 중인 코딩 도구에 보여 주세요. 설정을 임의로 바꾸기보다 HTML 파일 배포 방법으로 실습을 이어가도 됩니다.
4. 구글 계정으로 로그인하기브라우저가 열리면 내 구글 계정을 고르고 [허용]을 눌러요. 권한 요청과 질문의 내용을 읽고 진행하세요. 웹앱을 올릴 프로젝트가 있는 계정으로 로그인해야 합니다.

   firebase login복사

1. Firebase 프로젝트 만들기Firebase 콘솔에서 [프로젝트 만들기]를 누르고 이름을 정해요. 첫 실습에서는 이름을 영어 소문자, 숫자, 하이픈(-)으로 정하면 프로젝트 ID를 확인하기 편합니다(예: imjin-escape-2026). 화면에 표시된 프로젝트 ID를 확인하세요. 입력한 이름과 달리 숫자 등이 붙을 수 있으며 기본 사이트 주소는 프로젝트 ID를 사용합니다. Gemini와 애널리틱스는 꺼도 괜찮아요.
2. 작업 폴더에서 명령 창 열기6쪽에서 index.html을 만든 my-class-app 폴더를 열어요. 그 폴더를 열어 둔 채로 위쪽 주소창에 cmd라고 쓰고 Enter를 누르면, 그 폴더에서 명령 창이 열려요. Mac에서는 터미널에 cd 를 입력한 뒤 폴더를 끌어다 놓고 Enter를 누르세요. 폴더 경로가 입력됩니다.
3. 호스팅 준비하기아래 줄을 넣으면 영어 질문이 몇 개 나와요. 이렇게 답해요.

   firebase init hosting복사

   • Please select an optionUse an existing project를 고르고 방금 만든 프로젝트 선택
   • public directory?. (마침표 하나, 현재 폴더)를 입력하고 Enter
   • single-page app?N
   • GitHub automatic builds?N
   • Overwrite index.html?직접 만든 파일이 있다면 N을 선택해 보관합니다.
4. 배포할 파일 확인하기my-class-app 폴더 안에 완성한 index.html이 그대로 있는지 확인하고 두 번 눌러 실행하세요. Firebase 기본 안내 화면이 나오면 실습 파일로 바꿔야 합니다. 이 폴더에는 공개할 웹앱 파일만 넣으세요.
5. 배포하기끝에 나오는 Hosting URL(https://이름.web.app)을 복사해서 8쪽 링크 칸에 붙여 넣어요.

   firebase deploy --only hosting복사

   나중에 고칠 때는 my-class-app 폴더의 index.html을 수정한 뒤 firebase deploy --only hosting을 다시 실행하면 같은 주소에 바로 반영돼요.