node-arduino 사용기@다음 개발자 컨퍼런스 2011

@julyfool님이 남긴 후기를 보고 짧게 나마 정리해봅니다.

2011년 10월 12일부터 3일간 Daum 개발자 컨퍼런스(DDC)가 있었는데요~

컨퍼런스 직전까지 @ryee_gee 님과 철야하면서 만든 전시 작품 준비때문에 일을 거의 못했던것 같네요. =_=;;

일단 기억을 되살려서 로그를 남겨봅니다.

제 트윗을 보시는 분들은 한번씩 봤을법한.. 동영상이 하나 있는데..

http://www.twitvid.com/embed.php?guid=KJBWT&autoplay=0

위 동영상 촬영 이후, Bluetooth Shield를 구매해서 얹고 대충 모바일 페이지 작업해서 테스트했었죠 ;

Arduino Bluetooth Shield

이렇게 혼자 만들어놓고 공들인 시간이 넘 아까워서 전시 한번 해보자 싶어서 신청했습니다. 하지만..

작년에 출품한 RC카와 다른게 뭐냐?

라는 Feedback을 받았습니다. 사실, 작년 DDC 때 RC카가 있긴 했지만 눈여겨 보지 않아서 뭐라고 답하기 그랬는데,

기억을 더듬어 보니 제가 사용한 RC카 보다 (엔진 소리로 짐작하건데) 훨씬 크고 비싸고 좋았던 것 같았고,

Draft 할 수 있도록 어느정도 공간이 있었던것 같았습니다. 해서…

“사용자가 좀 더 참여할 수 있도록 Track을 만들어야겠다!”고 생각했습니다. 해서…

Track을 만들고, Cam을 붙여서 좀 더 재밌게 할 수 있게 해보겠습니다.

해서 전시 프로젝트가 진행되게 되었습니다. (결국 프로젝트 명을 정하지 못했네요 ㅠㅠ)

출품한 작품은 “NodeJS로 제어하는 Arduino : 웹에서 R/C 자동차의 원격제어” 입니다.
(배보다 배꼽이 더 큰 프로젝트라고도 하죠 ;;)

(지금 보니 다소 부끄러운 제목이네요 ;;)

이 전시 작품은 voodootikigod의 node-arduino를 기반으로 Digital/Analog Input 기능을 추가한 제 node-arduino 모듈을 만들어서 이를 기반으로 작업했습니다.
(추가 기능과 관련한 아이디어는 FRENDS 4번째 모임에서 발표했던 슬라이드 61262128 when-arduino-met-node-js 에서 확인할 수 있습니다. 아이디어라고 하기엔 너무 초라하네요 ;; )

어쨌든, 이 전시 작품을 준비하면서 만들었던 전반적인 것들을 소개하고자 합니다.

일단 전시 작품에서 중요한건 “Visual”이다 싶어서 제가 선택한 시트지로 작업한 결과,

최초 프로토타입은 다음과 같이 나왔습니다.

딱 보면 떠오르는게 있죠?

아놔!

역시 디자인에 대한 센스는 되도록 남자를 신뢰하면 안되고, 특히 제 자신을 신뢰하면 안된다는 것을 다시 한번 알게 되었습니다.

어쨌든 우여곡절 끝에 만들어진 트렉 모양은…

이렇게 바뀌었습니다.

파랑색을 제가 또 골랐는데, 좀 어두운 파랑을 골라서 작업하고 또 절망했습니다. ㅠㅠ
(역시 절 다시 믿어선 안되는거였는데… 음 ;;)

좀 더 가까이(?) 찍어봤습니다.

위 사진에서 Start 라인을 유독 전구로 강조한 이유는… 조광센서를 사용해서 Lap Time을 체크 하고자 했습니다.

node-arduino로 Analog Input을 사용하기 위해서 시도했던 처절한 몸부림이라고나 할까.. =_=;;

(사실, 오래전 트윗에서 Digital Input을 테스트 했었는데요, Analog을 안해봐서 해보고 싶었습니다. )

하지만 위와 같이 트랙 만들기 전에, 사용자가 게임을 하기 위해서는 뭔가 컨트롤 할게 필요했습니다.

사내 개발자 컨퍼런스다 보니 (아주 단순한 사고를 통해) 거의 99%에 가까운 개발자분이 아이폰/안드로이드 폰을 가지고 있다는 것을 이용해서…

jquery mobile 기반으로 페이지 뚝딱 만들어봤습니다. (이미지 작업은 제가 하지 않았습니다. 왜인지는 트랙 보시면 알 수 있을 것 같네요 )

최초에는 아이폰의 경우, 버튼이 하나도 없었습니다. 단순히 x,y 기울기 가지고 플레이를 (강요) 했었죠 ;;
하지만 한바퀴 돌려고 안간힘을 쓰는 도중, 손목이 너무 많이 꺾이고, 실제로 플레이하는 모습이 그닥 아름답지 않아서 앞뒤만 기울기로 하고, 좌우는 버튼을 넣었습니다.
안드로이드의 경우에는 네 방향을 다 버튼형태로 작업했습니다. 하지만 실제 해보신 분들의 말로는 “잘 안된다” 였습니다. 네네.. 넘 급하게 만든 탓이겠지요… 흑흑.

마지막에 “LIKE” 넣고 싶어서 급하게 넣었습니다. 하지만 저만 열심히 눌렀습니다.(나중에는 아예 빼버린것도 같아요 ;;)

플레이 할때 일일이 주소 치고 들어오는게 불편한것 같아서 내친김에 소개 페이지도 하나 만들고, QR코드 넣었습니다.

딱 보면 아시겠지만… 요건 Twitter에서 소개한 Bootstrap에서 예제 페이지 디자인 수정 없이 100% 가져왔네요.

이쯤에서 동영상이 하나 딱 링크 되어야하는데, 제가 동영상을 찍지 못해서 뭔가 보여드릴게 없네요.

조만간 회사쪽에서 찍은 영상을 구해서 다시 업데이트 하겠습니다. ㅠㅠ

사용했던 프로젝트 소스는 github에 넣기도 에매해서 여기에 링크합니다.
(코드 퀄리티와 딴지는 사양합니다. 하셔도 부끄러워서 할 말 딱히 없네요 ;; 막짠거라 ;;)

p.s. 뭔가 정리한다고 했는데 부족한듯… ;;