48
클라우드 기반 HTML5 그리고 하이브리드 UX ㈜스쿱미디어 / 신진욱 [email protected] 010-9599-4465

K모바일발표 111026 하이브리드ux_배포용

Embed Size (px)

DESCRIPTION

하이브리드앱

Citation preview

Page 1: K모바일발표 111026 하이브리드ux_배포용

클라우드 기반 HTML5그리고

하이브리드 UX

㈜스쿱미디어 / 신진욱[email protected]

010-9599-4465

Page 2: K모바일발표 111026 하이브리드ux_배포용

강사소개• 현 ㈜스쿱미디어 대표이사,

• 전 ㈜블링크팩토리 기술이사

• ㈜넥슨 데브캣

• 2002년 첫 창업

• 하나대투, 미래에셋, 국세청, 법무부, 이투스, 넥슨, 조선호텔, 신세계푸드 등등

• 아이폰 출시후 2년간 20여개의 대형 앱 개발 / 10여개의 소형 앱 개발

• 총 누적 다운로드 500만 이상 / 앱스토어 1위 3회

Page 3: K모바일발표 111026 하이브리드ux_배포용

이번시간의 초점

벤더/프레임워크 관련자와 관련 없는사람의 솔직한 이야기

그리고

앱을 많이 만들어본 사람의 이야기

Page 4: K모바일발표 111026 하이브리드ux_배포용

지금 우리는

Page 5: K모바일발표 111026 하이브리드ux_배포용

대상

• 기존 웹 프로그래머

• 회사의 기존 웹프로그래머를 활용하여 앱 개발을 완수해야 하는 PM

• 앱 개발자 채용을 고민중인 경영진/PM

• 모바일웹을 통해 모바일 대응했으나 만족스럽지 않으셨던분

Page 6: K모바일발표 111026 하이브리드ux_배포용

결론

하이브리드 앱은 앱이다.

Page 7: K모바일발표 111026 하이브리드ux_배포용

어렵지 않아요

지금부터 천천히 시작합니다.

Page 8: K모바일발표 111026 하이브리드ux_배포용

2009년 강연

스마트폰 시대가 온다.

Page 9: K모바일발표 111026 하이브리드ux_배포용

2009년 강연

스마트폰 시대가 온다.

핸드폰에서 WiFI가 되면 큰일나는줄 알던 시절

누가 먼저 시작하나 눈치 보던 시절

Page 10: K모바일발표 111026 하이브리드ux_배포용

2010년 강연

모바일 비지니스

Page 11: K모바일발표 111026 하이브리드ux_배포용

2010년 강연

모바일 비즈니스

외국은 이렇게 돈을 벌더라

Page 12: K모바일발표 111026 하이브리드ux_배포용

2011년 강연

모바일웹 / 앱 UX

Page 13: K모바일발표 111026 하이브리드ux_배포용

2011년 강연

모바일웹 / 앱 UX

우리도 돈벌래요 만드는 법 좀…

Page 14: K모바일발표 111026 하이브리드ux_배포용

2012년 강연

??

(맨 뒤에)

Page 15: K모바일발표 111026 하이브리드ux_배포용

우리는 왜 이자리에 있는가

다시 한번 리바이벌

Page 16: K모바일발표 111026 하이브리드ux_배포용

하이브리드앱의 필요성

• 플랫폼별 이슈– iOS, Android, WP7 등등

• 제조사별 이슈– 안드로이드의 경우엔 제조사마다 약간씩 다른 특성을 가지고 있다.

• 버전별 이슈– 안드로이드는 발전이 활발하기 때문에 시중에 풀린버전이 다양하다.

– OS버전 별로 제약사항과 예외처리가 다름

Page 17: K모바일발표 111026 하이브리드ux_배포용

왜 필요하게 되었는가

• 모든 플랫폼별로 응대할순없음

– 유지보수 Cost증가

• 많다. 기존 아이폰 개발자가 퇴사하면?

– 포팅 Cost 증가

• 새로운 롤을 위해 채용이 필요함

• 프로젝트 종료후 할일이 없다.

–Risk 증가

Page 18: K모바일발표 111026 하이브리드ux_배포용

Hybrid App Framework란

• HTML, JavaScript등 기존의 웹 기술을 이용하여 NativeApp처럼 만들어주는 기술

– Web 접근을 위한 Webkit 기반

– Device에 접근 가능하도록 JavaScript와 연동한랩핑 라이브러리 제공

– NativeApp 처럼 배포가 가능하도록 패키징 제공

Page 19: K모바일발표 111026 하이브리드ux_배포용

하이브리드앱의 장점

• 단순 웹기술만으로는 모바일 디바이스의 기능들을 사용할수 없다.

– 기존 웹앱들도 가능했으나 플랫폼마다. 랩핑을 다시 또 해야 했음

• 하이브리드앱 프레임워크를 통해 카메라 또는파일등에 접근이 가능함

– 다 되는데 일단 카메라에 대한 공통적인 솔루션은없었음

Page 20: K모바일발표 111026 하이브리드ux_배포용

해결되었다!?

• 웹기술을 이용한 장점

• 기존 우리 웹 프로그래머도 앱을 만들수있다.

• HTML5, CSS3, 자바스크립트등 표준 웹기술을 이용하여 한번 개발로 여러 플랫폼 개발이 가능함

• 한 개만 만들면 다 된다!

Page 21: K모바일발표 111026 하이브리드ux_배포용

MobileWeb과 HybridApp

Page 22: K모바일발표 111026 하이브리드ux_배포용

Mobile Web

– 사실성 재교육이 거의 필요 없음

– 기존 웹개발자 그대로 활용가능

• 해보니 할 수 있었음

• 모바일의 맥락 이해만 필요– 이동중일때

– 작은 화면

– 비싼 통신 비용

– Web2.0 열풍때 웹표준을 지켰으면 대응할 필요가없었음

Page 23: K모바일발표 111026 하이브리드ux_배포용

HybridApp

– HTML5, css3 기능 사용가능

– 각 플랫폼 별로 레이어를 만들어 동일하게 접근 가능

• 디바이스 기능들도 동일한 방법으로 접근 가능함

– 하지만 Native보다 느린것은 여전함

• 왜 느려지는걸까?

• 왜 네이티브앱과 여전히 다른걸까?

• 결국 네이티브 앱을 만들어야 하는걸까?

• 방법은 없는걸까

– 여기서 말하는 native앱이란 플랫폼 개발사가 배포한전용 개발툴로 만든앱을 말함

Page 24: K모바일발표 111026 하이브리드ux_배포용

프레임워크 선정기준

• 개발툴과 패키징기능을 동시에 갖추고 있어야함

• jQuery mobile, sencha touch 같은것은 하이브리드앱 프레임워크가 아님

– UI를 구성하기 위한 프레임워크의 부분집합일뿐

Page 25: K모바일발표 111026 하이브리드ux_배포용

Phonegap

• 가장 많이 쓰는 하이브리드앱 프레임워크중 하나

• 하지만 오래돼서 Titanium등의 후발주자들이비해 상대적으로 열악함

• 최근 Adobe의 인수로 앞으로 기대됨

• 골라주세요! 라고 물으면?

– PhoneGap을 고르세요

Page 26: K모바일발표 111026 하이브리드ux_배포용

하이브리드앱의 성공조건

• 네이티브 앱 처럼 만들어라

• 단순히 모바일웹을 하이브리드앱으로 전환하면안됨

• 확장 기능을 최대한 이용

• 성능 최적화

• 마케팅 고려

Page 27: K모바일발표 111026 하이브리드ux_배포용

오프라인에서 실행될수 없다?

• 하이브리드앱의 기능이 아니라 HTML5의 기능

• 기존의 웹앱의 과도기에도 가능했음

• 앱답게

– 될수있다. 가 아니라 기본적으로 오프라인에서도 실행 가능해야함

Page 28: K모바일발표 111026 하이브리드ux_배포용

하이브리드앱은 개발 비용이 쌀까

• 싸지 않다.

• 기존의 개발자들을 이용할수 있을뿐

• 접근성이 높을뿐

– 사용하기 쉬운것이 아니라 좀 더 친숙할뿐

• 네이티브앱 단가는 내려가고 있다.

Page 29: K모바일발표 111026 하이브리드ux_배포용

기존 네이티브앱 개발 비용

연합뉴스 - <정부 앱> 정부.지자체 앱 현황 http://bit.ly/gnc1ae

Page 30: K모바일발표 111026 하이브리드ux_배포용

하이브리드앱의 어려운 점

• 인식의 어려움

• 웹기술을 이용하지만 웹은 아니다.

• 웹브라우저 위에서 돌지만 웹은 아니다.

• Java나 Objective-C를 배울 필요없이 기존에사용하던 HTML과 JavaScript로 앱을 짠다고생각하면 편함

Page 31: K모바일발표 111026 하이브리드ux_배포용

낡은인식을 버리자

• 하이브리드앱이라도 웹처럼 만들면 빠른 반응속도를 기대 할 수 없음

• 서버에 의존적이어서는 안됨

– 서버는 거들뿐

• 앱 개발자로써의 사고가 필요함

– 생각을 바꾸자

– 그냥 인터페이스만 보면 앱에서 되는게 다 되는것처럼 보임 하지만 중요한것은 사용성

Page 32: K모바일발표 111026 하이브리드ux_배포용

앱개발자로써의 사고란

Page 33: K모바일발표 111026 하이브리드ux_배포용

앱은 한가지만 잘하면 됩니다.

• 각 기능기능이 하나의 앱으로 독립이 가능할 경우는 이미 잘못된 기능

• 기능 개수로 승부하는곳이 아닌 한가지의 기능과 UX로 승부

• 앱에 들어가서 무언가를 선택한다는 행동자체가 Depth

• 기능들이 많아지면 개별 기능의 디테일이 떨어집니다

Page 34: K모바일발표 111026 하이브리드ux_배포용

쉬운 UX 기획

• 팝업/컨펌창을 없앤다

• Depth를 없앤다

• 불필요한 스크롤을 없앤다

• 중요한 버튼은 크게 만든다

• 있어도 좋은것들은 없애 버린다

– 더 이상 더할게 없는게 아닌 더 이상 뺄께 없는게가장 좋은 기획

Page 35: K모바일발표 111026 하이브리드ux_배포용

현재 당신의 앱 기획은 어떻습니까

모바일웹 / 웹앱

하이브리드앱 / 네이티브앱

Page 36: K모바일발표 111026 하이브리드ux_배포용

2012년 강연

??

Page 37: K모바일발표 111026 하이브리드ux_배포용

2012년 강연

하이브리드 앱 UX!

Page 38: K모바일발표 111026 하이브리드ux_배포용

2012년 강연

하이브리드 앱 UX!

앱 만들어봤더니 힘들다. 쉬운 방법은?

지금은 하이브리드가 답이다.

Page 39: K모바일발표 111026 하이브리드ux_배포용

2013년 강연

?????????

Page 40: K모바일발표 111026 하이브리드ux_배포용

2013년 강연

다시 네이티브 앱이다!

(아마도)

Page 41: K모바일발표 111026 하이브리드ux_배포용

2013년 강연

다시 네이티브 앱이다!

하이브리드앱도 어려워…

이럴바엔 차라리…

Page 42: K모바일발표 111026 하이브리드ux_배포용

2012~2013

• 시장이 더욱 커질것– 아이폰 / 안드로이드 한곳만 지원해도 충분히 클 정도로 Pool 더 커진다.

• 하이브리드앱의 고도화– 개발이 어려워지긴 매한가지

– 플랫폼별 세그멘테이션은 하이브리드앱으로 해결되지않음

• (해상도 또는 개별 단말기마다 Selling 포인트를 위한 하드웨어가 들어가기 마련)

• 답은 하이브리드가 아니라 하향평준화 기획

• 하지만 1년 사이에 사용자의 눈은 높아져 있을것

Page 43: K모바일발표 111026 하이브리드ux_배포용
Page 44: K모바일발표 111026 하이브리드ux_배포용

시행착오를 줄이자

• 하이브리드앱님이 다해주실꺼야

– HTML, JavaScript를 이용해 앱을 만들뿐

– 언어 학습에 대한 장벽이 없을뿐, 앱을 만들고 있다.

• 앱개발 방법이 필요함

– 일단해보자 -> 다시 처음부터

– 우린 그냥 간단하게 해볼래

• 모바일웹이 답

Page 45: K모바일발표 111026 하이브리드ux_배포용

명심 또 명심

도구는 도구일뿐

원래 문제를 해결해주지 않는다.

다만 편리하게 / 시간 낭비를 줄여줄뿐

Page 46: K모바일발표 111026 하이브리드ux_배포용

마지막 체크리스트

• 화면 구성데이터를 네트워크로 가져오지 말것

– 서버는 거들뿐

– “로컬에 저장할수도 있어요”가 아니라 “로컬에 저장해야함”

• 데이터 송수신은 Json으로 할것

– 데이터만 송수신 할것 / HTML주고 받지 말것

– 아니면 아예 데이터 송수신을 없앨것

Page 47: K모바일발표 111026 하이브리드ux_배포용

결론

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

Page 48: K모바일발표 111026 하이브리드ux_배포용

QnA

AS는 [email protected]

010-9599-4465 / @smle

그리고 선릉역