Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
iOS9 소개
2015.10.21
박재성
Force Touch Events
Force Touch Trackpads
Force Touch를 지원하는 트랙패드에서 누름 강도에 따른 처리를 위한 새로운 API.
마우스 이벤트의 webkitForce 속성을 통해 접근...
Event 발생시점
webkitmouseforcewillbegin mousedown 직전에 발생
webkitmouseforcedown Force click인 경우, mousedown 이벤트
이후에 발생
webkitmou...
TouchEvent.force
터치 이벤트 발생시, 터치의 누름 강도를 값으로 반환
참고 : Touch.force
element.addEventListener("touchstart", function(event) {
 ...
iPad Pro
기존 iPad들의 뷰포트 width(device-width)는 768px
iPad Pro(12.9 인치 - 2015/11 출시)의 뷰포트 width는 1024px
iPad Pro는 3D Touch 미지원...
Multitasking
iOS9가 설치된 iPad에서는 새로운 멀티태스킹 기능들이 추가 되었다.
a) Slide Over
가로모드 상태에서 우측 3/1 영역을 사용, 현재 앱을 벗어나지 않고 다른 앱을 실행
2개의 앱이 동시에 온전히 실행되는 것이 아니며, 완전한 멀티태스킹이라고 하긴 어려움
지원 기기 : iPad...
iOS 9 New Features : Slide Over - iPhone , iPad - Piece of Cake Series
b) Split View
Split View를 지원하는 앱에서 사용 가능하며,
Slide Over 상태에서 2개의 앱을 화면 분할해 동시에 2개 앱을 실행
지원 기기 : iPad Air 2, iPad Pro
분할 크기에 따라 뷰포트 width 값은 다음과 같다.
분할된 화면크기 iPad (non iPad Pro) iPad Pro
1/3 320px 375px
1/2 507px 678px
2/3 694px 981px
iOS 9 New Features : Split Multitasking- iPhone , iPad - Piece of Cake Series
c) Picture-in-Picture
다른 앱을 실행하는 동안에도, 동영상을 볼수 있는 기능이다.
지원 기기 : iPad mini 2, iPad mini 3, iPad Air, iPad Air 2, iPad Pro
PiP를 지원하는 앱의 경우 비디오 하단의 PiP 모드 전환버튼을 통해 실행한다.
다음은 PiP 모드를 지원하는 경우 확인과, PiP로 전환하는 샘플예제
if (video.webkitSupportsPresentation...
How to Use Picture in Picture Mode on iOS 9
How to Use iOS 9 Picture in Picture Mode
Safari View Controller
웹 컨텐츠에 대한 처리를 웹뷰가 아닌 사파리에 위임하는 형태로 동작
앱과 별도의 프로세스로 동작
full 페이지로 동작 (앱에서 link tap시 열리고, done을 누르면 창이 닫히는 형태)
주소창의 주소는 readonly 이며, 변경할 수 없음
쿠키와 웹사이트 데이터를 사파리와 공유.
- ex. 로그인된 상태라...
Safari Content Blockers
App extension(유료)을 설치하면 사파리에서
광고, 트래커, 커스텀 폰트, 큰 이미지, JS 파일 등을 차단
*App extension은 사파리에 JSON 포맷의 ru...
Content Blockers App :
(무료)
(유료)
- (유료)
1Blocker
Crystal
Purify 실행 데모 동영상
List of content blockers for iOS 9
: 3.9x 빠르고, 53% 더 적은 bandwidth를 사용Crystal 자체 벤치마크
이는 당연한 결과이기도 한데, 일부 리소스들이 차단되어 로딩되지 않으므로 로딩이 빨라질 수밖에 없다.
그러나 어떤 리소스들이 차단...
사용자는 새로고침을 길게 눌러 content blocker 없이 로딩하도록 할수 있다.
참고 : Content Blocking Safari Extensions
WKWebView
UIWebView는 공식적으로 폐지(deprecated) 예정
In apps that run in iOS 8 and later, use WKWebView instead of using UIWebView...
Universal Links
네이티브 앱으로의 deep linking
앱과 연관된 URL이 전달되면 네이티브 앱이 설치된 경우, 사파리에서 리다이렉션을 통하
지 않고, 네이티브 앱에서 바로 실행
앱이 처리할 URL에 대...
App Search
Spotlight 검색 또는 Siri를 통해 앱의 컨텐츠 또는 웹을 검색
로 App Search 최적화(SEO) 여부 검사
앱내 컨텐츠 인덱싱은 를 사용, 앱내 컨텐츠 검색 가능
App Search ...
CloudKit JS
CloudKit JS를 통해 iCloud 데이터에 액세스 할수 있다.
CloudKit JS Reference
Back button
커스텀 URI 또는 Universal Link를 통해 네이티브 앱으로 이동된 경우, 앱 좌측 상단
에 되돌아가기 버튼이 생성되며 버튼을 누르면 이전 화면으로 되돌아 갈수 있다.
새로운 OS (tvOS, watchOS)
tvOS: 브라우저 및 웹뷰 없음. 그러나 JavaScript, XHR 그리고 DOM은
XML 기반의 TVML 마크업을 통해 실행
watchOS: 브라우저 및 웹뷰 없음
Abou...
JavaScript & CSS
Navigation Timing API
웹사이트의 성능측정 데이터를 제공하는 Navigation Timing API가
iOS 8.0에 추가되었다가 8.1에서 제거되었는데, iOS9에 다시 추가
참고 : Navigatio...
Backdrop CSS
요소가 아닌 배경에 필터를 지정할 수 있는 backdrop 필터지원
demo
Filter Effects Module Level 2
Introducing Backdrop Filters
CSS Scroll Snap Points
지정된 픽셀만큼 이동을 고정시킬 수 있다. (플리킹과 같은 UX)
<style>
#left­snap {
    width: 300px;
    overflow­x: auto;
 ...
Internet Explorer Samples: snap-points
CSS Scroll Snap Galleries demo
CSS Conditional Rules
CSS 속성 지원여부를 확인할 수 있는 CSS 지시자인 @supports와
JavaScript API인 CSS.supports 지원이 추가
CSS Conditional Rules ...
@supports
특정 css 속성을 브라우저가 지원하는지 또는 하지 않는지에 따라 특정 스타일을 적용
@supports (box­shadow: 0 0 10px rgba(0,0,0,0.1)) {  /* CSS code ...
CSS.supports() API
특정 CSS 속성이 지원되는지 여부는 다음과 같이 확인
// ­webkit­scroll­snap­type 속성과 그 값으로 mandatory가 지원되는지 여부 확인
if (window....
ES6 지원 추가항목
ECMA-262 6th Edition, ECMAScript 2015
Classes
Computed Properties
Weak Set
Number Object
Octal and Binary Lite...
CSS4 pseudo-selectors 지원
가상 선택자
:not
:any-link
:placeholder-shown
:read-write
:read-only
:matches
/* old style */
.default...
기타
-webkit- prefix를 붙여 사용하던 CSS 속성들 일부에 대해 prefix 제거 ( )
<input type=file>에서 iCloud 드라이브 또는 써드파티 앱의 파일 등 선택가능
https 프로토콜을 ...
References
iOS 9, Safari and the Web: 3D Touch, new Responsive Web Design,
Native integration and HTML5 APIs
What's new in...
고맙습니다.
iOS9 소개
Prochain SlideShare
Chargement dans…5
×

iOS9 소개

1 511 vues

Publié le

iOS9에 새롭게 추가된 기능과 변화 등에 대한 소개

Publié dans : Technologie
  • Login to see the comments

iOS9 소개

  1. 1. iOS9 소개 2015.10.21 박재성
  2. 2. Force Touch Events Force Touch Trackpads Force Touch를 지원하는 트랙패드에서 누름 강도에 따른 처리를 위한 새로운 API. 마우스 이벤트의 webkitForce 속성을 통해 접근할 수 있다. 참고 : Responding to Force Touch Events element.addEventListener("webkitmouseforcewillbegin", function(event) {     event.webkitForce;  // 누름의 강도에 대한 값(number)을 반환     // Constants :     // represents the amount of force required for a regular and force click, respectively.     event.WEBKIT_FORCE_AT_MOUSE_DOWN;     event.WEBKIT_FORCE_AT_FORCE_MOUSE_DOW; }, false);
  3. 3. Event 발생시점 webkitmouseforcewillbegin mousedown 직전에 발생 webkitmouseforcedown Force click인 경우, mousedown 이벤트 이후에 발생 webkitmouseforceup Force click인 경우, mousedown 이벤트 이후 버튼을 뗀 후 발생 webkitmouseforcechanged Force click 이벤트내에서 변경이 발생될 때
  4. 4. TouchEvent.force 터치 이벤트 발생시, 터치의 누름 강도를 값으로 반환 참고 : Touch.force element.addEventListener("touchstart", function(event) {     event.touches[0].force;  // 누름 강도에 따라, 0.0 ~ 1.0 사이의 값을 반환 }, false); 데모 3D Touch ForceTouch demo
  5. 5. iPad Pro 기존 iPad들의 뷰포트 width(device-width)는 768px iPad Pro(12.9 인치 - 2015/11 출시)의 뷰포트 width는 1024px iPad Pro는 3D Touch 미지원. 대신 Apple Pen을 지원 (Apple Pen과 관련된 별도 API는 없음) iOS9 and Responsive Web Design iPad browser WIDTH & HEIGHT standard
  6. 6. Multitasking iOS9가 설치된 iPad에서는 새로운 멀티태스킹 기능들이 추가 되었다.
  7. 7. a) Slide Over 가로모드 상태에서 우측 3/1 영역을 사용, 현재 앱을 벗어나지 않고 다른 앱을 실행 2개의 앱이 동시에 온전히 실행되는 것이 아니며, 완전한 멀티태스킹이라고 하긴 어려움 지원 기기 : iPad mini 2, iPad mini 3, iPad Air, iPad Air 2, iPad Pro
  8. 8. iOS 9 New Features : Slide Over - iPhone , iPad - Piece of Cake Series
  9. 9. b) Split View Split View를 지원하는 앱에서 사용 가능하며, Slide Over 상태에서 2개의 앱을 화면 분할해 동시에 2개 앱을 실행 지원 기기 : iPad Air 2, iPad Pro
  10. 10. 분할 크기에 따라 뷰포트 width 값은 다음과 같다. 분할된 화면크기 iPad (non iPad Pro) iPad Pro 1/3 320px 375px 1/2 507px 678px 2/3 694px 981px
  11. 11. iOS 9 New Features : Split Multitasking- iPhone , iPad - Piece of Cake Series
  12. 12. c) Picture-in-Picture 다른 앱을 실행하는 동안에도, 동영상을 볼수 있는 기능이다. 지원 기기 : iPad mini 2, iPad mini 3, iPad Air, iPad Air 2, iPad Pro
  13. 13. PiP를 지원하는 앱의 경우 비디오 하단의 PiP 모드 전환버튼을 통해 실행한다. 다음은 PiP 모드를 지원하는 경우 확인과, PiP로 전환하는 샘플예제 if (video.webkitSupportsPresentationMode &&     typeof video.webkitSetPresentationMode === "function") {     // Toggle PiP when the user clicks the button.     pipButtonElement.addEventListener("click", function(event) {         video.webkitSetPresentationMode(             video.webkitPresentationMode === "picture­in­picture" ?                 "inline" : "picture­in­picture");     }); } else {     pipButtonElement.disabled = true; }
  14. 14. How to Use Picture in Picture Mode on iOS 9 How to Use iOS 9 Picture in Picture Mode
  15. 15. Safari View Controller 웹 컨텐츠에 대한 처리를 웹뷰가 아닌 사파리에 위임하는 형태로 동작 앱과 별도의 프로세스로 동작
  16. 16. full 페이지로 동작 (앱에서 link tap시 열리고, done을 누르면 창이 닫히는 형태) 주소창의 주소는 readonly 이며, 변경할 수 없음 쿠키와 웹사이트 데이터를 사파리와 공유. - ex. 로그인된 상태라면 Safari View Controller에서도 동일하게 로그인된 상태가 됨, form에 대한 데이터의 autofill 처리, 등 Introducing Safari View Controller - Apple WWDC 2015 iOS 9 and Safari View Controller: The Future of Web Views
  17. 17. Safari Content Blockers App extension(유료)을 설치하면 사파리에서 광고, 트래커, 커스텀 폰트, 큰 이미지, JS 파일 등을 차단 *App extension은 사파리에 JSON 포맷의 rules 배열정보를 제공하며, 사파리는 이 정보를 바이트코드로 변환해 사용 사파리 설정에서 Content Blocker 앱을 설정하는 형태로 사용 지원 기기 : iPhone 5s ~ 6s iPad mini 2~4 / Air(2) / Pro iPod touch 6세대
  18. 18. Content Blockers App : (무료) (유료) - (유료) 1Blocker Crystal Purify 실행 데모 동영상 List of content blockers for iOS 9
  19. 19. : 3.9x 빠르고, 53% 더 적은 bandwidth를 사용Crystal 자체 벤치마크 이는 당연한 결과이기도 한데, 일부 리소스들이 차단되어 로딩되지 않으므로 로딩이 빨라질 수밖에 없다. 그러나 어떤 리소스들이 차단되는지에 대한 불명확한 점 때문에 논란의 여지가 있다.
  20. 20. 사용자는 새로고침을 길게 눌러 content blocker 없이 로딩하도록 할수 있다. 참고 : Content Blocking Safari Extensions
  21. 21. WKWebView UIWebView는 공식적으로 폐지(deprecated) 예정 In apps that run in iOS 8 and later, use WKWebView instead of using UIWebView. Swift or Objective-C 에서 를 통해 웹뷰의 로컬스토리 지를 핸들링 할수도 있음 별도 파일을 URL로 로딩가능 커스텀 UserAgent 지정가능 WKWebsiteDataStore
  22. 22. Universal Links 네이티브 앱으로의 deep linking 앱과 연관된 URL이 전달되면 네이티브 앱이 설치된 경우, 사파리에서 리다이렉션을 통하 지 않고, 네이티브 앱에서 바로 실행 앱이 처리할 URL에 대한 데이터를 apple-app-site-association JSON 파일로 https 웹서버에 업로드 Amazon: https://www.amazon.com/apple-app-site-association How to Set Up Universal Links to Deep Link on Apple iOS 9
  23. 23. App Search Spotlight 검색 또는 Siri를 통해 앱의 컨텐츠 또는 웹을 검색 로 App Search 최적화(SEO) 여부 검사 앱내 컨텐츠 인덱싱은 를 사용, 앱내 컨텐츠 검색 가능 App Search API Validation Tool CoreSpotlight Search for Developers Apple's Siri, Spotlight extend Google-like search inside iOS 9 apps
  24. 24. CloudKit JS CloudKit JS를 통해 iCloud 데이터에 액세스 할수 있다. CloudKit JS Reference
  25. 25. Back button 커스텀 URI 또는 Universal Link를 통해 네이티브 앱으로 이동된 경우, 앱 좌측 상단 에 되돌아가기 버튼이 생성되며 버튼을 누르면 이전 화면으로 되돌아 갈수 있다.
  26. 26. 새로운 OS (tvOS, watchOS) tvOS: 브라우저 및 웹뷰 없음. 그러나 JavaScript, XHR 그리고 DOM은 XML 기반의 TVML 마크업을 통해 실행 watchOS: 브라우저 및 웹뷰 없음 About TVML
  27. 27. JavaScript & CSS
  28. 28. Navigation Timing API 웹사이트의 성능측정 데이터를 제공하는 Navigation Timing API가 iOS 8.0에 추가되었다가 8.1에서 제거되었는데, iOS9에 다시 추가 참고 : Navigation Timing
  29. 29. Backdrop CSS 요소가 아닌 배경에 필터를 지정할 수 있는 backdrop 필터지원 demo Filter Effects Module Level 2 Introducing Backdrop Filters
  30. 30. CSS Scroll Snap Points 지정된 픽셀만큼 이동을 고정시킬 수 있다. (플리킹과 같은 UX) <style> #left­snap {     width: 300px;     overflow­x: auto;     overflow­y: hidden;     ­webkit­scroll­snap­type: mandatory;     ­webkit­scroll­snap­points­x: repeat(300px); } </style> <div id="left­snap">     <img src="img01.png">     <img src="img02.png">     <img src="img03.png">     ... </div> Scroll Snapping with CSS Snap Points
  31. 31. Internet Explorer Samples: snap-points CSS Scroll Snap Galleries demo
  32. 32. CSS Conditional Rules CSS 속성 지원여부를 확인할 수 있는 CSS 지시자인 @supports와 JavaScript API인 CSS.supports 지원이 추가 CSS Conditional Rules Module Level 3
  33. 33. @supports 특정 css 속성을 브라우저가 지원하는지 또는 하지 않는지에 따라 특정 스타일을 적용 @supports (box­shadow: 0 0 10px rgba(0,0,0,0.1)) {  /* CSS code */ }   ==> box­shadow 속성을 지원하는 경우 적용 @supports not (animation­duration: 1s) {   /* CSS code */  } ==> animation­duration 속성이 지원되지 않는 경우 적용 and, or 연산자를 사용한 조건식을 사용 @supports ((border­radius:4px) and (transition­duration: 1s)) or (transform­origin: 5% 5%      /* CSS code */ } @supports를 활용하면 특정 속성이 지원되는 브라우저의 경우, 별도의 css 파일을 로딩하도록 처리 @supports (box­shadow: 0 0 10px rgba(0,0,0,0.1)) {     @import url('box­shadow.css'); } @supports(­webkit­scroll­snap­type: mandatory) { ... }
  34. 34. CSS.supports() API 특정 CSS 속성이 지원되는지 여부는 다음과 같이 확인 // ­webkit­scroll­snap­type 속성과 그 값으로 mandatory가 지원되는지 여부 확인 if (window.CSS && CSS.supports("­webkit­scroll­snap­type", "mandatory")) {     ... }
  35. 35. ES6 지원 추가항목 ECMA-262 6th Edition, ECMAScript 2015 Classes Computed Properties Weak Set Number Object Octal and Binary Literals Symbol Objects Template Literals
  36. 36. CSS4 pseudo-selectors 지원 가상 선택자 :not :any-link :placeholder-shown :read-write :read-only :matches /* old style */ .default .def, .default .bracket, .default .operator, .default .variable {     color: red; } /* using :matches */ .default :matches(.def, .bracket, .operator, .variable) {     color: red; }
  37. 37. 기타 -webkit- prefix를 붙여 사용하던 CSS 속성들 일부에 대해 prefix 제거 ( ) <input type=file>에서 iCloud 드라이브 또는 써드파티 앱의 파일 등 선택가능 https 프로토콜을 사용하는 페이지에서는 http와 https를 혼용해 리소스들을 로딩 할 수 없음 네이티브 앱에서 확장기능을 통해, 사파리의 공유된 링크(shared links)에 데이터를 추가할 수 있음 지원 목록 Document.scrollingElement
  38. 38. References iOS 9, Safari and the Web: 3D Touch, new Responsive Web Design, Native integration and HTML5 APIs What's new in Safari 9 What's New in Safari : Safari 9.0
  39. 39. 고맙습니다.

×