6시간만에 3500명이상 유입된 대학교 특성 mbti 테스트 프로젝트

웹 개발자가 되겠다는 마음으로 처음으로 시작한 프로젝트!
많은 시간 안 들이고 실제 서비스를 구현해볼 수 있는 아이템이 뭐가 있을까 고민하다 요즘 핫하고 내가 좋아하는 mbti테스트를 떠올렸다.
내가 다니는 대학교는 공동체 특징이 강하기 때문에 학교만을 위한 mbti를 만들면 너무너무 재밌을거 같았다!
그래서 상담심리 전공 친구를 영입해 함께 프로젝트를 시작했다

---

나는 웹 기획, 디자인, 개발을 맡았고
상담심리 친구는 내가 미리 생각해둔 질문지를 토대로
질문과 결과지를 만들어주었다

디자인 툴 : figma.
개발 툴 : react.js + firebase

0) 개발 단계

본래는 프론트에 react.js
백엔드에 node.js로 서버를 만들고 mysql과 닷홈의 무료 호스팅을 사용하여 개발했으나..!
용량이 작아 인원이 몰리면 너무 느려질거라는 생각에
과금 문제와 속도문제를 해결할 수 있는
firebase를 사용했다

개발 툴이 정해진 후 아래의 세 가지 요소들 가장 중요시 하며 개발했다.

1. 결과값 내는 알고리즘 (최대한 코드량, DOM 업데이트가 적도록)
2. 애니메이션 (css)
3. 반응형

웹 사이트
https://handong-test.web.app/

Handong MBTI

1) 유저테스트

Firebase hosting으로 배포를 완료한 후
유저테스트 개념으로 주변 사람들에게만 공유했다 .
눈에 보이는 에러가 없고 결과값이 잘 나와
안심했지만 주변 사람들을 통해 같은 대답으로 반복했을 때 다른 결과가 나온다는 것을 깨달았다😱
원인은 선택 값 클릭 시 중간중간 undefined가 도출되는 것 때문이였고, event.target -> event.currentTarget으로 수정하면서 단 시간에 문제해결할 수 있었다.
개발도 중요하지만, 다양한 조건에 관한 qa도 중요하다는걸 잊지 말기,, 나도 모르는 에러가 숨어있었다니..,

2) 서비스 배포 후 사용자 급증

커뮤니티에 뿌리기 전에 주변 사람들에게만 뿌려달라 부탁했다 근데,, 하루만에 폭발적으로 사용자가 급증 !
배포한지 6시간 만에 3500명 넘는 인원이 유입되었다.

하지만 배포한지 7시간 만에 읽기 수 50000건 달성으로 무료 서버 할당량 종료
갑자기 토탈 검사자가 0명으로 보이길래 놀래서 봤더니 무료 한도를 초과해 서비스가 중단되었다. 급하게 안내 공지를 띄웠지만 중단되었다고 Db를 못 보게 해 더 멘붕이였다ㅠ

원인은 사용자가 많이 유입되서도 있지만 write 수만 고려하고 read 수를 고려하지 않아서였다.
나는 read 수를 줄이기 위해 코드를 빠르게 수정했다. 이 날 사실 면접 전이였는데 문의가 많이 와서 면접 제껴놓고 같은 상황이 반복되지 않도록 문제를 수습했다! 일일 할당량이 다시 주어지면 바로 적용하려고 아래 해결방법으로 코드를 짜놨고 혹시 안 될 상황에 대비해 로컬 내에서 결과지를 받아오도록 데이터를 추가해두었다.

- write 에 적용했듯 첫 업데이트 시
결과 데이터를 session storage 저장해 결과값이 바뀌지 않는 이상 데이터베이스에서 다시 result를 불러오지 않도록 함
- 업데이트 시 여러 번 database에서 불러오지 않도록 조건문을 추가해 한 번만 읽어오도록 함

할당량이 업데이트 되자마자 코드를 적용하였고
그 결과 7시 30분 기준으로 읽기 수가 많이 줄었다는 것을 알 수 있었다!!

 

3) 배포 후 지금은

배포 3일차인 지금도 꾸준히 사용자가 유입되고
현재는 검사 수 7000번 , 실제 사용자 6000명이 넘었다!

재학생 , 졸업생 심지어 교내 직원 분들 톡방에도 공유되었다고 한다! 주변에서 너가 만든거냐구 시험기간에 넘넘 재밌다는 칭찬을 많이 듣고 있는데 넘 행복쓰,,
이래서 개발자 하나보다!