개발/유저 서비스 flow

나만의 퀴즈 웹앱 제작기 - 1

inspire12 2025. 6. 25. 21:57
반응형

Preview

기술 도서 스터디를 하면서 각자 맡은 파트 발표에서 끝나는 걸 넘어각자 구글폼을 통해 문제를 만들었었습니다.

이런 퀴즈가 있으면 핵심 파악하기도 훨씬 쉽고 무엇보다 나중에 복습할 때 시간을 많이 절약할 수 있었습니다.

 

하지만 기존에 나와있는 앱들은 퀴즈를 입력하는게 생각보다 귀찮았습니다. 거의 모든 앱들은 선택지까지 일일이 하나하나 입력을 해야하기 때문에 내용 정리 후 퀴즈로 만드는 것만 해도 힘이 많이 들었습니다. 

 

그래서 일괄적으로 입력할 수 있는 포맷을 만들고 그 포맷을 입력하면 퀴즈 세트(퀴즈북)가 만들어지도록 했습니다. 

 

웹 사이트 소개 

https://inspire12-quiz-frontend.vercel.app

 

나만의 퀴즈 메이커

 

inspire12-quiz-frontend.vercel.app

 

퀴즈 등록 과정 (듀토리얼 유튜브 영상)

https://www.youtube.com/watch?v=OI7HJVNPxdY

 

사실 퀴즈를 만드는 과정이 사용자 입장에선 살짝 귀찮을 수 있습니다. 

그래서 내용을 입력하면 만들어지도록 해볼까 생각을 하다가 비용 이슈와 커스텀에 대한 자유도 때문에 GPT 를 사용하는 

 

퀴즈 생성을 위한 GPTs

Gpts 

 

 

사이드바 - 퀴즈 선택, 만들기, 계정 기능

퀴즈를 등록 후 퀴즈 선택 

 

퀴즈 문제 풀기 

1차 기획 

일단 빠르게 확인하고 집중하기 위해 객관식 위주스플래시 퀴즈로 구성했습니다. 한 페이지당 하나의 퀴즈를 다루게 하고 다음 퀴즈로 넘어가기 쉽도록 했습니다. 문제를 푼 이후엔 정답을 보여주고 해설도 보여주도록 했습니다. 

 

처음엔 개인적으로 쓰기 위해 md 파일을 읽어서 보여주는 형태로 했습니다.

 

그런데 md 파일은 데이터를 처리하는 게 꽤 불편했습니다. 그래서 DB를 사용하는 방식으로 구조를 변경하고 적용했습니다. 

이 과정에서 백엔드를 supabase를 사용했고 배포까지 supabase를 사용했습니다.

 

Schema 일부

 

2차 기획: 계정 기능 추가

막상 만들고 PDF와 자료들을 문제로 만들면서 확장 가능성이 꽤 크다고 생각이 들었습니다. 그래서 Supabase와 Google 로그인을 붙였습니다. 그리고 유저마다 다른 퀴즈를 등록하도록 전체 구조를 바꿨습니다. 

 

아예 초기 문제를 제공할까도 생각했지만, 개발 문제 뿐아니라 다른 부분에서도 퀴즈를 만들 수 있으니 사용법을 넣는 걸로 수정했습니다. 

 

퀴즈를 등록하기 전 (초기 화면)

 

이제 그동안 가지고 있던 여러 자료들, 유튜브 내용이나 발표 PPT 등, 책과 블로그 글 등을 문제로 만들어보고 있습니다. 

 

고민 사항, 발전사항

앞으로 추가할만한 기능으로 오답노트(틀린 횟수) 나 풀었던 횟수, 그룹관리, 퀴즈 정렬 같은 퀴즈 기능 등이 있을 수 있을 것 같은데 일단 1차 완성이 되고 좀 더 스스로 써보면서 개선해나가야할 것 같습니다. 

 

지금 가장 큰 고민은 내용을 기반으로 GPT가 만들어주는 문제 퀄리티를 어느 정도로 만들어야 하는 가입니다. 

최대한 지엽적인 부분을 빼고 (몇번째에 나온 건가 같은) 핵심을 명료하게 정리하도록 하니 문제 난이도가 너무 쉬워지는 것 같기도 합니다. 

PDF가 그림이나 캡쳐로 만들어진 건 읽을 수가 없기 때문에 안됩니다. 이건 어쩔 수 없는 부분입니다. 

 

만족도

일단 앱 사용성은 개인적으로 만족합니다. 아직 개선할 사항도 많긴한데 일단 한 발자국 땠다는거에 만족합니다.

+ 개인적으로 일단 마냥 놀진 않았다는 스스로의 위안이 됩니다. 

 

일단 만들긴 했는데..

일단 만들긴 했는데 어떻게 운영할지는 잘 모르겠습니다. 저혼자만 쓸지 아니면 수익 모델을 붙이고 홍보를 할지 또 모르겠습니다. 

일단 좀 더 만든 양을 늘리고 프로그래밍 좀비님 강의를 들어보면서 생각해봐야겠습니다.

반응형