Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
이종인 
*바람 인터렉티브 Founder 
*Windows Platform Development MVP 
* Windows Phone 앱 개발 
- 
- 
lunelake@outlook.com 
http://www.fa...
나를 디자인 하는 서비스 
삶의 목표에 다가가기 쉽게 
만들어주기 위한 서비스
나를 디자인 하는 서비스 
삶을 쉽게 계획하고 
순간을 기록하기 쉽게
2013년 10월 출시 15개의 언어 지원
중국, 미국 스토어 유료앱 전체 순위 40위권 기록(2014.3) 
20% 
20% 
9% 
5% 
4% 
42% 
국가별 다운로드 비율 
중국 미국 인도 영국 베트남 기타
다양한 디바이스와 환경 속에서 
유연하게 이어지는 서비스를 만드는 것
Cross platform – 코드 공유 
추가/수정 사항 
발생시
멀티 디바이스 환경에서 유연한 데이터 처리
디바이스의 크기와 환경에 따라 달라지는 유저들의 요구와 
그로 인해 파편화된 경험들 합치기
데스크탑, 태블릿, 폰을 아우르는 서비스를 한 프로젝트에서 
(Shared project, PCL)
Shared Project
통합이 안된 API들 
Windows 
Runtime API 
Bing Map 
일정 데이터 
연락처 데이터 
… 
90% 10% 
조건부 컴파일 + 별도 처리 시나리오 
public void ClearMap() 
{ ...
화면 크기에 대응하는 UI 
4.5” 
6” 
7” 
5” 
x 
Infinite virtual canvas 
y 
Landscape Portrait
윈도우 사이즈가 변했을 때 x 
protected override void OnNavigatedTo(NavigationEventArgs e) 
{ 
this.navigationHelper.OnNavigatedTo(e);...
Viewbox x 
Viewbox 
Control
Viewbox x 
Element 비율 따라 크기 조정 Element 크기 조정 
<Grid Background="Black"> 
<GridView Margin="100,100,0,0"> 
<Rectangle Fill=...
스케일 이슈 
Windows Phone Windows 
DPI > 
Font 글씨 글씨 
<Style x:Key="TextblockStyle" TargetType="TextBlock"> 
<Setter Property=...
Binding 
ValueConverter 
<TextBlock Margin="-1,0,0,0" FontSize="40" 
Foreground="{Binding TitleForegroundColor}" 
Text="{B...
복잡한 뷰 로직의 간결한 처리 
Home 
Textblock1 
Textblock2 
Textblock3 
Textblock4 
Home 
Textblock1 
Textblock2 
Textblock3 
Textbloc...
굴비 엮듯이 엮어지는 데이터 바인딩 
Monthly 
Calendar Viewer 
MonthlyCalendar 
DailyViewer 
Calendar 
SelectedDate 
Calendar 
SelectedDat...
MVVM 
View 
Model 
View 
View Model
INotifyPropertyChanged 
public class ViewModel : INotifyPropertyChanged 
{ 
private string _ID; 
public string ID 
{ 
get{...
Control에 DependencyProperty 추가하기 
public static readonly DependencyProperty CalendarSelectedDateProperty = 
DependencyProp...
데이터 바인딩 이럴때 쓰세요!
멀티디바이스에서의 데이터 동기화 시나리오 
비용 지출X 비용 지출O 
즉결성 보장X)
Local 
Storage 
Local 
Storage 
디자인 미의 유저 데이터 처리
OnlineIdAuthenticator를 통한 Onedrive 동기화 
public class WindowsAccountAuthenticator 
{ 
OnlineIdAuthenticator authenticator; ...
OnlineIdAuthenticator를 통한 Onedrive 동기화
Credential Locker 
MSA 
void SaveCredential(string username, string password) 
{ 
PasswordVault vault = new PasswordVault(...
tech days 2014 Universal Windows App - Jongin Lee
tech days 2014 Universal Windows App - Jongin Lee
tech days 2014 Universal Windows App - Jongin Lee
tech days 2014 Universal Windows App - Jongin Lee
tech days 2014 Universal Windows App - Jongin Lee
tech days 2014 Universal Windows App - Jongin Lee
tech days 2014 Universal Windows App - Jongin Lee
tech days 2014 Universal Windows App - Jongin Lee
tech days 2014 Universal Windows App - Jongin Lee
tech days 2014 Universal Windows App - Jongin Lee
tech days 2014 Universal Windows App - Jongin Lee
tech days 2014 Universal Windows App - Jongin Lee
Upcoming SlideShare
Loading in …5
×

of

tech days 2014 Universal Windows App - Jongin Lee Slide 1 tech days 2014 Universal Windows App - Jongin Lee Slide 2 tech days 2014 Universal Windows App - Jongin Lee Slide 3 tech days 2014 Universal Windows App - Jongin Lee Slide 4 tech days 2014 Universal Windows App - Jongin Lee Slide 5 tech days 2014 Universal Windows App - Jongin Lee Slide 6 tech days 2014 Universal Windows App - Jongin Lee Slide 7 tech days 2014 Universal Windows App - Jongin Lee Slide 8 tech days 2014 Universal Windows App - Jongin Lee Slide 9 tech days 2014 Universal Windows App - Jongin Lee Slide 10 tech days 2014 Universal Windows App - Jongin Lee Slide 11 tech days 2014 Universal Windows App - Jongin Lee Slide 12 tech days 2014 Universal Windows App - Jongin Lee Slide 13 tech days 2014 Universal Windows App - Jongin Lee Slide 14 tech days 2014 Universal Windows App - Jongin Lee Slide 15 tech days 2014 Universal Windows App - Jongin Lee Slide 16 tech days 2014 Universal Windows App - Jongin Lee Slide 17 tech days 2014 Universal Windows App - Jongin Lee Slide 18 tech days 2014 Universal Windows App - Jongin Lee Slide 19 tech days 2014 Universal Windows App - Jongin Lee Slide 20 tech days 2014 Universal Windows App - Jongin Lee Slide 21 tech days 2014 Universal Windows App - Jongin Lee Slide 22 tech days 2014 Universal Windows App - Jongin Lee Slide 23 tech days 2014 Universal Windows App - Jongin Lee Slide 24 tech days 2014 Universal Windows App - Jongin Lee Slide 25 tech days 2014 Universal Windows App - Jongin Lee Slide 26 tech days 2014 Universal Windows App - Jongin Lee Slide 27 tech days 2014 Universal Windows App - Jongin Lee Slide 28 tech days 2014 Universal Windows App - Jongin Lee Slide 29 tech days 2014 Universal Windows App - Jongin Lee Slide 30 tech days 2014 Universal Windows App - Jongin Lee Slide 31 tech days 2014 Universal Windows App - Jongin Lee Slide 32 tech days 2014 Universal Windows App - Jongin Lee Slide 33 tech days 2014 Universal Windows App - Jongin Lee Slide 34 tech days 2014 Universal Windows App - Jongin Lee Slide 35 tech days 2014 Universal Windows App - Jongin Lee Slide 36 tech days 2014 Universal Windows App - Jongin Lee Slide 37 tech days 2014 Universal Windows App - Jongin Lee Slide 38 tech days 2014 Universal Windows App - Jongin Lee Slide 39 tech days 2014 Universal Windows App - Jongin Lee Slide 40 tech days 2014 Universal Windows App - Jongin Lee Slide 41
Upcoming SlideShare
MVP Showcase 2015 - What's new in Windows 10
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

tech days 2014 Universal Windows App - Jongin Lee

Download to read offline

현재 개발하고 있는 유니버셜 앱인 Design Me와 함께 유니버셜 앱을 개발할 때의 팁이나 주의해야할 점 등은 어떤 것이 있는지 알아봄

Related Books

Free with a 30 day trial from Scribd

See all

tech days 2014 Universal Windows App - Jongin Lee

  1. 1. 이종인 *바람 인터렉티브 Founder *Windows Platform Development MVP * Windows Phone 앱 개발 - - lunelake@outlook.com http://www.facebook.com/BaramInteractive design me
  2. 2. 나를 디자인 하는 서비스 삶의 목표에 다가가기 쉽게 만들어주기 위한 서비스
  3. 3. 나를 디자인 하는 서비스 삶을 쉽게 계획하고 순간을 기록하기 쉽게
  4. 4. 2013년 10월 출시 15개의 언어 지원
  5. 5. 중국, 미국 스토어 유료앱 전체 순위 40위권 기록(2014.3) 20% 20% 9% 5% 4% 42% 국가별 다운로드 비율 중국 미국 인도 영국 베트남 기타
  6. 6. 다양한 디바이스와 환경 속에서 유연하게 이어지는 서비스를 만드는 것
  7. 7. Cross platform – 코드 공유 추가/수정 사항 발생시
  8. 8. 멀티 디바이스 환경에서 유연한 데이터 처리
  9. 9. 디바이스의 크기와 환경에 따라 달라지는 유저들의 요구와 그로 인해 파편화된 경험들 합치기
  10. 10. 데스크탑, 태블릿, 폰을 아우르는 서비스를 한 프로젝트에서 (Shared project, PCL)
  11. 11. Shared Project
  12. 12. 통합이 안된 API들 Windows Runtime API Bing Map 일정 데이터 연락처 데이터 … 90% 10% 조건부 컴파일 + 별도 처리 시나리오 public void ClearMap() { #if WINDOWS_APP _shapeLayer.Shapes.Clear(); _pinLayer.Children.Clear(); #elif WINDOWS_PHONE_APP _map.MapElements.Clear(); _map.Children.Clear(); #endif }
  13. 13. 화면 크기에 대응하는 UI 4.5” 6” 7” 5” x Infinite virtual canvas y Landscape Portrait
  14. 14. 윈도우 사이즈가 변했을 때 x protected override void OnNavigatedTo(NavigationEventArgs e) { this.navigationHelper.OnNavigatedTo(e); Window.Current.SizeChanged += Current_SizeChanged; } protected override void OnNavigatedFrom(NavigationEventArgs e) { this.navigationHelper.OnNavigatedFrom(e); Window.Current.SizeChanged -= Current_SizeChanged; } /// <summary> /// 윈도우의 사이즈가 변했을 때 이벤트 /// </summary> public void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e) { double windowWidth = e.Size.Width; double windowHeight = e.Size.Height; //로직 }
  15. 15. Viewbox x Viewbox Control
  16. 16. Viewbox x Element 비율 따라 크기 조정 Element 크기 조정 <Grid Background="Black"> <GridView Margin="100,100,0,0"> <Rectangle Fill="Red" Height="200" Width="200" /> <Rectangle Fill="Red" Height="200" Width="200" /> <Rectangle Fill="Red" Height="200" Width="200" /> <Rectangle Fill="Red" Height="200" Width="200" /> <Rectangle Fill="Red" Height="200" Width="200" /> </GridView> </Grid> <Grid Background="Black"> <Viewbox HorizontalAlignment="Left"> <GridView Margin="100,100,0,0" Height="768" > <Rectangle Fill="Red" Height="200" Width="200" /> <Rectangle Fill="Red" Height="200" Width="200" /> <Rectangle Fill="Red" Height="200" Width="200" /> <Rectangle Fill="Red" Height="200" Width="200" /> <Rectangle Fill="Red" Height="200" Width="200" /> </GridView> </Viewbox> </Grid>
  17. 17. 스케일 이슈 Windows Phone Windows DPI > Font 글씨 글씨 <Style x:Key="TextblockStyle" TargetType="TextBlock"> <Setter Property="FontSize" Value=“17"></Setter> </Style> Viewbox의 크기를 플랫폼별로 다르게 지정
  18. 18. Binding ValueConverter <TextBlock Margin="-1,0,0,0" FontSize="40" Foreground="{Binding TitleForegroundColor}" Text="{Binding PagesTitle}" /> <TextBlock Margin="-1,0,0,0" FontSize="40" Foreground=“#FF444444” Text=“Pages” /> Data binding 결과
  19. 19. 복잡한 뷰 로직의 간결한 처리 Home Textblock1 Textblock2 Textblock3 Textblock4 Home Textblock1 Textblock2 Textblock3 Textblock4 기본 방식 TitleTextblock.Foreground = new SolidColorBrush(Colors.White); Textblock1.Foreground = new SolidColorBrush(Colors.White); Textblock2.Foreground = new SolidColorBrush(Colors.White); Textblock3.Foreground = new SolidColorBrush(Colors.White); Textblock4.Foreground = new SolidColorBrush(Colors.White); public bool WhiteMode { get{return _WhiteMode;} set { _WhiteMode = value; OnPropertyChanged(); if (value == true) TitleForegroundColor = "#FFFFFFFF"; else TitleForegroundColor = "#FF444444"; } } Data binding
  20. 20. 굴비 엮듯이 엮어지는 데이터 바인딩 Monthly Calendar Viewer MonthlyCalendar DailyViewer Calendar SelectedDate Calendar SelectedDate Calendar SelectedDate 일간 일정 업데이트 월간뷰어 업데이트 MonthSelect Picker DailyCalendar Viewer AgendaCalendar Viewer MainViewModel Appointment Dictionary Calendar SelectedDate Appointment Dictionary 달력 업데이트 Monthly Calendar Viewer MonthlyCalendar DailyViewer
  21. 21. MVVM View Model View View Model
  22. 22. INotifyPropertyChanged public class ViewModel : INotifyPropertyChanged { private string _ID; public string ID { get{return _ID;} set{_ID = value; OnPropertyChanged();} } public event PropertyChangedEventHandler PropertyChanged; protected bool SetProperty<T>(ref T storage, T value, [System.Runtime.CompilerServices.CallerMemberName] String propertyName = null) { if (object.Equals(storage, value)) return false; storage = value; this.OnPropertyChanged(propertyName); return true; } protected void OnPropertyChanged([System.Runtime.CompilerServices.CallerMemberName] string propertyName = null) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } }
  23. 23. Control에 DependencyProperty 추가하기 public static readonly DependencyProperty CalendarSelectedDateProperty = DependencyProperty.Register("CalendarSelectedDate", typeof(DateTime), typeof(MonthlyCalendarViewer), new PropertyMetadata(null, new PropertyChangedCallback(OnCalendarSelectedDateChanged))); public DateTime CalendarSelectedDate { get { return (DateTime)GetValue(CalendarSelectedDateProperty); } set { base.SetValue(CalendarSelectedDateProperty, value); } } private static void OnCalendarSelectedDateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { ((MonthlyCalendarViewer)d).OnCalendarSelectedDateChanged(e); } void OnCalendarSelectedDateChanged(DependencyPropertyChangedEventArgs e) { if (e.OldValue != null) { DateTime oldValue = (DateTime)e.OldValue; DateTime newValue = (DateTime)e.NewValue; if (oldValue.Month != newValue.Month || oldValue.Year != newValue.Year) DrawCalendarBase(); } else { DrawCalendarBase(); DrawCalendarContent(); loaded = true; } }
  24. 24. 데이터 바인딩 이럴때 쓰세요!
  25. 25. 멀티디바이스에서의 데이터 동기화 시나리오 비용 지출X 비용 지출O 즉결성 보장X)
  26. 26. Local Storage Local Storage 디자인 미의 유저 데이터 처리
  27. 27. OnlineIdAuthenticator를 통한 Onedrive 동기화 public class WindowsAccountAuthenticator { OnlineIdAuthenticator authenticator; public WindowsAccountAuthenticator() { authenticator = new OnlineIdAuthenticator(); } /// <summary> /// 마이크로소프트 계정 로그인 및 인증 /// </summary> public async Task SignIn() { var targetArray = new List<OnlineIdServiceTicketRequest>(); targetArray.Add(new OnlineIdServiceTicketRequest("wl.signin", "DELEGATION")); var result = await authenticator.AuthenticateUserAsync(targetArray, CredentialPromptType.PromptIfNeeded); string AccessToken = result.Tickets[0].Value; } }
  28. 28. OnlineIdAuthenticator를 통한 Onedrive 동기화
  29. 29. Credential Locker MSA void SaveCredential(string username, string password) { PasswordVault vault = new PasswordVault(); PasswordCredential cred = new PasswordCredential("MyAppResource", username, password); vault.Add(cred); } IReadOnlyList<PasswordCredential> RetrieveCredential(string resource) { PasswordVault vault = new PasswordVault(); return vault.FindAllByResource(resource); }
  • dizy64

    Dec. 13, 2014

현재 개발하고 있는 유니버셜 앱인 Design Me와 함께 유니버셜 앱을 개발할 때의 팁이나 주의해야할 점 등은 어떤 것이 있는지 알아봄

Views

Total views

2,002

On Slideshare

0

From embeds

0

Number of embeds

1,437

Actions

Downloads

8

Shares

0

Comments

0

Likes

1

×