Windows 앱
콘텐츠의 테이블 축소
콘텐츠의 테이블 확장

Blend for Visual Studio 2013을 사용하여 Windows 스토어 앱 디자인

Blend for Visual Studio는 Visual Studio 2013에 포함된 디자인 도구 컬렉션으로, 이를 통해 JavaScript, VB, C# 또는 C++를 사용하여 빌드된 Windows 스토어 앱을 시각적으로 빌드할 수 있습니다.

Blend는 Visual Studio를 설치할 때 설치됩니다. Blend를 찾으려면 검색 상자에 Blend를 입력합니다.

Visual Studio 내에서 Blend의 프로젝트도 열 수 있습니다. Visual Studio에서 프로젝트를 열고 다음 작업 중 하나를 수행합니다.

  • 보기 메뉴에서 Blend에서 열기를 클릭합니다.

  • 솔루션 탐색기의 프로젝트 파일을 마우스 오른쪽 단추로 클릭한 다음 Blend에서 열기를 클릭합니다.

    Visual Studio의 Blend에서 열기 명령

JavaScript를 사용하여 빌드된 Windows 스토어 앱의 경우, Blend에는 CSS3 애니메이션을 빠르게 만들고, 스타일을 정의 및 관리하며, HTML 및 CSS를 디버그하는 등의 작업을 수행할 수 있도록 하는 HTML5 및 CSS3 도구 모음이 포함되어 있습니다. 자세한 내용은 이 문서 뒷부분의 "Windows 스토어 앱 디자인(HTML)"을 참조하십시오.

Blend로 첫 HTML Windows 스토어 앱을 만들려면 Blend를 사용하여 첫 Windows 스토어 앱 만들기, 1부: 마스터 페이지(HTML 및 JavaScript)를 참조하십시오.

VB, C# 또는 C++를 사용하여 빌드된 Windows 스토어 앱의 경우, Blend에는 스타일을 컨트롤에 빠르게 적용하고, 템플릿을 만들고 정의하며, 샘플 데이터에 바인딩하는 등의 작업을 돕는 XAML 도구 모음이 포함되어 있습니다. 자세한 내용은 이 문서 뒷부분의 "Windows 스토어 앱 디자인(XAML)"을 참조하십시오.

Blend로 첫 HTML Windows 스토어 앱을 만들려면 Blend를 사용하여 첫 Windows 스토어 앱 만들기, 1부: 마스터 페이지(XAML 및 C#)를 참조하십시오.

Blend의 새로운 기능에 대한 자세한 내용은 Visual Studio 블로그HTML 개발자를 위한 Blend for Visual Studio 2013의 새로운 기능Windows 스토어 XAML 앱 작성을 위한 Visual Studio 2013 Preview의 새로운 기능을 참조하십시오.

Visual Studio는 개발자 라이선스 관리, 매니페스트 디자이너, 사용자 응용 프로그램을 Windows 스토어에 제출할 수 있도록 해 주는 코딩 및 패키지 도구를 비롯한 Windows 스토어 앱 개발을 위한 필수 도구를 제공합니다.

Blend를 Visual Studio와 함께 사용함으로써 Blend의 강력한 HTML 및 XAML 디자인 도구로 보다 빠르고 쉽게 응용 프로그램 모양을 사용자 지정할 수 있습니다. 코드의 구문에 집중하는 대신 구조, 레이아웃, 데이터 뷰, 응용 프로그램의 모양과 느낌을 비롯하여 응용 프로그램을 시각적, 상향식으로 빌드하는 데 집중할 수 있습니다.

권장 워크플로와 모범 사례를 포함하여 Blend와 Visual Studio를 함께 사용하는 데 대한 자세한 내용은 Visual Studio로 전환 후 다시 돌아오기를 참조하십시오.

Visual Studio의 Blend에서 만든 Windows 스토어 앱을 열고 편집할 수 있는 것과 마찬가지로, Blend의 Visual Studio에서 만든 Windows 스토어 앱 프로젝트를 열고 편집할 수 있습니다.

프로젝트에서 작업하는 동안 Blend 및 Visual Studio 간에 간단히 전환할 수 있습니다. Visual Studio에서 Blend로 전환하려면, 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭한 다음 Blend에서 열기를 클릭합니다. Blend에서 Visual Studio로 전환하려면, 프로젝트 패널에서 프로젝트를 마우스 오른쪽 단추로 클릭한 다음 Visual Studio에서 편집을 클릭합니다.

팁

한 컴퓨터에서 동일한 프로젝트 파일을 Blend 및 Visual Studio 모두에서 동시에 열 수 있습니다. 한 도구에서 파일의 변경 내용을 저장한 다음 다른 도구로 전환할 때는 가장 최신 버전의 프로젝트를 볼 수 있도록 파일을 다시 로드할지 묻는 메시지가 표시됩니다.

Blend를 통해 기본 제공 HTML 프로젝트 템플릿 중 하나를 사용하여 새 Windows 스토어 앱을 만들거나 Visual Studio에서 만든 기존 Windows 스토어 앱을 열 수 있습니다. HTML5, CSS3 및 JavaScript를 사용하여 빌드된 Windows 스토어 앱은 네이티브 Windows 앱과 마찬가지로 기본 플랫폼에 직접 액세스할 수 있으며 다른 응용 프로그램과 정보를 공유할 수 있습니다.

강력한 HTML5 및 CSS3 디자인 도구 집합을 사용하여 응용 프로그램 모양을 빠르게 수정할 수 있습니다. 이 도구 집합으로 다음을 수행할 수 있습니다.

  • HTML 요소 만들기 및 수정   자산 패널에서 아트보드로 HTML 요소 및 Windows 앱 컨트롤을 끌어서 놓은 다음 계층 구조 수정, 속성 설정, UI에 직접 스타일 적용을 수행합니다. 항목 템플릿 만들기 및 스타일 지정을 참조하십시오.

  • 런타임 상태 보기   대화형 모드를 사용하여 액세스한 다음 런타임에만 사용할 수 있는 상태에서 응용 프로그램을 수정합니다. 대화형 모드 사용을 참조하십시오.

  • 디자인 타임 데이터 표시   Windows 스토어 앱의 데이터에 바인딩하고 이 데이터를 표시함으로써 런타임에 데이터의 모양을 보다 쉽게 수정할 수 있습니다. 동영상 데이터에 바인딩을 참조하십시오.

  • 사용자 지정 글꼴 포함   글꼴 패밀리 관리자를 사용하여 Windows 스토어 앱에 사용자 지정 글꼴을 포함시킵니다. 자세한 내용은 사용자 지정 글꼴 포함를 참조하세요.

  • CSS3 애니메이션 만들기   기본 제공 키 프레임 애니메이션 타임라인을 사용하여 CSS3 애니메이션을 만들고 편집합니다.

  • 스타일 정의 및 관리   스타일 규칙 패널을 사용하여 CSS 스타일을 빠르게 만든 다음 CSS 속성 패널을 사용하여 스타일 정의를 적용하거나, 요소의 CSS 계단식 배열을 보거나(최우선 속성 가상 규칙), Windows 8.1에서 각 요소의 CSS 속성 값을 계산하는 방법을 결정합니다(계산된 값 가상 규칙). CSS 스타일 규칙 정의를 참조하십시오.

  • HTML 및 CSS 디버그    결과 패널에 표시된 오류를 식별하고 해결하여 HTML 및 CSS를 Blend에서 직접 시각적으로 디버그합니다.

Blend에서 JavaScript로 빌드한 Windows 스토어 앱을 디자인할 때 사용할 수 있는 새로운 기능에 대한 자세한 내용은 Visual Studio 블로그를 참조하십시오.

Blend를 통해 기본 제공 XAML 프로젝트 템플릿 중 하나를 사용하여 새 Windows 스토어 앱을 만들거나 Visual Studio에서 만든 기존 Windows 스토어 앱을 열 수 있습니다. XAML 그리고 VB, C# 또는 C++를 사용하여 빌드된 Windows 스토어 앱은 네이티브 Windows 앱과 마찬가지로 기본 플랫폼에 직접 액세스할 수 있으며 다른 응용 프로그램과 정보를 공유할 수 있습니다.

강력한 XAML 디자인 도구 집합을 사용하여 응용 프로그램 모양을 빠르게 수정할 수 있습니다. 이 도구 집합으로 다음을 수행할 수 있습니다.

  • 사용자 지정 레이아웃 디자인   템플릿, 기본 제공 컨트롤, 눈금자, 안내선 및 맞춤 해상도 지원을 비롯한 강력한 레이아웃 도구를 사용하여 Windows 스토어 앱의 사용자 지정 레이아웃을 디자인합니다. 데이터 뷰 스타일 지정을 참조하십시오.

  • 컨트롤 만들기 및 스타일 지정   디자인 화면에 컨트롤을 끌어서 놓은 다음 UI에서 직접 속성을 수정하여 해당 컨트롤의 스타일을 지정합니다. 이미지 및 요소 스타일 지정을 참조하십시오.

  • 컨트롤 템플릿 작성 및 편집   템플릿 편집 도구를 사용하여 프로젝트 전반에 걸쳐 다시 사용할 수 있는 사용자 지정 컨트롤 템플릿을 작성합니다. 이들 템플릿을 현재 프로젝트를 벗어나 프로젝트에서 다시 사용하려면 컨트롤 라이브러리에 추가해야 합니다. 이미지를 사용자 정의 컨트롤로 만들기를 참조하십시오.

  • 데이터 템플릿 작성 및 편집   응용 프로그램에 데이터가 표시되는 방식을 정의하는 템플릿을 작성합니다. 데이터 바인딩 만들기 및 스타일 지정을 참조하십시오.

  • 샘플 및 디자인 타임 데이터 표시   Windows 스토어 앱의 데이터에 바인딩하고 이 데이터를 표시함으로써 런타임에 데이터의 모양을 보다 쉽게 수정할 수 있습니다. DataContext 설정을 참조하십시오.

  • 동작을 사용하여 대화형 작업 추가   기본 제공 동작을 디자인 화면의 개체로 끌어 필요에 맞게 속성을 수정하여 응용 프로그램에 대화형 작업을 추가합니다. 기본 제공 동작 추가를 참조하십시오.

  • XAML 태그 편집   코드를 건드리지 않고 간단히 XAML을 작성 및 수정할 수 있도록 하는 UI 도구에 추가로, Blend에서도 빠르고 쉽게 XAML 태그에 직접 변경 사항을 적용할 수 있도록 하는 강력한 XAML 편집기 기능을 제공합니다. 자세한 내용은 Blend에서 XAML 디버그를 참조하세요.

Blend에서 C#, C++ 및 VB로 빌드한 Windows 스토어 앱을 디자인할 때 사용할 수 있는 새로운 기능에 대한 자세한 내용은 Visual Studio 블로그를 참조하십시오.

Windows 개발자 센터에 있는 Blend 설명서에 추가로, 다음과 같이 Windows 스토어 앱 만들기 및 디자인을 시작하는 데 도움이 되는 다양한 리소스를 찾을 수 있습니다.

커뮤니티 추가 항목

표시:
© 2016 Microsoft