오늘은 "주니어 개발자의 On-ly 2.0 프로젝트 경험기-개발편"을 포스팅한다.

"주니어 개발자의 On-ly 2.0 프로젝트 경험기-기획편"이 궁금하면 이곳을 클릭하길 바란다.


다사다난했던 On-ly 2.0 기획 단계를 거치고 직접 기획했기에 순조로울 것만 같았던 개발 과정은 결코 순조롭지 못했다.


그중 첫번째. 버블 차트

우리가 많은 시간을 잡고 있었던 과정 중 하나가  친구와 나의 게임 플레이 시간 데이터를 버블차트로 보여주는 부분이였다. 

초기에 기획 했을 때 아래 그림과 같은 버블차트 + 알파 를 원했다.


<나와 사용자의 게임 플레이 시간 버블 차트>  


버블차트에 버블 하나하나가 생동감이 있길 바랬고, 거슬리지 않을 만큼의 애니메이션 효과도 들어가길 원했다. 또한 난 최근에 본부장님의 소개로 D3.js라는 것을 알게 되었고(참고,D3 소개), D3.js를 On-ly에서 사용하고 싶었다. 하지만 회사내에서 D3.js 말고 안드로이드 차트 라이브러리를 쓰자는 의견이 나왔고,  Hellocharts 라이브러리 를 사용하게 되었다. 이 라이브러리를 사용하기에는 먼가 아쉬움이 많이 남았지만 그래도 최대한  잘 시각화해서 보여주고 싶었다. 아래 그림과 같이 말이다.


<D3.js를 사용한 버블 차트의 예>



아래는 버블차트를 이용한 1차 버전이다. 일주일간의 나의 게임플레이시간 데이터와 친구의 게임플레이시간의 데이터를 seekbar를 통해 보여주도록 했는데 컬러의 일관성이 없어 산만하고 한 눈에 들어오지 않는다는 평을 받았다. 


    

<3일치 버블차트 1차 버전>


그래서 데이터를 어떻게 표현 할 것인지 오랜 시간 동안 고민을 했는데 최종적으로 선택한 것이 아래 그림과 같다. 


    

<3일치 버블차트 최종 버전>


컬러를 덜 사용하고, top1 사용자와 친구 그리고 나에 집중하여 1차 버전보다는 눈에 잘 들어온다 . 하지만 아쉬운건 사실이었다. 좀 더 생동감있고, 전체적으로 앱과 어울리는 느낌이 부족해 보였다. 버블차트 작업으로 인해 일정을 많이 잡아먹어서 현 상태에 일단 만족해야했고 더 발전된 방향에 대해서는 다음 버전을 기약해야 했다. 


두번째는. 파이차트


On-ly 개발을 하면서 갑자기 문득 들었던 생각이 "내가 가장 많이 하는 게임은 무엇일까?"라는 원초적인 질문에 대해서는 On-ly에서 아무런 데이터를 보여주고 있지 않다는 것을 깨달았다. 

그래서 우리는 사용자가 많이 하는 top6 게임에 대해 파이차트로 보여주는 기능을 추가 했고, 이 기능을 구현하기 위해 Hellocharts라이브러리를 제외한 다른 차트 라이브러리를 찾아보았다.

그러다 발견한 것이 MPAndroidChart !  

이 차트라이브러리에 대한 소개는 아래 영상과 같다. 




차트의 x축, y축 조정 부터, label기능, 다양한 에니메이션 효과,거기다 오픈소스인 MPAndroidChart가 상당히 마음에 들어서 MPAndroidChart github에 별을 쏴주고, 바로 On-ly에 적용하였다. 

요렇게!


(MPAndroidChart를 이용한 파이차트)


세번째, weibo연동하기. 


On-ly가 샤오미와 이야기가 오고가서 샤오미 앱스토어에 On-ly를 배포해야 했다. 일단 중국에선 facebook이 막혀있으니 weibo연동이 필요했다. weibo api문서는 영문을 지원해 줬지만 나머진 죄다 중국어로 되어 있으니 난감 했다(중국어를 빨리 공부해야겠다는 생각이 가장 먼저 앞섰다.). 거기다 weibo sdk version이 froyo여서 안드로이드 버전차이로 인한 삽질을 하게 되었다. 언제적 froyo를...


친절하신 카네기멜론 대학 학생이 Sina Weibo API GUIDE를 작성했는데 개발하는데 상당히 많이 도움이 되어서 그 링크를 공유한다.현재 중국시장에서는 weibo 친구들과 함께 On-ly를 즐길 수 있으며, On-ly는 샤오미 스토어에 올라가 있다.

>>>>>>>On-ly 샤오미 스토어로 이동


마무리하며..

On-ly2.0을 기획하고 배포하는데 5개월의 기간이 지나갔다.회사분들과 함께 기획하고, 개발하고, 테스트 하며 한땀한땀 정성을 쏟아부었다. 이 앱에 애정을 많이 쏟아 부어서 그런지 On-ly 2.0을 Release하고 나서 아쉬운 점과 보완 해야 할 점(User Interface변경 등)이 속속히 생겨났다. 다음 버전에는 그러한 아쉬움들을 반영하고 싶다.

간단한 On-ly 자료를 소개로 주니어 개발자의 On-ly 2.0 프로젝트 경험기를 마무리한다.


(On-ly 소개자료)

-끝-     



Posted by 비회원

On-ly 2.0이 릴리즈 되었다. 프로젝에 참여하면서 경험하고 느낀 점이 많기에  그동안 느꼈던 것들을 회사 블로그에 써 보는 것이 어떻겠냐는 본부장님의 제안이 있었고, On-ly 2.0 프로젝트 진행 과정 정리도 할겸 글을 쓰게 되었다. 

따듯한 봄날 외부업체에 파견을 나갔다 친정 같은 본사로 복귀한 나는 새로운 프로젝트에 참여 하게 되었다. 

그것은 On-ly 2.0 프로젝트! 

사용자 수를 늘리고,사용자들이 건강한 게임라이프를 즐길 수 있도록 의미있는 컨텐츠를 집어 넣고자 On-ly 2.0 프로젝트가 시작되었고, 난 이 프로젝트에 참여 한다는 것에 완전 신나 있었다.



본격적인 기획에 앞서 회사 사람들과 함께 모여 아이디어 회의를 했다. 

새로운 On-ly 2.0에 추가했으면 하는 기능들을  생각해 마음껏 의견을 내주셨는데  그 열기가 무척 뜨거웠다.


 (On-ly 2.0 아이디어 중 일부)

 

각자 의견을 낸 것을 문서로 정리해 보는 시간을 가졌고, 우리가 추구 했던 목표에 부합하는 아이디어를 모두 반영해 본격적인 기획을 시작 하였다.학교 다닐때 팀프로젝트를 할 때 주로 개발만 하고 기획문서는 작성해 보지 않았기 때문에 기획문서를 처음 만들게 된 나는 어디서 부터 시작해야 할 지 막막했다. 

 

다행이도 박본부장님께서  1차적으로 information architecture를 작성해주셔서 좀 더 쉽게 기획안을 작성해 나갈수 있었다.



 (On-ly 2.0 information architecture중 일부)


하지만 On-ly 기획안 작업을 하면서 나의 발목을 붙잡았던 것은 포토샵 작업이었다. Mockup작업을 하면서 포토샵으로 이미지 작업을 해야 했기 때문이다.포토샵 잘 하는 사람들을 보면 우와 하면서 엄지척 했었는데 직접 포토샵으로 작업 할일이 생기니 삽질이 따로 없었다.

  

디자이너한테는 비교적 쉬운 일이겠지만 개발자인 나는 내가 생각하고 있는 것을 포토샵을 이용해 이미지로 나타낸 다는 것은 무척어려운 일이었다. 다크써클이 점점 내려오기 시작했다. 


(작업한 이미지를 부장님께 보여드릴때 )


하지만 초긍정적인 마인드를 발휘하였고  드디어 기획안을 완성하게 되었다.

완성된 기획안은 다음과 같다. 중간중간에 빠진 내용은 아직 공개하기에 민감한 내용들이라 항목에서 제외시켰다.




삽질하며 만들었었는데 최종적으로 바뀌게 된 Mockup중 일부가 다음과 같다



 게임 CD느낌을 살려볼려고 했으나 음악 CD느낌이 난다

 그래서 기본 책장이 들어간 이미지로 변경했다.




사용자별 게임랭킹을 표현하고 싶었지만 총체적 난국이 되어버렸다 

그래서 단순하게 flat한 이미지로 변경했다.


기획안 작업은 시행착오를 많이 겪었던 과정이었고 부족했던 점도 있지만 우리가 추구하는 컨텐츠를 녹여내기 위해 회사 사람들과 함께 치열하게 고민했던 작업이었다.  또한 기획안을 최종 검토 하면서 과감히 기획을 쳐내는 작업이 있었는데  그 때는  정말 아쉬웠다.  정말 열심히 작업했기 때문이다.


기획안이 완성 된 후 개발 단계로 넘어가게 되었고, 이제 본격적인 개발을 시작하게 되었다. 

직접 기획했기해 순조로울 것 만 같은 개발단계는 결코 순조롭지 못했다. 그 이야기는 다음 포스팅(주니어 개발자의 On-ly 2.0 프로젝트 경험기-개발편)에서 써 내려갈 것이다. 기대해도 좋다. 

다사다난했던 주니어 개발자의 On-ly 2.0 프로젝트 경험기-기획편은 이것으로 마무리 한다.


-끝-  

Posted by 비회원