Nighthawks : 24시간 카페 지도

작동환경

  • PC, Mobile Web

개발환경

  • Client-side
    • Meteor
    • jQuery, Underscore.js
    • Less, Font-awesome
    • Rival (Theme)
    • Naver Map API
  • Tool
    • Sublime Text
    • SourceTree, Bitbucket
    • Google Analytics

프로젝트 기간

  • 2015.10

URL

하루가 긴 당신을 위한 “Nighthawks”는 Agreable & Co. 스스로의 필요에 의해 제작한 웹 애플리케이션입니다.

한국의 24시간 카페 지도 서비스이며, 이후 야간 버스 및 카테고리 별 24시간 점포들을 표현할 예정입니다.

본 프로젝트는 단독 개발하였습니다.
작동환경은 Web이며, PC/Mobile 에서 모두 구동 가능합니다.

나만의 유니콘 찾기 (What color is your unicorn?)

작동환경

  • PC, Mobile Web

개발환경

  • Client-side
    • jQuery, Underscore.js
    • Pure
    • Less
    • Velocity
    • Font-awesome
  • Tool
    • Yeoman
    • Grunt
    • Sublime Text
    • SourceTree
    • Git/Bitbucket
    • AWS S3
    • Google Analytics
    • Google Adsense

프로젝트 기간

  • 2014.11

URL

나만의 유니콘 찾기는 이대 시각디자인과 졸업전시회에서 본 Flora님의 작품에 영감을 받아,
웹 애플리케이션으로 만든 Collaborative project입니다.

Arnheim이 쓴 Art and visual perception의 “Color” 챕터에 있는 내용을 가지고
하나의 색상이 가질 수 있는 객관/주관적 성향을 ‘유니콘’이라는 상상의 동물과 연결시켰습니다.
심리테스트 질문들에 답변을 하며 자신의 성향과 일치하는 유니콘을 찾아가는 서비스입니다.
언어는 영어와 한국어를 지원하고 있습니다.

마케팅은 Google Trends에서 “Fun test”의 관심도가 높은
미국, 독일, 뉴질랜드, 영국, 호주, 싱가포르, 한국에 페이스북 페이지 마케팅을 전개하였고
10% 이상의 CTR이 발생하였습니다.
하지만 페이스북에서는 실질적인 광고 효과가 별로 없었습니다.

2015년 2월에 Twitter (#yourunicorns)와
여성 타겟의 다음 카페에서 Viral이 전개되어 총 PV 240,000을 돌파하였습니다.
일종의 인터넷 놀이 문화로 자리잡아 유니콘과 관련 된 팬픽도 출현하였습니다.

이 미니 프로젝트를 통해 기획부터 개발, 마케팅까지의
웹서비스가 출시되는 Whole process를 경험함으로써 뜻 깊은 경험을 얻었습니다.

새로 학습한 내용

  • Project bolierplate
    Yeoman의 webapp generator 이용
  • Automated Delivery
    Grunt를 AWS S3와 연동하여 커맨드라인에서 바로 배포
  • Static hosting
    S3의 Static hosting기능을 이용하여 저렴한 가격으로 컨텐츠 서빙
  • File Revision
  • Realtime Development Preview
    파일 수정 감지
  • JS/CSS Dependency Injection & Minify
  • Less (CSS Precompiler)
  • Velocity
    빠른 애니메이션 라이브러리
  • SNS 공유를 유도하여 바이럴을 이끌어내는 방법
  • 클라이언트 기반 i18n

본 프로젝트는 단독 개발하였습니다.
작동환경은 Web이며, PC/Mobile 에서 모두 구동 가능합니다.

Modestgraph

Capture

작동환경

  • Android 3.0+

개발환경

  • ADT (Eclipse)
  • Maven
  • Sentry, AdMob
  • SourceTree, Bitbucket

프로젝트 기간

  • 2014/10 (1w)

URL

겸손한사진 (영문명 : Modestgraph)은 안드로이드 유틸리티 애플리케이션입니다.
겸손하지 못한 사진들로 인해 외장 SD카드가 사진으로 꽉차버리는 불상사를 목격하고,
스스로의 필요와 8인의 스마트폰을 해방시키기 위해 만들었습니다.

일반적인 모니터의 가장 큰 가로폭은 1920px이기 때문에
1920px보다 큰 사진은 원본크기를 100%로 보는 것이 불가능하다고 생각하여 1920px로 맞추고,
핸드폰 카메라의 노이즈가 심한 특성을 이용하여, 육안으로 화질 저하를 구분하지 못하는 수준에서 jpg 열화를 (10%) 발생시킵니다.

생각보다 압축률이 좋아서 3MB 사진 기준으로 200~300KB까지 용량이 줄어들게 되어,
1000장 기준으로 2~3GB를 절감할 수 있습니다.

GPS 정보와 회전정보 등의 EXIF 정보도 유지하는 것을 신경 썼기 때문에
갤러리 앱에서 원본 사진과 차이를 느낄 수 없도록 하였습니다.
안드로이드의 파편화가 심각하고, 저사양 폰에서 Bitmap handling하는 것이 생각보다 괴로운 일이라는 것을 배웠습니다.

영문, 한국어, 아랍어(!)로 서비스 되고 있습니다.

Agreable Bookclub

agreable1
agreable2

작동환경

  • PC, Mobile web

개발환경

  • Server-side
    • Java 7, Embedded Tomcat 7
    • Spring Boot / Security / MVC / Social
    • EhCache
    • Hibernate
    • MySQL
    • Jackson / Jaxb
    • Thymeleaf
    • Amazon AWS
    • Naver Books API / Facebook Graph API
  • Client-side
    • jQuery
    • Bootstrap
    • Angular.js
    • Underscore.js
    • Typeahead.js
  • Tool
    • Eclipse
    • Raygun
    • Maven
    • SourceTree
    • Github

프로젝트 기간

  • 0.1.0B : 2014/01 ~ 2014/03
  • 1.0.0 : 2014.05 ~ 현재

URL

아그레아블 (Agreable)은 본인이 운영하고 있는 강남지역 네트워킹&독서모임의 이름입니다.
이 서비스는 독서모임 후기 관리의 효율성을 위해 만들어졌습니다.
매주 정기모임 후에 약 30명 분의 후기를 취합하여 작성하는데
매번 정확한 책에 대한 정보를 찾기위해 필기했던 내용을 가지고 네이버에 검색하는 행위가 귀찮아서 만들었습니다.
장기적으로 모임 내 독서 경향 분석과 개인별 도서 추천 서비스를 생각했기 때문에 개발에 타당한 경제성이 있었습니다.

네이버 도서 검색 API와 페이스북 Graph API를 연동하여 개발하였습니다.
개발 이력은 Github에, 로드맵과 이슈는 Trello에 공개하고 있습니다.

포털서비스를 개발하면서 쌓은 캐싱, 보안처리, API 매쉬업 같은 개발 기술을 활용하고,
일부러 기술적인 난제를 설정하여, 저사양의 서버에서 (AWS t1.micro)  빠른시간 안에 개발하였습니다.

Spring Boot에 내장 된 Embedded Tomcat을 활용하여 저사양의 서버에서 빠른 개발/배포 및 스테이징 구축이 가능했고,
EhCache를 활용하여 HTTP Request Caching과 Service Layer Caching을 구현할 수 있었습니다.
Spring 진영에서 밀고있는 Thymeleaf 라는 레이아웃 엔진을 사용하여
각 페이지마다 개별적인 Preview가 가능한 형태로 퍼블리싱이 가능합니다.

클라이언트는 기본 프레임워크로 Angular.js를 이용하였고,
트위터에서 만든 클라이언트 단 검색엔진인 Typeahead를 이용하여 페이스북 그룹 인명검색을 구현하였습니다.

자동 에러 검출을 위해 클라이언트/서버단에 모두 Raygun를 적용하였습니다.

본 프로젝트는 단독 개발하였습니다.
작동환경은 Web이며, PC/모바일에서도 동일하게 구동 가능합니다.

Bitdot Odyssey

bitdotodyssey

작동환경

  • Chrome

개발환경

  • HTML 5, CSS 3, Javascript
  • iScroll, jQuery, Scroll Parallax
  • Eclipse

URL

Bitdot Odyssey는 Bitdot를 소개하기 위해 만든 웹페이지입니다.
2001: 스페이스 오디세이의 오마주로, Touch 인터페이스로 변화된 미디어를  상징합니다.

저는 Scroll Parallax 플러그인을 사용한 부분을 개발하였습니다. 개발기간은 3시간 입니다.
재미있게 봐주세요 :)