학급일지 만들기 | 초록덕후의 교실 도구함

1단계: 개발 환경 준비하기

안정적인 실습을 위해 크롬 브라우저를 설정하고 모니터 화면을 배치합니다.

1-1 완성할 학급일지 미리 보기

이번 튜토리얼을 통해 완성하게 될 기본 제공 학급일지 앱의 모습입니다. 2단계에서 이 틀을 내 계정으로 가져가게 됩니다.

1-2 크롬 브라우저 개인 계정 로그인

내 구글 계정(@gmail.com)으로 크롬(Chrome) 브라우저에 로그인되어 있는지 확인합니다.

1-3 화면 분할 배치하기

- 듀얼 모니터: 한쪽 화면에는 이 가이드를, 다른 한쪽에는 AI Studio 편집 화면을 배치합니다.
- 단일 모니터: 웹 브라우저 창 2개를 좌우로 반씩 분할 배치해 한눈에 보며 실습할 수 있도록 배치합니다.

⚠️ 중요: 학교/교육청 구글 계정 차단 안내

학교/교육청 구글 계정(예: @o365.go.kr, @office.edu 등)은 교육망 보안 및 연령 제한 정책에 의해 AI Studio 서비스 접근이 차단됩니다. 반드시 개인 구글 계정(@gmail.com)으로 로그인을 진행해 주세요.

🖥️ 팁: 영어 메뉴 번역 및 듀얼 화면 사용 방법

구글 AI Studio는 영문 인터페이스를 제공합니다. 영어가 불편하다면 브라우저 화면 빈 곳을 마우스 우클릭 후 [한국어로 번역]을 선택해 쉽게 한글 메뉴로 보며 진행해 보세요!

2단계: 학급일지 템플릿 원클릭 가져오기

미리 완성해 둔 학급일지 앱 템플릿의 사본을 내 계정으로 가져옵니다.

2-1 안내창 통과하기

아래의 [학급일지 앱 템플릿 복제하기 🌿] 버튼을 클릭하여 공유 창이 뜨면, 화면 중앙의 Continue to the app 버튼을 클릭합니다.

2-2 복제(Remix) 시작하기

편집 창 우측 상단의 Remix (또는 복제) 버튼을 누릅니다.

2-3 최종 가져오기 승인

Remix 확인 팝업창이 나타나면, 우측 하단의 Apply를 클릭합니다. 클릭 즉시 사본이 내 AI Studio 보관함에 복사되며 직접 편집할 수 있는 화면이 열립니다.

학급일지 앱 템플릿 복제하기 🌿

3단계: 한글 채팅으로 조작하기 (바이브코딩)

코드를 만지지 않고, AI Studio 채팅창에서 원하는 바를 한글로 편하게 타이핑하여 기능을 고칩니다.

🛠️ 바이브코딩 오류 시 자가 복구 팁 (동작이 이상해졌을 때)

원격 되돌리기(Undo): AI 채팅 답변 도중 기존 로직이 깨지거나 오작동하면, 당황하지 말고 우측 채팅창에서 이전 질문/답변 블록을 삭제(또는 실행 취소/Undo)하여 직전 성공 시점으로 되돌리세요.
점진적 명령: 한 번에 너무 많은 기능 수정을 요구하면 코드가 망가지기 쉽습니다. 기능 한 개씩 순차적으로 바이브코딩하며 매번 작동을 점검하세요.

3-1 한글 채팅창에 원하는 요청 입력하기

AI Studio 화면 좌측 또는 중앙 하단에 있는 채팅창(Prompt Chat)에 한글 자연어로 요청을 보냅니다.

                    💬 "메모장 메뉴 추가해줘. 포스트잇 모양으로 추가할 수 있게 디자인해줘." (추천)

                    💬 "상단 메뉴에 [성적 관리] 탭도 하나 만들어줘"

                    💬 "학생 이름 입력창 바로 옆에 [출석 완료] 체크박스를 달아줘"

4단계: 나만의 주소로 배포 및 결제 설정하기

완성된 학급일지를 인터넷에 배포하여 나만의 고유한 사이트 주소를 만들고 배포를 완료합니다.

💳 배포를 위한 결제 등록 정보 및 요금 안심 가이드 (필독)

최초 1회만 연동: 결제 계정 카드 등록은 최초 1회만 해두면 향후 다른 AI 앱 배포 시 번거로운 과정 없이 편리하게 사용할 수 있습니다.
무료 요금 한도 적용: 개인 학급 운영 등 소규모 프로토타입 범위 내에서는 구글 클라우드가 매월 제공하는 기본 무료량(Gemini 1.5 Flash 기준 15 RPM / 1,500 RPD) 내에 충분히 머물기 때문에 요금이 실질적으로 청구되지 않아 전혀 걱정하지 않으셔도 좋습니다.
카드 등록을 하지 않고 사용하는 법 (우회책): 신용카드 정보 등록이 어렵거나 꺼려지신다면, 배포(Publish) 절차를 생략하고 AI Studio 우측의 [Preview] 테스트 화면을 전체화면으로 넓혀서 즉석에서 학급 관리에 그대로 활용하셔도 무방합니다.

💡 주소창 우측에 다운로드(설치) 아이콘이 안 보일 때 우회 설치법

웹 통신 규격에 따라 크롬 주소창에 다운로드(PWA) 아이콘이 나타나지 않을 수 있습니다. 이때는 크롬 브라우저 우측 상단 **[점 3개 메뉴(⋮)] -> [저장 및 공유] -> [바로가기 만들기]**를 클릭하신 뒤, **[창으로 열기] 옵션을 꼭 체크**하고 만들기를 누르면 바탕화면에 동일하게 설치 형태로 사용하실 수 있습니다.

4-1 배포 시작하기

AI Studio 우측 상단의 Publish를 클릭합니다.

4-2 배포 마법사 시작

배포 안내 팝업창에서 Get started를 누릅니다.

4-3 구글 클라우드 프로젝트 세팅

프로젝트 확인 창에서 기본값인 Default Gemini Project를 둔 상태에서 하단의 Set up billing을 클릭합니다.

기본 Default Gemini Project 선택 및 Set up billing 버튼 누르기

4-4 고객 정보 및 신용카드 연동

화면 안내에 맞춰 본인 정보와 결제용 카드 등록을 1회 진행합니다.

4-5 최종 배포 완료 및 고유 웹링크 획득

최종적으로 [나만의 학급일지 is published!] 화면이 나타나면 배포가 성공한 것입니다. 상단의 Visit을 클릭하여 나만의 고유 웹 일지 주소로 입장하고 웹 주소는 즐겨찾기(Ctrl+D)해둡니다.

4-6 바탕화면에 바로가기 다운로드 설치

접속한 나만의 사이트 주소창 우측 상단의 [앱 설치(다운로드)] 아이콘을 클릭하여 바탕화면에 나만의 앱으로 설치해 두고 손쉽게 더블클릭으로 재접속해 사용합니다.

완료하고 홈으로 가기 🎉