본문 바로가기

번역

[번역] 아름다운 UWP 앱을 디자인하기 위한 5가지 팁


원문 : 5 Tips for Designing Beautiful UWP Apps

 

블로그 포스트는 Property Manager 코드 예제 UWP 버전의 디자인 아이디어와 해법들을 다루고 있습니다 (최근 포스트 : https://github.com/microsoftgraph/xamarin-csharp-propertymanager-sample). 코드 예제는 Microsoft Graph 활용한 크로스 플랫폼 솔루션이며, 기본 사용자 경험에 촛점을 맞추고 있습니다. 코드 예제에 대해 알아보길 원한다면, 다음 블로그 포스트를 방문해보세요 : http://simonjaeger.com/a-xamarin-native-sample-for-the-microsoft-graph/

 

코드 예제에 사용된 윈도우 10 어플리케이션(설정, 메시지)들에서는 많은 유사점을 발견할 있습니다 - 바로 그런 점들을 정리하려고 했습니다. 블로그 포스트는 크게 5가지의 토픽으로 나누어져 있습니다. 그것들은 윈도우 10 한몸인 것처럼 느껴지는 사용자 경험을 만드는데 도움이 됩니다.

 

    1. 누구나 애니메이션을 좋아합니다.

       

      플랫폼의 상징적인 기능중 몇가지는 바로 애니메이션과 트랜지션입니다. 기능들은 좋게도 거의 모든 운영체제에서 동작합니다 - UWP 앱에서 기능들을 사용하는 방법 매우 간단합니다. 코드 구현은 간단한 일일 있습니다. 그에 반해 사용자 경험에 끼치는 영향력은 대단합니다. 기능들을 추가하면 사용자 경험은 더욱 세련되어지고 상호작용은 즐겁게 됩니다.

       

      매우 간단한 형태의 NavigationThemeTransition XAML 페이지에 추가합니다. NavigationThemeTransition 구성하면, 시스템이 페이지 간의 콘텐츠 애니메이션을 처리합니다. 방법은 기존 마크업에 다른 속성을 추가하거나 수정할 필요가 없습니다.


      1
      2
      3
      4
      5
      6
      7
      8
      9
      <views:MvxWindowsPage.Transitions>
          <TransitionCollection>
              <NavigationThemeTransition>
                  <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                      <ContinuumNavigationTransitionInfo/>
                  </NavigationThemeTransition.DefaultNavigationTransitionInfo>
              </NavigationThemeTransition>
          </TransitionCollection>
      </views:MvxWindowsPage.Transitions>


      시스템이 어떻게 애니메이션을 동작해야 하는지 알기 위해서는 몇 가지 트랜지션 정보를 제공해야 합니다. 아래 코드 예제는 빌트인 ContinuumNavigationTransitionInfo 개체를 사용합니다. 이 개체는 Windows 10에 대부분 사용되는 네비게이션 애니메이션의 트랜지션 정보를 포함하고 있습니다.

       

      ­


        2. 일관된 타이포그래피를 활용하세요.

           

          정교하게 사용된 타이포그래피는 원하는 곳에 주목하게 만드는 가장 좋은 방법입니다. Windows 10 앱은 Segoe 글꼴 모음을 주로 사용합니다 (영문 OS). 여러분은 아마도 그냥 글꼴 모음을 계속 사용하려고 것입니다. 하지만 주의를 환기시키고 적절한 곳으로 유도할 있는 몇 가지 해법들이 있습니다.

           

          • Font weights: 가늘거나 굵게 표현합니다.

           

          • Font sizes: 머릿말과 제목은 주로 크기로 강조합니다. 본문과 단락은 작게 표현합니다.

           

          • Colors (RGB and A): 특이하고 강조가 필요한 곳에는 강조 색을 이용합니다. 또한 일부 특정 콘텐츠는 중요도를 낮추기 위해 투명도를 이용합니다.

           

          여기서 핵심은 다른 영역에 비해 중요도가 높은 영역이 주목을 끌어야 한다는 점입니다. 일부 콘텐츠는 사용자에게 흥미로울 있지만, 이와 동시에 일부 콘텐츠는 네비게이션 및 동작에 절대적으로 중요할 수 있습니다. 예를 들어, 중요도가 떨어지는 콘텐츠는 위의 방법 중 하나를 이용해 톤 감소될 수 있습니다.

          일관성을 유지하세요. 글꼴 스타일을 설정할 패턴을 지정하세요. 스타일을 정적으로 구성하고 XAML 페이지 전반에 걸쳐 재사용 할 있는 좋은 방법입니다. 코드 예제에서는 Styles.xaml 같은 리소스 딕셔너리에 재사용 가능한 모든 스타일을 포함시킵니다.


          1
          2
          3
          4
          5
          6
          7
          8
          9
          <Style x:Key="FadedBodyTextBlock" TargetType="TextBlock">
              <Setter Property="Opacity" Value="0.6"/>
              <Setter Property="FontSize" Value="14"/>
          </Style>
           
          <Style x:Key="HeaderTextBlock" TargetType="TextBlock">
              <Setter Property="FontSize" Value="24"/>
              <Setter Property="FontWeight" Value="SemiLight"/>
          </Style>


            3. 반응형으로 만들어야 합니다.
            4. 반복적인 구성 요소는 Custom UserControl 만듭니다.

               

              여러 XAML 페이지에서 반복해서 사용되고 있는 부분들을 발견했다면 Custom

              ­UserControl 만들어  부분에 사용하는 것이 좋을 있습니다. 장기적으로 시간을 절약할 있을 뿐만 아니라, 솔루션 전반에 일관된 경험 또한 확립할 있습니다.

               

              아래 코드 예제에서는 PointerTextBlock이라고 이름 붙여진 Custom TextBlock 사용되었습니다. 커서가 레이블을 가리킬 레이블을 강조하고 커서는 핸드 포인터로 변경합니다. 이렇게 하려면 일부 코드를 연결해야 합니다. UserControl의 XAML과 코드-비하인드, 둘의 재사용은 건전한 접근법을 만들어 냅니다. 이와 동시에 TextBlock UserControl 안에 포함되고, Text 속성은 DependencyProperty 통해 외부로 노출됩니다.

               

              UserControl 다음처럼 구현됩니다 :



              1
              2
              3
              4
              5
              6
              7
              8
              9
              10
              11
              12
              13
              14
              15
              16
              17
              18
              19
              20
              21
              22
              23
              24
              25
              26
              27
              28
              29

               
              public sealed partial class PointerTextBlock : UserControl
              {
                  private static readonly CoreCursor HandCursor = new CoreCursor(CoreCursorType.Hand, 1);
                  private static readonly CoreCursor ArrowCursor = new CoreCursor(CoreCursorType.Arrow, 1);
                  public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
                      "Text", typeof (string), typeof (PointerTextBlock), new PropertyMetadata(default(string)));
                  public string Text
                  {
                      get { return (string) GetValue(TextProperty); }
                      set { SetValue(TextProperty, value); }
                  }
                  public PointerTextBlock()
                  {
                      InitializeComponent();
                  }
                  private void OnPointerEntered(object sender, PointerRoutedEventArgs e)
                  {
                      Window.Current.CoreWindow.PointerCursor = HandCursor;
                      Opacity = 0.7;
                  }
                  private void OnPointerExited(object sender, PointerRoutedEventArgs e)
                  {
                      Window.Current.CoreWindow.PointerCursor = ArrowCursor;
                      Opacity = 1;
                  }
              }

               

              그런 후에 XAML 페이지 전반에 걸쳐 쉽게 재사용됩니다.


              1
              <controls:PointerTextBlock Text="Edit details" Foreground="{StaticResource AccentColorBrush}" Margin="0,15,0,0" Tapped="OnEditDetailsButtonTapped"/>


              ­


               

                5. 변형이 필요하다면 DataTemplateSelector 도움이 있습니다.


                  리스트 콘트롤에 다른 유형의 항목들을 함께 보여주고 싶으면 DataTemplateSelector라는 것을 구현할 있습니다. 그것이 하는 역활은 꽤나 직관적입니다. 부모 컨트롤의  리스트 항목이 사용할 템플릿을 선택하는 로직을 작성하는 일입니다. 다음 코드 예제는 주고 받은 대화 목록 다른 사용자가 보낸 메시지를 위한 템플릿 선택자(ConversationMessageTemplateSelector) 구현합니다. 여기서 템플릿은 다르게 정렬된 메시지 박스(다른 사람의 메시지는 좌측, 메시지는 우측) 말합니다. DataTemplateSelector 다음과 같이 구현됩니다.


                  1
                  2
                  3
                  4
                  5
                  6
                  7
                  8
                  9
                  10
                  11
                  12
                  13
                  14
                  15
                  16
                  17
                  18

                  public class ConversationMessageTemplateSelector : DataTemplateSelector
                  {
                      protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
                      {
                          var conversation = item as ConversationModel;
                          if (conversation == null)
                          {
                              return base.SelectTemplateCore(item, container);
                          }
                             
                          var resources = Application.Current.Resources;
                          if (conversation.IsOwnedByUser)
                          {
                              return resources["ConversationMessageRightTemplate"] as DataTemplate;
                          }
                          return resources["ConversationMessageLeftTemplate"] as DataTemplate;
                      }
                  }

                   

                  그런 다음 XAML 페이지 전반에 걸쳐 접근 가능하도록 Styles.xaml 파일에 배치시킵니다.

                   

                  1
                  <controls:ConversationMessageTemplateSelector x:Key="ConversationMessageTemplateSelector"/>

                   

                  마지막으로 리스트 컨트롤 (GridView)의 DataTemplateSelector 속성 ItemTemplateSelector 참조하면, 마법은 연결됩니다.


                  1
                  2
                  3
                  4
                  5
                  6
                  7
                  8
                  9
                  10
                  <GridView x:Name="ConversationsGridView" Grid.Row="0"
                            ItemsSource="{Binding Conversations}"
                            Style="{StaticResource GridViewStyle}"
                             ItemTemplateSelector="{StaticResource ConversationMessageTemplateSelector}">
                      <GridView.ItemsPanel>
                          <ItemsPanelTemplate>
                              <StackPanel Orientation="Vertical"/>
                          </ItemsPanelTemplate>
                      </GridView.ItemsPanel>
                  </GridView>


                   

                  만약 여러분이 버그 수정 또는 개선할 점등 발견한다면 알려주세요. 직접 구현할 없으면, GitHub 저장소에 이슈를 생성해주세요. 그러면 보게 것입니다. 만약 구현이 가능하다면 개선사항을 만들어 리퀘스트를 보내주세요. 그러한 일 코드 예제를 더욱 좋아지게 만들겁니다. 감사합니다!

                   

                  https://github.com/microsoftgraph/xamarin-csharp-propertymanager-sample

                   

                  Simon Jaeger

                  Micorosoft에서 여러 분야의 기술 에반젤리스트로 일하고 있습니다.

                  Technical Evangelist @Microsoft
                  #MicrosoftGraph #Xamarin #UWPDev #Office365Dev

                  simonjaeger.com



                  권영철

                  Microsoft Windows Development MVP 권영철입니다. C#과 XAML을 나름 열심히 공부하고 개발하고 있습니다. 번역을 허락해준 Simon Jaeger에게 감사드립니다.
                  Thank
                  s!