Visual Studio에서 XAML 디자이너를 사용하여 UI 만들기Creating a UI by using XAML Designer in Visual Studio

Visual Studio의 XAML 디자이너는 XAML 기반 Windows 앱과 웹앱을 디자인하는 데 도움이 되는 그래픽 인터페이스를 제공합니다.The XAML Designer in Visual Studio provides a visual interface to help you design XAML-based Windows and Web apps. 도구 상자 에서 컨트롤을 끌고 속성 창에서 속성을 설정하여 앱에 대한 사용자 인터페이스를 만들 수 있습니다.You can create user interfaces for your apps by dragging controls from the Toolbox and setting properties in the Properties window. XAML 뷰에서 직접 XAML을 편집할 수도 있습니다.You can also edit XAML directly in XAML view.

애니메이션 및 동작과 같은 고급 XAML 디자인 작업에 대해서는 Creating a UI by using Blend for Visual Studio를 참조하세요.For advanced XAML design tasks such as animations and behaviors, see Creating a UI by using Blend for Visual Studio. 또한 도구 비교를 보려면 Visual Studio 및 Blend for Visual Studio에서 XAML 디자인을 참조하세요.Also see Designing XAML in Visual Studio and Blend for Visual Studio for a comparison between the tools.

XAML 디자이너 작업 영역XAML Designer workspace

XAML 디자이너의 작업 영역은 몇 가지 그래픽 인터페이스 요소로 구성됩니다.The workspace in XAML Designer consists of several visual interface elements. 여기에는 아트보드, XAML 편집기, 장치 창, 문서 개요 창 및 속성 창이 포함됩니다.These include the artboard, XAML Editor, Device window, Document Outline window, and Properties window. XAML 디자이너를 열려면 솔루션 탐색기 에서 XAML 파일을 마우스 오른쪽 단추로 클릭하고 뷰 디자이너를 선택합니다.To open the XAML Designer, right-click a XAML file in Solution Explorer and choose View Designer.

뷰 작성Authoring views

XAML 디자이너는 앱의 렌더링된 XAML 태그에 대한 XAML 뷰 및 동기화된 디자인 뷰를 제공합니다.XAML Designer provides a XAML view and a synchronized Design view of your app's rendered XAML markup. Visual Studio에서 XAML 파일을 연 상태에서, 디자인XAML 탭을 사용하여 디자인 뷰와 XAML 뷰 사이에서 전환할 수 있습니다.With a XAML file open in Visual Studio, you can switch between Design view and XAML view by using the Design and XAML tabs. 창 바꾸기 단추를 사용하여 아트보드 또는 XAML 편집기 중 하나의 맨 위에 나타나는 창을 전환할 수 있습니다.You can use the Swap Panes button to switch which window appears on top: either the artboard or the XAML Editor.

디자인 뷰에서 아트 보드 포함하는 창이 활성 창이고 이를 기본 작업 화면으로 사용할 수 있습니다.In Design view, the window containing the artboard is the active window and you can use it as a primary work surface. 이 창에서 요소를 추가하거나 그린 다음 수정하여 앱에서 페이지를 시각적으로 디자인할 수 있습니다.You can use it to visually design a page in your app by adding or drawing elements, and then by modifying them. 자세한 내용은 Working with elements in XAML Designer을 참조하세요.For more info, see Working with elements in XAML Designer. 이 그림은 디자인 뷰에서 아트보드를 보여 줍니다.This illustration shows the artboard in Design view.

XAML 디자이너의 디자인 뷰Design view of XAML Designer

이러한 기능은 아트보드에서 사용할 수 있습니다.These features are available in the artboard:

맞춤선Snaplines
맞춤선은 빨간색 파선 선으로 표시되는 맞춤 경계선 으로, 컨트롤의 가장자리가 맞춰진 경우나 텍스트 기준선이 맞춰진 경우를 나타냅니다.Snaplines are alignment boundaries that appear as red-dashed lines to show when the edges of controls are aligned, or when text baselines are aligned. 맞춤선에 맞추기 를 사용하도록 설정한 경우에만 맞춤 경계선이 나타납니다.Alignment boundaries appear only when snapping to snaplines is enabled.

모눈 레일Grid rails
Grid 레일은 모눈 패널의 행과 열을 관리하는 데 사용됩니다.Grid rails are used to manage rows and columns in a Grid panel. 행과 열을 만들고 삭제하며, 상대적인 너비와 높이를 조정할 수 있습니다.You can create and delete rows and columns, and you can adjust their relative widths and heights. 아트보드의 왼쪽에 나타나는 세로 모눈 레일은행에 사용되고 맨 위에 나타나는 가로줄은 열에 사용됩니다.The vertical Grid rail, which appears on the left of the artboard, is used for rows, and the horizontal line, which appears at the top, is used for columns.

모눈 표시기Grid adorners
Grid 표시기는 Grid 레일에 세로 또는 가로 줄이 연결된 삼각형으로 나타납니다.A Grid adorner appears as a triangle that has a vertical or horizontal line attached to it on the Grid rail. Grid 표시기를 끌면 마우스를 이동할 때 인접한 열이나 행의 너비 또는 높이가 그에 따라 업데이트됩니다.When you drag a Grid adorner, the widths or heights of adjacent columns or rows update as you move the mouse.

Grid 표시기는 Grid의 행 및 열에 대한 높이 및 너비를 제어하는 데 사용됩니다.Grid adorners are used to control the width and height of a Grid's rows and columns. Grid 레일에서 클릭하여 새 열 또는 행을 추가할 수 있습니다.You can add a new column or row by clicking in the Grid rails. 두 개 이상의 열 또는 행이 포함된 Grid 패널에 대한 새로운 행 또는 열 줄을 추가하는 경우 미니 도구 모음이 레일 외부에 나타나며, 이 도구 모음에서 너비와 높이를 명시적으로 설정할 수 있습니다.When you add a new row or column line for a Grid panel that has two or more columns or rows, a mini-toolbar appears outside of the rail that enables you to set width and height explicitly. 미니 도구 모음을 사용하면 Grid 행 및 열에 대한 크기 조정 옵션을 설정할 수 있습니다.The mini-toolbar enables you to set sizing options for Grid rows and columns.

크기 조정 핸들Resize handles
크기 조정 핸들이 선택된 컨트롤에 나타나며 이 핸들을 사용하여 컨트롤의 크기를 조정할 수 있습니다.Resize handles appear on selected controls and enable you to resize the control. 컨트롤의 크기를 조정하면 너비 및 높이 값이 나타나므로 컨트롤의 크기를 조정하는 데 도움이 됩니다.When you resize a control, width and height values typically appear to help you size the control. 디자인 뷰에서 컨트롤을 조작하는 방법에 대한 자세한 내용은 Working with elements in XAML Designer을 참조하십시오.For more info about manipulating controls in Design view, see Working with elements in XAML Designer.

여백Margins
여백은 컨트롤 가장자리와 해당 컨테이너 가장자리 사이의 고정된 공간 크기를 나타냅니다.Margins represent the amount of fixed space between the edge of a control and the edge of its container. 속성 창의 레이아웃 아래에 있는 여백 속성을 사용하여 컨트롤의 여백을 설정할 수 있습니다.You can set the margins of a control by using the Margin properties under Layout in the Properties window.

여백 표시기Margin adorners
여백 표시기를 사용하여 레이아웃 컨테이너를 기준으로 요소의 여백을 변경할 수 있습니다.You can use margin adorners to change the margins of an element relative to its layout container. 여백 표시기가 열려 있으면 여백이 설정되지 않고 여백 표시기에서 끊어진 체인을 표시합니다.When a margin adorner is open, a margin is not set and the margin adorner displays a broken chain. 여백을 설정 하지 않으면 런타임에 레이아웃 컨테이너 크기를 조정할 때 요소가 제자리에 유지됩니다.When the margin is not set, elements will remain in place when the layout container is resized at run time. 여백 표시기가 닫힌 경우 여백 표시기는 끊어지지 않은 체인을 표시하고 런타임에 레이아웃 컨테이너의 크기가 조정될 때 요소도 여백과 함께 이동됩니다(여백은 고정됨).When a margin adorner is closed, a margin adorner displays an unbroken chain, and elements will move with the margin as the layout container is resized at run time (the margin remains fixed).

요소 핸들Element handles
요소 주위의 파란색 상자 모퉁이 위로 포인터를 이동하면 아트보드에 표시되는 요소 핸들을 사용하여 요소를 수정할 수 있습니다.You can modify an element by using the element handles that appear on the artboard when you move the pointer over the corners of the blue box that surrounds an element. 이러한 핸들을 사용하면 회전, 크기 조정, 대칭 이동 또는 이동 작업을 수행하거나 요소에 모퉁이 반경을 추가할 수 있습니다.These handles enable you to rotate, resize, flip, move, or add a corner radius to the element. 요소 핸들의 기호는 함수 별로 다르며 포인터의 정확한 위치에 따라 변경됩니다.The symbol for the element handle varies by function, and changes depending on the exact location of the pointer. 요소 핸들이 보이지 않으면 요소를 선택했는지 확인합니다.If you don't see the element handles, make sure the element is selected.

디자인 뷰에서 다음과 같이 화면의 왼쪽 아래 영역에서 추가 아트보드 명령을 사용할 수 있습니다.In Design view, additional artboard commands are available in the lower left area of the screen, as shown here:

디자인 뷰 명령Design view commands

이러한 명령은 이 도구 모음에서 사용할 수 있습니다.These commands are available on this toolbar:

확대/축소Zoom
확대/축소를 사용하면 디자인 화면의 크기를 조정할 수 있습니다.Zoom enables you to size the design surface. 12.5%부터 800%까지 확대/축소하거나 선택 영역에 맞춤모두에 맞춤과 같은 옵션을 선택할 수 있습니다.You can zoom from 12.5% to 800%, or select options such as Fit to Selection and Fit to All.

맞춤 모눈 숨기기Show/Hide snap grid
눈금선을 표시하는 맞춤 모눈을 표시하거나 숨깁니다.Displays or hides the snap grid that shows the gridlines. 모눈선에 맞추기 또는 맞춤선에 맞추기 를 사용할 때 눈금선이 사용됩니다.Gridlines are used when either snapping to gridlines or snapping to snaplines is enabled.

모눈선에 맞추기 켜기/끄기Turn on/off snapping to gridlines
아트보드에서 개체를 끌 때 모눈선에 맞추기 가 사용되면 요소가 가장 가까운 세로 눈금선이나 가로 눈금선에 맞춰집니다.If snapping to gridlines is enabled when you drag an element on the artboard, the element tends to align with the closest horizontal and vertical gridlines.

맞춤선에 맞추기 켜기/끄기Turn on/off snapping to snaplines
맞춤선을 사용하면 서로를 기준으로 컨트롤을 맞출 수 있습니다.Snaplines help you align controls relative to each other. 맞춤선에 맞추기 를 사용하는 경우 다른 컨트롤을 기준으로 컨트롤을 끌면 가장자리와 일부 컨트롤의 텍스트가 가로 또는 세로로 정렬될 때 맞춤 경계선이 나타납니다.If snapping to snaplines is enabled, when you drag a control relative to other controls, alignment boundaries appear when the edges and the text of some controls are aligned horizontally or vertically. 맞춤 경계선은 빨간색 파선으로 나타납니다.An alignment boundary appears as a red-dashed line.

XAML 뷰에서 XAML 편집기가 포함된 창이 활성 창이며 XAML 편집기는 기본 제작 도구입니다.In XAML view, the window containing the XAML editor is the active window, and the XAML editor is your primary authoring tool. XAML(Extensible Application Markup Language)은 응용 프로그램의 사용자 인터페이스를 지정하는 데 사용할 수 있는 선언적인 XML 기반 어휘를 제공합니다.The Extensible Application Markup Language (XAML) provides a declarative, XML-based vocabulary for specifying an application's user interface. XAML 뷰에는 IntelliSense, 자동 서식 지정, 구문 강조 표시 및 태그 탐색이 포함됩니다.XAML view includes IntelliSense, automatic formatting, syntax highlighting, and tag navigation. 이 그림에서는 XAML 뷰를 보여 줍니다.This illustration shows XAML view:

XAML 뷰XAML view

분할 뷰 구분선Split view bar
XAML 편집기가 아래쪽 창에 있을 때 분할 뷰 구분선이 XAML 뷰의 맨 위에 나타납니다.The split view bar appears at the top of XAML view when the XAML editor is in the lower window. 분할 뷰 구분선을 사용하여 디자인 뷰 및 XAML 뷰의 상대적 크기를 제어할 수 있습니다.The split view bar enables you to control the relative sizes of Design view and XAML view. 뷰의 위치를 바꾸고( 창 바꾸기 단추 사용), 뷰를 가로 또는 세로로 정렬할지 여부를 지정하고, 뷰 중 하나를 축소할 수 있습니다.You can also exchange the locations of the views (using the Swap Panes button), specify whether the views are arranged horizontally or vertically, and collapse either view.

태그 확대/축소Markup Zoom
태그 확대/축소를 사용하여 XAML 뷰의 크기를 조정할 수 있습니다.Markup zoom enables you to size XAML view. 20%부터 400%까지 확대/축소할 수 있습니다.You can zoom from 20% to 400%.

장치 창Device window

XAML 디자이너의 장치 창을 사용하면 디자인 타임에 프로젝트의 다양한 뷰, 표시 및 표시 옵션을 시뮬레이션할 수 있습니다.The Device window in XAML Designer enables you to simulate at design-time various views, displays, and display options for your project. 장치 창은 XAML 디자이너에서 작업할 때 디자인 메뉴에서 사용할 수 있습니다.The Device window is available on the Design menu when you are working in the XAML Designer. 다음과 같이 나타납니다.Here's what it looks like:

장치 창Device window

다음은 장치 창에서 사용할 수 있는 옵션입니다.These are the options available in the Device window:

표시Display
앱의 다른 디스플레이 크기 및 해상도를 미리 봅니다.Specifies different display sizes and resolutions for the app.

방향Orientation
앱의 다른 방향 즉, 가로 또는 세로를 지정합니다.Specifies different orientations for the app: Landscape or Portrait.

Microsoft EdgeEdge
앱의 다른 가장자리 맞춤 즉, 모두, 왼쪽, 오른쪽또는 없음을 지정합니다.Specifies different edge alignments for your app: Both, Left, Right, or None.

고대비High Contrast
선택한 대비 설정에 따라 앱을 미리 봅니다.Preview the app based on the selected contrast setting. 이 설정은 기본값이외의 값으로 설정된 경우 App.xaml에 설정된 RequestedTheme 속성을 재정의합니다.This setting, when set to a value other than Default, will override the RequestedTheme property set in App.xaml.

배율 재정의Override scaling
디자인 화면 내에서 문서 배율의 에뮬레이션을 켜고 끕니다.Turns on and off emulation of document scaling within the design surface. 이 기능으로 배율을 1씩 늘릴 수 있습니다.This enables you to increase the scaling percentage by one factor. 에뮬레이션을 켜려면 확인란을 선택합니다.Select the check box to turn on emulation. 예를 들어 배율이 100%인 경우 디자인 화면 내의 문서는 140%까지 크기 조정됩니다.For instance, if your scaling percentage is 100%, the document within the design surface will scale up to 140%. 현재 배율이 180인 경우에는 이 옵션은 사용할 수 없습니다.This option is disabled if the current scaling percentage is 180.

최소 너비Minimum width
최소 너비 설정을 지정합니다.Specifies the minimum width setting. 최소 너비는 App.xaml 파일에서 변경할 수 있습니다.The minimum width can be changed in App.xaml.

테마Theme
앱 테마를 지정합니다.Specifies the app theme. 예를 들어 진한 테마와 밝은 테마 간에 전환할 수 있습니다.For example, you might switch between a Dark and a Light theme.

크롬 표시Show chrome
디자인 뷰에서 앱 주위의 시뮬레이트된 태블릿 프레임을 켜고 끕니다.Turns on and off the simulated tablet frame around your app in Design view. 프레임을 표시하려면 이 확인란을 선택합니다.Select the check box to show the frame.

표시에 맞춰 잘라내기Clip to display
디스플레이 모드를 지정합니다.Specifies the display mode. 디스플레이 크기에 맞춰 문서 크기를 잘라 내려면 확인란을 선택합니다.Select the check box to clip the document size to the display size.

문서 개요 창Document Outline window

XAML 디자이너의 문서 개요 창은 이러한 작업을 수행하는 데 도움이 됩니다.The Document Outline window in XAML Designer helps you perform these tasks:

  • 아트보드의 모든 요소에 대한 계층 구조를 표시합니다.View the hierarchical structure of all elements on the artboard.

  • 요소를 수정(계층 구조에서 이동, 아트보드에서 수정, 속성 창에서 속성 설정 등)할 수 있도록 선택합니다.Select elements so that you can modify them (move them around in the hierarchy, modify them on the artboard, set their properties in the Properties window, and so on). 자세한 내용은 Working with elements in XAML Designer을 참조하십시오.For more info, see Working with elements in XAML Designer

  • 컨트롤인 요소의 템플릿을 만들고 수정합니다.Create and modify templates for elements that are controls.

  • 선택한 요소에 대한 상황에 맞는 메뉴를 사용합니다.Use the context menu for selected elements. 아트보드에서 선택한 요소에 대해서도 동일한 메뉴를 사용할 수 있습니다.The same menu is also available for selected elements in the artboard.

    문서 개요 창을 보려면 메뉴 모음에서 보기, 다른 창, 문서 개요를 선택합니다.To view the Document Outline window, on the menu bar choose View, Other Windows, Document Outline.

    문서 개요 창Document Outline window

    다음은 문서 개요 창에서 사용할 수 있는 옵션입니다.These are the options available in the Document Outline window:

    문서 개요Document Outline
    문서 개요 창의 주 보기에는 트리 구조의 문서 계층 구조가 표시됩니다.The main view in the Document Outline window displays the hierarchy of a document in a tree structure. 문서 개요의 계층적 특성을 사용하여 다양한 수준의 세부 정보에서 문서를 검사하고 단독으로 또는 그룹으로 요소를 잠그고 숨길 수 있습니다.You can use the hierarchical nature of the document outline to examine the document at varying levels of detail, and to lock and hide elements singly or in groups.

    표시/숨기기Show/hide
    문서 개요의 항목에 해당하는 아트보드 요소를 표시하거나 숨깁니다.Displays or hides artboard elements that correspond to items in the Document Outline. 표시되면 눈 기호가 나타나는 표시/숨기기 단추를 사용합니다. 또는 요소를 숨기려면 Ctrl+H를 누르고, 요소를 표시하려면 Shift+Ctrl+H를 누릅니다.Use the Show/hide buttons, which display a symbol of an eye when shown, or press CTRL+H to hide elements and SHIFT+CTRL+H to display them.

    잠금/잠금해제Lock/unlock
    문서 개요의 항목에 해당하는 아트보드 요소를 잠그거나 잠금 해제합니다.Locks or unlocks artboard elements that correspond to items in the Document Outline. 잠긴 요소는 수정할 수 없습니다.Locked elements can't be modified. 잠기면 자물쇠가 나타나는 잠금/잠금해제 단추를 사용합니다. 또는 요소를 잠그려면 Ctrl+L을 누르고, 잠금 해제하려면 Shift+Ctrl+L을 누릅니다.Use the Lock/unlock buttons, which display a padlock symbol when locked, or press CTRL+L to lock elements and SHIFT+CTRL+L to unlock them.

    범위를 pageRoot로 되돌립니다.Return scope to pageRoot
    문서 개요 창의 위쪽에 있는 옵션은 위쪽 화살표 기호를 표시하며 문서 개요를 이전 범위로 반환합니다.The option at the top of the Document Outline window, which shows an up arrow symbol, returns the document outline to the previous scope. 범위 상향 지정은 스타일이나 템플릿의 범위에 있을 경우에만 적용할 수 있습니다.Scoping up is applicable only when you're in the scope of a style or template.

속성 창Properties window

속성 창을 사용하면 컨트롤에 대한 속성 값을 설정할 수 있습니다.The Properties window enables you to set property values on controls. 다음과 같이 나타납니다.Here's what it looks like:

속성 창Properties window

속성 창의 위쪽에는 다양한 옵션이 있습니다.There are various options at the top of the Properties window. 이름 상자를 사용하여 현재 선택된 요소의 이름을 변경할 수 있습니다.You can change the name of the currently selected element by using the Name box. 왼쪽 위 모서리에 현재 선택한 요소를 나타내는 아이콘이 있습니다.In the upper-left corner, there's an icon that represents the currently selected element. 속성을 범주별로 또는 사전순으로 정렬하려면 정렬 기준목록에서 범주, 이름 또는 소스 를 클릭합니다.To arrange the properties by category or alphabetically, click Category, Name, or Source in the Arrange by list. 컨트롤에 대한 이벤트의 목록을 보려면 번개 기호를 표시하는 이벤트 단추를 클릭합니다.To see the list of events for a control, click the Events button, which displays a lightning bolt symbol. 속성을 검색하려면 먼저 검색 속성 상자에서 속성의 이름을 입력합니다.To search for a property, start to type the name of the property in the Search Properties box. 속성 창에 입력할 때 검색 조건과 일치하는 속성이 표시됩니다.The Properties window displays the properties that match your search as you type. 일부 속성에서는 아래쪽 화살표 단추를 선택하여 고급 속성을 설정할 수 있습니다.Some properties allow you to set advanced properties by selecting a down arrow button. 속성 사용 및 이벤트 처리에 대한 자세한 내용은 빠른 시작: 컨트롤 추가 및 이벤트 처리를 참조하세요.For more info on using properties and handling events, see Quickstart: adding controls and handling events

각 속성 값의 오른쪽에 상자 기호로 나타나는 속성 표식 이 있습니다.To the right of each property value is a property marker that appears as a box symbol. 속성 표식의 모양은 속성에 적용되는 리소스 또는 데이터 바인딩이 있는지 여부를 나타냅니다.The appearance of the property marker indicates whether there's a data binding or a resource applied to the property. 예를 들어 흰색 상자 기호는 기본값을 나타내고, 검은색 상자 기호는 일반적으로 로컬 리소스가 적용되었음을 나타내고, 주황색 상자는 일반적으로 데이터 바인딩이 적용되었음을 나타냅니다.For example, a white box symbol indicates a default value, a black box symbol typically indicates that a local resource has been applied, and an orange box typically indicates a data binding has been applied. 속성 표식을 클릭하면 스타일의 정의로 이동하거나, 데이터 바인딩 작성기를 열거나, 리소스 선택기를 엽니다.When you click the property marker, you can navigate to the definition of a style, open the data binding builder, or open the resource picker.

참고 항목See Also

Working with elements in XAML Designer Working with elements in XAML Designer
방법: 리소스 만들기 및 적용 How to create and apply a resource
연습: XAML 디자이너의 데이터 바인딩Walkthrough: Binding to data in XAML Designer