1단계: 동학년 게시판 둘러보고 복제하기 (Remix)
동학년 협업 게시판의 주요 기능들을 살펴보고 내 보관함에 복제합니다.
동학년 중요한 긴급 공지를 실시간으로 등록하고 한눈에 함께 확인합니다.
학년 공동 행사, 수행평가 일정, 현장체험 등 학년 스케줄을 캘린더로 공동 관리합니다.
의결이 필요하거나 빠른 의견 취합이 필요할 때 간편히 무기명/기명 투표를 개설합니다.
학년 공용 교구나 컴퓨터실 사용 일정이 겹치지 않게 실시간 예약 현황을 관리합니다.
상단 메뉴의 [관리자] 탭에서 동학년 게시판의 모든 등록 데이터를 직접 삭제 및 관리(초기화)할 수 있습니다.
🛡️ 데이터 삭제를 위한 관리자 비밀번호가 무엇인가요?
0000으로 세팅되어 있습니다. 관리자 페이지 진입 시 비밀번호를 입력하면 등록된 모든 공지, 일정, 투표, 예약을 관리할 수 있습니다.
⚠️ 중요: 학교/교육청 계정 접속 차단 대처 방법
@o365.go.kr, @office.edu 등)은 교육망 보안 및 연령 제한 정책에 의해 AI Studio 서비스 접근이 차단됩니다. 반드시 개인 구글 계정(@gmail.com)으로 크롬 브라우저에 로그인하신 후 실습해 주세요.
개인 구글 계정 로그인을 확인하셨다면 아래 [동학년 게시판 템플릿 복제하기 🌿] 버튼을 클릭하여 공유된 AI Studio 템플릿 페이지를 엽니다.
2단계: 게시판 복제 및 실시간 공유 서버 연결하기
제공된 템플릿의 사본을 내 계정으로 가져온 뒤, 동학년 선생님들과 데이터를 실시간 공유할 수 있게 서버(데이터베이스)를 연동합니다.
💳 서버 및 배포 요금 걱정 없이 안심하고 사용하기 (필독)
- 데이터베이스 평생 무료: 본 실습에서 연동할 파이어베이스(Firebase) 데이터베이스는 무료 등급(Spark 요금제) 한도 내에서 작동하여 요금이 발생하지 않습니다.
- 배포 시 카드 등록 안내: 마지막 4단계 배포(Publish) 과정에서 구글 클라우드 플랫폼(GCP) 계정 인증 및 본인 확인을 위해 카드 등록 절차가 요구됩니다.
- 텍스트 위주 운영으로 요금 걱정 제로: 이 게시판은 고용량 사진/영상이 아닌 텍스트 위주의 데이터(공지사항, 달력, 예약 등)만 주고받기 때문에 데이터 소모량이 극히 적습니다. 동학년 선생님들이 일상적인 업무 협업용으로 사용하시는 범위 내에서는 구글이 매월 제공하는 무료 제공량을 초과할 일이 거의 없으므로 청구 요금 걱정 없이 안심하고 사용하셔도 좋습니다!
1단계 버튼으로 열린 화면 우측 상단의 Remix 버튼을 누른 후, 팝업 우측 하단의 Apply를 선택합니다.
화면에 Remix: Set up OAuth 팝업창이 나타나면, 우측 하단의 Let's do it 버튼을 클릭하여 구글 클라우드 권한을 연동합니다.
리믹스가 완료되어 편집 화면이 나타나면, 화면 우측 안내 카드의 2번 영역에 있는 [클릭으로 즉시 복사] 버튼을 누른 후,
좌측 하단의 채팅창(Prompt Chat)에 붙여넣고 전송(엔터)합니다.
(명령어: 파이어베이스 세팅하고 프로젝트 파일 바탕으로 보안규칙도 즉시 배포해줘!)
AI 에이전트가 연동 작업을 마치고 화면 중앙의 디자인이 성함을 입력하는 로그인 첫 화면으로 바뀌면 실시간 서버 연동에 성공한 것입니다!
3단계: 나만의 게시판으로 맞춤 수정하기 (바이브코딩 체험)
서버 연동이 완료된 게시판에 로그인하여 진입한 뒤, 한글 채팅으로 원하는 새로운 기능이나 메뉴 수정을 가볍게 지시해 봅니다.
🛠️ 바이브코딩 오류 시 자가 복구 팁 (동작이 이상해졌을 때)
- 원격 되돌리기(Undo): AI 채팅 답변 도중 기존 로직이 깨지거나 오작동하면, 당황하지 말고 우측 채팅창에서 이전 질문/답변 블록을 삭제(또는 실행 취소/Undo)하여 직전 성공 시점으로 되돌리세요.
- 점진적 명령: 한 번에 너무 많은 기능 수정을 요구하면 코드가 망가지기 쉽습니다. 기능 한 개씩 자유롭게 바이브코딩하며 매번 작동을 점검하세요.
성함을 입력한 후 동학년 소통 시작하기를 누르면 게시판 실물 화면으로 입장합니다.
좌측 하단의 채팅창(Prompt Chat)에 원하는 기능 추가 및 텍스트/디자인 수정을 요청해 봅니다.
💬 "상단 타이틀 문구를 '2026학년도 5학년 동학년 게시판 🌿'으로 수정해줘."
💬 "메뉴 탭 중에서 [기타 자료] 이름을 [행정 업무]로 변경해줘."
4단계: 배포하고 바탕화면 설치 & 동학년 공유하기
나만의 주소로 게시판을 업로드하여 동학년 선생님들과 고유 주소를 공유하고협업을 시작합니다.
💳 구글 클라우드 배포 및 결제 등록 정보 (필독)
- 최초 1회만 연동: 결제 계정 카드 등록은 최초 1회만 해두면 향후 다른 AI 앱 배포 시 번거로운 과정 없이 편리하게 사용할 수 있습니다.
- 무료 요금 범위 안내: Gemini 1.5 Flash 기준 15 RPM / 1,500 RPD의 무료 제공량이 기본 적용되므로 개인/동학년 협업 수준에서는 과금될 일이 전혀 없으니 안심하셔도 됩니다.
- 카드 등록을 하지 않고 사용하는 법 (우회책): 신용카드 등록이 곤란한 경우 배포(Publish)하지 않고 AI Studio 우측의 [Preview] 화면을 전체화면으로 넓혀서 실습하고 즉석에서 소통 공간으로 활용하셔도 무방합니다.
🌿 번거로운 매번 로그인 방지 및 PWA 바로가기 팁
- 성함 정보 자동 유지: 입력하신 이름은 브라우저 저장소(IndexedDB)에 자동 보관되어 컴퓨터 포맷 등을 하지 않는 한, **바탕화면 아이콘을 통해 재접속 시 성함 재입력 없이 바로 자동 로그인 진입**합니다.
- 다운로드 아이콘이 안 보일 때 우회 설치: 크롬 주소창에 다운로드(PWA) 아이콘이 안 보이면 크롬 우측 상단 **[점 3개 메뉴(⋮)] -> [저장 및 공유] -> [바로가기 만들기]**를 클릭하신 뒤, **[창으로 열기] 옵션을 체크**하고 만드시면 됩니다.
AI Studio 우측 상단의 Publish를 클릭한 뒤, 이어서 나타나는 팝업에서 Get started를 누릅니다.
프로젝트 확인 창에서 기본값인 Default Gemini Project를 그대로 두고 Set up billing을 클릭합니다.
화면 안내에 따라 본인 정보 및 결제 수단(신용카드) 연동을 마칩니다.
배포가 성공적으로 완료되면 창 상단의 Visit 버튼을 눌러 나만의 실시간 동학년 게시판 고유 링크로 접속합니다.
접속한 브라우저 주소창 우측의 [앱 설치(다운로드)] 아이콘을 클릭하여 PC 바탕화면에 단독 앱 형태로 설치합니다.
바탕화면에 생성된 예쁜 [동학년 게시판] 아이콘을 확인합니다. 이제 매번 번거롭게 인터넷 브라우저를 켜지 않고 이 아이콘 더블클릭만으로 즉시 메인 게시판으로 자동 진입합니다!
완성된 나만의 사이트 주소(App URL)를 복사하여 동학년 단톡방이나 메신저로 선생님들께 공유하고, 실시간 소통과 업무 조율을 시작해보세요! 🎉