XAML or HTML

B818 Creating Beautiful UX in a Real-World App with Visuals, Animations and Effects

번역

출처: <https://channel9.msdn.com/Events/Build/2016/B818>

   

안녕하세요. 마이크로소프트 MVP 권영철입니다. build 2016이 끝이 났습니다. 저는 주로 UWP 앱의 UI/UX 개발과 관련된 영상을 가장 먼저 시청할 계획입니다. 아래 정리한 내용은 발표자의 발표 내용 해석이 주가 되겠지만 때로는 이해를 돕기 위해 용어 변경 및 사견이 첨언될 수 있습니다. 그리고 오역도 포함될 수 있으니 가볍게 훑어 보시는 용도로 활용하시고 좀 더 정확한 내용은 직접 시청을 하시기를 권해드립니다.

   

페이스북 윈도우 앱 개발 그룹의 박문찬 MVP님의 빌드정리 엑셀 문서에도 계속해서 업데이트하겠습니다. 박문찬 build 2016 UWP 동영상 링크 정리 엑셀 바로가기

   

최고의 아이디어를 선정하는 일은 좋은 앱을 만들기 위한 일의 절반에 불과합니다. 사용자의 감정을 자극하는 장난과 유혹하는 매력과 멋진 경험을 가진 앱을 보장하는 일은 그 앱을 사용하는 고객을 신나게 하는 일입니다. 멋진 경험은 사용자를 기쁘게 하고, 그 앱을 계속해서 사용하게 합니다. 그리고 다른 사람에게 그런 긍정적인 경험을 전달합니다.

   

이 세션은 UI/UX에 초점을 맞추고 있습니다. 잘 만들어진 UI 기초에 애니메이션, 이펙트와 밀접한 새로운 기능으로 UI/UX를 강화합니다. 그리고 사용자를 즐겁게 하는 새로운 장난같은 경험을 가능하게 합니다. 우리는 이런 경험들을 간단히 만들 수 있는 캡슐화된 일부 XAML 기술들을 통해 낮은 수준에서 가능한 개발자 플랫폼 스펙트럼을 살펴보려고 합니다.

   

아름다운 슬라이드를 보면서 시작해볼까요?

   

Position(위치)에 따라, Resize(크기)에 따라, Transition도 달라지고, Look(상태)도 달라집니다.

   

이렇게 멋진 앱, 즉 앱스토어(Marketplace)에서 별점 5개 만점을 받을 만한 경험을 가진 앱은 어떻게 만들까요?

   

UI Framework는 3개의 레이어로 나뉘어져 있습니다.

   

Possible과 Easy는 상반됩니다. Framework 레이어로 가면 쉽지만 낮은 수준의 접근이 어렵고, Graphic 레이어도 가면 어렵지만 낮은 수준의 접근이 가능합니다.

   

코드를 비교해 보면 쉽게 이해할 수 있습니다.

DirectX 코드 : 어렵지만 모든 것이 가능합니다.

   

XAML 코드 : 쉽지만 제한적인 접근이 가능합니다.

   

오늘 처음 Visual Layer 들어본 사람 손 들어보세요!

   

새로운 기능 Visual Layer는 UI Foundation에 공통으로 들어가 있습니다.

   

Visual Layer는 퍼포먼스를 위해 최적화되어 있습니다. 모든 UWP 디바이스에 최적화 되어 있습니다.

   

지난 2015년 11월에 추가된 API들

   

다음 윈도우 버전에서 추가될 API 구성 재료들

   

케이스 스터디 : Fabrikam

   

진짜가 아닙니다.

   

예제로 쓰인 Kliva 앱은 MVP 두분이 수고해주셨고, GitHub를 통해 공유되는 오픈소스 프로젝트입니다.

   

차례대로 보여드릴 데모입니다.

첫 번째 : 리스트에 아이템이 Load될 때 애니메이션 효과

   

두 번째 : 당겨서 Refresh 효과

   

세 번째 : Context가 이어지는 트랜지션 효과

   

네 번째 : 눈에 띄는 다이나믹한 모션

   

   

첫번째 : ContainerContentChanging(CCC)

ListView(ActivityList)의 ContainerContentChanging 이벤트에 이벤트 핸들러를 추가합니다.

   

ItemContainer의 ContentTempleteRoot를 UserControl로 캐스팅

   

Compositor 맴버 변수로 선언, 애니메이션 관련 수치 정수로 선언

   

VisualElement를 _compositor에 등록

   

VisualElement들의 정보 캐기 : ItemsPanel, ItemsContainer, ItemIndex 등,

ElementCompositionPreview API를 이용해 ElementVisual을 가져온다.

   

여기서 가장 중요한 점은 ContainerContentChanging 이벤트가 Visual Layer에 있다는 점이다. ItemContainer는 아주 특별한 녀석이다.

   

애니메이션의 시작점의 값들을 먼저 구한다.

   

원하는 KeyframeAnimation을 빡시게 만듭니다.

   

다 만들었으면 앞에서 준비한 itemVisual의 각 속성에 방금 만든 KeyframeAnimation을 각각 달아줍니다.

   

실행하면 짜!자!잔! Item이 Load될 때 애니메이션을 추가하였습니다.

   

두번째 : Pull to refresh(PTR)

먼저 필요한 변수들을 선언.

   

이미지 아이콘 추가.

   

ListView의 Loaded 이벤트 등록.

   

XAML에 있는 _scrollViewer를 찾아온다, OnActivityListLoaded 이벤트 핸들러 등록,

DirectManipulationStarted, DirectManipulationCompleted 이벤트 생성 및 이벤트 핸들러 등록

   

ElementCompositionPreview API를 이용해 ScrollViewerManipulationSet을 가져온다.

   

이미지 아이콘에 적용할 애니메이션을 작성.

   

XAML에 있는 이미지 아이콘을 가져온다.

   

ListView가 가지고 있는 border를 가져온다. 다 만들었으면 앞에서 준비한 _refreshIconVisual의 각 속성에 방금 만든 KeyframeAnimation을 각각 달아줍니다.

   

OnActivityListUnloaded 이벤트일 때 DirectManipulationStarted, DirectManipulationCompleted 이벤트 생성 및 이벤트 핸들러 해제

   

실행하면 짜!자!잔! Scroll과 연동되어 회전하는 Refresh 이미지 아이콘이 완성되었습니다.

   

세번째 : Connected Animation

ItemClick 이벤트가 발생할 때 AthleteProfilePicture 이름을 가진 요소를 가져온다.

   

ConnectedAnimationService API를 이용, 애니메이션 준비를 한다.

   

Detail 뷰의 Ellipse의 Fill 속성 ImageBrush에 ImageOpened 이벤트를 추가한다.

   

ImageOpened 이벤트 핸들러에 앞에서 거의 동일한 방식으로 애니메이션 준비한다. Opacity 관련 윈도우 버그가 있으니 임시로 Fix를 추가한다.

   

실행해서 아이템을 선택하면 Ellipse의 프로필 이미지가 디테일 페이지의 위치로 이동하는 Connected Animation을 볼 수 있다.

 

네번째 : 다이나믹한 모션

다음으로는 Resize되었을 때 아이템에 애니메이션을 추가해보자.

   

GridView의 ContainerContentCanging(CCC) 이벤트에 이벤트 핸들러를 등록.

   

Item Container를 가져와서 인스턴스를 준비한다. 이동하는 Offset 애니메이션을 만든다.

   

Offset 속성으로 애니메이션을 implicitMap에 등록한다. 뷰에 implicitMap을 전달.

   

실행해서 Resize를 하면 아이템의 Offset 애니메이션과 함께 재정렬됩니다.

   

이어지는 데모. 첫번째 : 헤더 패널에 효과

   

두번째 : 이전/이후 상태 변화를 알려주는 효과

   

세번째 : 이미지에 효과, 스팟라이트

   

   

   

해더 패널의 백그라운드 역할을 하고 있는 Rectangle를 미리 준비한 커스텀콘트롤로 변경. BlurAmount 속성에 값을 입력.

   

헤더 백그라운드에 Bur 효과, 패널 아래 쪽에 Drop Shaow 효과.

   

실행하면 짜잔!

   

BuildBlurBrush 함수에 몇가지 더 추가.

   

MainColor 추가, Muiltiply로 Blend 효과 추가.

   

짜잔 메인컬러가 적용되었다.

   

로그인 애니메이션으로 이거 쿨하지 않냐는 질문에 사람들이 박수로 화답.

   

자! 이제부터 마지막 데모 첫번째

Up 스크롤에 Expression(표현식?) 을 추가합니다.

   

Expression에 Clamp를 추가하여 Up 스크롤이 최댓값일 때 Tension을 추가.

   

상단 해더 패널 쪽에 있는 모든 Visual Element에 지정한 값일 때 애니메이션 추가.

   

Blur 효과도 추가.

실행하면 짜잔! 스크롤 동작에 따라 여러 효과 추가.

   

자! 진짜 마지막 데모 두번째

사진 갤러리에 아이템 선택시 이미지 소스를 활용한 효과

 

ListView의 ContainerContentChangeing이벤트에 이벤트 핸들러 등록. 이전 데모에서 한번 다뤘다. CCC라고 줄여서 부른다.

 

ItemTemplate 정의 확인.

   

ListView_ContainerContentChanging 이벤트 핸들러 : 자식을 찾아서 Composition Image에 담아 Lighting 효과를 준다.

   

Lighting 브러쉬를 만들어서 효과를 주고 다시 브러쉬를 업데이트.

   

효과가 잘 나오는지 확인.

   

지금부터는 요약 정리. Visiual layer는 XAML layer에 접근해서 많은 것들을 할 수 있다.

   

Visual layer : ScrollvViewer manipulation properties, implicit animation, effects

  • 스크롤뷰어 조작 속성, 암시적인(은연중에) 애니메이션, 효과에 쓰인다. 스크롤뷰어는 하나의 예일뿐.

       

XAML layer : Visual exposure, connected animation, implicit animation drivers

  • 실제 뷰에 노출, 문맥이 이어지는 애니메이션, 암시적인 애니메이션을 운영하는 역할을 한다.

   

코드 패턴. XAML에 있는 요소를 Visual 레이어로 가져와서 Animation 또는 Effect를 준다.

   

사견으로 코드에서만 왕창 접근을 해서 데모를 했는데 난이도가 높다. 시간이 흘러 Behavior 처럼 XAML에서 접근 가능한 형태로도 발전해준다면 좋을 것 같습니다.

   

샘플코드는 여기서 다운받으세요. https://github.com/AppCreativity/Kliva

   

궁금한게 있으면 연락만해~ ㅋㅋㅋ 끝.