Thinkreals에서 앱개발을 담당하는 소프트웨어 엔지니어 @muik 입니다. 개발한 앱으로는 쿠폰모아, 포켓스타일 안드로이드앱이 있는데요. 지금까지 앱개발을 하며 하이브리드앱 필요성을 많이 느껴왔습니다. 아마 비슷한 분들이 많을꺼라 생각되어 이번에 하이브리드앱 도입 준비를 하며 경험한 것을 공유해보려 합니다.
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
The deck includes a set of techniques and knowledge that can be used when you try to optimize the performance HTML5 app, mobile Web site, JavaScript application running on top of a browser or WebView
Thinkreals에서 앱개발을 담당하는 소프트웨어 엔지니어 @muik 입니다. 개발한 앱으로는 쿠폰모아, 포켓스타일 안드로이드앱이 있는데요. 지금까지 앱개발을 하며 하이브리드앱 필요성을 많이 느껴왔습니다. 아마 비슷한 분들이 많을꺼라 생각되어 이번에 하이브리드앱 도입 준비를 하며 경험한 것을 공유해보려 합니다.
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
The deck includes a set of techniques and knowledge that can be used when you try to optimize the performance HTML5 app, mobile Web site, JavaScript application running on top of a browser or WebView
Citrine is native mobile framework.
▶ About Citrine
- It’s a component based structure and mobile app development platform with Web
technologies (XML(MOML), Java Script)
▶ Feature of Citrine
- Object Oriented Approach
This approach solves inefficiency for mobile app development through object oriented
approaches using MOML (Mobile Object Markup Language)
- Simple functional definition
This defines complicated functions by abstracting them matched with actual usage.
- Independent development
This independently separates library developers from application developments and
implements a base to integrate them easily.
- Component based structure
It provides a base by which services developed by service providers are integrated
with other applications.
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation TestNAVER Engineering
자동화, 계륵에 살 붙이기
: Evolution of Android Automation Test
송의초경
N Tech Service/ Contents QA
NTS Contents QA 팀에서 근무하고 있는 송의초경입니다. 오디오 플랫폼에서 주로 QA를 진행했고 네이버 뮤직을 거쳐 현재는 오디오 클립 QA를 담당하고 있습니다. 자동화 거버넌스 TF에서 자동화 라이브러리의 유지 보수도 함께 담당하고 있습니다.
This is a overview document about Function & Feature of the Agados Platform.
* Reference Links
AGADOS function & feature Chapter-01 UI define elements,
www.slideshare.net/YongkyooPark/agados-function-feature-chapter01-ui-define-elements
AGADOS function & feature Chapter-02 biz logic define
www.slideshare.net/YongkyooPark/agados-function-feature-chapter02-biz-logic-define
AGADOS function & feature Chapter-03 Visibility of AGADOS based app
https://www.slideshare.net/YongkyooPark/agados-function-feature-cvhapter03-visibility-of-agados-based-app
2. 2015년 6월 Alex Russell이 Google 개발자 컨퍼런스에서 제안합니다.
프로그레시브 웹앱: 우리의 영혼을 잃지
않고 탭에서 벗어나기
#슬라이드쇼 상태에서 클릭하시면 해당 페이지로 이동합니다.
3. Alex Russell
이 앱(프로그레시브 웹앱)은
패키징 처리되지 않고 앱스토어를 통해
배포되지 않으며 기존 웹사이트를 기반으로 움직입니다.
이 프로그레시브 웹앱은 점차 “앱”이 되어 간다고
보시면 됩니다.
#슬라이드쇼 상태에서 클릭하시면 해당 페이지로 이동합니다.
4. 모바일웹은 도달율은 높지만 참여도(engagement)가 낮다는 것이 이미 알려진 사실입니다
월간 순 방문자수 방문자당 평균 머무르는 시간
모바일앱 모바일웹
상위 100개의 모바일웹과 모바일앱 비교(comScore Mobile Metrix, U.S., Age 18+, June 2015)
5. 왜냐하면 모바일 웹사이트는
네이티브 어플리케이션보다 현저히 느리며,
터치 인터랙션(제스쳐)의 제약 등으로 인해 필요한 정보획득은 가능하더라도
사용자경험의 질이 떨어지며,
하드웨어 기능에 대한 접근도 어렵습니다.
7. 프로그레시브 웹 앱(Progressive Web App)은 아래의 특징이 있습니다.
빠르다.
단 한번의 클릭으로 콘텐츠 접근이 가능하다.
부드러운 애니메이션과 매끄러운 내비게이션으로 동작한다.
웹 푸시로 참여도를 높일 수 있다.
불안정한 네트워크에서도 좋은 경험을 제공할 수 있다.
모든 브라우저에서 일관적인 사용자 경험을 제공할 수 있다.
8. 프로그레시브 웹앱은 모바일 웹사이트와 모바일 어플리케이션에서 진화한
새로운 접근방식이며
모바일 사용자 경험의 장점과 모바일 웹브라우져의 특징을 결합한
새로운 어플리케이션 모델입니다.
9. 프로그레시브 웹 앱은 이렇게 구성되어 있습니다.
캐시된 쉘은 재 방문 시 즉시 로드됩니다.
속도에 포커싱되어 있습니다.
동적인 내용이 뷰를
채우게됩니다.
1
10. 프로그레시브 웹 앱은 이렇게 구성되어 있습니다.
자바 스크립트로 작성된 클라이언트 측 프록시
웹에서 네이티브 앱과 같은 동작을 재현하기 위한
장치기능 액세스
네이티브앱과 동일한 앱 접근성을 구현하기 위한 설정
목록을 가진 파일
디바이스 홈스크린에 추가될 앱 아이콘 설정
풀스크린 모드 설정(standalone or fullscreen)
디바이스 회전에 따른 세로/가로모드 설정
인트로 이미지 설정
백그라운드/테마(System Status 영역 등) 색상 설정
2 3
15. [특징3] 기존 모바일웹과 차원이 다른 부드럽고 빠른 내비게이션을 제공합니다.
3G 네트워크 환경에서 첫 방문 시 10초 이내로 페이지를
로드합니다.
페이지 재방문 시 500 밀리세컨트 이내로 페이지를 로드
합니다.
초당 60 프레임을 스크롤할 수 있습니다.
이미지가 로드되는 동안 컨텐츠가 점프되지 않습니다.
16. [특징4] Web Push를 발송할 수 있습니다.
기존 어플리케이션 푸시와 마찬가지로 푸시 메시지를
발송할 수 있습니다.
프로그레시브 웹앱이 닫힌 상태에서도 마찬가지로 푸
시 수신이 가능합니다.
18. 프로그레시브 웹앱의 표준기술은 최신버전의 모든 브라우저에서 작동시킬 수 있습니다.
하지만 Service Worker는 현재는 크롬, 오페라, 파이어폭스에서 사용할 수 있으며 마이
크로소프트의 웹브라우저(in development)와 애플의 웹브라우저(under consideration)
에도 곧 적용될 예정입니다.
[특징5] 프로그레시브 웹앱은 다양한 모바일웹 브라우저에서 동작합니다.
19. [특징5] 그중 크롬 모바일웹 브라우저는 타사대비 앞서나가고 있죠.
구분 Chrome
(Ver 55.0.2883.91)
Chrome
(ver 56.0.2924.79)
Safari
(ver XXXXXXXX)
Native Behaviors
Local Notifications
Push Messages ●
Foreground Detection ● ● ●
Permissions ●
Seamless Experience
Offline Mode ●
Home Screen Installation
Background Sync ●
Inter-App Communication
Input
Touch Gestures ● ● ●
Speech Recognition ●
Clipboard(Copy&Paste) ● ● ●
Pointing Device Adaptation ●
Surroundings
Bluetooth 구현중
NFC 구현중
Proximity Sensors 구현중
Ambient Light 구현중
Camera & Microphone
Audio & Video Capture ●
Advanced Camera Controls
Recording Media ●
Real-Time Communication ●
Location & Position
Geolocation ● ● ●
Geofencing
Device Orientation ● ● ●
Device Motions ● ● ●
Device Feature
Network Type&Speed ●
Online State ● ● ●
Vibration ●
Bettery Status ●
Screen & Output
Fullscreen ●
Screen Orientation&Lock ●
Wake Lock
Presentation Features ●
Operating System
Offline Storage ● ● ●
File Access ● ● ●
Contacts
Storage Quotas ●
20. 앱스토어 로드
어플리케이션 검색
설치 선택
사용자정보 접근 설정
다운로드 진행
사용
[특징6] 앱스토어를 통한 앱 설치보다 사용자의 접근성/편의성이 우수합니다.