|
오랜만에 MS 세미나 다녀왔음.
Windows 10 iot core 최소 메모리 요구: 256MB
라즈베리파이 2는 메모리 1기가.
라즈베리파이 2에 설치 가능함.
[ 첫 째 시간 ]
Hello Windows 10 앱 개발
김영욱, Evangelist
하나의 앱으로 모든 디바이스를 커버한다.
일차적으로 UX를 어떻게 해결할 것인가?
라즈베리파이의 가격은 5만원 정도밖에 안한다.
컴퓨팅 시장의 변화 : 기존에는 사람이 컴퓨터에 가서 컴퓨터를 사용했으나, 현재는 가지고 다니면서 잠깐씩 소비하는 형태로 변화
MS 홀로렌즈와 구글글래스 비교 : 구글글래스는 사용자 인터페이스이고, 홀로렌즈는 그 자체가 하나의 컴퓨터임.
Windows 10 단일 버전을 모든 디바이스에 설치할 수 있는 것은 아님.
각각의 디바이스 군에 따라 별도 버전이 존재함.
하지만 컴퓨팅 플랫폼이 하나로 통일된 것임.
하나의 앱을 UWP(Universal Windows Platform) 에 맞도록 개발하면 모든 디바이스에서 사용할 수 있음.
호환성은 소스 차원이 아니고 바이너리 차원에서 지원됨.
컴퓨터 및 기기의 구분은
Devices + IoT
Mobile
PC
XBox
Surface Hub
HoloLens
특징:
Adaptive User Interface
Natural User Inputs
One SDK...
이러한 요소들이 UWP를 특징함.
어댑티브 코드란.
각 디바이스에 맞는 코드를 조건별로 구분해서 코딩하는 것을 말함.
테스트/실행환경이 동일함.
WMA는 자바스크립트 개발환경
DirectX는 C++에서만 가능함.
.NET, C++, WMA
XAML, DirectX, HTML 등등... 개발가능한 제품군이 존재함.
브리지 테크놀러지 :
WMA : 자바스크립트
iOS로 만들어진 프로젝트를 Visual Studio에서 불러들여 컴파일하면 Windows 10에서 돌아가도록 컴파일된다.
Object C 프로젝트를 컴파일 할 수 있다. 목적파일은 윈도우용 파일임. 아일렌드 우드
안드로이드용 프로젝트를 컴파일하면 APK를 윈도우즈에서 돌릴 수 있다 : 아스트리아
웹 페이지를 가지고 윈도우용 앱으로 만들 수 있다. (자바스크립트로 네이티브 코드를 호출할 수 있도록 한다)
Multi-language
C# and XAML
Javascript and HTML
C++ and XAML
One Operating System
One App Platform
One Dev Center
One Store
하나의 OS로 모든 기기에 다 깔아쓰는 것 아님. 오해 마시길..
dev.windows.com/en-us --> ko-kr 로 바꿔주면 한글로 볼 수 있다.
사이즈에 맞도록 UI 디자인 가능
비주얼스튜디오 2015
커뮤니티, 엔터프라이즈, 코드 버전
커뮤니티 : 5개까지 라이선스 사용 가능 (기존 프로페셔널 버전과 유사)
코드 버전 : 리눅스, 웹 사용 가능 (노드, 웹 쪽 주로 사용)
우분투에서 비주얼스튜디오 코드를 깔아서 ASP.NET 개발할 수 있다.
아무튼 커뮤니티 버전을 깔면 된다.
개인이나 회사 계정 둘 중 하나로 선택할 수 있다.
회사는 인증 시 검토의 단계를 거친다. 조금 더 오래 걸린다.
최초에 개발자 등록을 해야 한다.
설정의 개발자용 옵션을 켜줘야 앱 개발을 할 수 있다.
Microsoft Virtual Academy 에 보면 22개의 동영상 강좌가 있다. (윈도우즈 10)
A Developer's Guide to Windows 10
어댑티브 코드
폰 용으로 따로 되어 있는 코드
플랫폼 익스텐션
핵심 ---> core 로 번역됨.
참조추가에서 extension 쪽에 보면 IoT, Mobile 등을 추가할 수 있다.
이런 것들을 확인하는 프로그래밍 인터페이스를 보면
ifWindows.Foundation.ApiInformation.IsTypePresent(api))
{
Windows.Phone.UI.Input.HardwareButtons.CameraPressed += CameraButtonPresed;
}
해당 디바이스 인터페이스를 문의하고 가용할 때에만 이벤트를 연결한 예.
Windows 10 앱 개발 100분 완성 --> 동영상 (김영욱) 웹페이지 링크가 있음.
안드로이드의 apk를 윈도우폰으로 가져오는 것을 지원한다.
앱 등록
개발자 센서
대시 보드 메뉴
새 앱 만들기
빨리 이름을 등록한다. 이름을 미리 등록하면 유니크하기 때문이다.
---------------------------------------------------------------------------------------------
Windows 10 앱 개발
Tips & Tricks
오픈에스지
기술이다 송기수
엔에스에서도 닷넷을 벗어나서 자바를 포함해서 전체적인 기술 집합으로 나아가고 있는 트렌드이다.
XAML (젬블?)
WPF, 실버라이트???
앞으로는 젬블이라는 말을 더 많이 들을 것이다.
WPF와는 약간 다르다.
데이터 바인딩이 가장 핵심적인 기술요소라 할 수 있다.
윈폼, 웹폼에서도 유용하다.
WPF의 데이터바인딩 --> EWP 플랫폼에 녹아 있다.
데이터 바인딩 (Data Binding)
XAML
새로운 컨트롤
Relative Panel
SplitView
Adaptive UI
XAML 성능
phase rendering
deferred loading
WPF에서 구현하기 힘들었던 많은 부분이 젬블에 포함됨.
중요 : 레이아웃 패널 (8가지가 있다.)
레러티브 패널
Element는 다른 Element의 상대적 위치를 가짐.
<RelativePanel>
<Rectangle x:Name="BlueRect" Fill="Blue" />
<Rectangle x:Name="RedRect" Fill="Red" />
</RelativePanel>
Visual State와 동시 사용됨.
반응형 앱을 손쉽게 만들수 있도록 해준다.
상대적인 위치 설정, 정렬 설정 --> 두 가지 중요한 설정 (젬블에서)
상태로 저장되어 있고,
블랜드 툴을 사용하여 상태에 따라 디자인을 할 수 있다.
아무튼 반응형 앱을 위한 UI 개발에 대한 내용들이다.
이러한 레이아웃을 예전 같으면 그리드나 캔버스를 사용하여 약간의 코딩을 했어야 했으나,
이제는 그냥 선언적으로 사용할 수 있다.
스플릿 뷰
왼쪽에 햄버거 아이콘 나오고, 메뉴 목록 나오는.
네 가지 모드가 있다.
Inline, Overlay, CompactInline, CompactOverlay
메뉴 부분, 컨텐츠 부분
IsPaneOpen = True | False
기존에 다른 분야의 웹 프레임으로도 구현되어 있던 기술인데, 젬블에서는 이것을 아주 손쉽게 구현할 수 있게 한 것임.
예를 들어, 윈도우 폰과 데스크탑의 윈도우즈 10 시스템설정 창의 젬블 코드는 동일하다.
비주얼 스테이트와 스플릿으로 구현한 것임.
비주얼 스테이트
젬블에서 정의됨.
복잡하게 정의된 효과를 단순하게 선언하여 사용하는 것이 가능함.
블랜드를 통해서 정의 (잼블을 통해 직접 타이핑 할 수도 있음)
상태 전환 방법
비주얼스테이트매니저 사용
VisualStateManager.Goto(element, state, transition)
VisualStateManager.GoToState(this, state, true);
if(e.NewSize.Width > 500) {...
선언적으로 처리할 수 없다는 단점이 있다.
그래서 추가된 것이
Adaptive Triggers
코드없이 잼블에서 설정만으로 상태전환 가능
기본 트리거 (너비, 높이)
MinWindowHeight(Taller than this) MinWindowWidth(Wider than this)
<VisualStte x:Name="...">
</VisualState>
조건문을 젬블에서 선언적으로 기술한다...
뭐 별로 쉬워진 것은 없네...
확장하는 방법도 있어요~
phase rendering
deferred loading
phase rendering
데이터 템플릿 안에 두 개 텟스트박스가 있다 . 예를 들어
페이즈 0다음에 페이즈 1 뒤에.. 렌더링 되는 순서를 지정함.
기본값 0
가능한 적은 단계로 관리...
렌더링 되는 순서를 지정한다. (많으면 세 개 이하로 관리하시오)
연속적일 필요는 없음.
스크롤 계속 할 때, 데이터 바인딩을 계속 시도할 것이다. 예를 들어서 큰 목록에서
페이즈를 걸어놓으면, 이름이 먼저 렌더링이 되도록 보장하는 등의 경우에 사용된다.
deferred loading
Lazy loading이라고 해서 로딩이 안되는 것이라 할 수 있다.
특정 시점(조건) 까지는 로딩을 하지 않으므로 해서 성능향상을 기대하는 것.
젬블 오버헤드가 줄어듬..
시점은 명시하지 못한다. 요소가 요구되는 상황
FindName()
GetTemplatedChild()
Storyboard & VisualStates (내부적으로 FindName 호출함)
주의점 : 경량의 프록시 엘리먼트가 대신 생성되는 것임.
프록시 객체 만으로는 이벤트 훅업되지 않는다.
바인딩 동작도 되지 않음. {x:Bind} 도 동일함.
Tool
VS2015의 새로운 기능임.
진단도구
디버그 브레이크에서 F10으로 진행할 때,
코드 진행 경과시간이 표시되며, 그것을 클릭하면 "진단 도구" 창으로 이동한다.
코드에 보면 await 키워드가 보임. 이것은 동기 호출로 보여짐. 즉 함수가 반환하지 않으면 다음으로 진행하지 않을 것임.
var downloadTasks = new List<Task>();
..
downloadTasks.Add(DownloadImageAsync(new ...);
...
await Task.WhenAll(downloadTaaks);
이러한 비동기 태스크 호출이 예전에 비해서 매우 쉬워졌다...
병렬적으로 세 개의 태스크가 동시에 다운로드를 진행하게 된다.
하지만, 프로세서 갯수 등에 따라서 악영향을 미칠 수도 있다.
이러한 식으로 사용하는 것이 "진단도구" 이다.
두 번째 예: 메모리 누수를 잡는다.
메인창에서 팝업창을 호출하고 있는데, 창의 생성자에 보면, 호출한 객체의 어떤 객체를 참조시키고자 할 때,
생성자에 파라미터로 전달하는데.. 그리고 이벤트 등록 등을 하는데... 팝업에서도 알 수 있도록 등등..
_parentList.SelectixxonChanged += _parentList_Selection... ..;
이것들 (이벤트 핸들러 연결) 등은 자동으로 삭제되지 않음.
진단도구 > 스냅숏 만들기 -> 현재 상태가 찍힘. 개체, 힙 크기 등의 정보가 찍힘.
좀 더 진행하다가, 다시 스냅숏 만들기 하면 개체수와 힙 크기의 차이가 보임.
힙 크기를 클릭하면 힙 상태를 보여줌 (매니지드 힙임)
사용하고 있는 개체들의 상황이 나온다....
아무튼 가비지 컬렉션이 잘 안되고 있음을 알 수 있다.
인스턴스의 각 객체를 찍어보면, 참조된 객체에 대한 정보가 나온다.
메인 윈도우에 이벤트 핸들러가 연결되어 있기 때문에 살제하지 못했다... 는 정보를 알 수 있다.
이러한 식으로 진단창을 활용할 수 있다.
중단점
조건 중단점을 걸 수 있다. 에디터 안에서 설정할 수 있다는 것이 새로운 기능임.
직접실행창 : LINQ
예를 들어서 배열이 있고, 그 변수를 조사식에 넣었다고 하면,
람다식을 조사식에 쓸 수 있는 기능이다. 이전 버전의 Visual Studio 에는 없던 기능이다.
직접 실행창에
var list = from onePicture in Picturelist selet onePicture;
이런 식으로 쓰면.. 지역창에 list 라는 놈의 결과 창이 나온다.
LINQ 나 람다식을 쓸 수 있다.
라이브 시각적 트리
비주얼 트리를 직저 조작할 수 있다는 것...
라이브 속성 탐색기
기존의 속성창이 아님... 새롭게 추가된 기능임.
****************************************************************************
데이버 바인딩
기존 데이터 바인딩 :
{binding}
정적, 동적 바인딩
Converter
INPC/INCC
컴파일된 바인딩
Compiled Binding, {x:bind}
이벤트도 바인딩 가능
동적 데이터 바인딩
DataContext 필요
내부적으로 리플렉션을 사용한 것임.
<TextBox Text="{Binding PersonInfo.Age")/> 이런 식으로
INPC (INotifyPropertyChanged) - 데이터 바인딩에서 중요한 개념
UI 업데이트
소스 상태가 바뀌었을 때, 유아이가 리스닝할 수 있는 인터페이스이다.
public interfae INotifyPropertyChanged
{
...
}
INCC INotifyCollectixxonChanged
여러 콜렉션에 연결된 것의 변경 통지 이벤트를 발생함.
Converter: 컨버터
ElementName : 요소 바인딩
FallbackValue (바인딩 유효하지 안흘 때 나올 갓ㅄ
TargetNullValue
UpdateSourceTrigger : 소스 반영 시점
이런 것들을 선언적으로 사용할 수 있다.
데모...
데이터 컨텍스트 안에 있어야 한다.
바인딩
컨트롤
데이터
어느쪽으로의 이벤트 통지.
~~~~~~~~~~ 새로나온
컴파일드 바인딩
바인딩 성능 향상, 기존 편리함 유지
새로운 바인딩 메커니즘임.
컴파이라임에 바인딩 일정작업이 진행됨. (기존에는 런타임에서만 진행되었음>
란타임 부하가 줄어듬. 런타임 리플렉션 코드 최소화
변환된 코드는 디버깅 가능
컴파일 시 생성되는 코드는 리플렉션 관련이다.
타입의 명시적 선언이 필요하다.
자기 자신의 멤버만 바인딩 할 수 있음.
Resource Dictionary 경우도 x:DataType 필요함.
이벤트 바인딩도 가능함.
컴파일 시 검증
리플렉션 사용되지 않음.
기본 모드는 OneTime
기타 바인딩 메커니즘은 동일함.
MVVM에서 적용??
View와 ViewModel의 컴파일링 문제
JSON에서 사용 시 주의 필요함.
.i.cs : 인텔리센스를 위해서 생성한 코드
g.cs : 자동생성된 코드임.
컴파일된 내용을 보면 (VS가 생성한 코드를 보자..)
update_ (...) 류의 코드가 생성되어 있음을 알 수 있다.
런타임에서는 시간이 소요되지 않는다.
기존 바인딩 보다 컴파일된 바인딩이 더 빠르다.
원칙적으로는 MVVC 모델 원칙에 맞지는 않는다. 왜냐하면 View에서는 데이터에 대해 관여하지 않아야 하기 때문이다.
INPC, INCC, x:Bind
이 개념은 잘 알아두어야 할 필요가 있다.
MVA 사이트에 동영상, 발표자료 다 올려놓을 것임.
------------------------------------------
Adaptive UI
권영철 , 바이널아이
Developer's guide to Windows 10
반응형 UI
어댑티브가 무엇이며, 어떠한 도구들이 있는가?
XAML 제믈?? 만으로
사람마다 부르는 말이 다 다르네 ㅎㅎㅎ
기본적인 반응형 레이아웃은 그리드 뷰 등을 사용하면 코딩이 거의 필요 없다.
각 요소의 형태나 양태가 변경되는 등의 기능 --> 어댑티브 (적응형)
스케일링 (비례 확대/축소)
크기가 점점 줄어들었을 때는 않좋다. 너무 작아졌기 때문에...
불편한 UX이다.
하지만, 앱의 성격에 따라서는 이러한 스케일링이 유용할 경우도 있다. 예: 아날로그 시계.
풀스크린 모드, 스냅 모드 (윈도우 8에) 있었음.
위노우 10에서는 창으로 뜨기 때문에 리사이징이 가능해졌음.
Tailored design (맞춤형 디자인)
디바이스의 크기에 가장 알맞은 UI 디자인을 한다.
재블로 미리 두 사이즈의 뷰를 만들어 놓고,
디바이스 조건에 맞게 호출하는 방식.
하지만, 윈도우 10의 지향하는 바와는 좀 다르다.
적응형 UI의 하나의 방식이기는 하지만...
윈도우 8에서의 Multi-headed solution???
윈도우 10에서도 살아남았다.
각 장치마다 디자인 요구를 충족시킬 수 있다.
공유하는 코드 부분도 있다.
라이브러리를 공유할 수도 있다.
각 패키지 방식, 스토어에 제출하는 형식에 대해서만 신경써주면 된다.
XAML 안에서 적응형 UI 도구에는 어떠한 것들이 있는지.
Visual States 를 XAML 안에서 정의한다.
애니메이션을 정의한다.
블랜드 라는 도구로 사용할 수 있다.
Blend...
Vsiual States의 장점? 쓸 만 한가???
그렇다는 이야기를 하려고 하는가본데...
스토리 보드를 많이 사용하는데, 비주얼 스테이트가 좋다.
XAML 안에서 앱의 상태를 정의한다.
비주얼 스테이트는
예를 들어, 와이드 상태
네로우 상태를 가정하면, 시야가 좁아졌다.
달리는 사람 하나 남았다.
뷰가 현재 어떠한 상태에 처해졌는지 제믈안에 정의하는 것을 비주얼 스테이ㄴ트라고 한다.
"모바일 퍼스트" 작은 것을 먼저. --> 웹 분야에 있는 말이다.
윈도우 10에서도 동일하다.
작은 것으로 시작해서 넓혀가는 방식...
Blend for Visual Studio
예전에는 블랜드가 따로 있었다.
이제는 Visual Studio에 통합되었다.
Stats 탭이 있다.
Visual State를 정의하고 관리하는 곳.
NarrowState
WidState
예를 들었을 때,,,