✨ 복붙 한 번이면 끝! 강의용 웹앱, 이렇게 쉬울 줄이야
안녕하세요!! 21기 교육앱 공동스터디장 엘리 입니다.
소개 시도 배경
교육용 앱의 첫 번째 사례로 뭘 만들까 고민했을 때, 답은 의외로 간단했어요. "강의안." 우리가 매일 쓰는 그 강의안을, 단순한 PDF나 PPT가 아니라 학습자와 상호작용이 가능한 웹앱으로 만들면 어떨까?
그래서 도전했습니다. 복붙 한 번이면 강사 이름이 들어간 나만의 강의안 웹앱을 만드는 방법. 그것도 아주, 아주 쉽게요. 😎
진행 방법과 사용 도구
사용 도구: Google의 안티그래비티(Project Antigravity) 기본 채팅창
방법은 이랬어요: 제미나이에게 먼저 "안티그래비티용 프롬프트를 만들어달라"고 요청한 뒤, 몇 번의 수정을 거쳐 완성했습니다. AI에게 프롬프트를 만들어달라고 하는 거죠. 메타 프롬프팅의 힘이랄까요.
사용 프롬프트 전문은 아래에 공유합니다:
역할: 너는 교육 공학 전문가이자 구글 기술에 정통한 시니어 웹 프론트엔드 개발자야.
작업: 우리의 강사인 '[강사 이름 입력]' 님의 강의에 쓰일 "제미나이 마스터 실습 웹앱"을 만들어줘.
형식: HTML, CSS, Javascript가 모두 포함된 '단일 HTML 파일' 코드로 작성해줘.
필수 조건 및 디자인 가이드:
구글의 4가지 시그니처 색상(Blue, Red, Yellow, Green)을 포인트로 활용한 글라스모피즘(Glassmorphism) 디자인
[개념 정리], [활용 사례], [프롬프트 실습], [미니 빙고 퀴즈] 4가지 메뉴 탭 구성
헤더/푸터에 "Designed for students by [강사 이름]" 문구 표시
프롬프트 실습 탭: 역할·작업·형식 입력 → 실시간 조합 + 복사하기 버튼
탭 전환/버튼 호버 시 부드러운 애니메이션, 퀴즈 정답 시 폭죽(canvas-confetti) 효과
Tailwind CSS + Lucide Icons CDN 활용
완성된 결과물
🔗 샘플 배포 링크: https://gemini-lecture-app-6e6q.vercel.app/
프롬프트 빌더에서 역할·작업·형식을 입력하면 실시간으로 프롬프트가 조합되고, 퀴즈를 맞추면 구글 컬러 폭죽이 터집니다. 학습자들이 직접 만져보고 체험하는 강의안이에요.
한국어로 Gemini라는 단어가 표시된 화면
결과와 배운 점
이번 경험에서 가장 크게 느낀 건 이거예요.
바이브코딩은 강의안의 개념 자체를 바꿉니다.
기존의 강의안이 "보여주는 자료"였다면, 이건 "학습자가 직접 만지고 반응하는 경험"이에요. 단방향 전달이 아니라 양방향 상호작용이 일어나는 순간, 교육의 질은 완전히 달라집니다.
그리고 스터디원들의 다양한 사례와 적용을 함께 보면서, '아, 이 방향이 맞구나' 하는 확신이 더 단단해졌어요.
시행착오 & 꿀팁 🍯
솔직히 말하면, 시연 당일 안티그래비티가 업그레이드 타임에 걸려서 식은땀이 났습니다. 😅
교훈 하나: 도구를 쓰기 전에 반드시 업데이트 상황을 점검하세요! 라이브 시연에서 도구가 안 돌아가는 것만큼 당혹스러운 일은 없더라고요.
앞으로의 계획
남은 3주 동안 1주 1 교육앱을 만들어낼 생각입니다. 스터디 참석하는 분들이 "이거 나도 만들 수 있겠는데?" 하고 느끼는 그 순간을 계속 만들어가고 싶어요.
함께 하신 모든 팀원들, 진심으로 감사드립니다. 멋진 교육앱 만들기 도전, 고고싱! 🚀
AI 시대에는 뛰어난 재능이나 코딩 실력이 없어도 괜찮습니다. AI를 세컨드 브레인으로 삼아 '어떤 방향으로 활용하느냐'가 진짜 경쟁력이니까요.
