[124] 하이브리드 앱 개발기 김한솔

1. 김한솔
바이탈힌트코리아
한 달 만에 개발한
하이브리드 앱
50만 서비스가 되기까지
해먹남녀 iOS 하이브리드 앱 개발기

2. 해당 발표는 동영상 자료를 다수 활용하고 있으므로,
내용 이해를 위해 DEVIEW2016 공식 사이트에 게시된 강연 영상을 확인하시길 권
장합니다.

3. 이 시간에는 네이티브 앱 개발 경험이 전혀 없는
웹 프론트엔드 개발자의 앱 개발기를 들려드립니다.
100% 웹뷰

4. 소개
김한솔(studio.gliburch@gmail.com)
조인스닷컴 UI 개발자
NHN Technology Services UI 개발자
다수 스타트업 참여
현재 해먹남녀 Front-end 개발자

5. 진행순서
작은 실험들. 마이크로 앱으로 간 보기
해먹남녀 하이브리드 앱 개발기
회고 및 정리

6. #1
작은 실험들
마이크로 앱으로 간 보기

7. 앱 개발 아무나 하나?
웹 프론트엔드 개발자에게 모바일 앱 개발에 허들(Hurdle)이 있는 것은 사실
개발자라 하면 주변에서 앱 만들 수 있냐고 자꾸 물어보는데-.
난 웹 개발자 이지만, 가끔 앱도 개발하고 싶고-.
이제 와서 전향하기는 좀 그렇고-.
아이폰 개발자 연봉은 부르는게 값이라고-.

8. 솔직히 개발 실력 뛰어나지 않은거 인정
새로운 기술 익히는 속도 느린것도 인정
그럼에도 방법이 있다면~

9. 웹 개발자가 하려는 하이브리드
앱은
사실 하이브리드 앱이 아니다
왜냐하면, 대부분의 기능을
웹 기술로만 구현하려고 하기 때
문

10. 일부 페이지만 웹뷰로 처리하는
보통의 하이브리드 앱과 달리,
구조의 차이
NATIVE VIEW
VIEW
VIEW
NATIVE VIEW
WEB VIEW
HTML
HTMLWEB VIEW
웹뷰 하나에
인터페이스와 콘텐츠
모두를 담는 하이브리드 앱은
구조적으로 웹 앱에 가까움

11. 첫 번째 시도
아이템미
2013년 겨울

12. 서비스화 성공
반응형 웹 제작, 웹뷰(Single Webview App)앱

13. “SKT 세상에서 가장 친절한 모바일 웹앱 공모전” 최우수상
수상
의미있는 시도였으나, 기술적인 한계가 많았음.
터치 인터페이스의 오동작을 튜닝하는 데에만 3~4주 할애.
UI 개발 복잡도와 피도로가 계속 상승.
사용성 Fool, 사용자수 Low
심지어 상도 받았지만….
* 아이템미 창업 멤버들과 2013년 12월

14. 하이브리드 앱 도입 망설이는 이유는
앱으로서 당연해야 할 것이 미흡하기 때문
서비스 품질 경쟁력 없음

15. 하이브리드가 넘어야 할
최소한의 장애물
(사용자 입장에서) 네이티브 앱과 다른 것 들
+⍺

16. View 전환 효과
JavaScript Single Page Application Router
View 전환의 연속성을 표현
VIEW VIEW VIEW
애니메이션 처리
+
History 저장
애니메이션 처리
+
History 저장

17. 터치 반응 지연 시간
웹뷰 터치 반응 시 300ms 의 지연 시간이 존재함
(Single tap 과 Double tap 을 구분하기 위한 설계 의도)
이를 해결하기 위해 다양한 JavaScript 라이브러리가 나옴
fastclick.js / hammer.js 가 대표적
*출처: 네이버 앱 뉴스

18. 유려한 애니메이션 처리
JavaScript setInterval() / jQuery animate()
16~21ms 마다 그림을 그림 👎
CSS webkit-transition,
17~27ms 마다 그림을 그림 👎
CSS webkit-transition translate3d (하드웨어 가속)
0~2ms 마다 그림을 그림 👍
* 출처: http://blog.teamtreehouse.com/create-smoother-animations-transitions-browser

19. 대표적으로 Push Notification
InAppBrowser (앱 내에서의 웹 브라우저)
Facebook SDK 로그인 / 공유
Kakao SDK 로그인 / 공유
등등…
Device API 연동
Push Notifications
푸시 되나요?

20. 2년 뒤, 두 번째 시도
LCC Finder
2015년 여름

21. 구축 방식
Webview
반응형 웹으로 제작
jQuery 기반 Single Page Application
Cordova/PhoneGap
웹뷰(Single Webview App)앱으로 출시

22. 5만 명 이상의 다운로드 달성
여행신문에도 보도됨
서비스로서 가능성 증명!
결과

23. 어? 쫌 되네
그리고 계속되는 시도
2015.08 ~ 2016.02

24. 개선된 구축 방식
Webview
IonicFramework 으로 제작
AngularJS 와 Cordova/Phonegap 내장

25. - 구축이 빠름 (평균 2주 내외의 개발 기간)
- 텍스트 위주의 앱은 거의 네이티브 수준의 퍼포먼스를 보
임
- Cordova CLI 이외에 앱 개발에 필요한 추가 학습 요소가
없음
- 생각보다 Cordova/PhoneGap 플러그인이 많음
- 유명 SDK 플러그인 지원 (Facebook, Twitter, Fabric 등)
- Cordova 플랫폼/플러그인 의존성 관리 기능 탁월
(config.xml)
정리

26. #2
해먹남녀
하이브리드 앱 개발기

27. 왜 하이브리드로
결정하게 되었는가?
기술 검토
스팩 정의

28. “현재 운영중인 해먹남녀 iOS 앱이 이미 있는데요,”
“네 깔아서 써봤습니다. 잘 만들었던데요~”
“지금 수준의 앱을 하이브리드로 만들면 얼마나 걸릴까요?”
“한 달 정도 걸리지 않을까요?”
“네 그렇군요… ㅎㅎ”
“네 한 달 내내 빡세게 한다면요… ㅋㅋ”
아직 입사 계획이 없을 때
2016년 2월 신사동 어느 술집에서
발단
바이탈힌트코리아 정지웅 대표

29. 약 한 달 뒤에 비즈니스 목적 상 특정 기능이 추가되어야 하
는 상황.
iOS 개발자 채용이 장기화. (언제 들어올지 모름)
내부 인력들 기존 Objective-C 개발 경험 전무.
클라이언트 개발 가능한 인력 웹 개발자 1명.
상황

30. 어쨌든,
“짧은 시간 안에 앱을 어떻게든 정상화 시키는 것”
이 최우선 목표이니까
새로 만드시죠! 하이브리드로

31. 원하는 퍼포먼스가 구현되지 않으면?
꼭 필요하지 않은 UI 효과는 과감히 포기
Cordova/PhoneGap 플러그인 중 내가 필요한 것이 없으면?
기본 핵심 기능만 리서치, 나머지는 미흡해도 Major 이슈가
아니므로 과감히 포기
앱스토어 순위나 Featured 선정에 패널티가 있지 않을까?
나중에 고민. 지금 그게 중요한게 아니야!
그냥 왠지 불안하다... ㅠㅠ (막연한 걱정과 우려)
한 번 해 보고 정 안되겠다 싶으면 Cool 하게 버리겠다!
내가 만든 코드가 폐기되어도 괜찮다는 약간의 희생정신(?)
목표를 달성할 수 있는가?

32. 꼭 필요한 Cordova 플러그인만 파악
카메라 cordova-plugin-camera
파일 전송 cordova-plugin-file-transfer
푸시알림 phonegap-plugin-push
페이스북 SDK cordova-plugin-facebook4
카카오톡 SDK cordova-plugin-kakaotalk
소셜공유 cordova-plugin-x-socialsharing
인앱브라우저 cordova-plugin-themeablebrowser
딥링크 cordova-plugin-customurlscheme
스팩 정의하기
잘 지원되는가?
OK GO..!

33. 빠르고 쉬운 개발
“개발”은 그렇겠지….
“Very easy, Very simple” 을 외치면서
개발 도구들을 찬양하고 싶었으나

34. Ionic Framework 으로 개발 착수
Framework UI 템플릿 적극 활용하여 화면 제작
Cordova 플러그인 샘플 코드 복/붙 적용
AngularJS 기반의 간편한 애플리케이션 개발
웹 브라우저에서 간편한 디버깅 (+ Live Reload 기능)
훌륭한 개발 도구들

35. 꿀 기능들
$ionic prepare
프로젝트 패키지 한 번에 설치
$ionic resources
스플래시, 아이콘 이미지 팩 한꺼번에 생성
$ionic serve --lab
웹 브라우저에서 iOS/Android 동시 개발 가능
$ionic run -livereload
소스 수정 시 시뮬레이터에서 실시간 반영

36. 이미 훌륭한 Framework 과 Library 가 넘쳐나는 시대.
그럼에도 불구하고 하이브리드 개발이 번거로운 이유,
한 달 동안 걸쳐서 만들어진 과정을 통해 소개합니다.
다음 장에 계속
도구는 도구일 뿐

37. 1주 차
급한대로 일단 화면 만들기

38. 효율적인 소스 관리를 위한 첫 걸음
UI 컴포넌트
재사용성 설계

39. AngularJS Directive 적극 활용
.directive('recipe', function() {
return {
restrict: ‘E',
replace: true,
templateUrl: ‘templates/_recipe.html',
controller: function($scope, $element, $attrs) {
/* Sources here */
}
}
})
<recipe></recipe>
HTML
JS

40. 페이지
만들고 이동하기
페이지 전환 방식에 대한 고민

41. View 전환의 위계 문제
탭 메뉴 구조에 기본 제공되는 페이지 Router 로는
위계가 없는 View 전환 설계가 어려움.
피드 글
사람
댓글/팔로
우
피드
글
댓글/팔로우
사람

42. View 전환 성능 문제
이미지 콘텐츠의 비중이 높기 때문에
목록이 길어질 경우
페이지 전환이 선형적으로 느려짐
목록이 50개 정도 쌓이
면
2~3 초 후 전환됨

43. 페이지 사이의 위계를 신경쓰지 않아도 됨
페이지 전환 효과를 거치지 않아도 됨
Modal 형식의 페이지 호출 장려
Page Modal Modal Modal Modal Modal

44. 기획자 님의 말
“앱 벌써 다 만들었는데요?! ㅋㅋㅋ”
이제 시작입니다 ㅠㅠ

45. 2주 차
좀 더 어렵고 귀찮은 문제들

46. 앱 내에서 데이터
Sync 맞추기
좋아요, 스크랩, 댓글 수 동기화

47. 데이터 싱크를 수행하는 Directive 만들어
View 에서 반복 호출
Angular $rootScope Level 에 데이터 갱신 및 재호출
Sync Directive
“어떤 id 의 스토리에 대해 댓글 수와 좋아요 숫자,
내가 좋아요 했는지 여부를 지금부터 동기화 되도록 하여라
”

48. Cordova/PhoneGap
설치 플러그인 무려 30여개
플러그인 별 업데이트가 잦아
예견하지 못 한 버그를 뒤늦게 발견하는 경우 많음
API 변경, 애플 디자인 가이드라인, 정책 변경 대응

49. Cordova 플러그인
한계에 대한 대처
우회책을 마련해야 하는 경우

50. 1. “동영상 음소거 강제 해제를 해야할 것 같은데?”
2. 백그라운드 오디오 활성화
3. 앱 심사에서 사용성 가이드라인을 벗어나 Reject 됨
4. 음소거 기능 비활성 안내 메시지 노출로 대체함
“동영상 음소거 없애주세요”

51. 1. 커뮤니티에 글 올릴 때 multipart/form 다중 파일 전송 필
요
1. File Transfer 가 다중 전송을 지원하지 않음
2. 개별로 여러 번 수신할 수 있게 서버 API 수정
다중 파일 업로드가 안되서….
파일1 전송 파일2 전송 파일3 전송
Callback Callback

52. 3주 차
성능! 성능! 성능!

53. 성능과 효과를 잡기위한
잔망스러운 UI 테크닉들
사용자의 체감 성능 하락을 막기 위한 몸부림

54. 데이터 Placehold
<a ng-click=“
dataMessenger.set(feedPreview);gotoFeed(feedId);”>
피드 열기
</a>
<h1>{{ feedPreview.title }}</h1>
<img ng-src=“{{ feedPreview.image }}”>
<p>{{ feedPreview.content }}</p>
화면 전환 시 미리 콘텐츠 일부 전송
REST API 요청하는 시간동안
콘텐츠 일부 미리보기로 넣어둠
View list
View detail

55. 터치 컨트롤 통제
DOM 추가 생성 시,
순간적인 Flicking 발생 빈번.
(매우 빠르게 연속적으로 스크롤을 시도
할 때)
터치 이벤트를 무력화시키는 Indicator 노
출
Flick 현상을 접하지 않게 함.

56. 아직도
아이폰5 쓰신다구요
iOS8 / iPhone 4S 까지 대응
저사양, 하위호환성 이슈
* 아이폰5 에서 구동 화면

57. 장치의 사양, 해상도에 따라 콘텐츠 이미지 크기 변경 제공
서버 사이드 이미지 리사이즈 프로세싱 및 캐싱
이미지 Resize Rule
http://.../.../...image.jpg&rt=780
http://.../.../...image.jpg&rt=480
http://.../.../...image.jpg&rt=180
장치 해상도 너비 320px 초과인 경우 (아이폰6)
장치 해상도 너비 320px 이하인 경우 (아이폰5)
작은 썸네일의 경우
이미지서버 프로세싱 CloudFront

58. CSS3 blur 필터 대신 이미지 Up-scaling 으로 처리
1KB 크기의 이미지로 해결
Blur 효과
40px

59. Gradient 효과
CSS3 gradient 대신
PNG24 이미지 Overlay 처리
효과가 반복될 경우 조금 더 체감 성능상
유리

60. 4주 차 ~
출시, 서비스 유지와 운영

61. 처음엔 안드로이드의 70% 기능 수준
1~2주 간격의 잦은 업데이트
하이브리드 앱의 문제점을 가장 많이 경험한 시간 (2달 정도 소요)
너무 버벅거려요 / 업데이트 하고 나서 흰 화면만 나와요 / 커뮤니티에 사진이 안올라가요,
터치가 인식이 안돼요 / 무한 로딩중이예요 / 발열이 너무 심해요 / 움직이는 그림(GIF)이 나오면 앱이 꺼져
요
VOC
사용자 피드백 대응

62. 실시간 업데이트
CodePush
웹 소스를 클라우드를 통해 버전 체크를 한 후
새로 업데이트 항목이 있으면 자동 다운로드
프로젝트 용량이 많아질수록
파일 다운로드 후 복사 과정에서 멈춤 현상 발생
꼭 긴급한 경우에만 활용!
https://microsoft.github.io/code-push

63. 간편한 인수인계
개발 매뉴얼은 A4용지 반 장
오늘 새로 입사한 개발자도
한 두 시간 만에 앱을 빌드할 수 있는 환경

64. 처음에 놓치기 쉬운
프로젝트 디렉토리 구조
“덮어놓고 코딩하다보면 리팩토링 못 면한다”
크롬 확장프로그램 “AngularJS Graph” 로 본 해먹남녀 앱 구조

65. “한솔씨… 코드가 너무 길어요”
Ionic 기본 프로젝트 폴더 구조에 맞추어서 작업하다 보니,
1file of Controllers
1file of Services
controllers.js (1339 LOC)

66. 기본 폴더 구조의 변경 권장
Ionic 기본 프로젝트 폴더 구조로는 규모가 커질수록 관리가
어려움
각 컴포넌트 별 view, service, controller, directives 등을
묶어서 관리하는 것이 용이
* 출처: https://scotch.io/tutorials/angularjs-best-practices-directory-structure

67. Cordova 핵심
config.xml 프로젝트 설정 파
일
앱 내 모든 설정을 담아두는 핵심
잦은 빌드 시 불필요한 반복 작업 줄이기
앱의 바이너리 버전과 빌드 버전 관리
Hook Script 를 통한 테스크 자동화
info.plist 자동 작성

68. 코드의 재사용
원소스 멀티플랫폼
하이브리드 앱 최대 장점

69. 둘 다 AngularJS
순수 웹 기술로 제작
모바일 앱 ~ 웹 70% 코드 재사용 중
해먹남녀
앱
m.haemukja.com

70. Haemuk Visualizing
해먹남녀 전용 차트 라이브러리
모바일 웹, PC 웹, 사내시스템 동시 적용
https://vitalhint_bucket@bitbucket.org/vitalhint_buck
et/haemuk_visualizing.git

71. iCook 아이쿡
레시피 전용 동영상 플레이어 웹 앱
새로운 기능을 시도할 때 웹 에서 먼저 빠르게 파일럿 서비
스 한 후
앱에도 곧 바로 적용하는 프로세스가 가능해짐
모바일 웹, 하이브리드 앱 동일한 AngularJS 모듈
http://icook.haemukja.com
http://icook.haemukja.com/#/recipes/2636

72. #3
회고 및 정리

73. 네이티브 앱 개발은 부품이 모듈화가 잘 된 DELL 컴퓨터라
면,
하이브리드 앱은 용산에서 발품 팔아 만든 조립 PC 에 비유
됨.
느낀 점
*이미지 출처: http://www.nowpug.com/review/79912*이미지 출처: 델 컴퓨터

74. 제한적인 환경에서
의사 결정 방식
해결이 가능한 이슈인가?
금방 해결할 수 있는가?
꼭 지금 해야 하는가? 제품화 하고 싶다면
불필요한 욕심을 버리세요
NO
YES
YES
NO
NO
YES
대안을 찾는다
대안을 찾는다
대안을 찾는다
혹시 모를 대안을 찾아본다

75. 하이브리드 앱
이런 경우에 추천해요
작게 시작할 줄 아시는 분
현실과의 타협을 잘 하시는 분
초기 스타트업의 대안 기술로 활용하고 싶으신 분
HTML/CSS/JavaScript 오래 하신 분
UI 감각 센스가 좋으신, 꼼꼼하신 분

76. 마치며
2016년 행보
2016년 3월 26일 하이브리드 버전 해먹남녀 iOS 앱 정식 오픈
2016년 7월 26일 개인화 추천 2.0 개편
2016년 8월 앱스토어 전체 Featured App 선정, 음식/음료 카테고리 1위
2016년 9월 앱스토어 한가위 특집 추천 앱 선정
2016년 9월 요리 따라하기 전용 플레이어 “아이쿡” 출시
2016년 10월 DEVIEW 2016 파트너사 선정

77. 아직 하이브리드로 잘 버티고 있습니다
아마도… 내년 상반기 까지는…
그 때도 살아있다면 또 만나요!

78. Q&A

79. Thank You