@julyfool님이 남긴 후기를 보고 짧게 나마 정리해봅니다.
2011년 10월 12일부터 3일간 Daum 개발자 컨퍼런스(DDC)가 있었는데요~
컨퍼런스 직전까지 @ryee_gee 님과 철야하면서 만든 전시 작품 준비때문에 일을 거의 못했던것 같네요. =_=;;
일단 기억을 되살려서 로그를 남겨봅니다.
제 트윗을 보시는 분들은 한번씩 봤을법한.. 동영상이 하나 있는데..
http://www.twitvid.com/embed.php?guid=twitvid&autoplay=0
위 동영상 촬영 이후, 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 기반으로 페이지 뚝딱 만들어봤습니다. (이미지 작업은 제가 하지 않았습니다. 왜인지는 트랙 보시면 알 수 있을 것 같네요 :D)
최초에는 아이폰의 경우, 버튼이 하나도 없었습니다. 단순히 x,y 기울기 가지고 플레이를 (강요) 했었죠 ;;
하지만 한바퀴 돌려고 안간힘을 쓰는 도중, 손목이 너무 많이 꺾이고, 실제로 플레이하는 모습이 그닥 아름답지 않아서 앞뒤만 기울기로 하고, 좌우는 버튼을 넣었습니다.
안드로이드의 경우에는 네 방향을 다 버튼형태로 작업했습니다. 하지만 실제 해보신 분들의 말로는 “잘 안된다” 였습니다. 네네.. 넘 급하게 만든 탓이겠지요… 흑흑.
마지막에 “LIKE” 넣고 싶어서 급하게 넣었습니다. 하지만 저만 열심히 눌렀습니다.(나중에는 아예 빼버린것도 같아요 ;;)
플레이 할때 일일이 주소 치고 들어오는게 불편한것 같아서 내친김에 소개 페이지도 하나 만들고, QR코드 넣었습니다.
딱 보면 아시겠지만… 요건 Twitter에서 소개한 Bootstrap에서 예제 페이지 디자인 수정 없이 100% 가져왔네요.
사용했던 프로젝트 소스는 여기에 링크합니다.
(코드 퀄리티와 딴지는 사양합니다. 하셔도 부끄러워서 할 말 딱히 없네요 ;; 막짠거라 ;;)