퀴즈를 통한 개발 지식 확인 서비스 🕹️
💡 기획 배경 및 동기
[ 핵심 키워드 ]
지식 체크
개발 지식
퀴즈
캐릭터 성장 재미 (게임요소)
[ Problem & Solution ]
문제 알고리즘 테스트 이외에 나의 개발 지식을 정량화하여 확인할 수 있는 서비스는 현재 존재하지 않는다.해결 퀴즈라는 간단하지만 수치화할 수 있는 시스템을 통해 현재 나의 개발 지식을 측정할 수 있도록 한다.[ 단기 서비스 지향점 (킥보드) ]
포인트- 강의가 아닌 특정 주제에 focus
- 퀴즈 자체에 focus
문제- 특정 주제에 대한 현재 나의 학습 정도를 파악하기 힘들다.
- 단순 책과 강의를 통한 공부 이외의 새로운 방법이 필요하다.
해결- 원하는 주제를 선택하여, 해당 주제에 대한 퀴즈를 풀며 학습정도를 점검한다.
- 경험치를 통한 게임요소를 제공하여, 보다 재미있는 학습을 장려한다.
[ 중장기 서비스 지향점 (자전거) ]
문제 - 한정된 시간 안의 수 많은 강의 속에서 나에게 적합한 강의를 찾는 것
- 나에게 적합한 강의란 나의 수준에서 한참 아래도, 한참 위도 아닌 바로 한 단계 위 수준의 강의
해결- 강의를 먼저 들은 사람이 해당 강의의 핵심 내용을 추출하여 퀴즈의 형식으로 제출한다.
- 강의를 수강하고자 하는 사람은 해당 퀴즈를 통해, 강의 내용에 대한 자신의 지식을 측정한다.
서비스- 경험치를 통한 보상 시스템 (게임요소)
- 좋아요가 많은 퀴즈를 만드는 사람에게는 benefit을 제공하여 양질의 퀴즈를 생산한다.
- 좋은 문제에 대해 좋아요를 누른 사람에게 benefit을 제공하여 퀴즈 좋아요를 장려한다.
🎯 주요 타겟층
이런 사람들에게 도움이 될 수 있습니다!
- 자신의 개발 지식을 확인하고 싶은 (예비)개발자
- 배운 내용을 간단히 복습 하고 싶은 사람
- 특정 주제를 정확히 이해하고 싶은 사람
- 새로운 방식으로 조금 더 재미있게 공부해보고 싶은 사람
📜 스토리 보드(시나리오)
끝없는 개발 공부를 진행중인 취준생 A
- 프론트엔드 희망
- 공부할 내용이 많아서 이것저것 공부하는 상황
개발자가 되기 위해서, 또는 더 성장하기 위해 다들 끝없는 공부를 한다.
그 과정에서 다들 한 번쯤 이런 생각을 떠올렸을 것이다.
- 이전에 배운 내용을 온전히 기억하고 있는지 모르겠어 😢
- 내가 지금 공부한 이 주제를 정말 완벽히 이해한 걸까? 🤔
- 개발 공부하기 싫다.. 슬럼프인가봐 😭
사용 시나리오
- A는 [CheQuiz] 사이트의 메인 페이지에 접속하자마자 다양한 예시 문제가 떠있는 페이지를 볼 수 있었다.
- 홀린듯이 React 카테고리 랜덤 문제 5개를 눌러보았다.
- O X 문제를 풀고 답을 확인하며 간단한 복습과, 추가적인 정보를 얻을 수 있었다.
- 결과 페이지에 가입 시 캐릭터 경험치를 얻을 수 있다는 말에 끌려 회원가입을 진행했다.
- 전체 랭킹과 캐릭터 외관을 보고 뿌듯해하며 보다 다양한 문제를 풀었다.
- 정말 좋았던 문제는 좋아요 표시를 해서 마이 페이지에서 다시 풀어보기도 했다.
- 문제를 풀며 지식이 늘은 A는 문제를 푼 후 댓글을 남기며 질문이나 조언을 해주는 것이 일상이 되었다.
- 공부에 흥미가 생긴 A는 스스로 공부하는 시간이 늘었고, 공부한 것을 바탕으로 퀴즈를 내는 실력자가 되었다.
- 퀴즈의 답례로 얻는 좋아요와 경험치로 동기부여가 된 A는 더 많은 퀴즈를 내기 위해 공부하는 선순환의 굴레에 들어갔다.
- React 뿐만 아니라 JavaScript, CSS 등 대부분의 질문을 내며 랭킹 1위를 찍은 A는 이 경험을 바탕으로 면접질문에 대한 대비를 수월히 끝낼 수 있었다.
🔨 기능 구현
- 회원가입/ 로그인 →
창민 - 이메일을 통해 회원가입할 수 있다.
- 가입한 이메일을 통해 로그인할 수 있다.
- 퀴즈
- 퀴즈를 작성, 수정, 삭제할 수 있다.
- 퀴즈 작성 시 하나의 세트의 편입 여부를 설정한다
- 0개 이상의 태그 정보를 넣을 수 있다. (React, Javascript 등… 커스텀 불가능)
- 다른 사람이 올린 퀴즈를 풀 수 있다.
- 퀴즈를 풀고 나서 결과를 확인할 수 있다.
- 특정 퀴즈에 대해 좋아요와 댓글을 달 수 있다.
[ 퀴즈 생성 ] →
인수[ 퀴즈 풀이 ] →
준혁- 랭킹 →
정환 - 레벨과 경험치에 따라 전체 유저의 랭킹을 확인할 수 있다.
- 유저를 검색할 수 있다.
- 각 유저의 프로필을 클릭하면 해당 유저의 화면을 볼 수 있다.
- 유저 정보 →
미해 - 유저의 레벨에 맞는 프로필 사진을 볼 수 있다.
- 해당 유저가 작성한 퀴즈와 댓글, 좋아요한 퀴즈와 댓글을 볼 수 있다.
- 해당 유저의 뱃지 컬렉션을 볼 수 있다.
- 자신의 정보를 수정할 수 있다. (닉네임, 비밀번호)
- 알림 →
창민 - 헤더 바에 모달 형태로 알림을 확인할 수 있다.
- 내가 만든 문제에 좋아요가 눌렸거나 댓글이 달리면 알람이 온다.
- 예외처리 →
정환 - 404 오류가 나면 Not Found 페이지가 뜬다.
🤲 기술 스택
- React
- Typescript
- Context api
- emotion
- axios
아이디어 및 기능 브레인 스토밍(Figjam)
와이어프레임 (Figma)
참고 레퍼런스
