1단계: 학급 방송앱 둘러보고 복제하기 (Remix)
스마트 방송앱의 주요 기능들을 살펴보고 내 보관함에 복제합니다.
📺 학급 방송앱은 무엇을 하나요?
- 📢 즉석 음성 방송 (TTS): 안내할 대사를 텍스트 입력창에 적기만 하면, 크롬 내장 음성 엔진이 생각보다 훨씬 또렷하고 자연스러운 목소리로 교실 스피커에 실시간 송출해 줍니다. (귀에 거슬리는 차가운 기계음이 아니에요!)
- ⏰ 전체화면 타이머 방송: 모둠 활동이나 쉬는 시간을 조율할 때 대사와 시간을 설정해 두면, 타이머가 만료되는 순간 알림음과 함께 자동으로 방송이 나갑니다. (전체화면 모드를 띄워두면 칠판 대용으로도 훌륭합니다!)
- 📅 정기 안내 방송 예약: 아침 조회, 종례 전 등 지정된 일정과 요일별 타이밍에 맞춰 정기 예약 방송 목록을 스케줄링하여 학급 운영을 자동화합니다.
- ⭐ 자주 쓰는 문구 즐겨찾기: "정리정돈을 시작하세요"처럼 매일 쓰는 문구는 즐겨찾기 카드로 만들어 두어 마우스 클릭 한 번으로 바로 송출할 수 있습니다.
즉석 방송설정, 방송예약, 즐겨찾기 방송 예약, 타이머 방송을 한화면에서 확인 할 수 있습니다.
예약을 하면 다음과 같이 확인할 수 있습니다. 필요에 맞게 사용하세요.
예약한 방송이 다음과 같은 화면으로 방송이 됩니다.
구글 클라우드 API를 연결하면 더 자연스러운 방송이 가능합니다. 이 기능은 오늘 실습을 통해 구현해 봅니다.
⚠️ 중요: 학교/교육청 계정 접속 차단 대처 방법
@o365.go.kr, @office.edu 등)은 교육망 보안 및 연령 제한 정책에 의해 AI Studio 서비스 접근이 차단됩니다. 반드시 개인 구글 계정(@gmail.com)으로 크롬 브라우저에 로그인하신 후 실습해 주세요.
개인 구글 계정 로그인을 확인하셨다면 아래 버튼을 눌러 다음 단계로 진행해 주세요.
2단계: 내 보관함에 가져오고 바이브코딩 실습하기
제공된 학급 방송앱 기본 소스를 사본으로 가져온 뒤, AI 에이전트와 대화하며 예약 방송 편집 기능과 디자인을 내 마음대로 커스터마이징해 봅니다.
1단계 링크로 열린 화면 우측 상단의 Remix 버튼을 클릭하여 소스 코드를 내 계정으로 복제합니다.
AI 에이전트에게 원하는 디자인이나 수정사항, 추가내용들을 구체적으로 입력하고 오른쪽 화면에서 실시간으로 변하는 내용들을 확인해 보세요.
💬 "전체적인 카드 테마와 색상을 내 교실에 어울리는 산뜻한 노란색(또는 핑크색) 계열로 변경해줘."
💡 바이브코딩 진행 시 반드시 알아두어야 할 주의 사항 (필독)
- 구체적으로 지시하기: "예쁘게 고쳐줘"보다는 "상단 타이머 버튼의 배경색을 연한 초록색으로 변경하고 모서리를 둥글게 만들어줘"처럼 요청 사항을 구체적으로 설명해야 완벽한 결과를 얻을 수 있습니다.
- 지시는 한 번에 하나씩: 여러 기능을 한꺼번에 요구하면 AI가 코드를 꼬이게 만들어 오류가 날 수 있습니다. 한 번에 하나의 지시사항만 입력하여 작동을 확인한 뒤 다음 단계로 진행하세요.
- 화면 오류 발생 시 대처법 (Fix 버튼): AI가 작성한 코드에 에러가 있어 화면이 안 나오거나 에러 경고창이 뜨면, 좌측 대화창에 나타나는 Fix the errors in the app (또는 Fix) 버튼을 클릭하세요. AI가 오류를 스스로 분석하여 즉시 바로잡아 줍니다.
- 이전 상태로 되돌리기 (Undo): 오류 수정 버튼으로도 해결되지 않는다면, 우측 채팅창 대화 기록 중 가장 최근 질문 블록의 우측 상단 휴지통 아이콘(Undo)을 클릭해 정상 작동하던 바로 직전 상태로 되돌리세요.
3단계: 나만의 주소로 업로드하고 인터넷 배포하기
바이브코딩으로 완성한 나만의 방송앱을 온라인에 배포하여 고유 주소(URL)를 할당받고, 컴퓨터 바탕화면에 앱처럼 설치해 봅니다.
💳 구글 클라우드 배포 결제 계정 카드 등록 안심 가이드
- 최초 1회 등록: 본인 인증을 위한 카드 등록은 최초 1회만 해두면 향후 모든 AI 앱 배포 시 번거로운 과정 없이 원클릭 배포가 가능해집니다.
- 청구 요금 걱정 제로: 방송앱은 외부 DB 서버 없이 오직 선생님 컴퓨터 브라우저 내부에서만 동작하는 단독 로컬 앱 구조이므로 배포 후에도 데이터 전송 비용이 아예 없어 실제 청구되는 요금이 절대 없으므로 안심하고 진행하셔도 됩니다.
AI Studio 우측 상단의 Publish를 클릭한 뒤, 이어서 나타나는 팝업에서 Get started를 누릅니다.
안내에 따라 결제 및 프로젝트 연동을 진행합니다.
💡 **결제 완료 계정 팁:** 이미 카드 등록 등의 결제 설정이 완료된 계정의 경우, 추가 설정 과정 없이 즉시 배포가 완료(Visit 버튼 활성화)됩니다.
⚠️ **배포 이력이 있는 경우:** 기존 프로젝트에 바로 배포할 경우 다른 앱의 주소와 충돌하거나 알 수 없는 간섭이 생길 수 있습니다. 따라서 **완전히 새로운 프로젝트를 만들어서 지정하시는 것을 강력히 추천**합니다. (구글 클라우드 콘솔 새 프로젝트 만들기를 통해 간편하게 생성 후 연결할 수 있습니다.)
배포가 완료되면 상단의 Visit 버튼을 눌러 온라인에 배포된 나만의 학급 방송앱 사이트에 접속합니다. 접속 후 브라우저 주소창 우측에 나타나는 **[앱 설치(다운로드)]** 아이콘을 클릭하여 설치를 시작합니다.
설치를 마치면 바탕화면에 예쁜 단독 방송 프로그램 실행 아이콘이 자동 생성됩니다. 이제 바탕화면의 아이콘을 더블클릭하는 것만으로 인터넷 브라우저 주소창이나 메뉴 탭 없이 독립된 전용 앱으로 간편하게 학급 방송국을 구동할 수 있습니다!
4단계: 구글 클라우드 무료 고품질 AI 목소리(API) 연결하기
기본 내장된 다소 딱딱한 기계 기기 음성을 탈피하여, 자연스럽고 신뢰감 있는 구글의 무료 고품질 AI 성우 목소리(Cloud TTS)로 방송을 업그레이드합니다.
💳 중요: 구글 Cloud Text-to-Speech API 무료 혜택 한도
- 일반 음성(Standard): 매달 **4,000,000자(글자 수)**까지 100% 무료
- 프리미엄 AI 음성(WaveNet 등): 매달 **1,000,000자(글자 수)**까지 100% 무료
- 계산 팁: 하루에 50자 분량의 방송을 30번 내보내도 월 약 45,000자에 불과하므로, 무료 범위 내에서 평생 요금 청구 없이 안전하게 사용하실 수 있습니다!
⚠️ 필수 준비물: 해외 결제가 가능한 신용카드 또는 체크카드
구글 클라우드를 처음 시작하면 프로젝트 생성 전에 결제 정보 등록 화면이 나타납니다.
가입 즉시 90일간 자유롭게 쓸 수 있는 300달러(약 40만원)의 무료 체험 크레딧이 기본 제공되며, 매달 제공되는 무료 사용량 범위 내에서는 실제 요금이 절대 청구되지 않으니 안심하고 등록하셔도 됩니다.
1. 구글 클라우드 콘솔(console.cloud.google.com)에 로그인하여 접속합니다.
2. 메인 화면 왼쪽 상단의 프로젝트 선택 목록을 클릭합니다.
3. 나타나는 창의 오른쪽 상단에서 새 프로젝트(New Project) 버튼을 클릭합니다.
프로젝트 이름(예: Class Broadcast App)을 입력한 뒤 하단의 만들기(Create) 버튼을 클릭하여 나만의 AI 작업 공간을 생성합니다.
생성한 프로젝트가 활성화된 상태에서, 상단 검색창에 영어로 Cloud Text-to-Speech API를 검색해 해당 서비스를 찾아 클릭합니다.
이후 화면의 파란색 사용(Enable) 버튼을 클릭하여 AI 음성 서비스를 내 프로젝트에 활성화합니다.
콘솔 메인페이지 좌측 메뉴(줄 3개)를 누르고, API 및 서비스 ➡️ 사용자 인증 정보 메뉴로 이동합니다.
상단의 사용자 인증 정보 만들기 버튼을 클릭한 뒤, API 키를 눌러 새로운 API 키를 생성합니다.
생성된 API 키 오른쪽에 있는 키 표시를 누르고, 나타나는 문자열 옆의 복사 아이콘을 클릭하여 키를 복사합니다.
내가 배포하여 설치한 학급 방송앱을 실행하고, 우측 상단의 [설정(톱니바퀴)] 버튼을 클릭합니다. [Google Cloud TTS API 키 연결] 입력란에 복사한 키를 붙여넣은 뒤 [연결] 버튼을 클릭합니다. 입력창 아래에 초록색 글씨로 '연결되었습니다' 메시지가 뜨는 것을 확인하고, 사용할 성우(AI 목소리)를 선택한 후 하단의 [저장 및 적용] 버튼을 누르면 실시간으로 고품질 음성이 반영됩니다! 🎉
