하이브리드앱

1. 클라우드 기반 HTML5
그리고
하이브리드 UX
㈜스쿱미디어 / 신진욱
jinwook@skoopmedia.co.kr
010-9599-4465

2. 강사소개
• 현 ㈜스쿱미디어 대표이사,
• 전 ㈜블링크팩토리 기술이사
• ㈜넥슨 데브캣
• 2002년 첫 창업
• 하나대투, 미래에셋, 국세청, 법무부, 이투스, 넥슨, 조선호텔, 신세계푸드 등등
• 아이폰 출시후 2년간 20여개의 대형 앱 개발 / 10여개의 소형 앱 개발
• 총 누적 다운로드 500만 이상 / 앱스토어 1위 3회

3. 이번시간의 초점
벤더/프레임워크 관련자와 관련 없는
사람의 솔직한 이야기
그리고
앱을 많이 만들어본 사람의 이야기

4. 지금 우리는

5. 대상
• 기존 웹 프로그래머
• 회사의 기존 웹프로그래머를 활용하여 앱 개발
을 완수해야 하는 PM
• 앱 개발자 채용을 고민중인 경영진/PM
• 모바일웹을 통해 모바일 대응했으나 만족스럽
지 않으셨던분

6. 결론
하이브리드 앱은 앱이다.

7. 어렵지 않아요
지금부터 천천히 시작합니다.

8. 2009년 강연
스마트폰 시대가 온다.

9. 2009년 강연
스마트폰 시대가 온다.
핸드폰에서 WiFI가 되면 큰일나는줄 알던 시절
누가 먼저 시작하나 눈치 보던 시절

10. 2010년 강연
모바일 비지니스

11. 2010년 강연
모바일 비즈니스
외국은 이렇게 돈을 벌더라

12. 2011년 강연
모바일웹 / 앱 UX

13. 2011년 강연
모바일웹 / 앱 UX
우리도 돈벌래요 만드는 법 좀…

14. 2012년 강연
??
(맨 뒤에)

15. 우리는 왜 이자리에 있는가
다시 한번 리바이벌

16. 하이브리드앱의 필요성
• 플랫폼별 이슈
– iOS, Android, WP7 등등
• 제조사별 이슈
– 안드로이드의 경우엔 제조사마다 약간씩 다른 특성
을 가지고 있다.
• 버전별 이슈
– 안드로이드는 발전이 활발하기 때문에 시중에 풀린
버전이 다양하다.
– OS버전 별로 제약사항과 예외처리가 다름

17. 왜 필요하게 되었는가
• 모든 플랫폼별로 응대할순없음
– 유지보수 Cost증가
• 많다. 기존 아이폰 개발자가 퇴사하면?
– 포팅 Cost 증가
• 새로운 롤을 위해 채용이 필요함
• 프로젝트 종료후 할일이 없다.
–Risk 증가

18. Hybrid App Framework란
• HTML, JavaScript등 기존의 웹 기술을 이용하
여 NativeApp처럼 만들어주는 기술
– Web 접근을 위한 Webkit 기반
– Device에 접근 가능하도록 JavaScript와 연동한
랩핑 라이브러리 제공
– NativeApp 처럼 배포가 가능하도록 패키징 제공

19. 하이브리드앱의 장점
• 단순 웹기술만으로는 모바일 디바이스의 기능
들을 사용할수 없다.
– 기존 웹앱들도 가능했으나 플랫폼마다. 랩핑을 다
시 또 해야 했음
• 하이브리드앱 프레임워크를 통해 카메라 또는
파일등에 접근이 가능함
– 다 되는데 일단 카메라에 대한 공통적인 솔루션은
없었음

20. 해결되었다!?
• 웹기술을 이용한 장점
• 기존 우리 웹 프로그래머도 앱을 만들수있다.
• HTML5, CSS3, 자바스크립트등 표준 웹기술을 이용
하여 한번 개발로 여러 플랫폼 개발이 가능함
• 한 개만 만들면 다 된다!

21. MobileWeb과 HybridApp

22. Mobile Web
– 사실성 재교육이 거의 필요 없음
– 기존 웹개발자 그대로 활용가능
• 해보니 할 수 있었음
• 모바일의 맥락 이해만 필요
– 이동중일때
– 작은 화면
– 비싼 통신 비용
– Web2.0 열풍때 웹표준을 지켰으면 대응할 필요가
없었음

23. HybridApp
– HTML5, css3 기능 사용가능
– 각 플랫폼 별로 레이어를 만들어 동일하게 접근 가능
• 디바이스 기능들도 동일한 방법으로 접근 가능함
– 하지만 Native보다 느린것은 여전함
• 왜 느려지는걸까?
• 왜 네이티브앱과 여전히 다른걸까?
• 결국 네이티브 앱을 만들어야 하는걸까?
• 방법은 없는걸까
– 여기서 말하는 native앱이란 플랫폼 개발사가 배포한
전용 개발툴로 만든앱을 말함

24. 프레임워크 선정기준
• 개발툴과 패키징기능을 동시에 갖추고 있어야
함
• jQuery mobile, sencha touch 같은것은 하
이브리드앱 프레임워크가 아님
– UI를 구성하기 위한 프레임워크의 부분집합일뿐

25. Phonegap
• 가장 많이 쓰는 하이브리드앱 프레임워크중 하
나
• 하지만 오래돼서 Titanium등의 후발주자들이
비해 상대적으로 열악함
• 최근 Adobe의 인수로 앞으로 기대됨
• 골라주세요! 라고 물으면?
– PhoneGap을 고르세요

26. 하이브리드앱의 성공조건
• 네이티브 앱 처럼 만들어라
• 단순히 모바일웹을 하이브리드앱으로 전환하면
안됨
• 확장 기능을 최대한 이용
• 성능 최적화
• 마케팅 고려

27. 오프라인에서 실행될수 없다?
• 하이브리드앱의 기능이 아니라 HTML5의 기능
• 기존의 웹앱의 과도기에도 가능했음
• 앱답게
– 될수있다. 가 아니라 기본적으로 오프라인에서도 실
행 가능해야함

28. 하이브리드앱은 개발 비용이 쌀까
• 싸지 않다.
• 기존의 개발자들을 이용할수 있을뿐
• 접근성이 높을뿐
– 사용하기 쉬운것이 아니라 좀 더 친숙할뿐
• 네이티브앱 단가는 내려가고 있다.

29. 기존 네이티브앱 개발 비용
연합뉴스 - <정부 앱> 정부.지자체 앱 현황 http://bit.ly/gnc1ae

30. 하이브리드앱의 어려운 점
• 인식의 어려움
• 웹기술을 이용하지만 웹은 아니다.
• 웹브라우저 위에서 돌지만 웹은 아니다.
• Java나 Objective-C를 배울 필요없이 기존에
사용하던 HTML과 JavaScript로 앱을 짠다고
생각하면 편함

31. 낡은인식을 버리자
• 하이브리드앱이라도 웹처럼 만들면 빠른 반응
속도를 기대 할 수 없음
• 서버에 의존적이어서는 안됨
– 서버는 거들뿐
• 앱 개발자로써의 사고가 필요함
– 생각을 바꾸자
– 그냥 인터페이스만 보면 앱에서 되는게 다 되는것
처럼 보임 하지만 중요한것은 사용성

32. 앱개발자로써의 사고란

33. 앱은 한가지만 잘하면 됩니다.
• 각 기능기능이 하나의 앱으로 독립이 가능할 경
우는 이미 잘못된 기능
• 기능 개수로 승부하는곳이 아닌 한가지의 기능
과 UX로 승부
• 앱에 들어가서 무언가를 선택한다는 행동자체
가 Depth
• 기능들이 많아지면 개별 기능의 디테일이 떨어
집니다

34. 쉬운 UX 기획
• 팝업/컨펌창을 없앤다
• Depth를 없앤다
• 불필요한 스크롤을 없앤다
• 중요한 버튼은 크게 만든다
• 있어도 좋은것들은 없애 버린다
– 더 이상 더할게 없는게 아닌 더 이상 뺄께 없는게
가장 좋은 기획

35. 현재 당신의 앱 기획은 어떻습니까
모바일웹 / 웹앱
하이브리드앱 / 네이티브앱

36. 2012년 강연
??

37. 2012년 강연
하이브리드 앱 UX!

38. 2012년 강연
하이브리드 앱 UX!
앱 만들어봤더니 힘들다. 쉬운 방법은?
지금은 하이브리드가 답이다.

39. 2013년 강연
?????????

40. 2013년 강연
다시 네이티브 앱이다!
(아마도)

41. 2013년 강연
다시 네이티브 앱이다!
하이브리드앱도 어려워…
이럴바엔 차라리…

42. 2012~2013
• 시장이 더욱 커질것
– 아이폰 / 안드로이드 한곳만 지원해도 충분히 클 정도
로 Pool 더 커진다.
• 하이브리드앱의 고도화
– 개발이 어려워지긴 매한가지
– 플랫폼별 세그멘테이션은 하이브리드앱으로 해결되지
않음
• (해상도 또는 개별 단말기마다 Selling 포인트를 위한 하드웨
어가 들어가기 마련)
• 답은 하이브리드가 아니라 하향평준화 기획
• 하지만 1년 사이에 사용자의 눈은 높아져 있을것

44. 시행착오를 줄이자
• 하이브리드앱님이 다해주실꺼야
– HTML, JavaScript를 이용해 앱을 만들뿐
– 언어 학습에 대한 장벽이 없을뿐, 앱을 만들고 있다.
• 앱개발 방법이 필요함
– 일단해보자 -> 다시 처음부터
– 우린 그냥 간단하게 해볼래
• 모바일웹이 답

45. 명심 또 명심
도구는 도구일뿐
원래 문제를 해결해주지 않는다.
다만 편리하게 / 시간 낭비를 줄여줄뿐

46. 마지막 체크리스트
• 화면 구성데이터를 네트워크로 가져오지 말것
– 서버는 거들뿐
– “로컬에 저장할수도 있어요”가 아니라 “로컬에 저
장해야함”
• 데이터 송수신은 Json으로 할것
– 데이터만 송수신 할것 / HTML주고 받지 말것
– 아니면 아예 데이터 송수신을 없앨것

47. 결론
하이브리드앱은 웹 기술을 쓸 뿐 앱이다.

48. QnA
AS는 jinwook@skoopmedia.co.kr
010-9599-4465 / @smle
그리고 선릉역