해커톤 Archives - On KimKevin's Dev Way

얼마전 플리토 사내에서 첫 번째 해커톤을 열었다. 보통 해커톤에 참여 할 경우에는 한 달 전부터 만들어 보고 싶은 것들을 꼭 팬으로 노트에 낙서하듯 적어본다. 딱히 이유는 없지만 팬으로 적었을 때에는 머리 속에서 더 오래 남아있는 것 같은 느낌이 들어서다.

그래서 이번은 회사 프로젝트는 아니지만 만들면 재밌을 것 같았던 ‘Where is Simon(CEO)?’로 결정했다. 플리토 청담 오피스는 현재 40명에 가까운 인원이 총 3개의 층을 사용하고 있고 사내 메신저로 가끔 누가 어디에 있는지 묻는 경우가 있어서 이를 확인할 수 있는 페이지가 있으면 좋겠다고 생각했었다. 가장 빈번히 찾는 대상은 어느 회사에서나 공공의 타겟 바로 대표님이다. 기본 아이디어는 ‘층마다 있는 무선 공유기(AP)에 접속한 직원들을 층별로 보여주자‘로 시작했다.

1. Mornitoring Agent – 층별 AP에 접속한 직원들 리스트 가져오기

가장 기본적으로 먼저 AP에 접속한 단말기의 정보를 가져와야 프로젝트가 시작될 수 있기 때문에 여러 방법들을 시도했다.

ipTIME 관리자 페이지로 리스트 가져오기

가장 먼저 iptime의 관리자 페이지에서 내부 네트워크의 접속 주소 정보를 리스트로 가져올 수 API가 있을까 했지만 실패다. 그래도 AP에 접속한 직원들의 MAC 주소 리스트를 쉽게 만들 수 있었다.

특정 AP에 접속한 기기정보 명령어로 가져오기

해커톤이 있는 전날 밤, 어떻게 직원들의 리스트를 가져올 수 있을지 찾아보다가 페이스북에 글을 남겼고 Bruce Lee님이 여러 링크를 댓글로 남겨주셨다.

그 중 하나가 AP에 연결된 클라이언트들의 리스트를 가져 올 수 있는 arp 명령어를 발견 했다.

$arp -a
? (192.168.2.1) at 90:9e:33:38:d3:98 on en0 ifscope [ethernet]
? (192.168.2.13) at (incomplete) on en0 ifscope [ethernet]
? (192.168.2.20) at c:8b:fc:b1:bd:ea on en0 ifscope [ethernet]
? (192.168.2.43) at d0:53:29:c7:8a:4b on en0 ifscope [ethernet]
? (192.168.2.54) at (incomplete) on en0 ifscope [ethernet]
? (192.168.2.63) at 44:12:10:b7:12:22 on en0 ifscope [ethernet]
? (192.168.2.71) at 28:5a:eb:a2:ed:94 on en0 ifscope [ethernet]
? (192.168.2.83) at d8:1c:72:d9:ce:e on en0 ifscope [ethernet]
? (192.168.0.112) at (incomplete) on en0 ifscope [ethernet]

첫 번째는 AP에서 할당한 내부 IP정보와 할당 받은 MAC 주소를 가져올 수 있다. PC뿐만 아니라 스마트폰, 태블릿이 AP에 접속하면 리스트에 포함이 된다. 여기에서 리스트의 가장 상단에 있는 192.168.7.1은 AP의 MAC 주소이다. 하지만 arp 명령어로 테스트를 해보면서 몇 가지의 이슈가 발생했다.

AP의 2.4G, 5G는 MAC 주소가 다르다.
MackBook은 얼마 후 ‘incomplete’상태로 변경되어 리스트에서 없어지고 Windows 노트북은 계속해서 유지된다.
arp에 나오는 기기정보들은 내 MacBook이 AP에 접속한 후에 접속한 기기들만 포함된다.

해커톤은 24시간 내 개발을 해야하기 때문에 완벽함보다는 가능성이 있는 부분을 더욱 구체화 시키는 편이 더 좋다. 그래서 추후에 위의 3가지 이슈를 해결할 수 있는 다른 방법은 실제로 서비스할 수 있을 때 찾아서 수정하기로 한다.

AP에 접속한 단말 정보 주기적으로 가져오기

$arp -a | awk '{print $2, $4}' | sed -e 's/(/''/g' | sed -e 's/)/''/g'
192.168.2.1 90:7e:32:33:d2:x1
192.168.2.13 incomplete
192.168.2.20 c:8b:fc:b1:bd:ea
192.168.2.43 d0:53:29:c7:8a:4b
192.168.2.54 incomplete
192.168.2.63 44:12:10:b7:12:22
192.168.2.71 28:5a:eb:a2:ed:94
192.168.2.83 d8:1c:72:d9:ce:eg
192.168.0.112 incomplete

필요한 데이터를 추출한 다음에 incomplete된 Mac 주소와 AP의 Mac 주소를 제외하고 웹 서버에 층 정보와 Mac 주소 리스트를 등록한다. 그리고 새로운 기기가 Wifi가 연결될 때 자동으로 웹 서버에 등록할 수 없기 때문에 setInterval 로 10초당 한번씩 확인해서 갱신되었을 때마다 웹 서버에 등록을 시켜주면서 최신으로 업데이트하도록 구현하면 된다.(사실 깊게 생각 안 했고 cronJob으로도 가능할 듯)

Mornitoring Agent에서 층 구별하기

ap = {
"90:7e:32:33:d2:x1" : "6",
"90:8f:31:33:d1:93" : "7"
}

층 정보는 arp 명령어의 결과에서 받은 ‘192.168.2.1 90:7e:32:33:d2:x1’의 MAC 주소와 Agent에 등록된 AP MAC 주소를 비교해서 몇 층에 위치한 모니터링 서버인지 구별할 수 있다. 위를 비교해보면 결과물은 6층 AP임을 알 수 있다.

2. Express for Node.js – 웹 서버 만들기

이번 프로젝트는 간단한 Rest API와 웹 서버가 필요했기 때문에 빠르게 구현할 수 있는 Express를 사용했다.

직원들이 사용하는 단말의 MAC 주소 리스트 미리 등록하기

flittorians = {
"78:31:c0:c3:e4:13" : "김케빈",
"54:4d:80:94:7e:c1" : "김케빈 아이폰",
...
}

웹 서버에서는 직원들의 Mac 주소 리스트를 가지고 있으므로 층 별로 모니터링 하는 Agent에서 변화를 알려주면 층 별로 매칭되는 직원들의 최신 리스트를 가지고 있을 수 있게 된다. 그리고 이 정보가 필요할 땐 JSON으로 보내준다.

Slack Bot 연동하기

Bruce Lee님의 이번 주제는 ‘슬랙봇 만들기’이다. 새벽이 되었을 때 층 별 API를 요청을 하셨고, 간단한 작업이라 만들어 드렸더니 본인이 만들던 슬랙봇에 연결을 했다. 서로 말하고 시작한 프로젝트가 아니였는데 재밌다. 때로는 독립적인 작은 덩어리가 서로 연결되어 큰 덩어리가 된다. 이런게 바로 개발의 행복 그리고 소소한 재미를 느낄 수 있었다.

3. ejs & bootstrap 으로 웹 페이지 만들기

웹 프론트 작업은 새벽 4시정도 부터 시작할 수 있었는데 이번 해커톤은 혼자지만 생각보다 진행이 잘되어 발표시간(12시)까지는 8시간을 남겨놓은 상태라 여유로운 편이다. 웹페이지는 express 만들 때 탬플릿으로 ejs를 설정했기 때문에 간단하게 bootstrap을 사용하여 간단한 table로 구성했다. 처음에는 스타일 없이 작업을 하고 시간적 여유가 있다면 간단히 스타일을 주는건 결과물을 보는 청중에게 더욱 인정받는 결과물이 된다. 여기에서 table은 bootstap-table을 사용해서 간단히 스타일을 적용했다.

정리하면서..

그리고 국내에서든, 국외에서든 모든 해커톤에서는 시간 관리가 제일 중요하다. 아무리 뛰어난 아이디어라고 하더라도 발표 때 결과물이 없다면 또는 만들었지만 정상적으로 동작하지 않는다면 심사위원들에게 인정 받지 못하기 때문에 심사위원에게 무엇을 어떻게 어필할지 있을지 마지막까지 고민해야한다. 즉, 시간이 걸리는 작업은 되도록 나중에 하는 것이 낫다라는게 개인적인 생각이다. 새로운 팀빌딩으로 작업을 하기 때문에 밤새하지 않더라도 적어도 프로토타입을 보여줄 수 있을 정도면 충분한 것 같다

6월 8-9일, 2일간의 길었던 기획자·개발자 디자이너 파티

저번 주 토요일, 서울에서 열린 세계 최대 개발자 파티로 알려진 ‘엔젤핵’에 참여했다. 기획자와 개발자, 다자이너로 팀 빌딩을 한 다음 24시간 동안 함께 프로젝트를 진행한다. 2일 동안에는 식사와 간식이 계속해서 제공되고, 모두가 2일 동안 마음껏 실력을 발휘할 수 있도록 좋은 환경을 제공해주었다. 이번 해커톤에는 생각보다 많은 외국인들이 참여했었고, 앞에서 피티나 스피치를 할 때 많은 사람들이 용기를 내어 영어를 사용했다.

팀을 미리 구성해서 참가 할 수 도 있고, 또한 윗쪽 사진(행사 6층)처럼 개발시작 이전에 기획자·개발자 디자이너 자신이 가져온 아이디어를 소개하거나, 개발자나 디자이너가 직접 기획자를 찾아가 아이디어를 자세히 듣고 나서 팀이 구성 되었다. 보통 팀 구성을 보면 3~5명, 많게는 6명 정도까지 팀을 구성한다. 이렇게 팀 빌딩이 프로젝트 시작을 알리기 전까지 계속 되며 많은 사람들이 돌아다니며 자유롭게 이야기를 나눈다, 이렇게 팀 빌딩이 마무리가 되면 오후 1시 정식으로 행사 시작을 알리고 본격적인 게임이 시작된다.

시작과 동시에 스폰서를 하고 있는 회사들의 개발 주제를 소개하는 워크숍이 열렸고 15분 가량 참가한 사람들에게 자신들의 개발 주제에 대해서 소개하고 개발자들과 이야기를 나누는 시간을 가졌다. 스폰서로 참여한 기업들은 삼성전자, SK플래닛, 아마존, VATOS, 블랙베리 등……등…. 자사의 API에 대해서 소개하고 이를 이용할 경우 특별한 상을 받을 수도 있다는 내용이었다.

현재 기업들이 준비된, 또는 준비하고 있는 서비시들을 참여한 개발자들이 이용할 수 있도록 자세하게 설명을 해주며, 궁금한 점이 있으면 별도로 연락을 해서 궁금한 사항을 물어볼 수 있다. 물론 이렇게 스폰서가 제공하는 주제를 사용하지 않고 자신들의 개인적인 아이디어로 프로젝트를 진행해도 문제는 없다.

저녁시간에는 이태원에서 유명한 바토스에서 제공한 브리또와 타코를 먹었는데 미국에서 먹어본 브리또, 타코와는 다르지만 정말 맛있었다. 바토스 또한 실제로 작은 스타트업이었다고 하는데 지금은 규모가 큰 레스토랑이 되었다고 한다. 저녁을 먹은 후 많은 인원들이 빠져나가서 남은 사람들 중에는 의자에서 자는 사람, 책상을 붙여서 자는 사람, 개발에 여전히 집중하는 사람 등 정말 재밌는 구경거리가 있었다. 우리 팀도 잠 한 숨 안자고 개발에 매진했고, 마무리가 되어 갈 때쯤 이미 해는 중천에 떠있었다.

일요일 오후 1시 작업이 종료되었고 팀별로 심사위원들에게 결과물 발표를 하는 시간을 가졌다. 1, 2등은 해외 실리콘 밸리를 일주일간 보내주는 기회를 가질 수 있다. 심사를 받기위해 방에 들어갔고, 유명한 분들이 심사위원으로 앉아 있었다. 4분 정도? 그리고 한 분씩 차례대로 질문을 했었고, 질문이 어렵지는 않았다.

심사가 끝나고 마지막으로 시상식, 이전 심사를 통해 선발된 6팀이 2분간 심사위원과 참여한 모든 사람이 있는 앞에서 작품 결과에 대해서 프리젠테이션하는 시간을 가졌다. 6팀을 발표하는데 거기에 우리팀도 불려졌다. 팀의 대표가 정해진 시간 2분동안 자신의 팀에서 만듬 제품에 대해서 설명했고, 심사위원 중에는 절반이 외국인이었기 때문에 피티 또한 영어로 진행되었다. 한 팀씩 피티를 들어보니 다들 아이디어가 창의적이고 열정이 대단하다. 우리 팀도 5번째로 발표를 마쳤고, 최종 발표를 남겨두고 있었다.

결과는 아쉽게도 3등을 해서 넥서스4를 받았지만, 더 좋은 팀들이 많았기 때문에 생각하지 못한 상이라 너무 감동을 받았다.

시상식이 끝나고 대회를 마무리 하기 위해서 에프터 파티가 압구정역에서 있었다. 특이한 행사는 제한된 시간내에 문제를 해결하는 음주 코딩, 문제로는 여자의 이름과 번호로 구성된 16진수 코드를 푸는 것이었는데 일정 시간마다 술은 한잔씩 원샷해야하는 남자들을 위한 세기의 대결로 해커톤은 마무리가 되었다.

해커톤

‘Where is CEO?’ == ‘사장 어딨노?’ 사내 해커톤 후기