10분 만에 끝! 바이브코딩으로 만드는 랜덤 주제 뽑기 웹앱 가이드

 

조별과제 주제 정하기, 10분 만에 자동화할 수 있을까요? 바이브코딩으로 랜덤 주제 뽑기 웹앱을 만들면 중복 없는 공정한 추첨과 사운드 효과까지 한 번에 해결할 수 있습니다. 코딩을 몰라도 수업용 도구를 직접 만들어 보세요!

조별과제 주제를 정하다 보면 수업 시간이 훌쩍 지나가 버린 경험, 한 번쯤 있으실 거예요.

학생들은 각자의 의견을 내느라 시간이 길어지고, 선생님은 “누가 더 좋은 주제를 가져갔다”, “불공평하다”는 이야기를 듣게 되기도 하죠. 😅
이런 고민을 줄이고, 수업의 시작부터 집중도를 끌어올릴 수 있는 방법이 있다면 어떨까요?

이 글에서는 바이브코딩을 활용해 10분 만에 만드는 ‘랜덤 주제 뽑기 웹앱’을 소개해 드립니다.

조별 주제 정하기, 왜 이렇게 어려울까요? 🤔

실제로 많은 교사들이 “조별과제 주제 정하기”를 수업의 가장 큰 난관 중 하나로 꼽습니다.

학생들은 각자 하고 싶은 주제가 달라 의견 충돌이 생기고, 누군가는 소극적으로 참여하게 되기도 합니다.

결국 선생님이 중재하고 설득하는 데 시간을 많이 쓰게 되죠.

 

또 다른 문제는 공정성입니다. 선생님이 직접 주제를 배정하면 “우리 조는 왜 이거예요?”라는 반응이 나오고, 학생들에게 선택을 맡기면 인기 주제를 두고 실랑이가 이어지곤 합니다.

이럴 때, 랜덤으로 공정하게 배정해 주는 도구가 있다면 상황이 훨씬 편해집니다.

💡 알아두세요!
조별 주제 배정은 단순히 “주제를 정하는 일”이 아니라, 수업 분위기와 학생 참여도에 직접적인 영향을 주는 요소입니다. 초반 흐름을 잘 잡아두면 이후 활동에서도 훨씬 수월하게 진행할 수 있습니다.

바이브코딩으로 10분 만에 웹앱 만들기 💻

바이브코딩은 Claude AI를 활용해 웹앱을 만들어 주는 노코드 도구입니다. 코드를 한 줄도 쓰지 않아도, 자연어로 원하는 기능을 설명하면 AI가 HTML, CSS, JavaScript 코드를 자동으로 생성해 줍니다.

 

1단계. 바이브코딩 접속 및 로그인 (약 2분)

• 바이브코딩 사이트에 접속합니다.
• 기존 계정으로 로그인하거나, 간단히 회원가입을 진행합니다.
• 새 프로젝트를 생성할 준비만 하면 1단계는 끝입니다.

2단계. AI에게 원하는 웹앱을 말로 설명하기 (약 3분)

아래와 같이 프롬프트를 입력해 보세요.

“중고등학생용 사회문제 주제 55개를 랜덤으로 뽑아주는 웹앱을 만들어줘. 5초 타이머, 사운드 효과, 컨페티 애니메이션을 넣고, 한 번 뽑힌 주제는 다시 나오지 않게 해줘.”

이 한 문장만 입력해도 AI가 전체 페이지 구조, 스타일, 동작 로직을 모두 포함한 코드를 자동으로 생성해 줍니다.

 

3단계. 필요한 부분만 미세 조정하고 완성 (약 5분)

• “주제를 100개로 늘려줘요.”
• “배경색을 보라색 계열로 바꿔 주세요.”
• “타이머를 5초에서 3초로 줄여 주세요.”

이런 식으로 대화하듯 수정 요청을 하면, AI가 코드를 바로 고쳐 줍니다.

테스트 후 마음에 들면 URL을 복사해 학생들과 공유하면 바로 수업에 사용할 수 있습니다.

 

수업에서 이렇게 활용해 보세요 📚

1) 수업 시작 5분, 조별 주제 한 번에 배정

• 빔프로젝터나 전자칠판에 웹앱 화면을 띄웁니다.
• 각 조 대표가 순서대로 나와 “뽑기 시작” 버튼을 누릅니다.
• 5초 카운트다운 후 주제가 확정되고, 컨페티와 사운드가 함께 나옵니다.

한 조당 10초도 걸리지 않기 때문에, 6개 조라 해도 1분 안에 전체 주제 배정을 끝낼 수 있습니다.

2) 아이스브레이킹용 5분 스피치 챌린지

랜덤으로 뽑힌 사회문제를 주제로 삼아, 조별로 5분간 아이디어를 브레인스토밍하게 해 보세요. 제한 시간과 랜덤성이 주어지면, 학생들의 창의력이 훨씬 잘 발휘됩니다. 간단한 발표까지 연결하면 팀워크 형성과 말하기 연습에도 도움이 됩니다.

3) 프로젝트 수업 – ‘홍보 MBTI’ 만들기

뽑힌 사회문제를 해결하는 기존 상품·서비스를 찾아보고, 그들의 홍보 스타일을 MBTI처럼 분류해 보는 활동도 가능합니다. “이 브랜드는 감성형인가, 이성형인가?”, “어떤 톤앤매너로 소통하고 있는가?”를 분석하면서 자연스럽게 마케팅 감각과 비판적 사고력을 키울 수 있습니다.

랜덤 주제 뽑기 웹앱의 장점 & 주의할 점 ⚙️

구분	내용
교육용 맞춤 주제	1인 가구, 학교폭력, 환경오염, 디지털 격차 등 중고등학생이 공감할 수 있는 사회문제를 미리 세팅해 둘 수 있습니다.
중복 없는 공정한 추첨	한 번 뽑힌 주제는 자동으로 제외되어, 조별로 서로 다른 주제가 배정됩니다.
몰입감 있는 연출	타이머, 사운드, 컨페티 애니메이션 등으로 학생들의 집중과 기대감을 높일 수 있습니다.
설치 없이 사용	URL만 있으면 PC, 태블릿, 스마트폰 어디에서나 바로 접속해 활용할 수 있습니다.

⚠️ 주의하세요!
수업 전에 반드시 한두 번 테스트를 해 보시고, 인터넷 연결 상태를 확인해 주세요. 학교 네트워크 환경에 따라 접속 속도나 사운드 재생이 달라질 수 있습니다.

💡

랜덤 주제 뽑기로 수업 준비 시간 줄이기

핵심 1: 조별 주제 선정 과정을 자동화하면 수업 도입 시간을 1~2분으로 줄일 수 있습니다.

핵심 2: 중복 방지, 타이머, 사운드 효과를 활용하면 공정성과 몰입도를 동시에 확보할 수 있습니다.

적용 팁: 첫 시간에는 사회문제, 다음에는 진로, 프로젝트 주제 등으로 확장해 다양한 활동에 활용해 보세요.

바이브코딩으로 만든 도구는 한 번 만들어 두면 학기 내내 재사용할 수 있습니다.

자주 묻는 질문 ❓

Q1. 코딩을 전혀 몰라도 정말 만들 수 있을까요?

A. 네, 가능합니다. 원하는 기능을 문장으로 설명하면 AI가 코드를 대신 작성해 줍니다. 선생님께서는 결과를 확인하고, 필요하면 “색을 바꿔 주세요”, “주제를 더 늘려 주세요” 정도만 요청하시면 됩니다.

Q2. 학생들도 직접 만들어 보게 할 수 있나요?

A. 네, 충분히 가능합니다. 고학년 혹은 중·고등학생이라면, 간단한 프롬프트만 알려 주어도 스스로 랜덤 뽑기, 출석 체크, 팀 배정 등 다양한 웹앱을 만들어 볼 수 있습니다.

Q3. 학교 컴퓨터실에서도 문제 없이 사용할 수 있나요?

A. 기본적으로는 웹 브라우저만 열 수 있으면 사용 가능합니다. 다만, 수업 전에 인터넷 차단 여부와 소리 출력(스피커, 헤드셋)을 한 번 확인해 보시는 것을 추천드립니다.

Q4. 랜덤 주제를 사회과목 말고도 활용할 수 있을까요?

A. 물론입니다. 과학 탐구 주제, 진로 탐색 질문, 글쓰기 주제, 토론 토픽 등 다양한 교과와 연계해 활용하실 수 있습니다.

조별 주제 배정만 바꿔도 수업의 시작 분위기가 달라집니다. 다음 수업을 준비하실 때, 10분만 투자해 랜덤 주제 뽑기 웹앱을 한 번 만들어 보세요. 학생들의 반응을 보시면, 아마 계속 활용하고 싶어지실 거예요. 😊