SketchFlow 개요

  • 아티클

Microsoft Expression Blend는 대화형 응용 프로그램 및 대화형 콘텐츠의 프로토타입을 더 쉽고 빠르게 만들고 통신하며 검토하기 위해 특별히 디자인된 일련의 새로운 기능을 포함하고 있습니다. 이 기능 집합이 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 파일로 저장되고 나중에 디자이너에게 개별 파일로 전송될 수 있습니다.

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

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

프로토타입 변환

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 프로젝트로 변환하도록 개발자에게 넘길 수 있습니다.