🎯 단 한 줄로 만든 AI 퀴즈 게임, 바이브 코딩으로 퀴즈 만들기

이전 포스팅에서 다룬 바이브 코딩,
초보자도 바로 해 보기 정말 쉽습니다.
그냥 하는 말이 아니라, 생성형 AI를 조금 다뤄 보았다면 지금 당장 누구나 할 수 있습니다.
 
거두절미하고 10분 안에 어떤 것을 만들었는지 보여드리겠습니다.
사용한 코딩 프로그램은 이전 포스팅에서 언급했던 <Lovable>입니다.
 

Lovable

 

"생성형 AI 퀴즈 게임을 만들어줘."

 
딱 이 한 줄 입력했습니다.
그 한 줄이, 아래와 같은 완성된 퀴즈 게임이 되었습니다.
 
생성 과정 지금부터 순차적으로 보여드리죠.

---

 
프롬프트 입력 후 1~2분 정도 대기하면
저렇게 대화 세션이 열리며 프로그램의 구성 초안을 짜 줍니다.
저 내용에서 수정할 부분이 있다면 수정해도 좋지만,
저는 우선 프롬프트 한 줄 만으로 어느 정도 결과가 나오는지 보여드리기 위해 
별다른 수정은 하지 않았습니다.

 

 
또 몇 분 대기하니
퀴즈 게임이 바로 완성되었네요!
저 파란 박스 안에 있는 <> Code를 눌러 보면 오른쪽 창에 완성된 퀴즈게임의 메인 화면이 뜹니다.
 

 
그리고 화면 오른쪽 상단의 <> Code viewer 버튼을 누르면 아래와 같이 사용된 코드가 뜹니다.
 

---

 
코드창 상단에 'Open preview in new tab' 화살표 버튼을 클릭하면 
바로 새 창에서 프로그램을 실행해볼 수 있습니다.

 
 
완성된 퀴즈 게임이 새 창에서 열립니다. 
AI가 생성하는 퀴즈, 어떤지 볼까요?

 

🧠 AI가 만든 퀴즈 게임, 어때요?

여러분이 지금 보고 계신 건 실제로 동작하는 웹 기반 퀴즈 게임입니다.
AI에게 자연어로 요청한 결과물임에도 다음 기능들이 탑재되어 있죠.

• 카테고리 선택: 일반상식, 과학, 역사, 스포츠, 연예 등
• 난이도 설정: 쉬움 / 보통 / 어려움
• 문제 수 설정: 3~10문제 자동 생성
• 정답 제출 후 점수 및 결과 요약 표시

무엇보다 UI가 깔끔하게 설계되어 있습니다.
 
단, 문제가 없진 않습니다.
여러 옵션으로 퀴즈를 해 보았으나 아쉽게도 한 가지 종류의 퀴즈 세션만 나오는듯 합니다.
이런 오류들을 방지하기 위해 확실히 개별적인 수정은 필수입니다!
 

 

---

💬 바이브 코딩의 핵심은 '말'입니다

이 모든 건 코드를 한 줄도 직접 짜지 않고 이루어졌습니다.
단지 만들고 싶은 걸 프롬프트로 입력했을 뿐인데
AI는 디자인, 로직, 타이머, 결과 화면까지 알아서 처리해줍니다.
 
이런 흐름이 바이브 코딩(Vibe Coding)입니다.
이제는 개발자가 아니어도
내 아이디어가 말 한마디로 앱이 되는 시대가 열린 겁니다.
 
수정을 거치지 않은 결과물도 이 정도니,
조금 더 공부해서 제대로 설계하면 이 퀴즈게임보다 훨씬 나은 결과물도 만들 수 있을거예요.
 
 

제가 생성한 퀴즈 게임, 한번 해보실래요?

 

quiz-genie-ai-match