2020년 잡코리아에서 724명의 구직자를 대상으로 취업불안감 조사를 한 결과 약 92퍼센트가 불안감을 느낀다고 답변했습니다.
랭플은 열심히 미래를 준비하고 있음에도 불구하고, 항상 불안해하는 취준생들을 대상으로
불안감을 해소시키고, 동기 부여를 해줄 목적으로 만들어진 서비스입니다.
이러한 문제들을 아래의 solution으로 해결하고자 했습니다.
- 공부 시간을 체크할 수 있는 타이머
- 다른 사람들은 얼마나 공부하는지 확인하며 경쟁할 수 있는 랭킹 시스템
- 성취감과 자신을 돌이켜 볼 수 있는 스터디로그
서비스 링크 👉: https://ranking-planner.com
팀 노션 👉: https://c11.kr/161cx
- 메인 페이지
- 타임 타이머
- 스톱워치
- 랜덤 명언
- 설정 디데이
- todo 리스트
- 현재 공부 중인 사람 수
- 마이 페이지
- 프로필 수정
- 디데이 설정
- 스터디로그 그래프 (월별, 주별)
- 날짜별 todo 리스트
- 랭킹 페이지
- 전체, 20대, 30대 랭킹
- 일간, 주간, 월간 랭킹
모바일 및 데스크탑에서 쉽게 접근할 수 있도록 PWA를 이용한 웹앱 구현
대부분의 디바이스에서 알맞은 화면을 출력할 수 있도록 반응형 웹 적용
-
타임 타이머( or Circle Timer )
- 공부를 시작했을 때 Green
- 휴식 중일 때 Blue
- 목표를 달성했을 때 Red
- 시간은 매일 밤 12시에 초기화됨
-
스톱워치[Timer]
- 우측 상단에 간단한 시간체크를 할 수 있는 스톱워치로 서버가 아닌 로컬에 시간을 저장하여 사용
-
투두 리스트
- 오늘 할 일을 잊어버리지 않도록 메모할 수 있는 투두리스트
- 오늘 완료한 todo 개수 / 오늘의 전체 todo 개수로 표현
- 클릭 or 터치 시 수정 및 삭제 가능
-
현재 공부 중인 인원 수
-
마이페이지에서 내가 설정한 D-day 슬라이드로 표시
-
info modal
- 회원 가입 후 최초 접속 시에 자동으로 띄우고, 그 이후 접속 시에는 왼쪽 상단의 info 버튼으로 접근
- 랭킹
- 일간, 주간, 월간 랭킹 확인 가능
- 각각 유저의 랭킹에서 유저의 직종 및 현재 접속 여부 확인 가능
- 전체 랭킹 클릭 시 바텀시트로 나이대 별 랭킹 변경 가능
-
오늘 공부한 시간과 어플을 사용하면서 공부한 총 시간 확인 가능
-
프로필 수정
- 닉네임, 연령대, 분야 바꾸기 가능
- 닉네임 변경에 회원가입과 마찬가지로 디바운싱 적용해 UX개선
-
디데이 설정
- 캘린더 형식으로 날짜 선택 가능
- 추가 시 D-day를 자동으로 계산해주며, 메인 화면에 슬라이드로 확인 가능
-
월간 스터디 로그
-
날짜 별 투두 리스트
- 다른 날짜의 투두 리스트를 확인할 수 있음
- Done 수정 불가
-
주간 스터디 로그
- 일주일 단위로 공부한 시간을 확인할 수 있는 차트
- 월간 스터디 로그와 같은 색상으로 표현
ranking-planner-pwa
├─ .eslintrc
├─ .prettierrc
├─ public
└─ src
├─ app
│ ├─ slice //슬라이스 관리
│ └─ store.jsx
|
├─ common //공통 파일 관리
│ ├─ css //공통 css module 관리
│ ├─ font
│ └─ svg
|
├─ components //조각기능 별 컴포넌트 폴더로 관리
|
├─ hooks //커스텀 훅 관리
|
├─ layout //레이아웃 컴포넌트 관리
|
├─ pages //page 관리
|
├─ shared //router 관리
│ └─ Router.jsx
|
└─ utils //공통 함수 관리
이름 | 담당 |
---|---|
박종현 | 타임 타이머(서버 통신), 스톱워치, 메인페이지,Layout, 주간 스터디 로그, 타임피커, pwa, github actions, FCM |
김수환 | D-day CRUD, D-day 캘린더 , todo list CRUD, 월간 스터디 로그, 마이페이지 날짜별 todo list |
한효승 | 타임 타이머(svg로 구현 및 기본 틀 완성),로그인, 회원가입/프로필 수정 및 디바운싱, 랭킹페이지, s3 + cloudFront |
vercel -> s3 + cloudFront
- vercel 선정
- 첫 프로젝트로 시간이 빠듯할 것으로 판단
- 별도의 CI/CD 구축 없이 자동 배포
- cdn 서버도 우리나라에 특화되어 있음
- 배포 후 테스트
- 배포 후 테스트 해본 결과 vercel의 평균 속도는 472ms로 로컬과 큰 차이가 나는 것을 확인 local환경보다 굉장히 느린 속도로 데이터가 넘어오는 것을 확인
- 추론
- 백엔드에서 보내주는 데이터도 아니고, 백엔드 서버의 문제였다면 로컬에서 또한 느린 속도로 넘어와야한다고 판단
- 웹에 문제가 없다면 속도에 큰 영향을 미치는 것은 배포 서버일 것이라고 추츨
- 결론
- s3 + cloudFront로 다시 배포한 결과 평규 472ms -> 9.79ms(98%)로 속도 단축
date 관련 라이브러리
전역 상태 관리
- 선택지: recoil, redux
- 선정 이유:
- recoil
- react를 만든 meta에서 만들어 굉장히 react와 호환성이 좋고, 충분히 가볍고, 러닝커브가 작다고는 하지만 아직 recoil의 커뮤니티는 충분히 단단하지 못하다고 판단
- 빠듯한 시간 속에 첫 프로젝트를 하는 입장에서 예상치 못한 오류를 접했을 때 해결하는 데에 많은 시간이 소모될 것으로 예상 2. redux Toolkit👈
- 커뮤니티가 충분히 단단하고, 주간 다운로드 수도 recoil 보다 20배 이상 높은 리덕스를 선택
- 방대한 양의 보일러 플레이트를 줄이기 위해 리덕스 툴킷을 사용
- 기존에 회원가입이나 수정할 때 유저는 닉네임을 입력 후 엔터를 누를 것이라고 추측해 유효성 검사를 submit이나 blur 되었을 때 처리
- 불편하다는 피드백이 62개의 응답 중 6건
- 해결 방안
- 입력할 때마다 유효성 검사
- 디바운싱 적용 👈
- 선정 이유
- 입력할 때마다 유효성 검사 시 한 번 입력할 때마다 빨간색 -> 초록색 -> 빨간색 으로 변해 유저가 당황할 것으로 판단
- 입력할 때마다 get 요청을 보내는 것은 불필요한 리소스를 소모하는 것이라고 판단
- 유저가 당황하지 않고, 불필요한 리소스를 소모하지 않게 검사를 입력이 끝났을 때만 보내는 디바운싱 채택⭐
- 기존에 투두리스트와 월간 스터디 로그는 별개의 컨텐츠로 마이페이지에서 한 눈에 확인할 수 있게 배치
- 미완성 된 것 같다는 피드백 62개의 응답 중 3건
- 이유: 월간 스터디 로그가 캘린더 모양을 하고있고, 오늘 날짜에 흰색 테두리가 되어 있어 해당 날짜를 표현하는 것으로 오해
- 해결 방안
- 월간 스터디 로그의 흰색 테두리 수정
- 투두리스트와 월간 스터디 로그 연동 👈
- 투두리스트와 월간 스터디 로그를 연동시켜 해당 투두리스트를 달력으로도 한 눈에 보기 쉽게 수정