소개- 안녕하세요, 기동팀 중간발표 CheQuiz 중간 발표 영상을 찍게 된 서인수입니다.
서비스 소개- CheQuiz는 [ 퀴즈를 통한 개발지식 점검 서비스] 로, 서비스 이름에서 알 수 있듯이 Quiz를 통해 자신의 실력을 Check한다라는 의미를 가지고 있습니다.
- [P&S]
- 저희는 현재 알고리즘 테스트 이외에 나의 개발지식을 정량적으로 확인할 수 있는 서비스가 부재한다는 문제점을 발견하였습니다.
- 이러한 문제점을 해결하기 위한 첫 발걸음으로, 퀴즈라는 간단하지만 수치화할 수 있는 시스템을 통하여, 나의 개발 지식을 측정할 수 있는 서비스를 제공하고자 하였습니다.
- 또 2D 캐릭터와 퀴즈사냥을 통한 경험치제도를 통해, 게임요소를 도입하여, ‘공부는 게임이다’와 같이 새로운 공부접근법을 시도하였습니다.
와이어프레임 (어떻게 보여줄 지 고민)와이어프레임으로 설명을 주르륵 하고, 최종 디자인 연결해서 한 번에 보여주기
- 메인
- 메인페이지에서는 총 2가지 방식을 통해 퀴즈를 풀어볼 수 있습니다.
- 첫번째는 상단영역에서 카테고리와 문제수를 선택하여, 등록된 퀴즈를 랜덤으로 받아 퀴즈 풀이 페이지로 이동이 가능합니다.
- 두번째 방법은 운영진 혹은 사용자가 특정 주제로 생성한 퀴즈세트를 통해 이동이 가능하며, 이 경우 특정 주제와 난이도, 그리고 정렬 및 필터를 통해 자신에게 맞는 혹은 사용자들에게 검증된 문제세트를 선택 가능하다는 장점이 있습니다.
- 퀴즈 풀이 및 결과
- 풀이
- 퀴즈 풀이 페이지에서는, 문제를 읽고 기본 타입인 O,X를 통해 주어진 퀴즈세트를 풀이 후 제출합니다.
- 결과
- 최종 제출 후 결과페이지에서, 유저는 획득한 퀴즈 경험치를 즉각적으로 확인할 수 있도록하여, 나의 캐릭터를 성장시키는 게임요소를 부각시켰습니다. 또한 아래의 퀴즈결과리스트에서 문제의 정답여부 및 해설을 확인할 수 있고, 좋은 문제에 대해 좋아요를 누르거나 댓글을 통해 해당 문제에 대하여 자유롭게 소통할 수 있습니다.
- 퀴즈 생성
- 사용자들이 푸는 퀴즈의 생성은 관리자 혹은 사용자가 직접 퀴즈를 출제할 수 있습니다.
- 퀴즈 생성 페이지에서 문제와 정답에 관한 form을 작성하여 쉽게 퀴즈를 출제할 수 있으며, 세트화 여부를 선택하여 사용자 정의 퀴즈세트를 만들 수 있습니다.
- 로그인 회원가입
- 퀴즈를 푸는 것에는 로그인이 필요하지 않지만. 문제출제 및 자신의 캐릭터를 성장 시키기 위해서는 회원가입을 필요로 합니다.
- 헤더 영역에서 모달형식을 통해 쉽고 빠르게 회원가입 및 로그인을 할 수 있습니다.
- 유저 랭크
- 퀴즈를 풀어 획득한 경험치를 통해 유저는 진화된 캐릭터UI와 React Master와 같은 뱃지를 얻을 수 있으며, 좋아요 및 댓글 활동등을 통해서도 다양한 뱃지를 획득할 수 있습니다.
- 또 랭크 패이지에서 순위권에 든 사용자와, 검색을 통해 나의 위치를 확인할 수 있습니다.
- 유저 정보
- 유저 정보 페이지에서는 현재 나의 캐릭터 정보 및 경험치와 뱃지등을 직관적으로 확인할 수 있으며,
- 내가 만든 문제 뿐 아니라 좋아요와 댓글을 작성한 문제들을 탭 형식을 통해 간편하게 확인할 수 있습니다.
- 실제 디자인 시연
- 생성 → 메인 → 풀이 -> 결과 → 랭크→ 정보 → 비번변경
- 다음은 실제 완성된 디자인 figma 입니다.
생성생성페이지에서 제출된 퀴즈들은메인메인 페이지에서 확인할 수 있습니다.풀이메인페이지에서 두가지 방법을 통해 퀴즈풀이 페이지로 이동하며,결과모든 문제를 풀고 제출하여 결과페이지에서 풀이결과를 확인합니다.랭크문제를 통해 획득한 경험치를 기준으로 랭킹을 확인할 수 있으며,정보사용자를 클릭하여, 유저정보 페이지에서 활동내역을 상세히 확인할 수 있습니다.비번변경모달을 통한 닉네임 및 비밀번호 변경 역시 가능합니다.
- UI 스타일 가이드
이렇게 작성된 와이어프레임을 기반으로, 저희는 2D게임요소를 극대화 시킬 미니멀한 디자인 컨셉을 선정하였습니다.
게임요소를 부각시킬 부분에는 메이플스토리체를, 가독성이 중요한 컨텐츠는 pretendart 폰트를 공통적으로 사용하고, 주요 색상 및 사이즈을 선정하여, 앱 전반에 공통적으로 디자인을 적용하고자 하였습니다.