SketchFlow 개요

중요:
SketchFlow는 Expression Studio Ultimate에서만 사용할 수 있습니다.

SketchFlow는 대화형 응용 프로그램 및 대화형 콘텐츠의 프로토타입을 더 쉽고 빠르게 만들고 통신하며 검토하기 위해 특별히 디자인된 기능 집합입니다.

SketchFlow 프로토타입은 실제 Windows Presentation Foundation (WPF) 또는 Microsoft Silverlight 응용 프로그램입니다. 프로토타입의 초기 스케치만 가지고 있는 경우에도 프로토타입 프로젝트를 빌드하고 실행한 다음 프로토타입을 탐색할 수 있습니다.

SketchFlow 프로토타입은 작업 중인 프로젝트의 필요에 따라 단순하거나 복잡할 수 있습니다. 예를 들어 프로토타입은 참고 정보를 포함한 대략적인 스케치, 아트보드에 그려진 워크플로를 나타내는 몇 가지 참고 정보를 포함한 선형 슬라이드 시퀀스 또는 단일 화면(구성 요소 화면)의 다시 사용 가능한 요소와 화면 간 탐색(탐색 연결)을 포함하고 SketchFlow 맵 패널에 윤곽선이 표시된 복잡한 그래프일 수 있습니다.

SketchFlow는 프로덕션 응용 프로그램의 흐름을 더욱 세밀하게 모방하기 위해 프로토타입을 대화형으로 만드는 여러 가지 도구를 포함하고 있습니다. 예를 들어 SketchFlow로 다음 작업을 수행할 수 있습니다.

• 사이트 맵과 응용 프로그램 화면에 메모한 몇 가지 참고 정보로 프로토타입을 시작한 다음 진행하면서 프로토타입을 계속 개선합니다.

• UI(사용자 인터페이스) 요소를 그리거나 일반 그리기 프로그램에서 UI 요소를 가져옵니다.

• 프로토타입에 애니메이션 효과를 적용하여 사용자와 응용 프로그램 간 상호 작용의 시각적 표현을 만듭니다.

• 표준 UI 요소 및 사용자 지정 컨트롤의 전체 라이브러리를 사용합니다.

• 즉시 예제 데이터를 만들고 데이터 중심 UI를 쉽게 빌드하며 스타일을 데이터에 추가합니다.

• 기본 제공 동작을 사용하여 코드를 작성하지 않고 대화형 작업을 만듭니다. 동작은 확장 가능하며, 사용자 지정 동작을 프로토타입 도구 상자에 쉽게 추가할 수 있습니다.

• 코드를 작성하여 사용자 지정 요소를 만들거나 개발 팀에서 미리 빌드한 요소를 사용합니다.

아트보드

SketchFlow는 디자인의 두 가지 보기인 아트보드 및 SketchFlow 맵 패널을 제공합니다. 아트보드에는 Expression Blend에서 그리기 도구를 사용하여 그리거나 Adobe Photoshop에서 이미지를 가져오거나 WPF 및 Silverlight용 Expression Blend에서 제공하는 다양한 컨트롤을 사용할 수 있는 개별 화면 보기가 제공됩니다. 또한 상태를 사용하여 특정 요소의 다른 상태를 표시하거나 애니메이션을 사용하여 화면에 있는 요소와의 상호 작용을 나타낼 수 있습니다.

자세한 내용은 아트보드에 콘텐츠 만들기를 참조하십시오.

SketchFlow 맵 패널

SketchFlow에서 작업할 때 Expression Blend 응용 프로그램 아래쪽에 나타나는 SketchFlow 맵 패널에서 프로토타입의 구조를 쉽게 스케치할 수 있습니다. 다른 형식의 Expression Blend 프로젝트에서 작업할 때에는 이 패널이 나타나지 않습니다.

SketchFlow 맵 패널은 응용 프로그램 흐름의 시각적 표현으로서 첫 번째 화면에서 시작해서 마지막 작업까지 사용자의 상호 작용을 표시합니다.

자세한 내용은 응용 프로그램 흐름 만들기를 참조하십시오.

화면

프로토타입의 각 화면은 SketchFlow 맵 패널의 노드를 통해 나타납니다. 새 구성 요소 또는 탐색 화면을 쉽고 빠르게 만들 수 있습니다. 개별 화면을 나타내는 독립형 노드를 가질 수 있으며 개별 화면 간 연결을 나타내는 연결을 만들 수 있습니다.

SketchFlow에는 두 가지 형식의 화면인 일반 화면(종종 탐색 화면이라고 함) 및 구성 요소 화면이 있습니다. 일반 화면은 탐색할 수 있는 위치를 표시합니다. 구성 요소 화면은 여러 탐색 화면에서 다시 사용할 수 있는 기능 또는 콘텐츠 블록입니다(예: 메뉴 또는 재생 목록). SketchFlow 맵 패널에서 직접 또는 화면의 콘텐츠를 구성 요소로 만들어 구성 요소 화면을 만들 수 있습니다.

즉 SketchFlow 맵 패널에서 직접 새 구성 요소 화면, 구성 요소 연결, 탐색 화면 및 탐색 연결을 만들어 SketchFlow 맵 패널에서 응용 프로그램 탐색 및 구성을 직접 정의할 수 있습니다.

탐색 연결

탐색 연결은 화면 간 탐색을 표시합니다. 두 화면 간 탐색 연결은 응용 프로그램 사용자가 연결로 암시된 탐색을 사용하여 한 화면에서 다른 화면으로 직접 탐색할 수 있다는 의미입니다.

탐색 연결을 사용하여 SketchFlow 맵 패널에서 직접 응용 프로그램 흐름의 상위 수준 보기를 빠르게 만들 수 있습니다.

자세한 내용은 응용 프로그램 흐름 만들기를 참조하십시오.

구성 요소 연결

탐색 연결을 사용할 때처럼 SketchFlow 맵 패널에서 직접 구성 요소 연결을 만들 수 있습니다. 탐색 연결이 응용 프로그램 탐색을 나타내는 반면, 구성 요소 연결은 구성 요소가 연결된 탐색 화면에서 표시됨을 나타냅니다. 예를 들어 디자인에 머리글, 바닥글 및 탐색 모음과 같은 주요 페이지 요소가 있을 경우 이러한 요소를 아트보드에서 직접 그리거나 이러한 세 가지 주요 요소를 각각 나타내는 세 가지 구성 요소 노드를 만든 다음 프로젝트 전체에서 다시 사용할 수 있습니다.

자세한 내용은 응용 프로그램 흐름 만들기를 참조하십시오.

SketchFlow 애니메이션

SketchFlow 애니메이션 패널을 사용하여 화면에 대화형 요소를 나타내는 애니메이션을 쉽게 만들 수 있습니다. SketchFlow 애니메이션은 Expression Blend에서 제공하는 키 프레임 애니메이션 도구를 사용하는 방법을 모르는 경우에도 간단한 플립북 스타일의 애니메이션 시퀀스를 쉽고 빠르게 만들 수 있도록 도와줍니다.

자세한 내용은 대화형 작업 추가를 참조하십시오.

예제 데이터

Expression Blend에서는 라이브 데이터에 액세스할 필요 없이 데이터 중심 사용자 인터페이스를 쉽게 프로토타입으로 만들 수 있습니다. 데이터 패널을 사용하여 의미 있는 예제 데이터를 생성하거나 XML 파일에서 예제 데이터를 가져올 수 있습니다. 예제 데이터는 디자인 타임에 아트보드의 컨트롤에 사용할 수 있습니다. 예제 데이터 세부 정보를 광범위하게 사용자 지정할 수 있으며 런타임에 샘플 데이터 사용과 라이브 데이터 사용 간을 쉽게 전환할 수 있습니다.

자세한 내용은 예제 데이터 만들기를 참조하십시오.

SketchFlow 스타일

프로토타입을 만들 때 손으로 스케치한 것처럼 표현하려는 경우가 있습니다. SketchFlow는 응용 프로그램에 손으로 스케치한 느낌을 주는 WPF 및 Silverlight 표준 컨트롤에 대한 일련의 스킨을 제공합니다. 기본 도형을 사용하여 가지고 있는 사용자 지정 컨트롤에 대한 자신만의 스케치 모양 템플릿을 만들 수 있습니다. 프로토타입에서 SketchFlow 스타일을 사용하여 완성된 모양보다 응용 프로그램 흐름을 강조함으로써 검토자가 응용 프로그램의 그래픽 디자인보다 대화형 디자인에 집중할 수 있도록 합니다. 이렇게 하면 프로토타입이 디자인 단계 초기부터 너무 마무리가 잘된 상태로 보여서 예상을 잘못하거나 잘못된 사용자 의견을 도출하는 실수를 방지할 수 있습니다.

SketchFlow 플레이어

언제든지 응용 프로그램 흐름을 디자인할 때처럼 응용 프로그램 흐름을 재생하는 런타임 환경인 SketchFlow 플레이어에서 프로젝트를 빌드하고 실행한 다음 볼 수 있습니다.

SketchFlow는 프로토타입을 클릭하고 UI 내에서 상태를 변경하며 애니메이션을 실행하는 데 사용할 수 있는 독립형 플레이어에서 프로토타입을 실행하여 이를 가능하게 합니다. 또한 SketchFlow 플레이어를 사용하면 프로토타입을 검토자에게 배포하고 사용자 의견을 수집하는 작업을 쉽게 수행할 수 있습니다. 프로토타입에서 직접 설명을 그리고 추가할 수 있습니다. SketchFlow 플레이어에서 수집한 사용자 의견은 Expression Blend에서 볼 수 있으며, 여기서 디자이너는 의견을 평가하고 구현할 수 있습니다.

자세한 내용은 프로토타입 미리 보기를 참조하십시오.

주석 및 사용자 의견

주석은 SketchFlow 프로젝트에서도 사용할 수 있는 Expression Blend의 기능입니다. 주석 기능을 사용하여 본인 및 다른 사용자를 위한 참고 정보를 남기거나 디자인 보기에서 작업하면서 다른 팀 멤버의 사용자 의견을 추적할 수 있습니다. 현재 프로젝트를 간편하게 보기 위해 주석을 숨겼다가 검토할 때 다시 표시할 수 있습니다.

또한 검토자가 SketchFlow 플레이어에서 사용자 의견 패널을 사용하여 사용자 의견을 남길 수 있습니다. 사용자 의견은 .feedback 파일로 저장되고 나중에 디자이너에게 개별 파일로 전송될 수 있습니다.

주석에 대한 자세한 내용은 문서에 주석 추가를 참조하십시오.

사용자 의견에 대한 자세한 내용은 프로토타입에 대한 사용자 의견 보내기를 참조하십시오.

SharePoint에 게시

Expression Blend SketchFlow 프로젝트를 만든 후에는 Microsoft SharePoint 문서 라이브러리에 프로젝트를 게시할 수 있습니다. SketchFlow 프로젝트는 SharePoint 사이트에서 콘텐츠를 볼 수 있는 권한이 있는 모든 사용자가 사용할 수 있습니다.

검토자는 자신의 의견을 SharePoint 사이트에 게시하여 관련 사용자와 의견을 공유할 수 있습니다.

SharePoint에 게시하는 방법에 대한 자세한 내용은 SharePoint에 게시를 참조하십시오.

프로토타입 변환

Microsoft Office PowerPoint 프레젠테이션에서 SketchFlow 프로토타입을 만들 수 있습니다. 또한 Adobe Photoshop(.psd) 및 Adobe Illustrator(.ai) 이미지를 SketchFlow 프로토타입으로 가져올 수 있습니다. 언제든지 프로토타입에서 Microsoft Word 문서를 직접 만들 수 있습니다.

SketchFlow 프로젝트는 표준 Microsoft Visual Studio 솔루션이므로 Visual Studio에서 편집할 수 있습니다. 프로토타입이 승인된 후에는 프로토타입 파일에서 SketchFlow 데이터를 제거하여 프로토타입 프로젝트를 프로덕션 프로젝트로 변환할 수 있습니다. SketchFlow 데이터가 제거된 후에는 해당 프로젝트가 다른 Expression Blend 프로젝트와 동일한 방법으로 작동합니다.

자세한 내용은 프로토타입 변환을 참조하십시오.

결론

결론적으로 SketchFlow는 개념적 응용 프로그램을 쉽게 스케치하도록 도와줍니다. 먼저 일련의 화면을 만든 다음 그리기를 시작합니다. 아이디어가 발전함에 따라, 제공할 디자인 아이디어를 전달하는 데 필요한 만큼 완성된 제품과 근접하게 프로토타입을 만드는 대화형 요소를 추가할 수 있습니다. 검토자는 SketchFlow 플레이어를 사용하여 응용 프로그램 흐름을 본 다음 프로젝트에 직접 사용자 의견을 남길 수 있습니다. 사용자 의견이 통합되고 프로토타입이 완료된 후에는 프로토타입을 최종 Expression Blend 프로젝트로 변환하도록 개발자에게 전달할 수 있습니다.

Copyright ⓒ 2011 by Microsoft Corporation. All rights reserved.