요구사항
- 10분 내 영상 제출
- 해당 영상엔 프로젝트 소개, 프로젝트 시연, 기술 스택 등을 소개
기동님 중간영상 피드백
[ 칭찬 ]
- 게임하듯이 문제를 푼다는 요소가 참신하다.
[ 보완 ]
- 세트화에 대한 구체적인 설명이 필요하다.
- 푸는 사람에게는 어떤 이점이 있고,
- 만드는 사람에게는 어떤 이점이 있는지.
생각중인 발표 방식
- PPT + 목소리 ( 얼굴 X ) + BGM & 효과 (adv)
- 발표 흐름 + 대본 구성하고, 이에 맞게 PPT. 시간 남으면 BGM 등 추가
- 녹음은 OBS Studio 쓰거나 목소리만 Adobe Audtion 녹음 후 Premier로 동영상에 병합 예정
- 컨셉 : 2D 게임 느낌을 살려 PPT + 영상에서 캐릭터나 효과음 부여 + 생동감 있는 목소리톤
발표 구성
프로젝트 개요 + 서비스 소개 + 시연
1. 프로젝트 개요
인트로 (시작 페이지)
- 0000 CheQuiz!
- 캐릭터도 개발 지식도 레벨업! 퀴즈를 통한 개발지식 점검 서비스, CheQuiz를 구현한 기동팀입니다
- 저는 발표를 맡은 편미해!
- 저희 발표 순서는, 프로젝트 개요, 서비스 소개, 시연으로 구성되어 있습니다. (인덱스 페이지)
- 첫 번째 카드인, 프로젝트 개요부터 오픈해 보겠습니다!
- 주제를 선정한 배경부터 말씀리겠습니다.
- 개발자가 되기 위해서 현재 데브코스에서 밤낮으로 개발 관련 공부를 다들 하고 계실겁니다. 개발자가 된 이후에도 마찬가지죠. 이렇게 많은 공부를 하다보면 배운 지식이 오롯이 내 지식이 되었는지에 대한 의문이 종종 들곤 합니다. 저만 그렇게 생각했을까요?
- 아닙니다. 프로그래머스 2022년 개발자 설문조사에 따르면, 응답자 전체와, 예비 개발자 모두 ‘커리어 면에서 고민 1위’로 전문성 부족을 꼽았습니다. 특히 언어에 대한 이해력에 대한 고민이 있다고 합니다.
- 또한 구직, 이직 시 코딩테스트 준비, 기술면접 준비 가 각각 2위 4위이며, 기술면접 준비가 27%이상으로 많은 비율을 차지하고 있습니다.
- 평소 개발 공부 시 느낀 고민과, 관 련된 수요가 존재한 다는 점
주제를 선정한 배경
ㅇ
- ‘퀴즈를 통한 지식 점검 ?’
- 개발자가 되기 위해서, 되고 난 후에도 다들 낮이고 밤이고 수많은 지식을 공부 하게 됩니다. 그러다보면 배운 지식이 제대로 남아있는지 의문이 들곤 합니다. 저만 그렇게 생각했을까요? 아닙니다!
- 프로그래머스 2022년 개발자 설문조사에 따르면, 응답자 전체와 예비 개발자 모두 커리어 측면에서 고민하는 것 1위로 ‘전문성 부족’을 꼽았습니다. 그 중 특히 언어 이해에 대한 고민을 50% 이상 한다고 합니다.
- 알고리즘 실력을 확인할 수 있는 서비스는 많지만… (프로그래머스, 리트코드, 백준 이미지 자료)
- 정작 필요한 언어 이해 등
개발 지식 자체를 정량화해서 측정할 수 있는 서비스는 현재 없습니다. - 이 생각으로부터..! 퀴즈를 통한 개발지식 점검 서비스를 만들면 어떨까.. 라고 생각했고
- CheQuiz 서비스가 탄생하게 되었습니다.
관련 레퍼런스
- 왜 이 서비스를 사용해야 될까? ( 특장점)
- 랜덤 문제, 문제 세트를 풀며 아는 문제는 복습하고, 몰랐던 문제는 알아갈 수 있습니다.
- 문제를 직접 출제하며 해당 주제에 대한 깊이있는 이해가 가능합니다.
- 내 활동에 따라 성장하는 캐릭터를 보며 실력과 재미를 동시에 잡을 수 있습니다.
핵심 가치 ( 삭제 고민)
지식 체크
개발 지식
퀴즈
캐릭터 성장 재미 (게임요소)
컨셉 & 디자인
- 2D 게임 요소를 살린 미니멀한 디자인 컨셉.
- 메이플스토리체 + vivid한 포인트 컬러로 게임 요소 극대화
- 프리텐다드체 +무채색 ⇒ 과한 컨셉 방지 + 가독성
- 타이포그래피, 색, border 관련 이미지
- 와이어프레임과 UI 디자인 관련해서 FigJam + Figma를 통해 구현하고 작업을 시작했습니다.
2. 서비스 소개 ( 캡쳐된 이미지 + 시나리오)
- 서비스의 메인 기능은 다음과 같이 나눠져 있습니다.
- 메인 페이지(랜덤 문제, 세트 문제 풀기)
- 헤더 ( 로그인, 회원가입, 알림 확인)
- 문제 만드는 페이지 ( 문제 1개씩, 또는 문제 세트 구현)
- 문제를 푸는 페이지 ( 모든 문제 풀어야 제출 가능)
- 결과를 보는 페이지 ( 맞춘 문제에 대해 경험치 - 난이도 비례 ) 반영. 현재 유저의 정보를 볼 수 있습니다.
- 랭크를 보는 페이지 ( 랭킹 순위를 볼 수 있고, 검색도 가능합니다.)
- 유저 정보를 보는 페이지 ( 유저 정보, 작성, 댓글, 좋아요를 단 퀴즈 보기, 닉네임, 비밀번호 수정)
- 서비스를 어떤 언어로 개발했을까요?
- 언어 및 개발 프레임워크 : React, Typescript,
- 상태관리 : React Context API
- UI/UX : Figma, Emotion
- Code Format: Eslint - airbnb
- 협업툴 : 노션, 깃헙, 피그마, 피그잼
3. 시연
[시나리오 버전]
시나리오 버전(폐기) : 그냥 평범하게 할 것 같아요!
개발자 취준생 A의 사연 보여주기
A의 입장에서 시연을 해보겠습니다!
- CheQuiz 서비스를 알게된 A
- 랜덤 문제 풀기, 카드 모양의 퀴즈 세트 풀기
- 로그인이 되지 않았기 때문에 값이 반영되진 않습니다.
- 랭크 보기가 있어 눌러보니 다른 유저의 캐릭터, 경험치를 확인할 수 있네요!
- A씨는 자신도 캐릭터를 가지고 싶어져서 회원가입을 합니다.
- 내 정보 페이지에서 막상 보니 이름이 별로네요..! 이름이랑 비번을 변경해봅니다.
- 내 정보 페이지에 가보니 보기 싫은 뱃지가 많이 붙어있네요..! 어서 레벨업을 하러 가야겠습니다.
- 이번에는 세트의 문제를 풀어봅니다.풀고 나니 내 캐릭터의 랭크가 변경된 것을 확인할 수 있습니다.
- 문제에 대한 답을 확인해보고, 좋아요와 댓글을 달아봅니다.
- 앗 이때 푼 문제가 뭐였지? 내 정보 페이지에서 다시보기를 해봅니다.
- 문제 풀고 - 답 보고를 반복한 A씨는 자바스크립트의 고수가 되었습니다!
- 이제는 문제를 출제해야겠어! 문제를 출제하는 수준이 된 A씨. 문제를 출제해봅니다.
- 내 페이지에서, 다른 사람이 내 문제를 좋아요 눌러놨네요! 기분이 좋아서 다양한 문제를 내봅니다.
- 이런 유저들이 모여서 같이 만들어나가는 지식 측정 서비스입니다.
[딱딱한 버전]
- 00기능이 있습니다~ 하면서 설명하기.
4. 끝으로.. 팀원 소개
팀원 이름 + 사진 + 1줄소개