클로드 프롬프트와 안티그래비티로 웹앱 만들기

[역할] 너는 구글 워크스페이스 자격증 시험을 완벽히 이해하고 있는 교육 기술 전문가이자, 학생 친화적인 UI/UX를 설계하는 시니어 프론트엔드 개발자야. 귀엽고 트렌디한 디자인 감각을 가지고 있어.
[작업] '영영쌤'의 강의에 사용할 "구글 워크스페이스 개념 설명 웹앱" 을 단일 HTML 파일 하나로 만들어줘.
아래 4개의 탭 메뉴를 포함해야 해:
탭 1 — 📚 개념정리 구글 워크스페이스의 핵심 개념을 카드 형식으로 설명해줘. 아래 내용을 모두 포함할 것:
구글 워크스페이스란 무엇인가 (정의, 클라우드 기반 협업 도구 모음)
클라우드 저장소의 개념 (Google Drive, 실시간 자동저장)
실시간 협업의 개념 (동시 편집, 댓글, 제안 모드)
공유 및 권한 설정 (뷰어 / 댓글 작성자 / 편집자)
구글 워크스페이스 vs 기존 MS Office 비교
버전 기록(Version History) 기능 설명
탭 2 — 🧩 구글 앱 종류와 설명 구글 워크스페이스 자격증 시험에 출제되는 핵심 앱들을 아이콘(이모지) + 앱 이름 + 한 줄 설명 + 카테고리 태그 형식의 카드 그리드로 표시해줘. 아래 앱을 반드시 모두 포함할 것:
📧 Gmail — 이메일 작성·수신·필터·라벨·서명 관리
📅 Google Calendar — 일정 생성, 공유 캘린더, 초대장 발송
💾 Google Drive — 파일 저장·공유·폴더 관리·권한 설정
📄 Google Docs — 문서 작성, 실시간 공동 편집, 제안 모드
📊 Google Sheets — 스프레드시트, 수식, 차트, 데이터 분석
📽️ Google Slides — 프레젠테이션 제작, 테마, 발표자 노트
📝 Google Forms — 설문지·퀴즈 제작, 응답 자동 집계
🤝 Google Meet — 화상회의, 화면 공유, 녹화 기능
💬 Google Chat — 팀 채팅, 스페이스, 파일 공유
🗒️ Google Keep — 메모, 체크리스트, 라벨, 색상 태그
🌐 Google Sites — 웹사이트·사내 포털 제작 (코딩 불필요)
🗓️ Google Groups — 그룹 이메일 관리, 토론 포럼
📁 Shared Drives — 팀 공유 드라이브, 조직 소유 파일 관리
🔐 Google Admin — 사용자 관리, 보안 설정, 조직 정책
☁️ Google Cloud Search — 워크스페이스 내 통합 검색
탭 3 — 💡 구글 앱의 효과적인 사용법 시험에 자주 나오는 핵심 기능을 앱별로 구분하여 번호 리스트 + 아이콘 형식으로 정리해줘. 아래 내용을 반드시 포함할 것:
Gmail: 필터 만들기, 라벨 분류, 스타 표시, 부재중 자동응답 설정법
Drive: 공유 시 권한 수준 3가지 차이 (뷰어·댓글·편집자), 공유 드라이브 vs 내 드라이브 차이
Docs/Sheets/Slides: 제안 모드, 버전 기록 확인, 댓글 & 멘션(@) 기능
Meet: 회의 녹화, 소회의실(Breakout Rooms), 화면 공유 방법
Forms: 퀴즈 모드 설정, 정답 및 점수 배정, 응답 스프레드시트 연동
Calendar: 반복 일정, 다른 사람 캘린더 보기, 회의실 예약
Chat: 스페이스(Space) 만들기, 직접 메시지 vs 스페이스 차이
탭 4 — 🎯 미니 빙고 퀴즈 구글 워크스페이스 자격증 시험 스타일의 OX 또는 단답형 퀴즈 25개를 5×5 빙고판에 배치해줘. 퀴즈 예시는 아래와 같으며, 이와 유사한 25개를 직접 생성할 것:
퀴즈 예시:
"Google Drive는 클라우드 저장소다" (O)
"Docs에서 동시 편집이 가능하다" (O)
"편집자 권한은 파일을 삭제할 수 있다" (O)
"Google Forms 응답은 Sheets로 연동된다" (O)
"Meet 회의는 녹화할 수 있다" (O)
"뷰어는 댓글을 달 수 있다" (X)
"공유 드라이브 파일은 개인 소유다" (X)
"Google Sites는 코딩 없이 웹사이트를 만든다" (O)
"버전 기록으로 이전 내용을 복구할 수 있다" (O)
"Gmail 필터로 메일을 자동 분류할 수 있다" (O)
동작 방식:
셀을 클릭하면 퀴즈 내용과 정답(O/X)이 모달 팝업으로 표시됨
정답 확인 후 해당 셀이 정답이면 구글 4색 중 하나로 색칠됨
가로·세로·대각선 한 줄 완성 시 "🎉 빙고!" 메시지와 함께 박수 애니메이션 + 색종이(confetti) 이펙트 발동
빙고 5줄 모두 완성 시 "🏆 완전 빙고! 구글 워크스페이스 마스터!" 최종 메시지 표시
[디자인 방향]
구글 4색(파랑 #4285F4 · 빨강 #EA4335 · 노랑 #FBBC05 · 초록 #34A853)을 포인트 컬러로 사용
Glassmorphism: 반투명 유리 질감 카드(backdrop-filter: blur), 흰색 반투명 배경, 부드러운 그림자
배경은 구글 4색 blob이 천천히 떠다니는 그라데이션 애니메이션
폰트는 Nunito (Google Fonts CDN) — 둥글고 귀엽고 가독성 우수
탭 버튼은 각 구글 색상으로 활성화되는 Pill(알약) 형태
카드 hover 시 살짝 떠오르는 애니메이션 (translateY + scale)
탭 전환 시 fadeSlideIn 트랜지션 효과
버튼 hover 시 bounce/scale 마이크로 인터랙션
전체 분위기: 귀엽고 발랄하지만 교육적으로 신뢰감 있는 톤
[필수 텍스트 요소]
헤더: 구글 4색 도트 로고 + "구글 워크스페이스" 타이틀 + "Designed for students by 영영쌤" 배지 항상 표시
푸터: "Designed for students by 영영쌤 💙" 문구 항상 표시
[기술 조건]
HTML + CSS + JavaScript 단일 파일
CDN: https://cdn.tailwindcss.com , https://unpkg.com/lucide@latest/dist/umd/lucide.js , Google Fonts Nunito
외부 이미지 사용 금지 (이모지 또는 SVG 인라인으로 대체)
모바일 반응형 적용 (그리드: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3)

[형식] 완성된 단일 .html 파일 코드 전체를 코드블록으로 출력해줘. 주석 없이 바로 실행 가능한 코드만 출력할 것.

현재 프로젝트의 기존 문맥, 이전 대화, 기존 후기/리뷰 페이지 구조를 모두 무시하세요.

새로운 결과물은 "구글 워크스페이스 개념 설명 웹앱"이며,
기존 코드의 일부 수정이 아니라 완전히 새로 작성한 단일 HTML 파일이어야 합니다.

중요 조건:
- 후기, 리뷰, testimonial, feedback, rating, 별점, 사용후기 입력폼 관련 요소를 절대 포함하지 마세요.
- 기존 프로젝트가 후기 템플릿이라면 그 구조를 재사용하지 마세요.
- 결과물은 오직 하나의 index.html 전체 코드만 출력하세요.
- HTML + CSS + JavaScript가 모두 한 파일 안에 있어야 합니다.
- 외부 이미지는 사용하지 말고 이모지 또는 인라인 SVG만 사용하세요.
- 반드시 4개의 탭(개념정리 / 구글 앱 종류와 설명 / 구글 앱의 효과적인 사용법 / 미니 빙고 퀴즈)을 포함하세요.
- 헤더에는 "구글 워크스페이스" 타이틀과 "Designed for students by 영영쌤" 배지를 항상 표시하세요.
- 푸터에는 "Designed for students by 영영쌤 💙"를 항상 표시하세요.

출력 형식:
- 설명 없이
- 코드블록 하나로
- 실행 가능한 완성본 index.html 전체만 출력

출력 전에 스스로 아래를 검수하세요:
1. 후기/리뷰/별점 관련 요소가 없는가?
2. 4개의 탭이 모두 존재하는가?
3. 빙고판이 5x5로 생성되는가?
4. 셀 클릭 시 모달이 열리는가?
5. 빙고 줄 완성 시 애니메이션과 confetti가 실행되는가?
6. 모바일 반응형이 적용되는가?
검수 후 최종 HTML만 출력하세요.

미니빙고 퀴즈에 맞고, 틀릴 때 각각 다른 효과음이 나도록 하고, 다 맞췄을 때는 폭죽이 터지면서 축하송이 나오게 다시 프로그래밍을 해줘.