서비스명
CheQuiz
💡 기획 배경 및 동기
[ 핵심 키워드 ]
지식 체크
개발 지식
퀴즈
캐릭터 성장 재미 (게임요소)
[ Problem & Solution ]
문제 알고리즘 테스트 이외에 나의 개발 지식을 정량화하여 확인할 수 있는 서비스는 현재 존재하지 않는다.해결 퀴즈라는 간단하지만 수치화할 수 있는 시스템을 통해 현재 나의 개발 지식을 측정할 수 있도록 한다.🎯 주요 타겟층
이런 사람들에게 도움이 될 수 있습니다!
- 자신의 개발 지식을 확인하고 싶은 (예비)개발자
- 배운 내용을 간단히 복습 하고 싶은 사람
- 특정 주제를 정확히 이해하고 싶은 사람
- 새로운 방식으로 조금 더 재미있게 공부해보고 싶은 사람
📜 스토리 보드(시나리오)
끝없는 개발 공부를 진행중인 취준생 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)