LEVEL 11 QUEST

AI로 인터랙티브 퀴즈 앱 만들기

AI로 인터랙티브 퀴즈 앱 만들기 — DevFoil 바이브코딩 Stage 3, Lv.11

실전 프로젝트: 인터랙티브 퀴즈 앱

이번 강의에서 만들 것

이번 강의는 지금까지 배운 JavaScript 개념을 총동원해서 실제로 동작하는 퀴즈 앱을 만듭니다.

핵심 포인트는 AI에게 어떻게 요청하면 원하는 결과물을 얻는지를 배우는 것입니다. 프롬프트를 작성하고 → 코드를 받고 → 분석하고 → 커스터마이징하는 전체 과정을 실습합니다.

완성된 퀴즈 앱의 기능

객관식 문제 5개 출제
답을 선택하면 즉시 정답/오답 표시
다음 문제 버튼으로 진행
점수 계산 & 결과 화면
다시 풀기 기능

Step 1: AI에게 요구사항 설명하기

좋은 프롬프트 vs 나쁜 프롬프트

바이브코딩에서 결과물의 품질은 프롬프트의 구체성에 달려있습니다.

나쁜 프롬프트	좋은 프롬프트
"퀴즈 앱 만들어줘"	"HTML/CSS/JS 단일 파일로 객관식 퀴즈 앱을 만들어줘. 문제 5개, 4지선다, 정답 선택 시 즉시 피드백, 최종 점수 표시."
기능, 디자인, 구조 모두 AI 마음대로	원하는 결과가 명확히 전달됨

💡 실제로 사용할 프롬프트

이 프롬프트를 AI에게 보내보세요:

"HTML, CSS, JavaScript를 하나의 파일에 작성해서 인터랙티브 퀴즈 앱을 만들어줘.

요구사항:
- JavaScript 기초 관련 객관식 5문제
- 각 문제에 4개 선택지
- 선택지 클릭 시 정답이면 초록색, 오답이면 빨간색으로 표시
- 오답일 때 정답도 함께 표시
- '다음 문제' 버튼으로 진행
- 마지막에 총 점수와 등급(A/B/C/F) 표시
- '다시 풀기' 버튼
- 모바일 반응형 디자인
- 한국어로 작성
- 깔끔한 카드 UI, 부드러운 애니메이션"

🔒

여기까지는 미리보기입니다

AI로 인터랙티브 퀴즈 앱 만들기
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)