아날로그로 진행하는 제비뽑기를 디지털로 바꾼 후기
캡처 이미지
안녕하세요. 휴먼스케이프 Frontend Software Engineer 남현욱입니다. 이번 포스트는 개인적으로 공부하는 겸 사내에서 필요한 솔루션을 만들어본 후기를 알려드리려고 합니다.
소개
아래는 이 글의 주제가 될 레포지토리입니다.
humanscape/htm-human-talktalk This project was bootstrapped with Create React App. In the project directory, you can run: Runs the app in the…github.com
휴먼스케이프에서는 매주 월요일 HTM(Hello humans, Today is Monday!)을 진행합니다. 그 중 휴먼톡톡이라는 세션이 있는데, 3~4명씩 조를 짜서 약 5분 정도 일상적인 얘기를 주고받는 시간입니다.
그러나, 부득이하게 조 추첨 과정에서 학생 때 자리 뽑듯 하는 제비뽑기를 하게 되었습니다. 이 상황을 잘 관찰해서 아래의 문제점들을 뽑아낼 수 있었습니다.
종이를 뽑고 열어보면 번호가 나오는데, 같은 번호를 찾아다녀야 되는 번거로움
부재중인 휴먼이 몇 명인지 그때그때마다 달라서, 조 추첨할 때 용지를 넣고 빼고 교체해야 하는 번거로움
IT 기업답지 않음 (?)
제가 만들래요!
이런 상황이 지속되고 월요일이 되어 휴먼톡톡을 하게 되었는데, 그 자리에서 한 번 만들어보겠다는 다짐을 하고(…) 그 날 업무도 부담스러운 편이 아니라 오후부터 바로 만들기 시작했습니다.
기획
우선은 제비뽑기니까 필수적으로 랜덤으로 휴먼들을 재배열하는 기능이 필요합니다. 그리고 앞서 언급한 문제점들을 잘 커버할 수 있도록, 들어가야 할 기능들을 정리해보았습니다.
휴먼 재배열하기
한 그룹의 인원수 조절하기
재배열할 때 사용할 수식 (올림 / 내림 / 반올림) 정하기
세 번째는 왜 필요했던 기능이냐면, 다음의 상황을 가정해봅시다.
A: “나는 4명으로 하고, 사람 안 맞아도 무조건 4명이 넘어가지 않게 할 거야.” B: “나는 4명으로 하지만, 사람 더 넘으면 그냥 끼어서 5명 조도 만들 수 있게 할 거야.”
A의 상황, B의 상황, 그리고 A/B 둘 다 상관하지 않는 상황 3가지 모두를 커버하기 위해서 Math.(ceil|floor|round)를 자유롭게 선택할 수 있도록 했습니다.
개발
핵심적인 내용만 정리하겠습니다.
휴먼들의 일러스트만으로 Array
“이미지만을 이용해 Human 배열을 만들 수 없을까?”
webpack에서 제공하는 require.context()를 사용하여 순식간에 만들 수 있었습니다.
재배열하기
아래 두 개의 함수를 이용해 멤버들을 섞어주었습니다.
나머지는 Context API와 Hooks를 사용해서 만든 평범한 리액트 앱입니다. 진짜에요! (사실 Create React App 리드미도 안 바꿨어요 ㅎㅎ)
후기
만들고 나서 좋은 반응을 얻었습니다! 실제로 쓰기도 했어요 :)
한 술 더 떠서, 사용해본 후 개선안도 찾았어요!
Slack으로 결과 전송하기 (완료)
윈도우 UI(가 너무 구려서) 수정하기
멤버 추가 기능 만들기
사전 세팅 기능을 담은 Config 모달 만들기
결과값 어딘가(?)에 저장해서 불러쓸 수 있게 하기
TypeScript 적용 (10.31 완료)
“해보지 않고서는 당신이 무엇을 해낼 수 있는지 알 수 없습니다.” - Adam Franklin
Get to know us better! Join our official channels below.
Telegram(EN) : t.me/Humanscape KakaoTalk(KR) : open.kakao.com/o/gqbUQEM Website : humanscape.io Medium : medium.com/humanscape-ico Facebook : www.facebook.com/humanscape Twitter : twitter.com/Humanscape_io Reddit : https://www.reddit.com/r/Humanscape_official Bitcointalk announcement : https://bit.ly/2rVsP4T Email : support@humanscape.io
가입하기
