Download - K모바일발표 111026 하이브리드ux_배포용
![Page 2: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/2.jpg)
강사소개• 현 ㈜스쿱미디어 대표이사,
• 전 ㈜블링크팩토리 기술이사
• ㈜넥슨 데브캣
• 2002년 첫 창업
• 하나대투, 미래에셋, 국세청, 법무부, 이투스, 넥슨, 조선호텔, 신세계푸드 등등
• 아이폰 출시후 2년간 20여개의 대형 앱 개발 / 10여개의 소형 앱 개발
• 총 누적 다운로드 500만 이상 / 앱스토어 1위 3회
![Page 3: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/3.jpg)
이번시간의 초점
벤더/프레임워크 관련자와 관련 없는사람의 솔직한 이야기
그리고
앱을 많이 만들어본 사람의 이야기
![Page 4: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/4.jpg)
지금 우리는
![Page 5: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/5.jpg)
대상
• 기존 웹 프로그래머
• 회사의 기존 웹프로그래머를 활용하여 앱 개발을 완수해야 하는 PM
• 앱 개발자 채용을 고민중인 경영진/PM
• 모바일웹을 통해 모바일 대응했으나 만족스럽지 않으셨던분
![Page 6: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/6.jpg)
결론
하이브리드 앱은 앱이다.
![Page 7: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/7.jpg)
어렵지 않아요
지금부터 천천히 시작합니다.
![Page 8: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/8.jpg)
2009년 강연
스마트폰 시대가 온다.
![Page 9: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/9.jpg)
2009년 강연
스마트폰 시대가 온다.
핸드폰에서 WiFI가 되면 큰일나는줄 알던 시절
누가 먼저 시작하나 눈치 보던 시절
![Page 10: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/10.jpg)
2010년 강연
모바일 비지니스
![Page 11: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/11.jpg)
2010년 강연
모바일 비즈니스
외국은 이렇게 돈을 벌더라
![Page 12: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/12.jpg)
2011년 강연
모바일웹 / 앱 UX
![Page 13: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/13.jpg)
2011년 강연
모바일웹 / 앱 UX
우리도 돈벌래요 만드는 법 좀…
![Page 14: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/14.jpg)
2012년 강연
??
(맨 뒤에)
![Page 15: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/15.jpg)
우리는 왜 이자리에 있는가
다시 한번 리바이벌
![Page 16: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/16.jpg)
하이브리드앱의 필요성
• 플랫폼별 이슈– iOS, Android, WP7 등등
• 제조사별 이슈– 안드로이드의 경우엔 제조사마다 약간씩 다른 특성을 가지고 있다.
• 버전별 이슈– 안드로이드는 발전이 활발하기 때문에 시중에 풀린버전이 다양하다.
– OS버전 별로 제약사항과 예외처리가 다름
![Page 17: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/17.jpg)
왜 필요하게 되었는가
• 모든 플랫폼별로 응대할순없음
– 유지보수 Cost증가
• 많다. 기존 아이폰 개발자가 퇴사하면?
– 포팅 Cost 증가
• 새로운 롤을 위해 채용이 필요함
• 프로젝트 종료후 할일이 없다.
–Risk 증가
![Page 18: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/18.jpg)
Hybrid App Framework란
• HTML, JavaScript등 기존의 웹 기술을 이용하여 NativeApp처럼 만들어주는 기술
– Web 접근을 위한 Webkit 기반
– Device에 접근 가능하도록 JavaScript와 연동한랩핑 라이브러리 제공
– NativeApp 처럼 배포가 가능하도록 패키징 제공
![Page 19: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/19.jpg)
하이브리드앱의 장점
• 단순 웹기술만으로는 모바일 디바이스의 기능들을 사용할수 없다.
– 기존 웹앱들도 가능했으나 플랫폼마다. 랩핑을 다시 또 해야 했음
• 하이브리드앱 프레임워크를 통해 카메라 또는파일등에 접근이 가능함
– 다 되는데 일단 카메라에 대한 공통적인 솔루션은없었음
![Page 20: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/20.jpg)
해결되었다!?
• 웹기술을 이용한 장점
• 기존 우리 웹 프로그래머도 앱을 만들수있다.
• HTML5, CSS3, 자바스크립트등 표준 웹기술을 이용하여 한번 개발로 여러 플랫폼 개발이 가능함
• 한 개만 만들면 다 된다!
![Page 21: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/21.jpg)
MobileWeb과 HybridApp
![Page 22: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/22.jpg)
Mobile Web
– 사실성 재교육이 거의 필요 없음
– 기존 웹개발자 그대로 활용가능
• 해보니 할 수 있었음
• 모바일의 맥락 이해만 필요– 이동중일때
– 작은 화면
– 비싼 통신 비용
– Web2.0 열풍때 웹표준을 지켰으면 대응할 필요가없었음
![Page 23: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/23.jpg)
HybridApp
– HTML5, css3 기능 사용가능
– 각 플랫폼 별로 레이어를 만들어 동일하게 접근 가능
• 디바이스 기능들도 동일한 방법으로 접근 가능함
– 하지만 Native보다 느린것은 여전함
• 왜 느려지는걸까?
• 왜 네이티브앱과 여전히 다른걸까?
• 결국 네이티브 앱을 만들어야 하는걸까?
• 방법은 없는걸까
– 여기서 말하는 native앱이란 플랫폼 개발사가 배포한전용 개발툴로 만든앱을 말함
![Page 24: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/24.jpg)
프레임워크 선정기준
• 개발툴과 패키징기능을 동시에 갖추고 있어야함
• jQuery mobile, sencha touch 같은것은 하이브리드앱 프레임워크가 아님
– UI를 구성하기 위한 프레임워크의 부분집합일뿐
![Page 25: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/25.jpg)
Phonegap
• 가장 많이 쓰는 하이브리드앱 프레임워크중 하나
• 하지만 오래돼서 Titanium등의 후발주자들이비해 상대적으로 열악함
• 최근 Adobe의 인수로 앞으로 기대됨
• 골라주세요! 라고 물으면?
– PhoneGap을 고르세요
![Page 26: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/26.jpg)
하이브리드앱의 성공조건
• 네이티브 앱 처럼 만들어라
• 단순히 모바일웹을 하이브리드앱으로 전환하면안됨
• 확장 기능을 최대한 이용
• 성능 최적화
• 마케팅 고려
![Page 27: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/27.jpg)
오프라인에서 실행될수 없다?
• 하이브리드앱의 기능이 아니라 HTML5의 기능
• 기존의 웹앱의 과도기에도 가능했음
• 앱답게
– 될수있다. 가 아니라 기본적으로 오프라인에서도 실행 가능해야함
![Page 28: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/28.jpg)
하이브리드앱은 개발 비용이 쌀까
• 싸지 않다.
• 기존의 개발자들을 이용할수 있을뿐
• 접근성이 높을뿐
– 사용하기 쉬운것이 아니라 좀 더 친숙할뿐
• 네이티브앱 단가는 내려가고 있다.
![Page 29: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/29.jpg)
기존 네이티브앱 개발 비용
연합뉴스 - <정부 앱> 정부.지자체 앱 현황 http://bit.ly/gnc1ae
![Page 30: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/30.jpg)
하이브리드앱의 어려운 점
• 인식의 어려움
• 웹기술을 이용하지만 웹은 아니다.
• 웹브라우저 위에서 돌지만 웹은 아니다.
• Java나 Objective-C를 배울 필요없이 기존에사용하던 HTML과 JavaScript로 앱을 짠다고생각하면 편함
![Page 31: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/31.jpg)
낡은인식을 버리자
• 하이브리드앱이라도 웹처럼 만들면 빠른 반응속도를 기대 할 수 없음
• 서버에 의존적이어서는 안됨
– 서버는 거들뿐
• 앱 개발자로써의 사고가 필요함
– 생각을 바꾸자
– 그냥 인터페이스만 보면 앱에서 되는게 다 되는것처럼 보임 하지만 중요한것은 사용성
![Page 32: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/32.jpg)
앱개발자로써의 사고란
![Page 33: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/33.jpg)
앱은 한가지만 잘하면 됩니다.
• 각 기능기능이 하나의 앱으로 독립이 가능할 경우는 이미 잘못된 기능
• 기능 개수로 승부하는곳이 아닌 한가지의 기능과 UX로 승부
• 앱에 들어가서 무언가를 선택한다는 행동자체가 Depth
• 기능들이 많아지면 개별 기능의 디테일이 떨어집니다
![Page 34: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/34.jpg)
쉬운 UX 기획
• 팝업/컨펌창을 없앤다
• Depth를 없앤다
• 불필요한 스크롤을 없앤다
• 중요한 버튼은 크게 만든다
• 있어도 좋은것들은 없애 버린다
– 더 이상 더할게 없는게 아닌 더 이상 뺄께 없는게가장 좋은 기획
![Page 35: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/35.jpg)
현재 당신의 앱 기획은 어떻습니까
모바일웹 / 웹앱
하이브리드앱 / 네이티브앱
![Page 36: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/36.jpg)
2012년 강연
??
![Page 37: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/37.jpg)
2012년 강연
하이브리드 앱 UX!
![Page 38: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/38.jpg)
2012년 강연
하이브리드 앱 UX!
앱 만들어봤더니 힘들다. 쉬운 방법은?
지금은 하이브리드가 답이다.
![Page 39: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/39.jpg)
2013년 강연
?????????
![Page 40: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/40.jpg)
2013년 강연
다시 네이티브 앱이다!
(아마도)
![Page 41: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/41.jpg)
2013년 강연
다시 네이티브 앱이다!
하이브리드앱도 어려워…
이럴바엔 차라리…
![Page 42: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/42.jpg)
2012~2013
• 시장이 더욱 커질것– 아이폰 / 안드로이드 한곳만 지원해도 충분히 클 정도로 Pool 더 커진다.
• 하이브리드앱의 고도화– 개발이 어려워지긴 매한가지
– 플랫폼별 세그멘테이션은 하이브리드앱으로 해결되지않음
• (해상도 또는 개별 단말기마다 Selling 포인트를 위한 하드웨어가 들어가기 마련)
• 답은 하이브리드가 아니라 하향평준화 기획
• 하지만 1년 사이에 사용자의 눈은 높아져 있을것
![Page 43: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/43.jpg)
![Page 44: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/44.jpg)
시행착오를 줄이자
• 하이브리드앱님이 다해주실꺼야
– HTML, JavaScript를 이용해 앱을 만들뿐
– 언어 학습에 대한 장벽이 없을뿐, 앱을 만들고 있다.
• 앱개발 방법이 필요함
– 일단해보자 -> 다시 처음부터
– 우린 그냥 간단하게 해볼래
• 모바일웹이 답
![Page 45: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/45.jpg)
명심 또 명심
도구는 도구일뿐
원래 문제를 해결해주지 않는다.
다만 편리하게 / 시간 낭비를 줄여줄뿐
![Page 46: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/46.jpg)
마지막 체크리스트
• 화면 구성데이터를 네트워크로 가져오지 말것
– 서버는 거들뿐
– “로컬에 저장할수도 있어요”가 아니라 “로컬에 저장해야함”
• 데이터 송수신은 Json으로 할것
– 데이터만 송수신 할것 / HTML주고 받지 말것
– 아니면 아예 데이터 송수신을 없앨것
![Page 47: K모바일발표 111026 하이브리드ux_배포용](https://reader033.vdocuments.mx/reader033/viewer/2022050817/556a1810d8b42af0198b51a5/html5/thumbnails/47.jpg)
결론
하이브리드앱은 웹 기술을 쓸 뿐 앱이다.