Blend for Visual Studio를 사용하여 UI 만들기Creating a UI by using Blend for Visual Studio

Blend for Visual Studio를 사용하면 XAML 기반 Windows 및 웹 응용 프로그램을 디자인할 수 있습니다.Blend for Visual Studio helps you design XAML-based Windows and Web applications. Visual Studio와 같은 기본 XAML 디자인 환경을 제공하고, 애니메이션 및 동작과 같은 고급 작업에 대한 비주얼 디자이너를 추가합니다.It provides the same basic XAML design experience as Visual Studio and adds visual designers for advanced tasks such as animations and behaviors. (도구 비교를 보려면 Visual Studio 및 Blend for Visual Studio에서 XAML 디자인을 참조하세요.)(For a comparison between the tools, see Designing XAML in Visual Studio and Blend for Visual Studio.)

Blend for Visual Studio는 Visual Studio의 일부로 포함되어 있으므로 다운로드할 필요가 없습니다.Because Blend for Visual Studio is included as a part of Visual Studio, you don't need to download it. 그러나 시스템에 설치하려면 Visual Studio 설치 관리자에서 직접 선택해야 합니다.However, you need to select it in the Visual Studio installer for it to install on your system.

Blend for Visual Studio를 처음 접하는 경우 시간을 두고 작업 영역의 고유 기능을 익히세요.If you're new to Blend for Visual Studio, take a moment to become familiar with the unique features of the workspace. 이 항목에 이러한 작업 영역이 간단히 설명되어 있습니다.This topic takes you on a quick tour.

참고

아트보드, 문서 개요 창 및 장치 창과 같은 공유 디자인 기능을 둘러보려면 XAML 디자이너를 사용하여 UI 만들기를 참조하세요.To tour the shared design features such as the artboard, Document Outline window, and Device window, see Creating a UI by using XAML Designer.

항목 내용:In this topic:

도구 패널 둘러보기Tour of the Tools panel

Blend for Visual Studio에서 도구 패널을 사용하여 응용 프로그램의 개체를 만들고 수정할 수 있습니다.You can use the Tools panel in Blend for Visual Studio to create and modify objects in your application. 도구를 선택한 다음 마우스로 아트보드에 그려 개체를 만들 수 있습니다.You create the objects by selecting a tool and drawing on the artboard with your mouse.

도구 패널Tools panel

선택 도구 개체 및 패스를 선택합니다.Selection tools Select objects and paths.

직접 선택 도구는 중첩된 개체 및 패스 세그먼트를 선택하는 데 사용합니다.Use the Direct Selection tool to select nested objects and path segments.
설명선 ACallout A 그라데이션 및 브러시 도구Gradient and brush tools
뷰 도구 이동, 확대/축소 등 아트보드의 뷰를 조정합니다.View tools Adjust the view of the artboard, such as for panning and zooming. 설명선 BCallout B 패스 도구Path tools
브러시 도구 브러시를 변형하거나, 개체를 칠하거나, 한 개체의 특성을 선택하여 다른 개체에 적용하는 등 개체의 시각적 특성에 대한 작업에 사용됩니다.Brush tools Work with the visual attributes of an object, such as transforming a brush, painting an object, or selecting the attributes of one object to apply them to another object. 설명선 CCallout C 도형 도구Shape tools
개체 도구 아트보드에서 패스, 도형, 레이아웃 패널, 텍스트, 컨트롤 등 가장 일반적으로 사용되는 개체를 그리는 데 사용합니다.Object tools Draw the most common objects on the artboard, such as paths, shapes, layout panels, text, and controls. 설명선 DCallout D 레이아웃 패널Layout panels
자산 도구 자산 패널에 액세스하고 라이브러리에서 가장 최근에 사용된 자산을 표시하는 데 사용합니다.Asset tools Access the Assets panel and to show the most recently used asset from the library. 설명선 ECallout E 텍스트 컨트롤Text controls
설명선 FCallout F 공용 컨트롤Common controls

짧은 비디오 보기: 설치된 기능 구성 도구 모음.Watch a short video: Configure Installed Features The Toolbar.

자산 패널 둘러보기Tour of the Assets panel

Visual Studio의 도구 상자와 비슷한 자산 패널에서 모든 컨트롤을 찾을 수 있습니다.You can find all controls in the Assets panel, similar to the Toolbox in Visual Studio. 컨트롤 외에도, 스타일, 미디어, 동작, 효과 등 무엇이든 자산 패널의 아트보드에 추가할 수 있습니다.In addition to controls, you'll find everything you can add to your artboard in the Assets panel, including styles, media, behaviors, and effects.

자산 패널Assets panel

검색 상자 검색 상자에 입력하여 자산 목록을 필터링합니다.Search box Type in the Search box to filter the list of assets.
표 모드 및 목록 모드 자산의 표 모드 보기와 목록 모드 보기 간에 전환합니다.Grid mode and List mode Switch between the Grid mode view and the List mode view of assets.
자산 범주 해당 범주의 자산 목록을 보려면 범주 또는 하위 범주를 클릭합니다.Assets categories Click a category or subcategory to view the list of assets in that category.
스타일 리소스 사전에 포함된 모든 스타일을 표시합니다.Styles Show all the styles that are contained in the resource dictionary.
설명 선택한 자산 범주 또는 하위 범주에 대한 설명을 표시합니다.Description View a description of the selected assets category or subcategory.

개체 및 타임라인 패널 둘러보기Tour of the Objects and Timeline panel

이 패널에서는 아트보드에서 개체를 구성하고 원하는 경우 개체에 애니메이션 효과를 적용할 수 있습니다.Use this panel to organize the objects on your artboard and, if you want, to animate them.

애니메이션 모드의 개체 및 타임라인 패널Object and Timeline panel in animation mode

개체 뷰 문서의 시각적 트리를 표시합니다.Objects view View a visual tree of a document. 다양한 세부 수준으로 드릴다운할 수 있습니다.You can drill down to varying levels of detail. 레이어를 추가하여 아트보드의 개체를 자세히 구성하고You can also add layers to further organize objects on the artboard. 하나의 그룹으로 잠그거나 숨길 수 있습니다.That way you can lock and hide them as a group.
기록 모드 표시기 타임라인에 속성 변경을 기록하고 있는지 여부를 나타냅니다.Record mode indicator See whether you're recording property changes in a timeline.
스토리보드 선택 사용자가 만든 스토리보드의 목록이 표시됩니다.Storyboard picker View a list of storyboards that you've created.
스토리보드 닫기 현재 스토리보드를 닫습니다.Close storyboard Close the current storyboard.
스토리보드 옵션 스토리보드의 만들기, 복제, 반전, 삭제, 이름 바꾸기 또는 닫기 작업을 수행합니다.Storyboard options Create, duplicate, reverse, delete, rename, or close a storyboard.
재생 컨트롤 타임라인을 탐색합니다.Playback controls Navigate through the timeline. 플레이헤드를 끌어 타임라인 전체로 이동(스크럽)할 수도 있습니다.You can also drag the playhead to navigate through (or scrub) the timeline.
범위 되돌리기 이전 루트 개체 또는 이전 범위로 개체 뷰를 되돌립니다.Return scope to Scope the objects view back to the previous root object or previous scope. 이 작업은 스타일이나 템플릿을 수정할 때만 가능합니다.You can do this only when you're modifying a style or template.
키 프레임 기록 현재 시점에서 선택한 개체의 속성에 대한 스냅숏을 기록합니다.Record a keyframe Record a snapshot of the properties of the selected object at the current point in time.
맞추기 옵션 타임라인 맞추기 및 맞춤 해상도를 설정하고 타임라인 맞추기를 해제합니다.Snapping options Set timeline snapping, snap resolution, and turn off timeline snapping.
표시/숨기기, 잠금/잠금 해제 개체 뷰의 표시 유형 및 잠금 옵션을 표시하거나 숨깁니다.Show/hide, Lock/unlock Show or hide the visibility and locking options for the objects view.
타임라인의 플레이헤드 위치 현재 시간을 밀리초 단위로 표시합니다.Playhead position on the timeline Show the current time in milliseconds. 이 필드에 직접 시간 값을 입력하여 특정 시점으로 이동할 수도 있습니다.You can also enter a time value directly in this field to jump to a particular point in time. 맞추기 옵션에서 설정한 맞춤 해상도에 따라 정밀도가 달라집니다.The precision depends on the snap resolution set in the Snapping Options.
플레이헤드 애니메이션이 있는 시점을 나타냅니다.Playhead Determine what point in time the animation is at. 타임라인에서 플레이헤드를 끌어 애니메이션을 미리 볼 수 있습니다.You can drag the playhead across the timeline to preview animation.
타임라인의 키 프레임 설정 특정 시점에서의 속성 값을 변경합니다.Keyframes set on timelines Change a property value at a specific point in time.
개체의 순서 변경 개체의 표시 순서를 설정합니다.Change order of objects Set the display order of objects. 이 단추를 클릭하여 구조 뷰에서 Z 순서(앞에서 뒤로) 또는 태그 순서(XAML 뷰에 나타나는 순서)로 개체를 정렬할 수 있습니다.Click this button to arrange objects in the structure view by Z order (front-to-back) or by markup order (the order in which they appear in XAML view).
타임라인 확대/축소 타임라인의 확대/축소 해상도를 설정합니다.Timeline zoom Set the zoom resolution of the timeline. 확대하면 애니메이션을 좀 더 자세하게 편집할 수 있고 축소하면 더 긴 시간 동안 발생하는 동작이 좀 더 간략하게 표시됩니다.Zooming in lets you edit an animation with more detail, and zooming out shows more of an overview of what is happening over longer periods of time. 확대했지만 원하는 시점에 키 프레임을 설정할 수 없다면 맞춤 해상도가 충분히 높게 설정되어 있는지 확인하십시오.If you zoom in but can't set a keyframe at the position in time that you want, verify that the snap resolution is set high enough.
설명선 16Callout 16 타임라인 합성 영역 타임라인이 표시됩니다. 키 프레임을 직접 끌거나 바로 가기 메뉴를 사용하여 이동할 수 있습니다.Timeline composition area View the timeline, and move keyframes around by dragging them or using their shortcut menus.

속성 패널 둘러보기Tour of the Properties panel

이 패널에서는 개체의 속성을 보고 수정할 수 있으며,Use this panel to view and modify the properties of an object. 아트보드에서 직접 수정하도록 설정할 수도 있습니다.You can also set them directly on the artboard. 이렇게 하면 속성 변경 내용이 속성 패널에 반영됩니다.If you do, the property changes will be reflected in the Properties panel.

속성 패널Properties panel

범주 속성의 범주를 확장하고 축소합니다.Categories Expand and collapse categories of properties. 범주 세부 정보를 표시하거나 숨기려면 확장 축소 축소를 클릭합니다.Click Expand and Collapse Collapse to show or hide category details.

이름 및 형식 선택한 개체의 아이콘, 이름 및 형식을 표시합니다.Name and Type View the icon, name and type of the selected object.
정렬 기준 속성을 이름, 소스 또는 범주를 기준으로 사전순으로 정렬합니다.Arrange by Arrange properties alphabetically by name, source, or category.
브러시 속성 Fill 브러시, Stroke 브러시 및 Foreground 브러시와 같은 브러시의 시각적 속성을 설정합니다.Brush properties Set the visual properties for brushes such as Fill brush, Stroke brush, and Foreground brush.
색 편집기 단색 및 그라데이션 브러시에 사용합니다.Color editor Use for solid color and gradient brushes.
색 선택 색을 선택합니다.Color picker Select a color.
색 칩 첫 색, 현재 색 및 끝 색을 표시합니다.Color chips View the initial color, current color, and last color
스포이트 화면에 모든 요소의 색을 사용합니다.Eyedroppers Use the color of any element on your screen. 색 스포이트단색 브러시가 선택되어 있을 때 사용할 수 있습니다.The Color eyedropper is available when the Solid color brush is selected. 그라데이션 스포이트그라데이션 브러시가 선택되어 있을 때 사용할 수 있습니다.The Gradient eyedropper is available when the Gradient brush is selected.
속성 및 이벤트 선택한 요소에 대한 이벤트를 선택하거나 속성을 설정합니다.Properties and Events Set properties or choose events for a selected element.
검색 상자 속성을 검색합니다.Search box Search for properties. 검색 상자에 텍스트를 입력하여 표시되는 속성을 필터링합니다.Filter the properties that are displayed by typing in the Search box.
브러시 편집기 탭 브러시 편집기를 선택하는 데 사용합니다.Brush editor tabs Use to select a brush editor. 브러시 없음, 단색 브러시, 그라데이션 브러시, 타일 브러시 또는 브러시 리소스 중에서 선택할 수 있습니다.You can choose No brush, Solid Color brush, Gradient brush, Tile brush, or Brush resource.
색 리소스 서로 다른 속성에 동일한 색을 적용합니다.Color resources Apply the exact same color to different properties. 색 리소스 탭에는 로컬 리소스시스템 리소스가 포함됩니다.The Color Resources tab includes Local Resources and System Resources.
RGB 색 공간 R, G 또는 B(빨강, 초록, 파랑) 숫자 편집기에 대한 값을 조정하여 색을 수정합니다.RGB color space Modify the color by adjusting the values for the R, G, or B (red, green, blue) number editors.
알파 채널 A 옆의 숫자 편집기를 사용하여 알파 값을 수정합니다.Alpha channel Modify the Alpha value by using the number editor next to A.
색을 리소스로 변환 선택한 색을 색 리소스로 변환합니다.Convert color to resource Convert the selected color to a color resource. 색 리소스는 색 리소스 탭을 클릭하면 사용할 수 있습니다.Color resources are available when you click the Color resources tab.
16진수 값 표시된 색의 16진수 값을 표시합니다.Hex value View the hexadecimal value of the color displayed.
설명선 16Callout 16 그라데이션 슬라이더 그라데이션 브러시를 선택한 경우에만 나타납니다.Gradient slider Appears only if a gradient brush is selected.
고급 속성 표시 자주 사용되지 않는 속성의 범주를 표시합니다.Show advanced properties View categories of properties that are less commonly used.

짧은 비디오 보기: 설치된 기능 구성 속성 패널.Watch a short video: Configure Installed Features Properties panel.

참고 항목See Also

컨트롤 삽입 및 해당 동작 수정 Insert controls and modify their behavior
개체에 애니메이션 적용 Animate objects
도형 및 패스 그리기 Draw shapes and paths
Visual Studio 및 Blend for Visual Studio에서 XAML 디자인Designing XAML in Visual Studio and Blend for Visual Studio