[개발후기 - iOS, Android] 투이톡 (2E 아카데미) 앱

프로젝트 참여

iOS 앱 - 100%

Android 앱 - 100%

Server- 100%

... 역시 그냥 첨부터 끝까지 혼자 다 했다ㅡ,.ㅡ;

0. 

- 기존 홈페이지와 회원 연동

- 하이브리드 방식의 수강신청 기능, 웹뷰와 세션연동

- HTML 형식을 이용한 TextView

- 관리자용 Admin 페이지 개발

- Google Analytics

- APNS, FCM, GCM 푸시 알림.

- 유튜브 동영상 플레이어

- 

1. 개요

  클라이언트는 컨설팅회사였는데, 현재 운영중인 IT 알려줌 앱이 굉장히 좋아보였나보다. 컨설팅 회사다 보니, 자체 생산하는 많은 콘텐츠들을 앱을 통해서 유통하고 싶어 했다. 그래서 IT 알려줌 앱과 비슷하게 만들어준다고 하면 된다고 해서 외주 개발을 수주하여 개발했다. 기존 소스를 많이 활용할 수 있어서, 짧은 시간에 금방 개발할 수 있었다.

2.

  이미 자체 홈페이지를 운영하고 있었다. 그곳에 가입되어있는 회원들이 이미 다수 있었고, 그 홈페이지를 통해서 '수강신청' 같은 기능이 구현되고 있었다. 따라서 앱에 필요한 TABLE을 새로 만들 뿐 아니라, 이미 운영되고 있는 회원 DB 에 접근해서, 앱과도 연동할 수 있도록 약간의 수정을 해야했다. 사용자의 PK 를 시퀀스로 만들어 뒀는데, 희한하게 Auto Increment 가 아니고, 시퀀스 테이블을 따로 두고, 3개의 임시 레코드를 생성하고, 그 중 하나를 사용하는... 도대체 왜 그렇게 되어있는지 모르겠더라; 이런 경험을 가진 분 있으시다면 왜 그런지 설명좀... ㅋ

3. 

  기존 운영되고 있는 홈페이지에 '수강신청' 기능이 있었는데, 이것을 앱에서 하이브리드 방식으로 구현되도록 요구사항이 있었다. 그래서 다른 모든 부분은 네이티브 앱인데, 요부분만 웹뷰를 이용한 하이브리드 방식이 섞였다. 

  문제는 앱에서 로그인한 사용자가, 웹뷰를 통해서도 '로그인 한' 상태를 만들어줘야 했다. 사실 앱에서 하는 API 통신과, 이 웹뷰와는 완벽하게 별개이기 때문에, 웹뷰를 통해 페이지를 열어도 '로그인 상태'로 만들어주기 위해서, 약간의 삽질을 해야만 했다.  '로그인상태' 라 함은, 로그인 검증을 끝난 상태의 "Session"을 만들어서 유지한다는 뜻인다.

  처음 실패한 방법 -  

  로그인 되어있는 사용자가, 바로 수강신청 웹페이지를 가기 전에 위와 같은 '세션'을 만들어주고 수강신청 페이지로 Redirect 시켜주는 페이지를 만들어 간단하게 처리하려고 했다. (1) 수강신청 전단계 페이지 코딩 -> 앱에서 로그인 되어있는 상태를 웹서버에서도 실제로 검증한다. (중간 Hooking을 방지하기 위해) (2) 앱 로그인 상태가 이상없이 검증을 통과한다면, 웹에서 '세션'을 생성해준다. -> (3) 수강신청 페이지로 리다이렉트 시켜준다.

  아주 그럴싸 하지 않은가. 이렇게 검증&세션 만들어주는 페이지만 중간에 거치도록 페이지를 간단하게 만들었다. 결과는... 안드로이드는 아주 잘 되었는데, 아이폰은 안되었다!! 좌절 ㅠㅠ 원인을 찾아보니, Safari 에서는 헤더를 통한 Redirect 를 하면, 세션이 파괴되버린단다. 물론 Safari 설정에서 따로 설정을 할 수 가 있지만, 앱 사용자 모두에게 '사파리 설정을 바꾸세요' 라고 말 할 순 없는 노릇 아닌가!! 그래서 다른 방법을 생각해야만 했다.

성공한 방법 -

  Safari 기반의 웹뷰를 위해서 리다이렉트는 사용할 수 없다. 새로 한 페이지를 만들고, 거기서 앱 사용자 검증을 하고, 세션까지 만들고, 모바일용 수강신청할 수 있는 페이지를 그냥 새로 만들었다. ㅠㅠ

4. HTML 형식의 TextView 사용.

  기존 알려줌의 앱의 상세보기는 미리 지정된 형식의 단순 Text를 보여주기 때문에 이런 기능이 없었는데, 상세보기의 노트를 각 콘텐츠마다 HTML 형식으로 꾸미고 싶다는 요구사항이 있었다. 게다가 귀찮으면 단순 Simple 한 텍스트를 보여주기도 하고 싶다고... ㅡ,.ㅡ; 그래서 DB에 HTML형식인지 아닌지를 구분하는 Flag 값을 추가해야 했고, 이 값에 따라서 TextView 를 다르게 설정해 주어야 했다.

  여기서 또 아이폰과 안드로이드의 차이점이 나오는데, iOS 의 TextView 에서 HTML 문서는 아주 잘 지원된다. CSS 같은 스타일도 잘 먹고, 이미지 태그도 알아서 잘 보여지고. 할튼 그냥 웹브라우저를 통해 보는 수준으로, HTML 표현이 아주 잘되었다. 

  문제는 안드로이드 인데, 안드로이드의 TextView 에서는 지원 가능한 HTML 태그의 종류가 아주 제한적이였다. (물론 아주 기본적인 태그들은 거의다 된다고 봐야하지만) 하다못해 글자색과 같은 스타일조차도 제한적이였다. 게다가 중간에 <img> 태그를 만나면, 직접 이미지 getter 를 직접 구현해주는 코딩을 해야 했다. 아이폰과 안드로이드 둘다 개발하다보면, 보통은 아이폰쪽에 개발에 제약이 더 많은 편인데, TextView에 HTML 지원은 안드로이드가 턱없이 부족해 보였다. TextView에 HTML 안에 있는 이미지 Getter 구현은 따로 포스팅해 두었다.

5. Google Analytics 

  처음엔 FCM 때문에 당연히 Firebase 에 있는 FirebaseAnalytics 를 사용하려고 했다. 근데 분석데이터가 분명히 쌓이고는 있는데 구글 애널리틱스같이 시각화 할 방법을 모르겠다!!!!! 아무리 검색해봐도... 아직 시각화 도구가 없나보다... 헐... 구글 애널리틱스는 매우 아름답게 시각화되서 보여주는데...

  그래서 Google Analytics 를 이용하기로 결정하였는데, 이마저도 난관에 부딪혔었다. 이미 Firebase 프로젝트를 사용하고 있으면 GoogleAnalytics 프로젝트 생성이 안되고, 자꾸 Firebase 프로젝트로 넘어가버리는것이다!! 분명히 알려줌 앱을 개발할 때는 GoogleAnalytics 와 Firebase 를 동시에 사용했었는데... 그래서 결국, 새로운 프로젝트로 만들었는데, 일단 GoogleAnalytics 프로젝트를 먼저 만들고! Firebase 프로젝트를 만들면서 생성되는 google-services.json 파일에 GoogleAnalytics 계정 정보를 조합해서 넣고, 사용해야 했다. Firebase 도 새로운 프로젝트로 만들면서 FCM 토큰도 꼬여버려서 ㅠㅠ 삽질을 좀 해줬다.

6. 관련기사

- 디지털 데일리 http://www.ddaily.co.kr/news/article.html?no=149957

7. 다운로드

- 안드로이드 플레이스토어 : https://play.google.com/store/apps/details?id=com.consulting2e.academy&hl=ko

- iOS 앱스토어 : https://itunes.apple.com/us/app/%ED%88%AC%EC%9D%B4%ED%86%A1/id1171671108?mt=8