Share via

아트보드에 콘텐츠 만들기

  • 아티클

SketchFlow 맵 패널에서 새 화면을 프로토타입 프로젝트에 추가한 다음 디자인 창의 아트보드에 콘텐츠를 만들 수 있습니다.

개별 화면에 집중할 때 Expression Blend에서 사용할 수 있는 벡터 그래픽 그리기 도구로 그리거나 Photoshop에서 파일을 가져와, 원하는 경우 레이어, 벡터 마스크 및 텍스트를 보존할 수 있습니다. 또한 사용자 인터페이스(UI) 컨트롤 그림을 프로토타입의 일부분으로 사용하고, 즉시 다시 사용 가능한 구성 요소를 만들 수 있습니다. 또한 Windows Presentation Foundation (WPF) 및 Microsoft Silverlight에 사용할 수 있는 다양한 실제 UI 컨트롤에 액세스할 수 있습니다.

Ee341385.c5da9dd8-4356-4803-aab0-64635bf9866b(ko-kr,Expression.40).png

Ee341385.25182a96-9a69-478a-9cfe-5b360e6a9bea(ko-kr,Expression.40).png

아트보드
Ee341385.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(ko-kr,Expression.40).png

SketchFlow 맵 패널

연결되지 않은 새 화면 만들기

  1. SketchFlow 맵 패널의 아무 곳을 마우스 오른쪽 단추로 클릭한 후 다음 중 하나를 클릭합니다.

    • 화면 만들기

    • 구성 요소 화면 만들기

    [!참고]

    새 화면을 기존 화면에 연결하려면 새 화면을 클릭한 후 새 화면을 연결할 화면으로 끌어 놓습니다.

  2. 새 화면에서 어떤 것을 그리려면 SketchFlow 맵 패널에서 노드를 두 번 클릭하여 연결된 문서 탭을 선택합니다.

SketchFlow 맵 패널에서 새 화면을 만들고 작업하는 방법에 관한 자세한 내용은 응용 프로그램 흐름 만들기를 참조하십시오.

개체

Expression Blend에서 개체란 아트보드에 추가할 수 있는 모든 항목을 가리킵니다. 즉, 아트보드에 시각적 요소를 추가하면 해당 요소는 응용 프로그램의 개체가 됩니다.

도구 패널 또는 자산 패널에서 도구를 선택하거나 자산 패널에서 스타일이 적용된 컨트롤 또는 사용자 지정 컨트롤을 선택하여 아트보드에 개체를 추가할 수 있습니다. 또한 리소스 패널의 스타일이 적용된 컨트롤이나 리소스 패널의 리소스를 아트보드의 기존 개체에 끌어 놓는 방식으로 개체 속성 중 하나에 리소스를 적용할 수 있습니다. 또한, Windows 탐색기에서 이미지, 사운드 파일, 비디오 파일 및 기타 미디어를 Expression Blend으로 직접 끌어 놓거나 다른 응용 프로그램에서 이미지를 복사해서 아트보드에 직접 붙여 넣을 수 있습니다.

개체 사용에 대한 자세한 내용은 개체 및 컨트롤 사용을 참조하십시오.

컨트롤

컨트롤은 사용자 상호 작용 또는 입력을 활성화하는 개체 형식입니다. Expression Blend은 WPF 및 Silverlight 프로토타입을 디자인하는 데 사용할 수 있는 확장 컨트롤 목록을 제공합니다.

응용 프로그램 모양 대신 대화형 디자인 검토에서 마무리된 UI 요소를 배제할 수 있으므로, SketchFlow는 모든 기능을 유지하면서 표준 컨트롤을 손으로 스케치한 형태로 만들어주는 일련의 스타일도 포함하고 있습니다. 자산 패널에서 스타일을 클릭합니다.

Expression Blend의 컨트롤 사용에 대한 자세한 내용은 대화형 컨트롤 선택 및 사용을 참조하십시오.

SketchFlow 애니메이션

SketchFlow 프로토타입에서 SketchFlow 애니메이션을 사용하여 검토자가 특정 UI 부분이 있을 수 있는 여러 상태를 가시화하는 데 도움을 줄 수 있습니다. 이러한 애니메이션을 사용하여 화면과의 상호 작용이 어떻게 이루어지는지 나타낼 수 있습니다. 또한 지정된 화면에 대한 다른 디자인 대안을 보유할 경우에도 사용할 수 있습니다.

SketchFlow 애니메이션 사용에 대한 자세한 내용은 대화형 작업 추가를 참조하십시오.

동작

Expression Blend은 코드를 알거나 작성할 필요 없이 아트보드의 디자인 요소에 프로덕션 품질의 대화형 작업을 쉽게 적용할 수 있도록 하는 다시 사용 가능한 코드 블록인 동작을 포함합니다. Expression Blend에서 미리 패키지화된 일부 동작을 제공하지만 사용자 지정 동작을 추가할 수도 있습니다. 개발자는 디자이너가 아트보드의 디자인 요소에 쉽게 적용할 수 있는 사용자 지정 동작을 제공할 수 있습니다.

Expression Blend의 동작 사용에 대한 자세한 내용은 대화형 작업 추가를 참조하십시오.

확대/축소 및 이동

마우스 휠이 있는 마우스를 사용할 경우 CTRL 키를 누른 상태에서 마우스 휠을 돌려 아트보드에서 확대/축소할 수 있습니다.

또한 스페이스바를 누른 상태에서 마우스를 끌어 아트보드와 아트보드에 포함된 모든 요소를 끌어 놓을 수 있습니다. 또한 스페이스바를 누른 상태에서 응용 프로그램 흐름도를 끌어 창의 아무 곳으로나 해당 다이어그램을 끌어 놓을 수 있습니다.

주석

아트보드에 개체 및 컨트롤을 만들고 수정하는 것 외에도 주석을 사용하여 아트보드에 설명 및 참고 정보를 남길 수 있습니다. 또한 화면의 개체에 주석을 직접 첨부할 수 있습니다. Microsoft Visual Studio에서 SketchFlow 프로젝트를 열면 디자인 타임 주석이 표시됩니다.

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

Copyright ⓒ 2011 by Microsoft Corporation. All rights reserved.