[iOS] Visually Rich User Experiences

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/