UI 시스템

  • UIKit/ AppKit : 기본 UI를 제공해주는 framework로 cocoa/ cocoa touch의 주요 자원이 됩니다. 커스터마이징을 통하여 새로운 감각을 지닌 UI로 바꿀 수도 있습니다.
  • CoreAnimation : 각 UI의 움직임 모션 등을 CALayer를 통해 구현할 수 있습니다.
  • CoreGraphics : 이미지를 생성할 때, 사용하는 API입니다. CoreGraphics을 이용한 드로잉 작업은 런타임에서 수행하게 됩니다. iOS 10에서 소개된 UIGraphicsImageRenderer를 사용하면, CoreGraphics를 사용하는 것보다 편하게 이미지를 그릴 수 있습니다. renderer 객체에 image 생성 부분에 클로저를 통하여 이미지를 그리고 반환하면 됩니다.
  • CoreImage : 이미 존재하는 이미지를 수정할 때 사용하는 API입니다. 사진의 색감, 크기 등을 수정할 수 있습니다. 대표적으로 이미지에 필터 효과를 입힐 때 사용되며, 여러 필터를 동시에 적용할 때 필요한 파이프라인을 제공합니다. CIImage로 이미지를 로딩하여, CIContext를 수정하여 사진의 효과를 추가합니다.


보다 복잡하고 화려한 그래픽을 위한 라이브러리

  • SceneKit : 3D 컨텐츠를 구현할 때 사용하는 framework 입니다. SCNScene을 기본적인 컨테이너로 사용합니다.
  • SpriteKit : 주로 2D 컨텐츠를 위해 사용됩니다. 애니메이션이나 인터랙션이 많은 게임 같은 컨텐츠 제작에 많이 쓰입니다. SKScene은 모든 객체들이 그려지는 컨테이너가 됩니다. 여기에 SKView를 얹어서 그래픽적 효과를 구현하게 됩니다.
  • Metal : 위에 설명한 모든 라이브러리의 기저에 자리 잡은 API입니다. 가장 기초적인 API이며, 실제적인 그래픽 작업은 Metal을 통해서 이루어집니다.


이후 demo 진행


CoreAnimation에는 모델 레이어와 프레젠테이션 레이어가 존재합니다. 모델 레이어는 실제 UI가 존재하는 부분입니다. 프레젠테이션 레이어는 UI가 그려지는 부분입니다. 얘를 들어 버튼을 CoreAnimation으로 이동하면 프레젠데이션 레이어가 animation 동작에 맞추어 이동합니다. 하지만 모델 레이어는 원래의 위치에 존재하게 됩니다. 이런 현상 때문에 움직이 위치에 버튼을 눌러도 해당 이벤트의 처리가 일어나지 않거나, 애니메이션이 마무리된 다음에 버튼이 다시 모델 레이어의 위치로 돌아옵니다. 이제 따른 가장 확실한 방법은 animtion이 발생할 때, 실제 버튼인 모델 레이어를 이동할 위치로 옮기는 것입니다.



transform & frame

scale, rotating angle, frame 등을 CAAffineTransform을 활용하여 animation을 수행할 수 있습니다. frame은 transform의 변화에 따라 즉시 영향을 받기 때문에 bounds나 position을 사용하여 transform 과정에서 크기나 위치를 지정해줍니다.


multiple mask

여러 마스킹을 사용하여 효과를 만들 수 있습니다. 여러 마스크를 추가 할 경우, 각 마스킹에 따른 비용이 발생하게 됩니다. 레이어의 사이즈 또한 증가하게 됩니다. 될 수 있으면 적은 수의 마스킹을 사용하여 성능 개선을 도모합니다.


shadow

shadow는 각 레이어 별로 따로 계산되고 그려집니다. 각 레이어가 속한 뷰 하이라키를 따릅니다. shadow를 그릴때, 그려질 path를 계산하여 그립니다. path의 데이터가 동일하면 기존의 shadowfㅡㄹ 그대로 사용하여 성능에 영향을 끼치지 않습니다.



Tip & Tricks

CAChapeLayer : 레이어를 그리고 CA를 활용하여 애니메이션을 입힐 수 있습니다. stroke와 line-dash 같은 애니메이션을 만들 수 있습니다. 그라디언트 레이어를 이용해서 그라디언트를 구현하고, 그라디언트 애니메이션도 구현 가능합니다. 레이어 별로 타임 스케일이 다르고, 서브레이어는 슈퍼 레이어의 시간을 상속받습니다. 각 시간은 전역 시간 값이 아닌 각 레이어의 지역 시간 값을 갖습니다. 이 지역 시간 값은 각 레이어의 timeOffset을 사용하여 제스처에 따른 animation의 진행 절차를 조정 가능합니다.






참고 : https://developer.apple.com/videos/play/wwdc2017/235/

'WWDC > 2017' 카테고리의 다른 글

[iOS] Visually Rich User Experiences  (0) 2017.06.21
[iOS] Advanced Animation with UIKit  (0) 2017.06.20
[iOS] Core ML in WWDC 2017  (0) 2017.06.20

추후, sample code 및 추가 주석 필요


    UIViewPropertyAnimator를 사용해서 사용자의 제스처와 유기적인 애니메이션 구현이 가능합니다. UIViewPropertyAnimator는 작년 (2016)에 발표된 API 입니다. 타이밍 펑션을 지원하여 베지어 곡선을 사용한 animation 커스터마이징이 가능합니다. 그리고 사용자의 인터랙션과 함계 유기적인 animation 동작이 가능합니다.


    fractionComplete라는 animation 프로퍼티로 사용자의 제스처에 따른 진행 경과를 지정해 줄 수 있습니다. 코드로 구현한 animation의 경우, 사용자의 동작이 끝나는 시점은 가져왔지만 제스처에 의해 미리 진행된 animation의 경과를 가져올 수 없었습니다. 하지만 fractionComplete를 사용하면 사용자가 20%까지 버튼을 움직인 경우, 이 부분부터 이어서 나머지 80%의 animation 동작을 지정할 수 있습니다. 뿐만 아니라 실행되고 있는 animation을 중단하고 사용자의 제스처를 수행할 수도 있습니다. 구현 방식은 아래와 같습니다.




    먼저 인터랙션을 사용하여 애니메이션 구현입니다.제스쳐, 3D 터치를 적용할 수도 있습니다. 기본은 pausing과 continue라는 2가지의 개념에 있습니다. 실행하고자하는 animation을 추가하고 pausing을 호출합니다. 추가된 animation은 실행이 정지 되어 있습니다. 이 상 태로 사용자의 제스처에 따라 fraction 값을 조정합니다. 사용자의 제스처 동작이 끝나는 시점에 fraction부터 지정된 animation이 수행될 수 있도록 continue를 호출합니다. 위의 과정을 통해 사용자의 제스처의 영향을 받지 않고, 제스처에 이어서 미리 지정했던 animation의 수행이 가능합니다.


-pausing은 애니메이션이 시작된 상태지만 동작은 하지 않습니다.

-praction은 실제 정의된 애니메이션의 중간 과정을 애니메이터에 지정하여 알려줍니다.

-continue는 실제 정의된 상태의 지점 (fraction)에서 지정된 애니메이션을 수행




    인터럽터블 애니메이션은 진행 중인 애니메이션을 사용자의 제스처에 의해 interrupt하는 것을 말합니다. 간단한 예로 웹뷰에서 스크롤 animation이 사용자의 제스처에 의해 정지되는 것을 확이하실 수 있습니다. 이는 사용자의 제스처가 들어오는 지점에서 animation을 pausing을 한 다음 현 시점에 fraction을 저장합니다. 그리고 사용자의 제스처에 따라 움직이다가 제스처가 끝나는 시점에 continue를 호출하여, 수행중이던 animation을 제스처에 이어 수행합니다.


-애니메이션에 인터럽트가 걸리는 시점 (사용자의 제스처가 시작되는 지점)에 pausing을 수행합니다.

-praction은 실제 정의된 애니메이션의 중간 과정을 애니메이터에 지정하여 알려줍니다.

-continue는 실제 정의된 상태의 지점에서 지정된 애니메이션을 수행합니다.




    UIViewPropertyAnimator에는 새로운 property가 2개 추가됬습니다. 하나는 scrupsLineary이고, 다른 하나는 puaseOnCompletion입니다.

scrupsLineary (Bool) : pauseed animation에 선형적으로 animation을 수행할건지, timing function을 적용할건지 지정하는 프로퍼티입니다.

puaseOnCompletion (Bool) : 모든 animation은 animation 수행이 완료 되어야 completion 동작을 수행합니다. 하지만 puaseOnCompletion이 true이면 puase 상태서 complation이 수행됩니다. pause로 인한 animation의 종료를 알고 싶으면 KVC를 사용하여, 'running'이라는 keypath를 이용합니다.



    이외에 spring animation을 이용하여 스프링 효과를 줄 수 있습니다. 탄력적인 움직임을 주는 critical dumping은 dumping 값을 1.0을 주면 되고, 지정된 범위를 벗어나서 튕기는 spring 효과는 dumping 값을 1,0보다 작게 주면 됩니다. 이외에 UIVisualEffectView를 사용하여 view에 blur 효과와 같은 효과들을 줄 수 있는데, 이는 UIVisualEffect로 정의한 animator를 UIViewEffectView에 추가해주면 수행됩니다. UITimingCurveProvider를 사용하여 커스터마이징한 timing function을 추가할 수 있습니다.



    이번에 iOS 11에서 두드러지는 animation 중에 하나가 사용자의 interaction에 따라 변화하는 label입니다. 이는 Veiw Morping을 이용한 것입니다. View Morping은 2개의 view를 하나의 view가 변하는 것처럼 보여지게 하는 것입니다. 사용자의 interaction에 따라 각 2개의 label과 2개의 animator를 구현합니다. 그리고 2개의 animator를 concatenating을 사용하여 엮습니다. 


    WWDC에서는 animation을 사용하는 데 있어, tip도 소개하고 있습니다. 먼저 layer에서 radius curve와 masked corner를 사용하여 animation을 줄 수 있습니다. 그리고 key frame animation을 사용하여 실행하고자 하는 animation을 미리 종료하거나 실행을 지연 시킬 수 있습니다. 또한 additive animation이라고 소개된 방법을 사용하면 수행 중에 다음 수행할 animation을 지속적으로 추가할 수 있으며, 이를 하나의 timing function으로 동작하게 만들 수 있습니다. 

'WWDC > 2017' 카테고리의 다른 글

[iOS] Visually Rich User Experiences  (0) 2017.06.21
[iOS] Advanced Animation with UIKit  (0) 2017.06.20
[iOS] Core ML in WWDC 2017  (0) 2017.06.20

    machine learning은 현존하는 기술 중에 가장 인기있는 기술입니다. 사진에 나온 사람의 얼굴 인식, 키보드의 prediction, 워치의 hand writing 인식 등에 ML이 사용되고 있습니다.



    WWDC에서는 장미를 인식하는 알고리즘을 예로 들었습니다. 먼 ML은 Traning이라는 과정을 거칩니다. 이 과정을 통해 ML 모델이 생성됩니다. 이미지에 대한 정보를 수집하고 꽃의 색과 모양에 따라 꽃을 분류하는 알고리즘을 구체화시켜 나갑니다. 개발제에게는 ML 모델이라는 정형화된 파일을 제공합니다. ML 모델은 함수로 이루어져있고 내부에는 여러 레이어와 Neural network가 이어져 있습니다. ML  모델 내부의 파싱 과정을 거친 결과가 최종적으로 개발자에게 제공합니다.



    애플은 이를 제공하기 위해 검증/ 성능/ 효율 등의 3가지 측면에서 많은 고민을 하였으며, iOS 11부터 coreML을 통한 machine learning을 제공합니다. coreML은 deep learning에 기반한 framework입니다. 크게 Vision과 NLP (Naural Language Processing) 를 제공합니다. coreML은 기기에서만 동작하기 때문에 개인정보 걱정이 없으며, 서버를 사용하지 않고 데이터를 소비하지 않습니다. 무엇보다 24/7으로 항상 이용이 가능합니다. 사용환경은 아래와 같이 애플에서 제공하는 모든 플랫폼에서 사용 가능합니다. 


Vision : 오브젝트 트래킹, 얼굴 인식

NLP (Naural Language Processing) : 언어 인식, 이름 식별

Core ML : 도메인 특화 프레임워크, 음악 태깅, 이미지 캡션, 이미지/ 텍스트/ 사전, 등을 input으로 처리

Accelerate & MPS (Metal Performance Shader) : 성능 최적화를 위한 low-level package

사용 환경 : macOS, iOS, watchOS ,tvOS에서 사용 가능




    coreML은 통합된 API로 Xcode와 결합하여 제공하며, 공공 ML 모델을 지원하여 기존 ML 모델들을 사용 가능합니다. 기존 ML 모델을 추가하면 xcode에서 자동으로 ML에 대한 정보를 읽습니다. 이름/ 라이선스/ 사이즈 등의 정보가 표시되며, 컴파일할 타겟을 지정하면 코드에서 사용 가능한 class를 생성합니다. 애플에선  coreML tool (python으로 제작된 converting tool)을 제공합니다. 이를 사용해서 기존의 deep learning 프레임워크에서 생성된 ML 모델을 coreML 모델로 컨버팅이 가능합니다.


    내부적으로 JOSN 형태의 ML 모델을 로드하여 앱 번들에 최적화 하여 해당 모델을 안착합니다. 그리고 사용 가능한 class를 생성합니다. ML 모델은 정확성을 높이고 사이즈를 줄이는 것을 목표로하여 생성되며, 이에 부합한 모델이 사용하기 적합한 ML 모델입니다.


'WWDC > 2017' 카테고리의 다른 글

[iOS] Visually Rich User Experiences  (0) 2017.06.21
[iOS] Advanced Animation with UIKit  (0) 2017.06.20
[iOS] Core ML in WWDC 2017  (0) 2017.06.20

+ Recent posts