Windows 앱 디자인 소개Introduction to Windows app design

샘플 조명 앱

Windows 앱 디자인 지침은 세련되고 아름다운 앱을 디자인하고 빌드하는 데 도움이 되는 리소스입니다.The Windows app design guidance is a resource to help you design and build beautiful, polished apps.

규범적인 규칙 목록이 아닙니다. 진화하는 흐름 디자인 시스템과 앱 빌드 커뮤니티의 요구 사항에 맞게 적응할 수 있도록 설계된 살아있는 문서입니다.It's not a list of prescriptive rules - it's a living document, designed to adapt to our evolving Fluent Design System as well as the needs of our app-building community.

소개에서는 모든 UWP 앱에 포함된 유니버설 디자인 기능에 대한 개요 및 여러 디바이스에 걸쳐 확장되는 UI(사용자 인터페이스)를 빌드하기 위해 문서를 사용할 수 있는 방법을 설명합니다.This introduction provides an overview of the universal design features that are included in every UWP app, helping you build user interfaces (UI) that scale beautifully across a range of devices.

유효 픽셀 및 크기 조정Effective pixels and scaling

UWP 앱은 TV에서 태블릿 또는 PC까지 모든 Windows 10 디바이스에서 실행됩니다.UWP apps run on all Windows 10 devices, from your TV to your tablet or PC. 따라서 다양한 디바이스 및 화면 크기에서 멋지게 보이는 UI를 디자인하려면 어떻게 해야 하나요?So how do you design a UI that looks good on a wide variety of devices and screen sizes?

다양한 디바이스에서 동일한 앱

UWP 앱은 모든 디바이스와 화면 크기에서 쉽게 읽고 상호 작용할 수 있도록 UI 요소의 크기를 조정하는 방식으로 지원됩니다.UWP helps by automatically adjusting UI elements so that they're legible and easy to interact with on all devices and screen sizes.

디바이스에서 앱이 실행될 때 시스템은 화면에 UI 요소가 표시되는 방식을 정규화하는 알고리즘을 사용합니다.When your app runs on a device, the system uses an algorithm to normalize the way UI elements display on the screen. 이 크기 조정 알고리즘은 가시거리 및 화면 밀도(인치당 픽셀)를 고려하여 물리적 크기가 아닌 인식되는 크기를 최적화합니다.This scaling algorithm takes into account viewing distance and screen density (pixels per inch) to optimize for perceived size (rather than physical size). 크기 조정 알고리즘을 통해 3미터 떨어진 Surface Hub 10에 표시된 24픽셀 글꼴이 몇 센티미터 떨어진 5인치 휴대폰에 표시된 24픽셀 글꼴과 동일한 시인성을 보입니다.The scaling algorithm ensures that a 24 px font on Surface Hub 10 feet away is just as legible to the user as a 24 px font on 5" phone that's a few inches away.

다양한 디바이스의 가시거리

크기 조정 시스템의 작동 방식 때문에 UWP 앱을 디자인할 때 실제 물리적 픽셀이 아닌 유효 픽셀로 디자인하게 됩니다.Because of how the scaling system works, when you design your UWP app, you're designing in effective pixels, not actual physical pixels. 유효 픽셀(epx)은 가상 측정 단위이며, 화면 밀도와 무관하게 레이아웃 크기와 간격을 표시하는 데 사용됩니다.Effective pixels (epx) are a virtual unit of measurement, and they're used to express layout dimensions and spacing, independent of screen density. 지침에서는 epx, ep, px를 번갈아 사용합니다.(In our guidelines, epx, ep, and px are used interchangeably.)

디자인할 때는 픽셀 밀도 및 실제 화면 해상도를 무시해도 됩니다.You can ignore the pixel density and the actual screen resolution when designing. 대신, 크기 클래스에 대한 유효 해상도(유효 픽셀로 나타낸 해상도)를 고려해서 디자인합니다(자세한 내용은 화면 크기 및 중단점 문서 참조).Instead, design for the effective resolution (the resolution in effective pixels) for a size class (for details, see the Screen sizes and breakpoints article).

이미지 편집 프로그램에서 화면 모형을 만드는 경우 DPI를 72로 설정하고 이미지 크기를 목표로 하는 크기 클래스의 유효 해상도로 설정하세요.When creating screen mockups in image editing programs, set the DPI to 72 and set the image dimensions to the effective resolution for the size class you're targeting. 크기 클래스 및 유효 해상도 목록은 화면 크기 및 중단점 문서를 참조하세요.For a list of size classes and effective resolutions, see the Screen sizes and breakpoints article.

4의 배수씩 확장Multiples of four

UWP 앱에서 UI 요소의 크기, 여백, 위치는 항상 4epx의 배수여야 합니다.The sizes, margins, and positions of UI elements should always be in multiples of 4 epx in your UWP apps.

UWP는 다양한 디바이스에서 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, 400%의 크기 조정 안정화를 사용하여 크기 조정됩니다.UWP scales across a range of devices with scaling plateaus of 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, and 400%. 기준 단위는 정수가 아닌 숫자(예: 4*1.5 = 6)로 크기 조정할 수 있는 유일한 정수이므로 4입니다.The base unit is 4 because it's the only integer that can be scaled by non-whole numbers (for example, 4*1.5 = 6). 4의 배수를 사용하면 모든 UI 요소가 전체 픽셀에 맞춰지고, UI 요소의 선명하고 날카로운 가장자리가 보장됩니다.Using multiples of four aligns all UI elements with whole pixels and ensures UI elements have crisp, sharp edges. (텍스트에는 이 요구 사항이 없으며, 해당 크기와 위치를 지정할 수 있습니다.)(Note that text doesn't have this requirement; text can have any size and position.)

그리드

레이아웃Layout

UWP 앱은 모든 디바이스에 자동으로 조정되므로 모든 디바이스에 대한 UWP 앱 디자인은 같은 구조를 가집니다.Since UWP apps automatically scale to all devices, designing a UWP app for any device follows the same structure. UWP 앱 UI의 처음부터 시작해 봅시다.Let's start from the very beginning of your UWP app's UI.

창, 프레임 및 페이지Windows, Frames, and Pages

UWP 앱이 모든 Windows 10 디바이스에서 시작되면 페이지 인스턴스 간에 이동할 수 있는 프레임이 있는 에서 시작됩니다.When a UWP app is launched on any Windows 10 device, it launches in a Window with a Frame, which can navigate between Page instances.

프레임이 있는 창의 스크린샷.

앱의 UI는 페이지 컬렉션으로 간주할 수 있습니다.You can think of your app's UI as a collection of pages. 각 페이지에서 수행할 작업과 페이지 간의 관계를 결정할 수 있습니다.It's up to you to decide what should go on each page, and the relationships between pages.

페이지를 구성하는 방법을 알아보려면 탐색 기본 사항을 참조하세요.To learn how you can organize your pages, see Navigation basics.

컬렉션 페이지의 스크린샷.

페이지 레이아웃Page layout

페이지는 어떤 모습이어야 하나요?What should those pages look like? 대부분의 페이지는 앱의 페이지 내에서 사용자가 쉽게 이동할 수 있도록 일관성을 제공하기 위해 일반적인 구조를 따릅니다.Well, most pages follow a common structure to provide consistency, so users can easily navigate between and within pages of your app. 페이지에는 일반적으로 세 가지 유형의 UI 요소가 포함됩니다.Pages typically contain three types of UI elements:

  • 탐색 요소는 사용자가 표시하려는 콘텐츠를 선택하는 데 도움을 줍니다.Navigation elements help users choose the content they want to display.
  • 명령 요소는 조작, 저장 또는 콘텐츠 공유 등의 작업을 시작합니다.Command elements initiate actions, such as manipulating, saving, or sharing content.
  • 콘텐츠 요소는 앱의 콘텐츠를 표시합니다.Content elements display the app's content.

일반적인 레이아웃 패턴

일반적인 UWP 앱 패턴을 구현하는 방법에 대한 자세한 내용은 페이지 레이아웃 문서를 참조하세요.To learn more about how to implement common UWP app patterns, see the Page layout article.

Visual Studio에서 Windows Template Studio를 사용하여 앱의 레이아웃을 시작할 수도 있습니다.You can also use the Windows Template Studio in Visual Studio to get started with a layout for your app.

컨트롤Controls

UWP의 디자인 플랫폼은 모든 Windows 기반 디바이스에서 제대로 작동하도록 보장되고 흐름 디자인 시스템 원칙을 준수하는 일반적인 컨트롤 세트를 제공합니다.UWP's design platform provides a set of common controls that are guaranteed to work well on all Windows-powered devices, and they adhere to our Fluent Design System principles. 이 컨트롤에는 단추와 텍스트 요소 같은 단순한 컨트롤부터 데이터 및 템플릿 세트에서 목록을 생성할 수 있는 정교한 컨트롤까지 모든 것이 포함되어 있습니다.These controls include everything from simple controls, like buttons and text elements, to sophisticated controls that can generate lists from a set of data and a template.

UWP 컨트롤

여기에서 만들 수 있는 UWP 컨트롤과 패턴의 전체 목록은 컨트롤 및 패턴 섹션을 참조하세요.For a complete list of UWP controls and the patterns you can make from them, see the controls and patterns section.

스타일Style

일반적인 컨트롤은 자동으로 시스템 테마와 테마 컬러를 선택하고, 모든 입력 형식을 지원하며, 모든 디바이스로 확장이 됩니다.Common controls automatically reflect the system theme and accent color, work with all input types, and scale to all devices. 일반적인 컨트롤은 그런 방식으로 흐름 디자인 시스템을 반영하므로 아름답고 공감할 수 있는 적응형 컨트롤입니다.In that way, they reflect the Fluent Design System - they're adaptive, empathetic, and beautiful. 일반적인 컨트롤은 기본 스타일에서 빛, 움직임, 깊이를 사용하므로 이를 사용하여 앱에 흐름 디자인 시스템을 통합합니다.Common controls use light, motion, and depth in their default styles, so by using them, you're incorporating our Fluent Design System in your app.

일반적인 컨트롤은 다양하게 사용자 지정할 수 있습니다. 예를 들면 컨트롤의 전경색을 변경하거나, 모양을 완전히 사용자 지정할 수 있습니다.Common controls are highly customizable, too--you can change the foreground color of a control or completely customize it's appearance. 컨트롤에서 기본 스타일을 재정의하려면 간단한 스타일을 사용하거나 XAML에서 사용자 지정 컨트롤을 만듭니다.To override the default styles in controls, use lightweight styling or create custom controls in XAML.

테마 컬러 gif

Shell

UWP 앱은 Windows 에서 타일과 알림이 있는 광범위한 Windows 환경과 상호 작용합니다.Your UWP app will interact with the broader Windows experience with tiles and notifications in the Windows Shell.

타일은 [시작] 메뉴와 앱이 실행될 때 표시되며, 앱에서 진행되는 상황을 한 눈에 확인할 수 있습니다.Tiles are displayed in the Start menu and when your app launches, and they provide a glimpse of what's going on in your app. 이러한 기능은 내부의 콘텐츠와 제공되는 인텔리전스 및 기술로부터 나오는 것입니다.Their power comes from the content behind them, and the intelligence and craft with which they're offered up.

UWP 앱에는 앱의 아이콘과 ID에 따라 사용자 지정할 수 있는 4가지 크기(작은, 중간, 넓은, 큰)의 타일이 있습니다.UWP apps have four tile sizes (small, medium, wide, and large) that can be customized with the app's icon and identity. UWP 앱의 타일 디자인에 대한 지침은 타일 및 아이콘 자산에 대한 지침을 참조하세요.For guidance on designing tiles for your UWP app, see Guidelines for tile and icon assets.

시작 메뉴의 타일

입력Inputs

UWP 앱은 스마트 상호 작용을 사용합니다.UWP apps rely on smart interactions. 클릭이 마우스, 스타일러스 또는 손가락 탭에서 비롯되는 것인지 여부를 알거나 정의하지 않고 클릭 상호 작용을 중심으로 디자인할 수 있습니다.You can design around a click interaction without having to know or define whether the click comes from a mouse, a stylus, or a tap of a finger. 그러나 앱은 특정 입력 모드에 대해서도 디자인할 수 있습니다.However, you can also design your apps for specific input modes.

다른 입력 모드를 지정하는 아이콘의 스크린샷.

디바이스Devices

디바이스

마찬가지로, UWP는 자동으로 앱을 다른 디바이스로 확장하지만 특정 디바이스에 대한 UWP 앱을 최적화할 수도 있습니다.Similarly, while UWP automatically scales your app to different devices, you can also optimize your UWP app for specific devices.

사용 편의성Usability

다양한 능력을 가진 사람을 묘사하는 스틱 그림 만화의 짧은 비디오.

마지막 핵심 요소인 유용성은 모든 사용자가 쉽게 사용할 수 있는 앱 환경을 만드는 것과 관련이 있습니다.Last but not least, usability is about making your app's experience open to all users. 모든 사용자가 매우 포괄적인 사용자 환경에서 혜택을 누릴 수 있습니다. 모든 사용자가 앱을 쉽게 사용할 수 있도록 만드는 방법에 대한 자세한 내용은 UWP 앱의 유용성을 참조하세요.Everyone can benefit from truly inclusive user experiences - see usability for UWP apps to see how to make your app easy to use for everyone.

국제 고객을 대상으로 디자인하는 경우 세계화 및 지역화를 참조하세요.If you're designing for international audiences, you might want to check out Globalization and localization.

시각, 청각, 이동성에 제약이 있는 사용자를 위한 접근성 기능 또한 고려하는 것이 좋습니다.You might also want to consider accessibility features for users with limited sight, hearing, and mobility. 처음부터 접근성을 디자인에 포함하면, 더 적은 노력과 시간으로 쉽게 사용할 수 있는 앱을 만들 수 있습니다.If accessibility is built into your design from the start, then making your app accessible should take very little extra time and effort.

도구 및 디자인 도구 키트Tools and design toolkits

기본적인 디자인 기능에 대해 알아봤습니다. 이제 자신의 UWP 앱 디자인을 시작해 보세요!Now that you know about the basic design features, how about getting started with designing your UWP app?

디자인 프로세스에 도움을 주는 다양한 도구를 제공하고 있습니다.We provide a variety of tools to help your design process:

  • XD, Illustrator, Photoshop, Framer, Sketch와 추가 디자인 도구 및 글꼴 다운로드는 디자인 도구 키트 페이지를 참조하세요.See our Design toolkits page for XD, Illustrator, Photoshop, Framer, and Sketch toolkits, as well as additional design tools and font downloads.

  • UWP 앱을 코딩하도록 머신을 설정하는 방법은 시작하기 > 설정하기 문서를 참조하세요.To get your machine set up to write code for UWP apps, see our Get started > Get set up article.

  • UWP용 UI 구현 방법에 대한 영감을 얻으려면 엔드투엔드 샘플 UWP 앱을 살펴보세요.For inspiration on how to implement UI for UWP, take a look at our end-to-end sample UWP apps.

동영상 요약Video summary

다음: Fluent Design SystemNext: Fluent Design System

흐름 디자인(Microsoft의 디자인 시스템)의 기반이 되는 원칙에 대해 학습하고, UWP 앱에 포함시킬 수 있는 더 많은 기능에 대해 알아보고 싶다면 계속해서 Fluent 디자인 시스템에 대해 알아보세요.If you'd like to learn about the principles behind Fluent Design (Microsoft's design system) and see more features you can incorporate into your UWP app, continue on to Fluent Design System.