PL@Y-티켓북+포토캘린더

소개 글 인듯하지만 소개 글은 아니고
‘설명서인가?’ 하다가도 설명서도 아닌 개발기?!


캘린더 뷰

이 앱을 처음 기획할 때부터 생각한 화면이다. 저 달력 뷰를 만드는데 시간을 많이 소비했다.

처음엔 온갖 달력 공식들을 통해 구현했다. 하지만 이상하게 몇 년은 잘 나오는데 수년이 흐르면 뭔가 날짜가 맞지 않았다.

결국, 구글신의 도움을 받아 NSCalendar, NSDateComponents를 사용하면 정말 간단하게 구현된다는 사실을 알고 잠시 멘붕 후 해결했다.

좌우 스와이프로 이전 달/다음 달로 이동하는데, 달력 뷰 3개 미리 만들어 놓고 돌려가며 사용한다.

빨간 색상이 들어간 부분은 사용자와 인터렉션이 있는 부분이다.


달력 이동 AlertView

타이틀바 아래에는 3개의 버튼이 있다. 중앙은 지금 달력의 년.월이고, 이 라벨을 터치하면 원하는 년.월로 이동할 수 있는 AlertView가 나온다.

좌, 우측에 있는 라벨은 당연히 이전/다음 달로 이동하는 버튼이다.

현재 달력으로 한 번에 이동하는 기능을 추가했었지만, 안 예뻐서 지금은 빠져있다.


티켓 추가 AlertView

달력의 날짜를 터치하거나
티켓 추가 아이콘을 터치하면 티켓을 추가할 수 있다.

포토 캘린더이기 때문에 무조건 사진을 선택하고 진행하도록 설계했다.


웹에서 이미지 검색 뷰

웹에서 이미지 검색은 네이버 Open API를 사용했다. 처음엔 JSON으로 결과를 보내주는 다음을 사용했지만, 검색 결과가 빈약하고, 구글은 유료라서…

웹 이미지 캐시는 SDWebCache를 사용했다.

웹 검색 시 매우 큰 사진을 사용자가 선택할 수도 있기 때문에 큰 사진은 선택 못 하도록 처리했다.


콘텐츠 뷰, 입력&수정 뷰

사진 선택을 하면 사진에서 메인 컬러, 서브 컬러를 추출한다.

이 부분이 제일 시간도 오래 걸리고, 어려워서 지금도 계속 개선 중이다.

지금은 속도를 크게 개선했지만, 이전에는 시간이 좀 걸리는 작업이었다. 그래서 색상을 추출하는 동안 진행 과정을 사용자에게 효과적으로 알려줄 방법을 찾았다. 사용자가 선택한 이미지를 처음엔 회색이미지로 변환해서 보여주고, 색상 추출 프로세스의 진행 퍼센트만큼 좌측부터 원본 사진을 보여준다.

입력하는 부분의 제목은 내용이 없으면 크게 나오고, 입력을 시작하거나 내용이 있으면 내용 위에 작게 표시된다.

내가 구현한 색상 추출법은 아래와 같다.

  1. 이미지의 (0, 0) ~ (10, 10) 픽셀을 1픽셀식 이동하며 RGB값을 추출한다.
  2. 추출된 RGB값을 딕셔너리에 key로 담는다. value는 담을때 key가 이미 있으면, value를 +1 해주고, 없으면 1로 초깃값을 준다.
  3. 모든 RGB값이 딕셔너리에 담기면, value 값이 가장 큰 key를 UIColor로 만든다. 이 UIColor가 서브 컬러다.
  4. 메인 컬러는 이미지 중앙의 25% 부분을 1~3번과 같은 방식으로 한다.

메뉴

그냥 메뉴버튼을 터치하거나 상단 바를 아래로 스와이프 하면 메인 화면이 아래로 내려가면서 메뉴가 나온다.

메인 화면이 내려갈 때 바운스 애니메이션을 줬다.

이 때 StatusBar도 같이 내려가는 디테일이 포인트다.


같은 날 2개 이상의 티켓이 존재할 때

캘린더 뷰에선 기본적으로 1일 1티켓이다. 티켓이 비어있는 날짜를 터치하면 티켓을 추가하고, 이미 티켓이 있는 날짜는 사진을 표시해주고, 터치하면 콘텐츠를 보여준다.

하지만 같은 날 2개 이상의 티켓이 존재하면 나중에 추가한 티켓만 보여주는 문제가 있었다.

일단 빈 상태, 1개 있는 상태, 2개 이상인 상태로 구분하고 날짜 버튼에 Tag로 세 상태를 구분할 수 있게 했다.

2개 이상이면 캘린더에 첫 번째 사진과 마지막 사진을 반씩 잘라서 표시해주고, 터치했을 땐 스크롤 해서 원하는 티켓을 선택할 수 있게 처리했다.


리스트 뷰

테이블 뷰를 커스터마이징 해서 구현했다.

이전에 추출한 색상은 리스트 뷰에서도 요긴하게 사용했다.

여기서도 티켓을 추가할 수 있다.

앱을 개발하면서 제일 많이 디자인을 변경한 부분이다.

지금도 썩 마음에 들진 않는다.


통계 뷰

월별 관람 수, 금액, 요일별 관람 수 통계를 제공한다.

제일 마음에 들지 않는 뷰다.

그래프는 BEMSimpleLineGraph를 사용했는데, 흠… 못생겼다.

좀만 다듬으면 봐줄 만은 할 거 같은데…