Pongdang

pongdang1

pongdang2

작동환경

  • AWS EC2 (Amazon AMI)

개발환경

  • Server | Node.js (Express, Socket.IO, Mongoose, EJS), MongoDB, Redis
  • Client | jQuery, Backbone.js, Require.js, Underscore, Twitter Bootstrap, Moment, Facebook API
  • Tools | Eclipse, Grunt, Git, Evernote, Balsamiq mockups

프로젝트 기간

  • 2013.03~2013.05 (3 months)

URL

Pongdang은 웹 기반의 랜덤채팅 서비스입니다. 기존 소개팅 애플리케이션이 가지고 있는 장점과 랜덤채팅 서비스의 장점을 혼합하여, 횟수 제한 없이 대화가 가능하면서 본인의 프로필을 미리 공개하는 형태의 신개념 채팅 서비스입니다. 20대 초반~30대 중반까지의 페이스북 이용자를 타게팅 하였습니다. 린 스타트업 방식으로 MVP의 개발, 빠른 제품 개발 이터레이션 (격주 단위 릴리즈)을 선두로 하였습니다.

Facebook 앱으로 개발되었기 때문에 사용자는 앱 승인 후 자동 가입되어 서비스를 이용가능하며, 필명과 성별, 사진이 자동으로 입력되어 편리합니다. 메시지 발송 시 Facebook으로 푸시가 가기 때문에 사용자경험을 향상시킬 수 있었습니다. 또, Facebook의 CPC 광고를 집행하여 모객 하였습니다.

채팅 서비스는 브라우저와의 TCP 연결 문제로 인해 FlexMobile Application 형태로 개발되는 것이 일반적이나, Pongdang은 순수하게 Javascript만을 이용하여 개발된 서비스입니다. Node.js로 개발한 서버에서 Socket.IO를 활용하여 클라이언트 브라우저와 Event-driven 형태로 통신을 제어합니다. 서버-클라이언트 간의 연동은 RESTful한 Backbone.js의 Model을 이용하였습니다. 채팅처럼 실시간성을 요하는 명령은 Socket.IO가 동작하도록 처리하였습니다.

아래의 내용은 일반적인 명령처리 순서입니다.

  1. 클라이언트의 CRUD 명령
  2. Backbone.js의 Model Object에 생성/변경 내용을 반영
  3. 정해진 REST Method 대로 Server에 호출 (Create : POST, Read : GET, Update : PUT, Delete : DELETE)
  4. 서버의 Router가 명령 처리자를 호출
  5. 명령 처리자가 Mongoose를 이용하여 암묵적 Schema에 맞는지 검증하고 MongoDB에 명령
  6. 명령의 실시간성 여부 확인 후 실시간성인 경우 관련 클라이언트에 Socket.IO Event 발신
  7. (실시간성인 경우) Socket.IO의 Event를 수신한 클라이언트의 Model Object가 변경됨
  8. (실시간성인 경우) Model의 Event를 수신한 클라이언트의 View Object가 변경됨

초기 수요예측이 힘든 웹 서비스의 특성을 감안하여 Amazon의 AWS EC2를 활용하였습니다. 네트워크 수요에 따라 서버가 Auto Scaling 되도록 하고, 비용절감을 위해 Spot Request를 이용하였습니다. Auto Scaling은 CPU 사용량이 일정치를 넘게 되면 자동으로 Instance가 추가되고, 반대로 최소임계 이하로 떨어지면 줄어드는 구조입니다. 서버 스케일링 시 서버 인스턴스 간의 통신을 위해 Pub/Sub 패턴을 제공하는 Redis로 Seamless한 클러스터링을 가능케 한 모듈도 개발하였습니다.

모든 클라이언트 측 Javascript 코드는 Backbone.js의 클래스로 모듈화 되었고, Require.js로 여러 파일로 나뉜 클래스들을 include 하도록 하였습니다. 그러나 include시 발생하는 대량의 HTTPRequest를 방지하기 위해 Production 서버에 올릴 땐 Optimization을 하였습니다. Minify된 단일 js, css파일을 제공하고, gzip으로 압축하여 부하를 낮출 수 있었습니다. Optimization은 Javascript Build Configuration Tool인 Grunt를 활용하여 자동화 하였습니다.

HTML 퍼블리싱은 Twitter Bootstrap을 활용하여 Responsive Design을 구현하였기 때문에 한 번의 코딩으로 PC와 Mobile에 모두 바르게 표현되도록 처리하였습니다. 채팅방, 프로필 이미지 클릭 시 CSS 3 Transition를 이용하여 애니메이션이 되도록 하였습니다.

소스 버전관리는 Bitbucket에 Private Repo를 발급받아 Git을 이용하였으며, UI Prototyping Tool로 Balsamiq을 활용하였습니다.

본 프로젝트는 취미로 혼자 개발한 프로젝트입니다. 플랫폼은 Mobile (Android, iOS 등), PC 모두를 지원합니다.

Episode

작동환경

  • iPad : iOS 4.2 이상

개발환경

  • HTML 5, CSS 3, Javascript (iScroll, jQuery), PhoneGap
  • Xcode

프로젝트 기간

  • 2010.08~2011.08 (1y)

URL

Episode는 한국 최초의 아이패드 전용 잡지입니다. 다른 잡지 어플리케이션들이 기존의 오프라인잡지의 PDF 버전을 그대로 퍼블리싱 하는 창구로 사용되었던 것과는 대조적으로, Episode는 새롭게 다가온 아이패드라는 터치 인터페이스 기기에서 어떤 방식이 가장 사용자 경험을 증대시키고 효율적으로 디스플레이 할 수 있는 것인가에 대해 꾸준히 고민한 결과물입니다.

2011년 3월 기준 한국 애플 앱스토어 무료 도서 부분 1위, 전체 통합 5위를 기록하였으며, 7만 명의 구독 독자 (업데이트 제외 순 다운로드 기준. 업데이트 포함 24만 독자)를 보유하였습니다. 방송통신위원회 (2011.01), 한국경제신문 (2010.12), 세계일보 (2011.01)가 국내 최초의 아이패드 전자잡지로 선정 한 바 있습니다.

Episode는 Hybrid Web Apps Framework인 PhoneGap을 사용하여 개발 되었습니다.

Hybrid 개발 방식은 어플리케이션에 Web Browser Component만을 삽입하여 모든 View를 HTML로 대체하고 Model-Controller를 Javascript로 대체하는 것입니다. Camera나 GPS 처럼 Device-Dependent한 기능들은 Framework에서 제공하는 API을 호출하여 개발합니다.

HTML5 기술을 활용한 Hybrid Web Apps 개발을 통해 다양한 모바일 플랫폼 (iOS, Android, Windows Mobile, BlackBerry, WebOS, Symbian, Bada)에 One-source Multi-use가 가능케 됩니다. 전자 출판물 개발 중 가장 반복요소가 많고 변화가 심한 부분에 속하는 콘텐츠 퍼블리싱에서의 Cross-Platform을 가능케 하였습니다. 이러한 특징은 결과적으로 소모적인 작업을 줄이게 되어, 포팅으로 인한 소모적인 개발 시간/비용을 획기적으로 축소하게 되는 결과를 이끌어내었습니다.

본 프로젝트에서 Main Logic 개발을 전담하였고, Contents Publishing은 50%를 담당하였습니다.

플랫폼은 Android, iOS 2개를 지원합니다.
현재 아이패드버전은 App Store에서 볼 수 있으며 총 5개의 어플리케이션이 올라와 있습니다.