시각적 디자인과 XAML 및 코드 작성 비교

아티클
10/11/2017

디자인 작업을 하는 사람에게 XAML 마크업 또는 코드 편집은 매우 부담스러운 작업이 될 수 있습니다. Microsoft Expression Blend는 디자이너의 편리한 작업을 도울 수 있도록 설계되었습니다. Expression Blend의 디자인 보기에서 완전한 Windows Presentation Foundation (WPF) 기반 또는 Microsoft Silverlight 기반 응용 프로그램을 만들 수 있습니다. 또한 Microsoft Expression Design에서 내보낸 아트워크 자산과 XAML은 물론 Microsoft Expression Encoder에서 생성된 Silverlight 인코딩 템플릿도 가져올 수 있습니다.

Expression Blend는 팀으로 진행되는 개발 작업을 고려하여 설계된 제품입니다. 소프트웨어 팀은 UI(사용자 인터페이스) 작업을 하는 디자이너와 UI 뒤에서 실행되는 코드 작업을 하는 프로그래머로 구성되는 경우가 많습니다. 이를 고려하여 Expression Blend는 개발자에게 제공되는 최소한의 코드를 생성하는 기능과, 기존 컨트롤처럼 사용하여 기존 코드에 연결할 수 있게 해 주는 이벤트 처리기나 사용자 지정 컨트롤과 같은 기능을 갖추고 있습니다.

Expression Blend에서 수행할 수 있는 프로젝트 작업

WPF 기반 응용 프로그램(.exe), Silverlight 기반 응용 프로그램(.exe), 웹 사이트가 있는 Silverlight 기반 응용 프로그램 또는 컨트롤 라이브러리(.dll)의 프로젝트를 포함하는 솔루션을 만듭니다.
새 XAML(eXtensible Application Markup Language) 파일과 해당 코드 숨김 파일을 추가하여 응용 프로그램의 최상위 수준 창, 사용자 정의 컨트롤, 응용 프로그램 내에서 탐색 가능한 페이지 또는 다시 사용 가능한 스타일, 컨트롤 템플릿, 브러시 리소스 등이 있는 리소스 사전을 만들 수 있습니다.
프로젝트에 기존 파일을 추가하거나 이미지, XML, 비디오, 오디오, 라이선스, XAML 또는 코드 파일과 같은 기존 파일에 링크를 추가합니다.

.dll 파일에 있는 기존 사용자 지정 컨트롤에 참조를 추가합니다. 사용자 지정 컨트롤은 기존 원본 코드 파일(.vb 또는 .cs)에도 있을 수 있습니다. Expression Blend 프로젝트에 추가한 사용자 지정 컨트롤은 Expression Blend와 함께 기본적으로 제공되는 컨트롤을 사용할 때와 동일한 방법으로 사용할 수 있습니다.

.cs 파일에 있는 사용자 지정 컨트롤의 예는 실습 정보: 사용자 지정 속성으로 사용자 지정 컨트롤 만들기를 참조하십시오.

팁:
사용자 지정 컨트롤이 있는 원본 코드 파일을 Expression Blend 프로젝트에 추가한 경우 프로젝트를 빌드해야만 자산 패널의 컨트롤 범주에 컨트롤이 표시됩니다.

솔루션에 새 프로젝트 추가 Expression Blend WPF 프로젝트에 기존 프로젝트를 추가하거나 연결할 수 있습니다.
프로젝트에 있는 모든 파일을 엽니다. XAML 파일은 편집할 수 있도록 아트보드에서 열립니다. 사용 중인 문서에 이미지 파일을 삽입할 수 있으며 사운드/비디오 파일은 애니메이션 타임라인에서 열립니다. 코드 숨김 파일이 아트보드에서 텍스트 편집기를 통해 열립니다. 모든 파일은 해당 파일 형식에 맞는 외부 편집기에서 열 수 있습니다. 예를 들어 Expression Blend의 프로젝트 패널에서 .xml 파일을 두 번 클릭하면 메모장에서 파일이 열립니다. 코드 파일은 Expression Blend 텍스트 편집기에서 열리지만 Microsoft Visual Studio 2010 이 설치되어 있는 경우 필요에 따라 여기에서도 파일을 열 수 있습니다.

자세한 내용은 코드 숨김 파일 수정을 참조하십시오.
WPF 또는 Silverlight 응용 프로그램의 Visual Studio 2010 프로젝트나 솔루션을 열어 UI를 만듭니다.
응용 프로그램을 빌드(Ctrl+Shift+B)하거나 실행(F5 키)하여 디버그하고 결과 패널에 표시되는 오류 메시지를 확인하고 해결할 수 있습니다.
응용 프로그램에서 인스턴스화할 수 있는 사용자 지정 클래스의 코드 파일을 추가합니다.

실습 정보: 사용자 지정 속성으로 사용자 지정 컨트롤 만들기에서 예를 참조하십시오.
코드 파일을 편집합니다. Expression Blend의 프로젝트 패널에서 코드 파일을 두 번 클릭하면 파일은 아트보드에서 찾기 및 바꾸기 기능과 IntelliSense가 있는 텍스트 편집기를 통해 열립니다.

자세한 내용은 코드 숨김 파일 수정을 참조하십시오.

Expression Blend에서 코드를 사용하지 않고 만들 수 있는 작업

도구 상자에서 개체를 추가 및 변형하고 속성 패널에서 브러시 및 기타 속성을 통해 스타일을 지정하여 응용 프로그램의 모양(UI)을 디자인합니다.

자세한 내용은 다음 항목을 참조하십시오.
응용 프로그램의 개체에 애니메이션 효과를 적용합니다.

자세한 내용은 개체에 애니메이션 적용을 참조하십시오.
아트보드에 비디오 또는 오디오 파일을 추가한 후 프로젝트에서 해당 파일의 타임라인을 수정합니다.

자세한 내용은 이미지 및 아트 삽입 및 오디오 및 비디오 삽입을 참조하십시오.
단추를 클릭하거나 개체 위로 포인터를 이동하는 등의 사용자 작업에서 애니메이션 타임라인, 오디오 파일 및 비디오 파일을 트리거합니다.

자세한 내용은 이벤트에 응답하는 코드 작성을 참조하십시오.
자산 패널에서 사용 가능한 동작을 통해 응용 프로그램에 대화형 작업을 추가합니다. 동작은 개체로 끈 다음 속성을 변경하여 조정할 수 있는 패키지화된 코드의 일반적인 부분입니다.

자세한 내용은 동작 사용를 참조하십시오.
사용자 정의 컨트롤을 만들고 디자인합니다. 사용자 정의 컨트롤은 Expression Blend에서 만들 수 있는 프로젝트 형식의 하나로, Visual Studio 2010에서 개발된 사용자 지정 컨트롤과 동일한 방법으로 사용할 수 있습니다.

빈 사용자 컨트롤 만들기 및 기존 개체에서 사용자 정의 컨트롤 만들기에서 예를 참조하십시오.
기존 컨트롤의 모양을 사용자 지정한 다음 그 결과로 생성되는 스타일 템플릿을 동일한 형식의 다른 컨트롤에 적용합니다. 컨트롤 템플릿에 애니메이션을 추가할 수도 있습니다.

WPF 단순한 스타일에 대한 스타일 팁 및 공통 Silverlight 컨트롤의 스타일 지정 팁에 나와 있는 항목에서 예를 참조하십시오.
속성 패널에서 속성 이름을 클릭한 다음 새 리소스로 변환을 클릭하여 브러시 리소스처럼 다른 다시 사용 가능한 리소스를 만듭니다.

브러시 리소스 또는 색 리소스 만들기에서 예를 참조하십시오.
도구 메뉴의 옵션을 사용하여 단추 및 브러시 리소스로 개체를 변환하거나 3D 개체로 이미지를 변환합니다.

기존 개체에서 컨트롤 만들기 및 2D 이미지를 3D로 변환에서 예를 참조하십시오.
개체의 특성을 다른 속성에 포함된 값에 바인딩합니다. 이 작업은 슬라이더 막대에 해당하는 개체의 너비를 설정하는 등 여러 가지 작업에 유용합니다.

개체를 사용자 입력 값 또는 기타 내부 값에 바인딩에서 예를 참조하십시오.
개체의 속성을 XML 파일(WPF 전용) 또는 CLR(공용 언어 런타임) 개체와 같은 데이터 원본에 바인딩하거나 데이터 패널의 도구를 사용하여 생성할 수 있는 예제 데이터에 바인딩합니다.

자세한 내용은 데이터 표시를 참조하십시오.

코드를 사용해야만 수행할 수 있는 작업

사용자가 응용 프로그램의 UI 요소와 상호 작용할 때 이벤트 처리기에서 더욱 복잡한 동작을 정의합니다. 키 누름, 마우스 액션 등에 응답하도록 이벤트 처리기를 프로그래밍할 수 있습니다. 이 작업은 애니메이션 및 미디어에 대한 이벤트 트리거와는 다릅니다. 예를 들어 이벤트 처리기를 사용하면 수학 수식을 사용하여 응용 프로그램의 동작을 프로그래밍할 수 있습니다.

새 이벤트 처리기 메서드 만들기에서 예를 참조하십시오.

이벤트 목록은 컨트롤, 속성 및 이벤트 참조의 링크를 참조하십시오.
기존 컨트롤의 동작을 사용자 지정하거나 새 사용자 지정 컨트롤를 만듭니다.

WPF Button 컨트롤을 기반으로 하는 사용자 지정 컨트롤의 예는 실습 정보: 사용자 지정 속성으로 사용자 지정 컨트롤 만들기를 참조하십시오.
Microsoft SQL Server 데이터와 같은 데이터를 데이터 테이블에 로드하고 Expression Blend에서 사용할 수 있는 CLR 데이터 개체로 변환합니다.

실습 정보: 예제 SQL 데이터베이스의 데이터 표시에서 예를 참조하십시오.
값 변환기를 만들어 사용자 지정 논리를 데이터 바인딩에 추가합니다. 이 작업은 특정한 한 개체의 속성을 호환되지 않는 데이터 형식의 속성으로 바인딩하려는 경우 유용합니다.

실습 정보: 데이터 형식 변환에서 예를 참조하십시오.

Visual Studio 2010에서만 수행할 수 있는 작업

응용 프로그램이 실행되는 동안 한 줄씩 단계별로 응용 프로그램을 디버그합니다.

팁:
한 컴퓨터에서 동일한 프로젝트 파일을 Expression Blend 및 Visual Studio 2010에서 동시에 열 수 있습니다. 둘 중 한 시스템에서 파일을 변경하고 저장하면, 다른 시스템으로 전환할 때 파일을 다시 로드할 것인지 묻는 알림 메시지가 표시됩니다.

자세한 내용은 Visual Studio 2010에서 Expression Blend 응용 프로그램 디버깅을 참조하십시오.

Expression Blend에서 코드를 추가할 때 편리한 점

Expression Blend에서는 새 항목 추가 마법사를 사용하여 만드는 모든 XAML 파일에 대한 코드 숨김 파일을 필요에 따라 만들 수 있습니다. Expression Blend의 프로젝트 패널에서 코드 파일을 두 번 클릭하면 파일은 아트보드에서 찾기 및 바꾸기 기능과 IntelliSense가 있는 텍스트 편집기를 통해 열립니다.

자세한 내용은 코드 숨김 파일 수정을 참조하십시오.

Expression Blend는 속성 패널의 이벤트 보기 Cc294780.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(ko-kr,Expression.40).png 에서 이벤트를 두 번 클릭하면 빈 이벤트 처리기 메서드에 대한 코드를 생성합니다.

자세한 내용은 이벤트에 응답하는 코드 작성을 참조하십시오.

팁:
두 사람 이상의 작업자가 동시에 한 프로젝트를 사용해야 하는 경우에는 Microsoft Team Foundation과 같은 원본 제어 시스템을 사용하는 것이 좋습니다. 원본 제어 시스템은 프로젝트 파일의 중앙 리포지토리를 관리하며 사용자가 자신의 로컬 컴퓨터로 파일을 체크 아웃하여 편집할 수 있게 해 줍니다. 자세한 내용은 Team Foundation 원본 제어 사용을 참조하십시오.

두 사람 이상의 작업자가 동시에 한 프로젝트를 사용해야 하는 경우에는 Microsoft Team Foundation과 같은 원본 제어 시스템을 사용하는 것이 좋습니다. 원본 제어 시스템은 프로젝트 파일의 중앙 리포지토리를 관리하며 사용자가 자신의 로컬 컴퓨터로 파일을 체크 아웃하여 편집할 수 있게 해 줍니다. 자세한 내용은 Team Foundation 원본 제어 사용을 참조하십시오.

코드 작성에 대한 도움말 보기

Expression Blend 응용 프로그램의 코드 작성과 관련한 정보가 필요하면 학습 및 커뮤니티 리소스에 나와 있는 자료 중 하나를 참조하시기 바랍니다. 토론 포럼, 자습서 및 기타 리소스에 대한 링크를 포함합니다.

다음을 통해 공유