Visual Studio에서 XAML 디자인Designing XAML in Visual Studio

Visual Studio 및 Blend for Visual Studio는 다양한 앱 유형에 XAML을 사용하여 유용한 사용자 인터페이스 및 풍부한 미디어 환경을 빌드할 수 있게 해주는 시각적 도구를 제공합니다.Visual Studio and Blend for Visual Studio both provide visual tools for building engaging user interfaces and rich media experiences with XAML for a variety of app types. 두 도구는 시각적 XAML 편집기를 비롯한 공통 기능 집합을 공유하지만 Blend for Visual Studio에서는 애니메이션 및 동작과 같은 고급 작업을 위한 추가 디자인 도구를 제공합니다.Both tools share a common set of features including a visual XAML editor, but Blend for Visual Studio provides additional design tools for more advanced tasks such as animation and behaviors.

앱을 디자인하는 과정은 선택한 도구 및 대상 플랫폼에 따라 달라집니다.The process of designing an app depends on the tool you choose and your target platform. 현재 항목에서는 Visual Studio 및 Blend for Visual Studio의 XAML 디자인 도구를 비교합니다.This present topic compares the XAML design tools in Visual Studio and Blend for Visual Studio. 도구를 사용하는 방법에 대한 자세한 연습은 다음 항목을 참조하세요.For more detailed walkthroughs of using the tools, see the following topics:

적합한 도구 선택Choosing the Right Tool

선택하는 디자인 도구는 대체로 사용자 역량에 따라 달라집니다.Your choice of design tools is largely dependent on your skill set. 코드를 지향하는 경우 Visual Studio에서 XAML 코드를 작성하여 고급 디자인 작업을 수행할 수 있습니다.If you are more code-oriented, you can write XAML code in Visual Studio to accomplish even advanced design tasks. 디자인을 지향하는 경우 Blend for Visual Studio를 사용하여 코드를 작성하지 않고 고급 작업을 수행할 수 있습니다.If you are more design-oriented, Blend for Visual Studio lets you perform advanced tasks without writing code.

Visual Studio와 Blend for Visual Studio 간에 전환할 수 있으며, 둘 다에서 같은 프로젝트를 동시에 열어 놓을 수도 있습니다.You can switch back and forth between Visual Studio and Blend for Visual Studio, and you can even have the same project open in both at the same time. 한 IDE에서 XAML 파일을 변경한 후 다른 IDE로 전환할 때 자동 다시 로드를 통해 변경 내용을 적용할 수 있습니다.Changes made to XAML files in one IDE can be applied via automatic reload when you switch to the other IDE. 두 IDE 중 하나에서 도구, 옵션 대화 상자의 옵션을 통해 다시 로드 동작을 제어할 수 있습니다.You can control the reload behavior via options in the Tools, Options dialog box in either IDE.

공유 기능Shared Capabilities

기본적인 작업의 경우 대부분 Visual Studio 및 Blend for Visual Studio용 IDE에서 약간의 차이점은 있지만 동일한 창과 기능 집합을 공유합니다.For most basic tasks, the IDE for Visual Studio and Blend for Visual Studio share the same set of windows and capabilities, with some subtle differences. 중요 사항은 다음과 같습니다.Some highlights include:

  • 일관된 사용자 인터페이스: 익숙한 Visual Studio 사용자 인터페이스 컨텍스트 내에서 응용 프로그램을 디자인하여 IDE 간 전환을 더 즐겁고 생산적인 경험으로 만들 수 있습니다.A consistent user interface: You can design your applications within the familiar context of the Visual Studio user interface, which makes switching between IDEs a more pleasant and productive experience. Blend for Visual Studio는 콘텐츠와 사용자 인터페이스 간의 대비를 향상시켜 디자인하는 콘텐츠에 집중할 수 있게 해주는 Visual Studio 어두운 테마를 사용합니다.Blend for Visual Studio uses the Visual Studio Dark theme that helps you focus on the content you are designing by improving the contrast between your content and the user interface. XAML 디자이너를 사용하여 UI 만들기를 참조하세요.See Creating a UI by using XAML Designer.

    Blend for Visual Studio IDEThe Blend for Visual Studio IDE

  • XAML IntelliSense: 두 IDE는 모두 문 완성, 코드 주석 처리 및 형식 지정과 같은 일반적인 편집기 작업 지원, 리소스, 바인딩 및 코드 탐색을 포함하여 IntelliSense에서 기대하는 모든 일반적인 기능을 지원합니다.XAML IntelliSense: Both IDEs support all of the common capabilities you would expect from IntelliSense including statement completion, support for common editor operations like commenting and formatting code, and navigation to resources, binding, and code.

  • 기본 디버깅 기능: 이제 코드에서 중단점을 설정하여 실행 중인 앱 디버그를 포함하여 Blend에서 디버그할 수 있습니다.Basic debugging capabilities: You can now debug in Blend, including setting breakpoints in your code to debug your running app. Visual Studio와 일관된 디버깅 환경을 유지하기 위해 Blend for Visual Studio에는 Visual Studio의 디버깅 창과 도구 모음이 대부분 포함되어 있습니다.To maintain a consistent debugging experience with Visual Studio, Blend for Visual Studio includes most of Visual Studio's debugging windows and toolbars. 진단 및 코드 분석과 같은 고급 디버깅 기능은 Visual Studio에서만 사용할 수 있습니다.Advanced debugging capabilities such as diagnostics and code analysis are only available in Visual Studio. Debugging in Visual Studio을 참조하세요.See Debugging in Visual Studio.

  • 파일 다시 로드 환경: Blend for Visual Studio 또는 Visual Studio 중 하나에서 XAML 파일을 편집한 후 다른 프로그램으로 전환할 때 편집된 파일이 자동으로 다시 로드되도록 할 수 있습니다.File reload experience: You can edit your XAML files in either Blend for Visual Studio or Visual Studio, and have your edited files reload automatically as you switch between them. 워크플로 중단을 최소화하기 위해 이제 파일 다시 로드 대화 상자에서 파일 다시 로드 기본 설정을 지정할 수 있습니다.To minimize workflow interruptions, you can now set your file reload preferences in the file reload dialog.

    파일 재로드 경험File reload experience

  • 동기화된 레이아웃 및 설정: 사용자 지정 레이아웃을 통해 도구 창 레이아웃 사용자 지정을 저장하고 적용할 수 있습니다.Synchronized Layouts and Settings: Custom layouts enable you to save and apply tool window layout customizations. 동일한 Microsoft 계정으로 로그인하면 Visual Studio에서 Visual Studio 및 Blend for Visual Studio 둘 다에 대한 이러한 사용자 지정과 기본 설정을 컴퓨터 간에 동기화합니다.Visual Studio will synchronize these customizations and preferences for both Visual Studio and Blend for Visual Studio across machines when you sign in with the same Microsoft account. Visual Studio IDE 개인 설정을 참조하세요.See Personalize the Visual Studio IDE.

  • 공통 솔루션 탐색기: 솔루션 탐색기를 통해 프로젝트 및 해당 파일을 구조적으로 보고 연결된 명령에 쉽게 액세스할 수 있습니다.A common Solution Explorer: The Solution Explorer provides you with an organized view of your projects and their files, as well as ready access to the commands associated with them. 솔루션 탐색기를 사용하면 대규모 엔터프라이즈 프로젝트 작업이 훨씬 용이해집니다.With Solution Explorer, it is easier to work with big enterprise projects. 솔루션 및 프로젝트를 참조하세요.See Solutions and Projects.

  • 팀 탐색기: 팀 탐색기를 통해 GIT 또는 TFS 리포지토리로 프로젝트를 관리하면 팀 공동 작업에 도움이 됩니다.Team Explorer: With Team Explorer you can manage your projects with GIT or TFS repositories to facilitate team collaboration. 팀 탐색기에서 작업을 참조하세요.See Work in Team Explorer.

  • NuGet: Visual Studio 및 Blend for Visual Studio 둘 다에서 NuGet 패키지를 관리할 수 있습니다.NuGet: You can manage NuGet packages in both Visual Studio and Blend for Visual Studio. NuGet은 솔루션에서 패키지 설치 및 제거를 간소화하는 .NET Framework 패키지 관리자입니다.NuGet is a package manager for the .NET Framework that simplifies the installation and removal of packages from a solution.

Blend for Visual Studio의 고급 기능Advanced Capabilities in Blend for Visual Studio

생산성을 향상시키려면 다음과 같은 작업에 Blend for Visual Studio를 사용하는 것이 좋습니다.To increase your productivity, consider using Blend for Visual Studio for the following tasks. 이러한 영역에 대해 Blend for Visual Studio는 Visual Studio 디자이너나 코드를 단독으로 사용할 때보다 빠른 속도와 더 많은 기능을 제공합니다.These are the areas where Blend for Visual Studio offers more speed and functionality than the Visual Studio designer or code alone.

대상To Visual StudioVisual Studio Blend for Visual StudioBlend for Visual Studio 추가 정보More information
애니메이션 만들기Create animations 애니메이션을 만들 수 있는 디자인 도구가 없습니다. 프로그래밍 방식으로 애니메이션을 만들어야 합니다.There is no design tool for animations; you have to create them programmatically. 따라서 WPF의 애니메이션, 타이밍 시스템 및 광범위한 코딩 전문 기술을 이해하고 있어야 합니다.This requires an understanding of the animation and timing system in WPF and extensive coding expertise. 애니메이션을 시각적으로 만들고 Blend for Visual Studio에서 미리 볼 수 있습니다.You create animations visually and can preview them in Blend for Visual Studio. 코드로 애니메이션을 빌드하는 것보다 더 빠르고 정확합니다.This is faster and more accurate than building your animations in code. 사용자 상호 작용을 처리하는 트리거를 추가하고 이벤트 처리기 및 기타 기능을 추가하는 코드로 전환할 수 있습니다.You can add triggers to handle user interaction, and you can switch to code to add event handlers and other functionality. 개체에 애니메이션 적용Animate objects
보다 쉽게 조작할 수 있도록 도형 및 텍스트를 패스로 변환Turn shapes and text into paths for easier manipulation 지원되지 않습니다.Not supported. 도형을 패스(더 우수한 편집 컨트롤 제공)로 변환하여 도형(예: 사각형 및 타원)에 대해 미세하거나 큰 변경을 수행할 수 있습니다.You can make subtle or dramatic changes to shapes (such as rectangles and ellipses) by converting them to paths, which provide better editing control. 패스 모양을 변경하거나 패스를 결합하고 여러 도형에서 복합형 패스를 만들 수 있습니다.You can reshape or combine paths, and create compound paths from multiple shapes.

또한 텍스트 블록을 패스로 변환하여 벡터 이미지로 조작할 수 있습니다.You can also convert text blocks into paths to manipulate them as vector images.
도형 및 패스 그리기Draw shapes and paths
UI 디자인에 대화형 작업 추가Add interactivity to your UI designs C#, Visual Basic 또는 C++ 코드가 필요합니다.Requires C#, Visual Basic, or C++ code. 정적 디자인에 대화형 작업을 추가하려면 동작을 컨트롤에 끌어다 놓습니다.Drag and drop behaviors onto controls to add interactivity to your static designs. 동작은 끌어서 놓기, 확대/축소 및 시각적 상태 변경 등의 기능을 캡슐화하는, 즉시 사용 가능한 코드 조각입니다.Behaviors are ready-to-use code snippets that encapsulate functionality such as drag/drop, zoom, and visual state changes. 선택할 수 있는 동작 집합이 계속 추가되고 있으며, 자신만의 동작을 만들 수 있습니다.There's a growing set of behaviors you can choose from, and you can create your own.

그런 다음 Blend for Visual Studio에서 해당 속성을 변경하거나 코드에서 이벤트 처리기를 추가하여 각 동작을 사용자 지정할 수 있습니다.You can then customize each behavior by changing its properties in Blend for Visual Studio or by adding event handlers in code.
컨트롤을 삽입하고 해당 동작을 수정Insert controls and modify their behavior
Adobe 아트워크 사용Use Adobe artwork 지원되지 않습니다.Not supported. Adobe FXG, PhotoShop, Illustrator 아트워크를 가져오고 Blend for Visual Studio에서 UI를 구현합니다.Import Adobe FXG, PhotoShop, or Illustrator artwork and implement the UI in Blend for Visual Studio. 이미지, 비디오 및 오디오 클립 삽입Insert images, videos, and audio clips
컨트롤, 템플릿 및 스타일 편집Edit controls, templates, and styles 코딩 및 WPF 스타일, 템플릿에 대한 지식이 필요합니다.Requires coding and knowledge of WPF styles and templates. 모든 이미지를 컨트롤로 변환합니다.Turn any image into a control.

템플릿 편집 도구를 사용하여 몇 번의 마우스 클릭만으로 컨트롤, 스타일 및 템플릿을 변경할 수 있습니다.Use the template editing tools to make changes to controls, styles, and templates with just a few mouse clicks.

예를 들어 Blend for Visual Studio 스타일 리소스를 사용하여 단추, 목록 상자, 스크롤 막대, 메뉴 등과 같은 공용 WPF 컨트롤을 구현하고 Blend for Visual Studio에서 해당 색, 스타일 또는 기본 템플릿을 직접 변경할 수 있습니다.For example, you can use Blend for Visual Studio style resources to implement common WPF controls (such as buttons, list boxes, scroll bars, menus, etc.), and change their color, style, or underlying template directly in Blend for Visual Studio. 그런 다음 원하는 경우 마무리 작업을 위해 코드로 전환할 수 있습니다.You can then switch to code for finishing touches if you want.
개체 스타일 수정Modify the style of objects
데이터에 UI 연결Connect your UI to data SQL Server 데이터베이스, WCF 또는 웹 서비스, 개체 또는 SharePoint 목록 등의 리소스에서 데이터 소스를 만들고 UI 컨트롤에 데이터 소스를 바인딩할 수 있습니다.You can create a data source from resources such as SQL Server databases, WCF or web services, objects, or SharePoint lists, and bind the data source to your UI controls.

대화형 디자인 환경의 경우 디자인 타임 데이터는 직접 만들어야 합니다.Design-time data must be created by hand for an interactive design experience.
프로토타입 및 테스트에 쉽게 예제 데이터를 만듭니다.Create sample data easily for prototyping and testing. 준비가 끝나면 라이브 데이터로 전환합니다.Switch to live data when you're ready.

Blend for Visual Studio의 데이터 생성 기능은 매우 우수한 기능으로(즉시 이름, 숫자, URL 및 사진을 쉽게 추가할 수 있음) 시간을 대폭 절약하도록 도와줍니다.Blend for Visual Studio's data generation capabilities are outstanding (you can add names, numbers, URLs, photos easily on the fly), and can save you a lot of time.

라이브 데이터의 경우 UI 컨트롤을 XML 파일이나 모든 CLR 데이터 소스에 바인딩할 수 있습니다.For live data, you can bind your UI controls to an XML file or to any CLR data source.
데이터 표시Display data

고급 XAML 디자인에 대한 자세한 내용은 다음을 참조하세요.For more information about advanced XAML design, see . Blend for Visual Studio를 사용하여 UI 만들기Creating a UI by using Blend for Visual Studio