최종 프로젝트 5주차에 가장 집중해주셔야 할 것은 “최종 발표회 준비”입니다.
최종 발표에는 지금까지 진행했던 프로젝트 개발 과정을 엔지니어답게 설명할 수 있어야합니다.
아래 항목들을 바탕으로 기술적으로 더욱 매력적인 최종 발표를 준비해봅니다.
•
우리 프로젝트에서 기술적으로 강점을 삼을 만할 항목을 정리해 주세요.
(최종 발표 및 면접에서 프로젝트를 진행할 때 어떤 도전을 했는지 말할 수 있는 좋은 소스가 됩니다)
◦
퀴즈 만들기 에디터
◦
퀴즈 풀기 채점 방식
◦
신고 글 삭제, 복구 처리
◦
더 재미있는 타자 연습 게임
◦
조회수 어뷰징 방지
•
프로젝트에 적용했던 핵심 기술 목록을 작성해 주시고, 각 기술을 도입하게된 의사결정 과정을 정리해주세요.
◦
모든 이야기를 요구사항/선택지/의사결정/근거로 준비하세요.
◦
여러분이 어필해야 하는 것은 내가 엔지니어로서 자질이 있다는 것입니다.
▪
엔지니어는 문제를 해결하는 사람입니다. 따라서 엔지니어는 우선 문제 정의를 정확하게 하는 것이 중요합니다.
◦
어떤 요구사항이 있었는지, 이 요구사항을 구현할 수 있는 어떤 선택지들이 있었는지, 이 선택지들 중에서 어떠한 이유와 근거로 어떤 선택지를 결정하였는지 라는 이야기가 반드시 준비되어야 합니다.
요구사항 | 선택지 | 핵심 기술을 선택한 이유 및 근거 |
퀴즈 만들기 에디터 | 1. 이미지 첨부 자유
2. 이미지 첨부 취소
3. 문제 추가/삭제
4. 선택지 추가/삭제
5. 객관식/주관식 퀴즈
6. 퀴즈 삭제/수정
7. 최소 문제(1개)/선택지 갯수(2개) 지정
8. drag & drop
9. 첨부 이미지 크롭&리사이징 | 사용자가 퀴즈 만들기 에디터를 더 편리하게 이용할 수 있도록 해주는 기능들이다.
1~2. 사용자가 이미지 첨부를 하지 않고도 쉽게 퀴즈를 만들 수 있다.
3~4. 사용자가 문제 갯수, 객관식 문제 선택지 갯수를 자유롭게 선택하여 원하는대로 퀴즈를 만들 수 있다.
5. 다양한 형태의 퀴즈를 만들 수 있다.
6. 자신이 생성한 퀴즈를 관리할 수 있다.
7. 퀴즈 풀기가 가능한 최소한의 형태를 지켜 퀴즈를 만들 수 있도록 지정해 준다. |
퀴즈 풀기 채점 방식 | 1. 유저가 답을 입력할 때마다 DB에서 받아온 문제 데이터에 정답 여부에 따른 is_correct 를 추가
2. 유저의 답을 담은 state 를 만들고 제출할 때 데이터와 비교해 채점 | 1. 유저가 문제를 풀면 map 으로 그 문제의 정답과 비교하며 정답 여부를 알아 낼 수 있었다. 이 방식은 결과 페이지에서 유저가 입력한 답은 무엇인지 알 수 없다는 한계점이 있었고, 효율성 측면에서도 답을 입력할 때마다 채점을 한다는 문제가 있었다.
2. usersAnswers 라는 상태를 만들어 문제마다의 유저 답안을 모두 받아두고, ‘제출하기’ 버튼을 누르면 채점하는 방식이다. 입력한 답을 받아놨기에 결과 페이지에서 정답/오답에 따른 선택지 조건부 렌더링이 가능해졌고, map 을 쓸 필요 없이 find 로 해당 문제를 찾아내기만 하면 됐다. |
신고 글 삭제, 복구 처리 | 1. 관리자 페이지에서 삭제를 하면 DB table 에서 완전 삭제
2. quiz/post 에 deleted_at 컬럼을 추가해 유저들에겐 null 값인 데이터만 표시 | 1. table 에서 완전히 삭제하기에 데이터를 복구할 수 없다는 한계점
2. 데이터를 완전히 삭제하지 않고 deleted_at(default:null) 에 삭제된 날짜를 넣어 유저들이 보는 리스트에 조건부 렌더링으 표시를 했다. 관리자 페이지에서 신고, 복구 기능이 모두 가능하게 됐다. |
더 재미있는 타자 연습 게임 | 1. 난이도 세분화
2. 효과음 추가
3. 스페셜 단어 추가
4. 랭킹 제도 추가
5. 단어 내려올 때 모션 | 1. 게임의 난이도를 총 5개로 세분화 해 사용자가 더 다양한 난이도를 즐길 수 있도록 하였다.
2. 조용한 상황에서 계속해서 반복되는 단어 입력으로 인해 쉽게 재미 요소가 사라질 부분을 고려해 배경 음악, 단어 입력음 같은 효과음을 추가 하였다.
3. 게임에 좀 더 동적인 부분들을 추가해주고 싶어 단어 배열 중 math.random을 사용해 랜덤으로 단어를 지정해 지정된 단어 입력 시 화면에 보이는 모든 단어의 속도가 느려지게 하는 기능을 추가 하였다.
4. 이용하는 사용자들의 참여성을 높이기 위해 게임이 끝나고 점수를 저장해 메인 페이지에서 보여지는 랭킹을 추가 해주었다. |
조회수 어뷰징 방지 | 1. cron을 통해 매시간 배열 비우기
2. 조회수 따로 ERD 만들어서 관리하기 | 쿠키를 배열에 담아서 비교하여 조회수를 막았습니다. 그래서 1시간 뒤면 사라지는 쿠키였기에 1시간 후 배열에는 쓸모없는 정보가 담겨있습니다. 계속해서 불필요한 정보가 남다보면 서버의 과부하를 발생시킬 수 있기에 2개의 선택지 중 고민을 했는데, 2번 같은 경우에는 새로 만들어서 관리하기 때문에 코드량도 늘어나고 쿼리를 통해 삭제를 해야 합니다. 하지만 1번의 cron 같은 경우에는 SQL Editor를 통해 하고 싶은 것, 원하는 시간을 자유자재로 지정해 줄 수 있고 supabase 자체에서 자동으로 삭제 해주기 때문에 코드상에서도 간결해지고 간편하게 관리를 할 수 있습니다. |
•
이번 주 한 일 팀 전체
•
사용성 테스트를 진행했다면 해당 항목을 추가로 작성 해 주세요
◦
사용성 테스트 설문지의 링크와 결과, 결과를 토대로 반영해야 할 점을 작성 해 주세요
◦
사용성 테스트를 기반으로, 무엇을 어떻게 개선하면 좋을지 우선순위 별로 기록 해 주세요
우선
순위 | 개선 및 추가사항 | 마감
일자 |
1 | [퀴즈 풀기] 퀴즈 풀고 나서 정답 보여주기 | 4/22 |
1 | [퀴즈 풀기] 객관식 문항 radio버튼 뿐만 아니라 div 전체를 클릭했을 때 선택되도록 | 4/22 |
1 | [퀴즈 풀기] 퀴즈 다 풀고 나서 제출 버튼 활성화 | 4/23 |
1 | [퀴즈 풀기] 퀴즈 그만 풀기(나가기) 버튼 | 4/24 |
1 | [커뮤니티] 게시글 조회수 중복 카운트 방지 | 4/22 |
1 | [커뮤니티] 게시글 댓글 작성 날짜/시간 표시 | 4/22 |
1 | [퀴즈 리스트] 공식 퀴즈 컨텐츠 마크 표시 | 4/24 |
1 | [타자 연습] 단어 카드 가독성 고려하여 스타일 수정 | 4/23 |
1 | [타자 연습] 사운드 볼륨 조절 기능 추가 | 4/22 |
1 | [신고 기능] 신고 시 간략한 사유 작성할 수 있도록 수정 | 4/23 |
2 | [메인 페이지] 대형 배너가 정체성 더 잘 나타낼 수 있도록 수정 | 4/26 |
2 | [마이 페이지] 레벨제 인지를 돕는 아이콘 이미지 추가 | 4/25 |
2 | [소개 페이지] 보기 편안한 색상으로 배경 색상 조정 | 4/25 |
2 | [소개 페이지] ‘뭔말’이 무슨 뜻인지 소개하는 내용 추가 | 4/25 |
•
코드리뷰 결과를 아래에 작성해주세요.
◦
결과를 토대로 반영해야 할 점을 작성 해 주세요.
▪
▪
◦
무엇을 어떻게 개선하면 좋을지 우선순위 별로 기록 해 주세요
우선
순위 | 개선 및 추가사항 | 마감
일자 |
1 | ||
2 | ||
3 | ||
4 |