Reward Board?
리워드 보드는 각각의 피자에 대한 랭킹을 보여주는 부분 입니다. 누가 피자를 제일 잘 만들었는지 (Completion), 누가 피자를 제일 빨리 만들었는지 ( Time) , 피자를 제일 많이 만들었는지 ( Count), 그리고 이 세 가지 항목을 총합한 종합 점수(Total) 에 대한 점수와 랭킹을 보여주고 있습니다.
비전 인식으로 직원이 피자를 만드는 것에 대한 모든 정보가 기록된다는 전제 하에, 데이터를 자체적으로 생성하여 DB에 저장해 진행하였습니다.
목업 데이터 형식
- User_id ( 각 유저에게 부여되는 고유한 ID)
- Stord_id ( 그 유저가 일하고 있는 매장의 이름)
- order_number: 주문 번호
- Score ( 점수)
4-1. Pizza_id ( 만든 피자의 고유한 ID )
4-2. Time ( 피자를 만드는데 걸리는 시간, 초 기준)
4-3. Quality ( 피자가 얼마나 퀄리티 있게 만들어 졌는가를 기준으로 100점 만점으로 환산)
4-4. Sauce ( 피자의 소스에 대한 점수, 제대로 된 곳에 소스가 뿌려져 있는가? 충분히 뿌려져 있는가? 등을 기준으로 100점 만점으로 환산)
4-5. Cheese ( 치즈가 제대로 된 곳에 위치해 있는가, 충분히 올려져 있는가? 등을 기준으로 100점 만점으로 환산)
4-6. Topping( 토핑이 적당한 위치에 있는가? 충분히 올려져 있는가? 등을 기준으로 100점 만점으로 환산)
http://wecode-row-data-sample.s3-website.ap-northeast-2.amazonaws.com/
페이지 구성
리워드 보드는 총 네가지 파트로 구성되어 있습니다.
1. Total :
Quality, Time, Count를 총합한 종합 점수입니다. 명예의 전당의 느낌을 낼 수 있도록 상위 3명 ( 지점) 을 강조하는 UI로 되어 있습니다.
2. Completion :
피자에 대한 완성도 랭킹 ( Quality, Topping, Cheese, Sauce의 점수를 총합한 결과)
3. Time :
피자를 만드는데 걸리는 시간을 기준으로 합니다. 시간을 보여주는 부분이기 때문에 최단 시간과 평균 시간으로 나누어서 보여주고 있습니다. 피자 별로 들어가는 소스, 올라가는 토핑, 만드는 데에 대한 난이도 등 조건이 모두 다르기 때문에 피자의 종류에 따라서 각각의 데이터를 보여줍니다.
4. Count:
여태까지 만든 피자의 판수를 나타냅니다. 가장 많이 만든 랭킹 1위를 기준으로 비교하여 나머지 유저들은 얼마나 만들었는지를 백분율과 판수의 차이로 보여줍니다. 절대적인 판수를 기준으로 비교를 하지 않은 이유는 피자가 만들어지는 숫자는 무제한으로 늘어날 수 있기 때문입니다. 1000판으로 할 경우, 1000판이 하루에 만드는 피자가 1000판의 이상이 될 가능성이 충분히 있을 것으로 판단하였습니다.
5. Achievement :
차트를 클릭 했을 때 그 유저의 종합 점수를 요약한 모달 창이 나옵니다. 게임에서 다른 유저 정보를 클릭하면 그 유저의 종합적인 점수를 확인할 수 있는 느낌으로 구현하였습니다.
필터 종류
- 날짜 별 필터 ( Daily, Weekly, Monthly, Yearly, History )
- 각 시간대 별로 결과를 비교할 수 있도록 날짜 별 필터를 설정해 놓았습니다.
- Crew / Store
- 개개인의 점수를 확인할 수 있는 Crew
- 각 지점에서 일하고 있는 크루들의 점수를 종합한 결과입니다. 지점별 비교가 가능합니다.
프로젝트 진행 중 이슈가 되었던 부분
1. 랭킹을 어느 선까지 보여줄 것인가?
우리가 가지고 있는 랭킹을 어느 단계 가지 보여줄 것인가에 대한 고민이 있었습니다. 모든 사람들의 랭킹을 보여줄 경우, 잘한 사람과 못한 사람에 대한 비교가 될 것 같다는 느낌이 들었습니다. 랭킹보드의 가장 큰 핵심 목표는 직원들에게 성취감을 부여하고 동기부여를 주기 위함이기 때문에 Top 20 까지의 결과를 보여주는 것으로 결정하였습니다.
2. UI 디자인 컨셉, Gamification
직원들이 피자를 만드는 것에 대해서 점수를 매기고 랭킹화 한다는 것이 양날의 검이 될 수도 있다는 생각이 되었습니다. 사용자가 랭킹 보드를 보았을 때, 성적표를 보는 느낌이 아니라 게임에 접속 했다는 느낌을 줄 수 있도록 디자인 하려고 노력하였습니다.
3. 모달 창에서 보여주는 정보
Achievement를 눌렀을 때, 시간 별 필터로 보여줄 것인지 아니면 history( 전체) 기간을 보여줄 것인지에 대한 고민이 있었습니다. 사용자 테스트 결과 유저의 입장에서, 그 사람의 하루, 일주일에 대한 개별적인 성적까지 궁금하지는 않을 것 같다는 생각이 들었고, 종합 점수를 보여주는 것으로 결정하였습니다.
4. Total 점수를 어떤 식으로 계산할 것인가? ( 기준과 가중치 )
만약 어떤 사람이 피자는 엄청 빨리 만들었는데 토핑, 소스가 엉망으로 되어 있거나 전체적인 퀄리티가 낮다면?
피자를 하루에 한판만 만들었는데도 완성도가 높다면? 피자를 여러 판 만들었지만 완성도가 낮다면?
피자를 만드는 것에는 여러가지 상황과 변수가 있을 수 있기 때문에 종합 점수를 계산하는 것에 있어서 가중치를 두는 것이 필요하다고 생각했습니다. 고객들에게 완성도 있는 맛있는 피자를 제공하는 것이 가장 중요한 부분이기 때문에 완성도를 5의 비중으로 두었습니다.
그 다음으로는 피자를 조금 더 빨리 제공하는 것이 중요하기 때문에 3으로 판수는 그 사람이 얼마나 많은 시간을 일하느냐 따라 달라질 수 있기 때문에 2로 가중치를 주었습니다.
5. Total 랭킹을 절대 평가 or 상대 평가
각 파트별 점수를 얼마 이상은 몇 점을 준다는 방식의 절대평가로 진행할 것인지, 1등부터 마지막 등수까지 줄을 세워서 상대평가로 진행할 것인지에 대한 고민이 있었습니다.
절대평가로 진행한다면, 유저별로 점수가 비슷해져서 분별력이 없을 것 같다고 판단했습니다. 또한, 시간의 경우 그 범위가 넓고 점점 기록이 짧아질 수 있기 때문에 어느정도까지 절대적 기준을 마련해야할지 어렵다고 판단했습니다. 그래서 1등이 100점이 되고 그걸 기준으로 상대적인 점수를 계산하여 total 랭킹을 도출하였습니다.
뱃지의 리스트를 받고 그 뱃지를 받은 상태인지 아닌지에 따라 투명도를 조절해 표현하였습니다.
추후 벳지의 종류가 3개 이상이 될 경우에는 위와 같이 디자인을 할 계획입니다.
프로젝트 후기
좋았던 점
1. 기획, 디자인, 개발을 모두 해본 것
개발을 배우기 전에 했던 기획과 비교해 보았을 때, 개발을 배우고 난 후에 하는 기획은 정말 다르다는 것을 알게 된 프로젝트였다. 우리가 정해진 시간 동안 어느 정도 까지 구현을 할 수 있을 지, 시간 관리는 어떻게 해야 할지에 대해서 정하는 것이 왜 필요한지를 느낄 수 있었다. 코딩을 시작하기 전에 우리가 어떤 기술을 사용할지에 대해서 고민해보는 것이 왜 중요한지도 깨달았다. 단순한 기능이라고 할 지라도 지금 당장 결과물을 만드는 것이 아니라 장기적으로 보았을 때 어떻게 해야 유지 보수가 좋을 지에 대한 고민을 하며 개발을 했다.
2. 백엔드와 맞춰가며 개발을 한 것
기획을 함께 하면서 어떤 부분을 보여줄 것인지, 보여줄 때는 어떤 정보들을 보여줄 것인지, 종합 점수는 어떤 식으로 계산한 결과를 보여줄 것인지, 모달을 만들 때 어떤 정보들을 보여줄 것인지 등등 거의 하나부터 열까지 모든 부분을 상의했다. 이전에 했던 프로젝트와 비교해 보았을 때에도 절대적으로 많은 소통을 했던 것 같다. 함께 만들어 간다는 느낌이 강하게 들었고 그만큼 뿌듯했다. 간단하게 바로 나올 수 있는 API가 있는 반면, 시간이 조금 걸려서 나올 수도 있는 API도 있기 때문에 그 API가 나오기 전에 미리 Figma로 페이지를 완전히 디자인 해 놓아서 프로젝트를 시간에 맞게 진행하고 마무리 할 수 있었던 것 같다.
3. 팀워크가 좋았던 점
이번 인턴십의 팀워크는 정말 최고였다. 프로젝트를 진행하면서 내가 정말 재미있고 행복하게 개발을 하고 있다는 느낌이 들었다. 진행하다가 어려운 부분이 있으면 옆에 앉아서 문제를 해결해 보기도 하고 같이 고민하기도 했다. 서로 편하게 농담도 주고 받고 했지만 또 어려운 부분이 있으면 같이 진지하게 고민해주는 것이 너무 좋았다. 기획부터 개발까지 진행 하면서 팀원들과 상의를 하면서 함께 정해야 하는 것들이 많았는데 그런 과정 속에서 의견 충돌이 나거나 어색해 지는 상황 없이 없었고 서로를 존중하면서도 할 수 있다며 용기를 주는 것이 좋았다. 각자가 만든 결과물에 서로 뿌듯해 하는 느낌이었다.
4. Typescript, Styled Component를 조금 더 깊게 경험
이번 프로젝트를 하면서 타입 스크립트를 처음 써 보았다. 사실 처음에는 그래! 타입 스크립트 빨리 공부해서 내걸로 만들고 프로젝트 만들면서 적용해야지! 하는 마음으로 시작했지만 쉽지 않았다. 하지만 4주라는 시간 내에 모든 것을 끝내야 하는 상황 이었기 때문에 정해진 시간 내에 페이지를 만들고 수정하거나 더해 나가는 방향으로 진행해야 할것 같다는 생각이 들었고, 우선은 페이지를 만들고 공부 하면서 리팩토링을 하는 식으로 작업했다. 그래서 처음에는 일명 'Any 파티' 가 열리기도 했지만 이후 수정을 하는 과정에서 타입을 지정하고 그 코드가 돌아가는 것을 보면서 안도감과 기쁨을 느끼기도 했다. 상태에 따라서 css를 다르게 적용 해보는 것을 꼭 해보고 싶었는데 이번에 해보면서 스타일드 컴포넌트를 더 잘 활용할 수 있었다. 공부를 한 상태에서 프로젝트를 하는 것도 좋지만, 우선은 충분히 답답함과 어려움을 느낀 후에 적용을 해보니 왜 이걸 써야 편한지, 왜 필요한지를 제대로 느낄 수 있었던 것 같다.
아쉬운 점
로딩 페이지
필터가 많아서 그 필터의 데이터를 받아오는 동안에 로딩 페이지를 넣고 싶었는데 시간 상 하지 못했다. 다음에는 꼭 해보고 싶다.
소켓 통신
실시간으로 랭킹의 순위가 바뀌게 될 것인데, 이것을 어떻게 받아오고 보여줄 것 인지에 대한 고민이 있었다. 소켓 통신을 하기에는 너무 시간이 오래 걸릴 것 같아서 refresh 버튼을 만들어서 새로운 fetch를 받아오는 식으로 했다. 다음에는 소켓 통신을 제대로 공부해서 활용해 보고 싶다.
