Mobile Photo Viewer

네이버 자동차 모바일 프로젝트 개발 중에 포토뷰어 개발을 맡게 되었다. 진도 프레임워크를 이용하여 개발하였는데, 콤포넌트화하여 널리 공유하면 좋을 것 같아서 만들기 시작했다.

개발 방법을 어떤 걸 선택할까 고민이 많았다. TDD, ATDD, XP, SCRUM등등 고민 고민 끝에 나는 RDD로 하기로 했다. RDD는 Readme Driven Development이다. DDD(Document Driven Development)과 유사하다. 선택한 이유는 가장 쉽고 정리가 잘 되기 때문이다. 머리 속에 대략적으로 설계 해 놓은 것을 쉽게 글로 막~ 적으면서 정리하면 된다. 그리고 다른 분들이 멋드러지게 작성해 놓은 문서를 밴치마킹 하면서 하면 된다^^. 그래도 Unit Test는 하려고 준비는 해뒀다. 시간 나면 해야지.

소스 형상 관리는 할까, 말까, 고민하다가 하기로 하였고, SVN을 할까 GIT를 할까 고민하다가 GIT를 선택했다. Private으로 할까 Public으로 할까 하다가 이왕 만들꺼 널리 공유하면 좋을 것 같아서 Public을 선택했다. 저장소를 github.com로 할까, dev.naver.com으로 할까, 서버를 만들까 하다가, 전세계적으로 많이 쓰여지고 있고, 트렌트로 떠오르고 있는 github.com을 선택했다. github.com에 소스를 올리면 곧 이력서가 되는 세상이 한국에도 오고 있다.

개발을 쌩 javascript부터 하기엔 개발시간이 늘어날 것 같고, jQuery를 이용하자니 내가 몸담고 있는 곳에서 만든 Jindo가 걸린다. Jindo 선택! Class Base로 개발할 것인가, Module Base로 할 것인가? 난 개인적으로 Class Base가 좋다.

개발툴은 Sublime2 Text 2를 이용했다. 아직 많이 모르지만 가볍고, 여러 유용한 기능들이 편하다. 압타나는 너무 무겁고, 에디터플러스2는 가볍기만 하다.

빈 폴더, Html, Css, Js 파일을 만들고, 초기에 필요한 것들을 셋팅한다. jindo 파일도 넣어놓고, 이미지도 넣어놓고...

이제 본격적으로 개발에 들어간다. jindo.m.Photoviewer.js 파일에 클래스를 만든다. 우선 환경변수를 인자값으로 받을 수 있도록 준비하고, 하나씩 개발해 나가면서 점진적으로 나아간다.

현재 버전 1.0.0을 제작하였다. 앞으로도 수 많은 기능을 넣어야 한다. 완료되면 jQuery Mobile 버전으로도 제작해야겠다.

https://github.com/iamdenny/MobilePhotoViewer

모바일 이벤트 프로토타입

모바일에서 터치로 할 수 있는 이벤트 3가지를 제작해 보았습니다. http://dev.iamdenny.com/Mobile-Events/index.html

  1. 복권 긁기 이벤트

Canvas, jQuery Mobile을 사용하였습니다. 이미지가 하단에 배치되어 있고, 그 위에 Canvas가 겹쳐져 있도록 하였습니다. 그리고 터치가 시작될 때(vmousedown), Canvas에서 Line을 그리기를 시작하고, 터치가 이동할 때(vmousemove)마다 Line을 그리도록 하였습니다. 다만 Line의 색은 투명하도록 Canvas 설정하였습니다(oCtx.globalCompositeOperation = 'destination-out', 참고 : https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html). 터치가 끝났을 때(vmouseup)에는 지워진 픽셀 수를 계산하여, 70% 이상이 지워졌을 때, 당첨 또는 꽝을 알리도록 하였습니다.








2. 화분 물주기 이벤트

 CSS3 Animation과 Jindo Mobile Component를 이용하여 개발하였습니다. 구름과 화분 사이를 손으로 수차례 긁으면 비가오고, 화분이 자라는 이벤트 입니다. JMC의 Touch 모듈을 사용하였고, 터치가 위/아래로 70px 이상일때만 'touchmove' 발생하도록 하였습니다. 'touchmove'가 발생하는 횟수에 따라 -webkit-animation을 이용하여 비의 속도를 점점 빠르게 하였습니다.

3. 프리킥 이벤트

 CSS3 Animation + Jindo Mobile Component를 이용하여 개발하였습니다. CSS3를 이용하여 왼쪽, 가운데, 오른쪽으로 공이 움직일 수 있는 것과 선수가 공을 찬 후의 상태를 적절히 class로 만들어 놓았고, JMC의 DragArea & DropArea 모듈을 이용하여, 축구공은 Draggable, 골대 이미지 위의 떠 있는 왼쪽, 가운데, 오른쪽의 투명 레이어를 Droppable로 하였습니다. 그래서 Drop이 발생할 때, 축구 선수와 공의 class 이름을 변경 하였습니다.

Gracias.