2. Google HackFair 3층

티스토리 뷰

Etc

2. Google HackFair 3층 - 1 전시실

taehwan 2012. 11. 18. 23:54

728x90

Google HackFair에 다녀왔습니다. 행사 하기전부터 이미 포스팅도 여러번 했었고, 실제 작품도 출품했었습니다.

이번 Google HackFair는 국내에서도 최초이고, 미국 본사에서 조차 하지 않았던 처음있는 행사라고 합니다. 정말 다양한 분야의 40개 팀이 참여를 하였고, 아이디어 또한 대단하다고 생각됩니다. 아쉽게도 저희팀 작품을 제출했지만 떨어졌습니다. 다음기회에 또 다른 방법으로 제출하였으면 합니다.

Google HackFair에 대한 자세한 내용은 아래 글을 참고하시면 좋을 듯 합니다.

http://googledevkr.blogspot.kr/2012/08/google-hackfair.html

Google HackFair 작품 소개글이 하나둘 올라오고 있습니다. 모두 Google Developers Korea에 올라오고있으며, 해당 글들을 프로젝트에 따라 링크를 추가합니다.

후기는 총 5개의 글로 작성합니다.

1. Google HackFair에 가다!

http://www.thdev.net/331

2. Google HackFair 3층 - 1 전시실

3. Google HackFair 4층 - 2 전시실

http://thdev.net/333

4. Google HackFair 4층 - 3 전시실

http://thdev.net/334

5. Google HackFair 5층 - 4 전시실

http://thdev.net/335

제가 직접들은 내용과 아래 Docs에 올려진 내용을 참고하여 작성하였습니다.

https://docs.google.com/spreadsheet/ccc?key=0AoXWR1-16M0WdGxaNkhNQW1HMTV3d2NGc1ItaHR5Wnc#gid=0

2번째 부터는 후기라기 보단 전시되었던 작품들 소개를 하겠습니다. 각 층별로 학생들의 작품과 일반인 분들의 작품들이 정말 많이 있습니다. 중간중간 빠진 부분이나 내용이 많을 수 있습니다. 사진을 찍고나니 흔들린 사진이 많더군요. 여러장 찍는다고 찍었지만 아쉽네요 ㅠ....

3층 - 1 전시실

3층에서 전시했던 작품 목록입니다. 1전시관에 가장 많은 작품들이 모여있었습니다. 아래 목록 순서대로 글을 작성하도록 하겠습니다.

학생부와 일반부를 분리하지 않고, 별도로 표시만 해두겠습니다^^;

1. goorm IDE - 학생부

학생부로 출품한 goorm IDE는 클라우드 기반 통합 개발 환경을 제공하는 툴이라고 합니다. node.js 기반의 오픈소스 프로젝트라고 합니다. 일단 별도의 프로그램의 설치가 필요하지는 않습니다. 당연히 해당 프로그램을 구동하기 위한 서버가 필요하긴 하지만 해당 서버만 있다면 웹페이지를 통해서 언제든지 코딩이 가능합니다. 거기에 협업기능을 위한 PPT를 동시에 보거나, 채팅을 지원하기도 합니다. 그리고 협업을 위해서 사용자마다 수정하고 있는 부분을 실시간으로 보여주는 기능까지 제공하는 웹기반 IDE 툴입니다.

C/C++, Java, node.js. html, go 언어 등을 지원한다고 합니다.

구름 프로젝트 홈페이지입니다. 아래 홈페이지에 접속하시면 해당 프로그램의 설치 및 다양한 정보를 얻을 수 있습니다.

http://goorm.io/

해당 홈페이지에서 연혁을 봤는데 2008년부터 시작된 프로젝트라고 합니다.

웹 기반으로 동작하는 화면입니다. 웹 기반이기 때문에 OS와 상관이 없고, 프로그램 설치도 필요하지 않습니다.

오른쪽에 이미지가 보이는데 slideShare를 통해서 PPT를 협업하는 사용자와 공유할수 있고, 협업사용자간 채팅도 가능합니다.

이클립스나 Google Drive에서 문서편집을 해보신분이라면 익숙한 창을 보실 수 있으실겁니다^^

이클립스처럼 멀티창도 제공합니다.

Google HackFair로 올라온 동영상

2. 안심병원 - 일반부

지난 8월 공공데이터 캠프인 "코드나무"(저도 참여를 했었습니다^^;)에서 진행했던 프로젝트를 새로운 4명이 모여서 진행한 프로젝트라고 합니다. 그때는 "Ushahidi"라는 툴을 사용하여 지도를 보여줬었습니다. 새로운 4분이 모여서 이번에는 구글 지도를 사용한 플렛폼으로 업그레이드 하였고, 특정 지역이 아닌 병원데이터가 제공되는 곳의 거의 대부분의 정보를 제공하고 있다고 합니다.

역시 오픈소스로 소스코드도 제공되고 있고, 안드로이드 앱이 있다고 하는데 시연은 보지 못하였습니다.

지금은 "항생제 처방 등급", "안심 먹거리", "심장충격기 위치"를 제공한다고 합니다. 지난 8월에도 괜찮은 플렛폼으로 1등을 했던 작품인데 없어지지 않고 더욱 업그레이드 되어 구글 HackFair에서도 만날 수 있어 좋았습니다.

코드나무는 CCKorea에서 진행했던 행사이고, Facebook의 그룹을 통해 참여하실 수 있습니다^^

열려러 공공데이터

https://www.facebook.com/groups/243881459064203/

안심이 홈페이지

http://ansim.me/

아래와 같이 지도를 통해서 병원에 대한 정보를 제공해주게 됩니다. 등급별로 색상을 다르게 지도로 표시해주고 있고, 항생제 처방 등급, 안심 먹거리 외에도 심장충격기 위치를 함께 제공합니다. 아쉬운 것은 심장충격기의 위치 정보가 많지 않다고 합니다. 이런 정보는 국가차원에서 더 많은 정보가 제공되었으면 합니다.

3. Multiplevideochat - 일반부

이번 Google I/O를 통해서 소개된 WebRTC와 GetUserMedia API를 활용한 화상 채팅입니다. HTML5를 사용하여 웹사이트를 통해서 제공되며 서버의 환경에 문제가 없다면 무제한 접속도 가능하다고 합니다.

WebRTC를 사용하여 다중 화상 채팅방식으로 개발 되었고, 당일날은 2명과의 화상채팅을 보여주셨습니다. 당연히 음성과 채팅도 가능합니다. WebRTC와 Javascript, HTML 5만을 사용하였기에 웹을 통한 접근성이 높습니다. 거기에 다중으로 접속도 가능하구요. 행아웃이 최대 8명이 접속가능하다고, 해당 프로그램도 최대 8명으로 작성하셨다고^^;;

참고로 이원제님이 제작하셨으며 수원 GDG 모임을 운영하고 있으십니다.

WebRTC에 대해서 추후에 공부해보는게 좋을 듯 합니다. 브라우저간에 P2P 통신이 가능한 서비스도 제공된다고 하네요.

시연 영상입니다. 다른 원격지의 영상 2개가 보여지고 있습니다.

HackFair 제출 후에 다시 올리신 동영상

4. xyzSlide - 학생부

학생 2분이 제작하신 xyzSlide 입니다. 실제 시연을 봤는데 Prezi를 아시는 분이라면 쉽게 이해할 수 있을 겁니다. 웹 기반으로 제작되었고 3D Zooming Presentation 에디터라고 합니다. 구글 드라이브와 연동하기 때문에 회원가입이 필요치 않습니다.

버그가 있다곤 하지만 직접 체험하실 수 있게 아래 사이트를 링크합니다. 구글 드라이브와 연동하기 때문에 액세스만 해주시면 됩니다.

http://xyzslide.com/editor

Prezi는 화면단위가 아닌 각각의 글, 사진 들에 대해서 자유롭게 화면전환을 할 수 있지만 해당 xyzSlide의 경우에는 일반 슬라이드처럼 제작하고 순서도 쉽게 변경이 가능하다고 합니다.

시연 화면

아래는 제가 직접 사용해본 화면입니다.

처음 실행하시면 구글 엑세스를 하시면 됩니다. 그리고 바로 아래와 같이 화면이 표시됩니다. 저장은 Google Drive에 저장되지만 아직 자동저장이 되지 않으니 참고하세요.

아이콘중에 배경화면 오른쪽 아이콘을 클릭하면 슬라이드를 Piezi 처럼 자유롭게 구성할 수 있습니다. 아래와 같이 첫 화면과 2번째 화면을 자유로운 위치로 정리할 수 있고 xy, z, rxy, rz, scale 을 사용하여 자유롭게 위치를 놓을수도 있고, 정렬도 가능합니다.

쇼 화면입니다. 키보드의 방향키를 사용하여 화면을 볼 수 있습니다. Prezi 처럼 별도의 메뉴는 보이지 않아 프레젠테이션 할때더 더 좋을 듯 합니다.

5. ALARME - 일반부

휴대폰과 동기화 되는 탁상 시계 알라미라는 작품입니다. arduino를 사용하여 제작한 별도의 시계가 있고, 안드로이드 기반의 어플이 있습니다. 2개가 동기화가 되어 있기 때문에 알람이 동시에 울리게 됩니다. 해당 정보가 별도의 클라우드에 저장되기 때문에 이 기록이 모두 남게되고, 또 친구들과 알람을 공유할수도 있다고 합니다. 여기에 NFC를 통해사 사용자 인증을 진행합니다.

별도로 제작하신 작품이 하나더 있었습니다. 메일이 도착하면 해당 메일의 내용을 프린트를 해서 보여준다! 그래서 이벤트를 하는 작품도 만드셨습니다. 커피와 사탕이 있었지만 커피는 잘 안걸리더군요^^;; 사탕은 맛있게 먹었습니다. ㅎㅎ

작품의 사진입니다. 뒤에 커피가 보이는게 메일이 도착하면 출력해주는 장치입니다.

앞에는 arduion를 사용한 시계가 있고, 오른쪽의 실제 아날로그 시계는 허전해서 붙여보았다고 합니다^^;; 시연 동영상은 예전에 제출하실 때 올려주신 동영상이 있어 첨부해봅니다.

http://www.youtube.com/watch?v=WR_2pHxrIE4

작품 시연 동영상

6. SiLog - 일반부

SiLog는 Google App Engine을 활용하여 제작한 블로그 시스템이라고 합니다. 기반이 Google App Engine의 Python을 사용하였다고 합니다. App Engine에서 제공하는 용량이 크기 때문에 용량의 제한은 없다고 합니다. 사실상 구글의 서비스를 사용하는 것이죠. 장점으로 단순한 블로그가 아닌 Page 형태의 기능을 제공하고, RSS등의 블로그 기본기능 또한 제공된다고 합니다.

가장 중요한건 이 블로그는 클라우딩 컴퓨팅 기반에서 동작하는 블로그라는 점입니다.

동작 방식에 대한 내용은 HackFair의 내용중 링크가 있어 아래와 같이 첨부하였습니다. - 문제가 있을시 삭제하도록 하겠습니다.

7. WebDMB - 일반부

웹에서 DMB를 시청한다?? 어떻게 생각하세요. 웹페이지를 통한 DMB 시청! 데이터가 들어가지 않는다고 합니다. 해당 기술은 KBS기술연구소에서 제작한 Android HTML 5의 기술을 활용한 작품입니다. 아직 DMB를 웹 페이지로 뿌려주는 기술이 없어서 플러그인을 활용한다고 합니다. 생각보다 좋은 기술이라고 생각됩니다. 아래 사진에서 보시면 화질의 차이와 + 웹페이지에서 볼 수 있다는 차이를 아실 수 있으실 겁니다.

생각보다 재미있게 생각되어집니다. 저같은 경우엔 DMB 앱을 통해서 티비 시청은 하지 않습니다. 첫 째로 화질이 너무 안좋습니다. 원래 DMB의 최적화 화질은 7인치라고 합니다. 하지만 실제로 7인치 이상의 제품에서도 DMB 시청이 가능합니다. 화질이 좋지 않는 이유야 잘 터지지 않는 곳이긴 하겠지만 티비를 꼭 봐야할까? 웹으로 TV를 보면 더 좋은 화질을 얻을 수 있는데 라는 생각을 가지고 있습니다. 두 번째로는 긴 안태나를 써야 할까입니다. 이번에 소개된 WebDMB 역시 안태나는 꺼내야 합니다. 저는 그래서 잘 사용하지는 않습니다. 거기에 칩 하나 더 드러갔다고 10만원 정도의 가격을 더 받는것도 이해가 안되구요.

아래 홈페이지로 접속하셔도 현재는 시청이 불가능하다는 점 알아두세요.

개발자분들이 직접 작성하는 HackFair 출품작 소개글

http://googledevkr.blogspot.kr/2012/12/ghackfair-winners-webdmb.html

아래가 시연중이 영상입니다. 왼쪽부터 갤탭 8.9와 갤탭 10.1입니다.

왼쪽 위에는 8.9인치에서 동작하는 기본 DMB 화질입니다. 조명때문이긴 하지만 실제로도 화질은 좋지 않았습니다. 제가 가지고 있는 4.8인치 제품에서도 화질이 저모양인데.... 보지 않는건 당연합니다.

그리고 아래의 제품이 고화질로 제공되는 화면입니다. 단순히 DMB만을 활용하지 않고, Data를 통해 고화질을 만들어준다고 합니다. 실제로 어떻게 만들어졌는지는 저도 잘 모르겠습니다. 이정도 화질이라면 pooq로 보지 않아도 좋을 듯합니다.

마지막으로 웹페이지에서 보여지는 화면들입니다. 실제로 웹페이지위에 DMB를 통해서 실시간으로 보여지고 있습니다. 화질도 깨끗하고, 웹에서 제공되는 다양한 정보도 함께 볼 수 있어 좋습니다. 이런 기술을 적극 활용한다면 포털에서 제공하는 스포츠 채널에 대한 유지비도 줄어들것이라고 하네요. 하지만 아직 비표준이라는 점...

WebDMB 시연동영상

8. StarTrek - 학생부

나홀로 집에 3는 누구나 아는 영화일겁니다. 거기에 나오는 RC카에서 영감을 얻어 제작했다는 starTrek입니다. Android를 사용하였고, Arduino와 HTML 5, Google Map, node.js를 사용합니다. HTML 5와 node.js를 사용한 이유는 Android폰에서 전송된 영상을 웹페이지를 통해 제공하게 됩니다. 이 때 전송되는 영상은 영상이 아닌 이미지 파일이라고 합니다. 1초에 한번씩 전송하게 되면 영상처럼 볼 수 있는게 사실이니깐요.

그리고 단순히 멀리서는 제어할 수 없는 컨트롤러를 해결하기 위해서 네트워크를 사용하였다고 합니다. 영상만 보고도 멀리서 컨트롤 할 수 있을태니깐요. 그리고 안드로이드를 사용하였기 때문에 GPS 위치정보도 받을 수 있고, 안드로이드를 통한 Arduino 컨트롤을 사용하여 움직이게 된다고 합니다.

자세한 프로젝트 설명은 HackFair에서 제공하는 목록을 참고하시면 됩니다.

RC카의 내부 모습입니다. Auduino를 사용한 모습입니다.

차량의 모습입니다. 전면에 넥서스S가 부착되어 있는 모습입니다. 그리고 배터리팩이..보이네요^^;

전면의 모습

- 사진과 위치 정보 전송을 위한 안드로이드 폰이 탑제되어 있습니다.

9. Face Shape Tracking Library - 학생부

OpenCV를 사용하여 Android폰으로 얼굴의 특징점을 인식하여 화면에 보여주는 작품입니다. 이걸 이용해서 더 많은걸 할 수 있을 듯 합니다.

기본적으로 얼굴의 위치 추적 기능과 얼굴 거리 추적 기능, 얼굴 윤곽선(특징점) 추출기능 3가지의 기능을 제공합니다. 제가 올린 영상은 선명하게 보이지 않지만 일단 얼굴의 윤곽선을 추출하는 모습이 담겨있습니다. 이런 것을 이용하여 실제로 얼굴 자체를 컨트롤로로 활용한 게임도 함께 제공하고 있었습니다. 손이 아닌 얼굴이 컨트롤러가 되는 것입니다.

추가로 저와 같은 단국대 학생들이더군요. 하지만 학교의 위치가 다르니....

시연 동영상

10. Errclipse - 학생부

이클립스 플러그인인 Errclipse입니다. 개발자가 코딩을 하다가 에러를 발견하였을때 이에 대한 해결책을 쉽게 찾을 수 있도록 돕는다고 합니다. 에러에 대해서 자체 해결 뿐만 아니라 추가로 구글의 검색결과나 문서를 보여주게 되고, 에러 해결에 도움을 주는 검색결과나 문서들을 DB에 저장한다고 합니다. 그리고 이 기능은 공유가 되는데 그때 또 다른 개발자가 똑같은 문제를 겪게 된다면 DB에서 해당 에러에 대한 솔루션역활을 가지게 됩니다.

테이터마이닝 기능을 통해서 서버에 통계 및 분석 정보까지 제공하게 된다고 합니다.

에러문제에 대한 해결책으로 기발한 것 같습니다. 저도 같은 에러가 많이 나지만 정리해두지 않아서 잊어버리는 경우가 많습니다. 그것에 대한 정리가 잘된 문서가 있다면 정말 좋겠다는 생각 이 있습니다. 해당 프로젝트는 저같은 사람에게 꼭 필요한 제품같습니다.^^;

아래가 웹페이지로 제공되는 데이터 들입니다. 해당 내용을 보여주기 위해서 구글 App Engine, Google Chart와 데이터를 전송할 때 byte형태로 변환해주는 Google Protobuf를 사용하였다고 합니다.

11. REMU - 학생부

사진을 잘못 찍었네요. 한장은 흔들리고 한장은 이렇게 나와서 좀더 잘 나온걸로 올렸습니다.

일단 HTML 5와 CSS3, Javascript로 정말 이렇게 만들 수 있을까 하는 정도의 프로젝트입니다. 아래에는 Youtube에 올라온 영상을 올릴 건데요 직접 보시면 좋을 듯합니다. 그리고 12월 12일을 정식 런칭예정일로 잡았다고 합니다. 정말 완성도 높은 작품입니다. 해당 작품 제작에 고등학생도 있는 듯 합니다. 대박쳤으면 합니다.!^^;

리듬액션게임을 HTML5로 구현했다는 것 자체가 정말 대단합니다. 거기에 UI도 멋지구요. 웹으로 구현되었기 때문에 OS 종속도 없고 설치도 필요 없습니다.

웹페이지

http://project-remu.com/

시연영상 - HackFair 내

그리고 Youtube에 올라와 있는 영상들입니다.

http://www.youtube.com/watch?v=f42LFDfTloI

http://www.youtube.com/watch?v=1oiPd5lzrW4

아직 기능적인 측면은 부족하다고 합니다. 키보드를 변경할 수 없는 등에요. 하지만 UI자체로 봐도 정말 대단합니다. 거기에 학생들이니깐요^^;

12. 당번약국 - 일반부

당번약국은 안드로이드 어플입니다. 구글 지도위에 현재 위치에서 가장 가까운 약국에 대한정보를 빠르게 보여주게 됩니다. 대한약사회에 등록되어 있는 약국의 정보를 보여주게 되지만 약사회에 등록되지 않는 데이터는 볼 수 없다는게 단점입니다.

그리고 오픈소스를 활용하여 다른 개발자들과 함께 개발할 예정이라고 합니다. 현재 마켓에서 배포중이고, 1만 7천명이 설치했고 1만 1천명이 사용중이라고 합니다.

당번약국 다운로드

http://bit.thdev.net/S3qwFK

참고로 전병권님은 안드로이드 GDG 모임 운영을 함께 하시고 있습니다.^^;

당번약국 어플의 화면

정말 간단합니다. 실행하시면 바로 위치를 가지고오고, 주위의 약국을 찾아주게 됩니다. 하단의 목록과 같이 약국의 목록이 표시되게 됩니다. 위치정보가 정확하다면 클릭시 어디위치에 있는지까지 알려주고, 그렇지 않다면 표시되지 않는다고 합니다.

13. CboxConsole - 일반부

CboxConsole은 컨트롤러를 사용하여 Chrome에 동작중인 웹을 컨트롤할 수 있는 작품입니다. 일단 프로토타입으로써 패드와 별도의 Arduino를 사용한 컨트롤러 2개로 구성하여 작품을 보여주었습니다. 일단 기본적으로 컨트롤러를 사용한 게임을 시연하였습니다.

Chrome 브라우저를 그냥 단순히 브라우저가 아닌 콘솔게임기의 가능성을 위해서 제작했다고 합니다.

사용된 기법은 아래와 같습니다.

1. 컨트롤러 : Nunchuck(Wii 컨트롤러 중 1종)과 Arduino

2. Serial to WebSocket : Python

-> Chrome의 NaCl이 아직 Serial을 지원하지 않아 WebSocket으로 변환해주는 서버

3. WebSocket Listen : NaCl

4. Game Platform : Web기술(Javascript 등)

-> 이 부분은 현재 Demo를 위해 JS를 이용했으며 Dart로 변환 예정입니다.

5. Game : Web기술

-> Game은 JS/Dart로 개발 가능합니다.

6. Ranking System : App Engine + Web 기술

-> 실시간으로 랭킹을 공유 할 수 있도록 제작 되었습니다.

참고로 김성훈님은 Chrome GDG 모임을 운영하시고있으십니다.

개발자분들이 직접 작성하는 HackFair 출품작 소개글

http://googledevkr.blogspot.kr/2012/12/ghackfair-winners-cbox-console.html

GDG Chrome을 소개하는 시간도 있었습니다.

아래가 Arduino를 사용하여 컨트롤러를 제작한 모습입니다. 일반 패드는 겨능 USB로 연결하셔 사용하면 되지만 여기서는 다른 컨트롤러(이름을 모르겠네요)를 사용하였을 때 보여주는 모습입니다.

Auduino를 통한 컨트롤 패드 시연

조이스틱을 이용한 시연

마무리

3층의 모든 프로젝트를 정리해봤습니다. 정리하면서 느꼈지만 정말 다양한 방법을 시도하는 사람들이 많다는 것을 느꼈습니다. 한가지에 얽매이는것도 나쁜건 아니지만 새로운 시도를 해보는것도 중요하다고 생각됩니다. 그러기 위해선 마인드의 차이가....^^;;

그리고 생각보다 Auduino를 사용한 프로젝트들이 많이 있었던것 같습니다. 다른 층에서도 마찬가지지만 Auduino라는 건 들어는 봤지만 실제로 본적은 별로 없었던것 같습니다.

더 좋은 프로젝트를 볼 수 있었으면 하고, 저도 참여를 했으면 합니다.^^; 그리고 미약하지만 읽어주셔서 감사합니다. 잘 못 전달된 정보가 있을 수도 있으니 꼭! 메일이나 댓글 달아주셨으면 합니다.