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 모두를 지원합니다.