stacktistics 웹사이트 개발하면서 배운 점들 정리

오랫만에 만들어본 간단한 웹앱 stacktistics.com을 개발하면서 배운 내용을 정리해보자.
앞에서도 말했지만 stacktistics 웹사이트는 내가 즐겨찾는 개발자 Q&A 사이트인 stackoverflow의 open API를 이용하여 질문의 갯수를 기준으로 프로그래밍 언어, 모바일 플랫폼, 웹 기술의 인기도를 가늠해본다.

1. 시작하기
stackoverflow 사이트를 즐겨 활용하던 나는, 이 사이트에서 open API를 제공하면 꼭 응용프로그램을 하나 만들어봐야겠다고 생각했었다. 자매 사이트인 stackapps에서 open API를 제공하는 것을 알게되어 간단한 웹앱 프로젝트를 시작하게 된다. 이 API는 RESTful 형태의 URL이고 JSON 포맷으로 값을 반환한다.

2. 어디서 개발할까?
웹 프로그램을 개발한지도 오래되었고 워낙 간단한 아이디어를 실현해보는 것이 목적이었으므로 작은 돈도 투자하고 싶지 않았다. 그래서, 몇가지 무료 App Hosting Service를 검토해 보았는데 Google의 App Engine이 가장 무난해보였다. App Engine은 Java, Python, Go와 같은 3가지 언어 기반의 Framework를 제공한다. 기존 내 경험으로 보자면 Java로 개발하는 것이 편한 선택이었는데 새로운 기술을 공부하는 것도 이 프로젝트의 개인적 목표여서 처음으로 Python을 써보기로 결정했다. (막상 써보니 동적 스크립트 언어라 사용이 편하고 코드 가독성도 좋아 맘에든다.)

3. Python 기반의 webapp Framework로 기초 공사
Google App Engine은 Python 기반의 간단한 web application framework인 webapp을 제공한다. Django와 같은 framework도 사용이 가능하지만 별도의 과정 필요 없이 바로 개발을 시작할 수 있는 webapp을 사용하기로 했다.

class MainHandler(webapp.RequestHandler):
    def post(self):
        # some codes
        
    def put(self):
        # some codes
        
    def get(self):
        # some codes

위 코드와 같이 HTTP METHOD 별로 클래스 메쏘드를 구현하여 원하는 동작을 처리하고 웹 페이지를 생성할 수 있다.

4. App engine의 data store에 자료 생성
Stackoverflow 사이트에 각 언어 별 질문 개수를 매번 조회하기에는 시간이 너무 오래 걸리므로 미리 데이터로 저장해두고 웹 페이지 생성시에는 저장해둔 데이터를 이용하도록 구현했다.
Google App Engine이 제공하는 Datastore를 이용하면 Python 클래스를 데이터 스키마로 활용 가능하고 데이터 저장 및 조회도 Python 객체와 binding되어 코드 작성이 아주 쉽다.
데이터를 한달 주기로 자동으로 생성하기 위해서 Google App Engine의 Cron 서비스를 활용하였다.

5. Django의 Template 및 CSS 활용하여 HTML 페이지 작성
Python 코드와 HTML 페이지를 분리 시키기 위해 Django의 template 기능을 사용했다. Google App Engine의 webapp에서 Django template 엔진을 제공한다.

6.  Facebook 좋아요 버튼 달기
완성된 웹페이지에 방문자들의 호감도를 파악하기 위해 Facebook의 좋아요 버튼을 달았다.

7.  Goolgle Chart Tools를 이용해 파이 챠트 그리기
테이블 형태로만 순위 정보를 제공하는 것이 좀 밋밋해서 파이 챠트를 추가해보기로 했다. Google Chart Tools를 사용하면 Javascript를 이용하여 간단하게 다양한 형태의 챠트를 추가할 수 있다.

8. RSS feed도 제공해볼까?
좀 나간다 하는 웹사이트는 대부분 RSS feed를 제공하더라. 내 웹페이지에서도 RSS feed를 제공해자. 내 웹페이지가 가진 내용을 RSS XML 포맷에 맞춘 페이지로 생성해주면 된다.

9. jQuery Mobile을 이용한 Mobile web page
마지막으로 요즘 트랜드에 맞추어 모바일 웹 페이지도 제공하기로 결정! jQuery Mobile을 사용해서 아래와 같은 멋진 모바일 페이지를 쉽게 구현하였다.

모바일 브라우저를 알아내기 위해서는 http://detectmobilebrowser.com/ 웹페이지가 제공한 Python 코드를 사용하였다.

10. Twitter Button 추가
 Twitter에 웹사이트를 홍보하기 위해 Twitter Button을 추가하였다. http://twitter.com/about/resources/tweetbutton 페이지에서 코드를 생성하여 웹페이지에 복사해주면 된다.

11. 다음 숙제들

• Admob을 이용한 모바일 광고 게시: Python 기반 코드가 없어 약간 공부가 필요할 듯
• 데이터가 더 쌓이면 년간 통계치를 챠트로 보여주기
• RSS feed로 월별 데이터를 조회해볼 수 있도록 제공

최종 결과물은 http://www.stacktistics.com/ 에서 확인!