우린 제비뽑기도 디지털로 해요!

아날로그로 진행하는 제비뽑기를 디지털로 바꾼 후기

남현욱
남현욱
Oct 30, 2019 · 4 min read
캡처 이미지

안녕하세요. 휴먼스케이프 Frontend Software Engineer 남현욱입니다. 이번 포스트는 개인적으로 공부하는 겸 사내에서 필요한 솔루션을 만들어본 후기를 알려드리려고 합니다.

소개

아래는 이 글의 주제가 될 레포지토리입니다.

휴먼스케이프에서는 매주 월요일 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> 만들기

“이미지만을 이용해 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

휴먼스케이프 기술 블로그

Together, we build healthier lives.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store