문서를 영문으로 보려면 영문 확인란을 선택하세요. 마우스 포인터를 텍스트 위로 이동시켜 팝업 창에서 영문 텍스트를 표시할 수도 있습니다.
번역
영문

대화형 작업 추가

대화식 작업(사용자와 응용 프로그램 간의 상호 작용)을 모델링 하면 사용자 응용 프로그램과 상호 작용할 수 있는 다양한 방법을 보여 줍니다. Blend for Visual Studio은 프로토타입의 상호 동작을 보여주기 위해 다양한 도구를 제공합니다. 예를 들어 다음 작업 중 하나를 수행할 수 있습니다.

  • 애니메이션을 사용하여 대화형 동작 시뮬레이션

  • 프로토타입의 요소에 탐색 기능 추가

  • 예제 데이터 및 데이터 바인딩을 사용해 데이터 기반 사용자 인터페이스의 프로토타입 만들기

  • 프로토타입의 요소에 동작 추가

SketchFlow 프로젝트에 대화형 작업을 추가하는 방법에 대한 자세한 내용은 SketchFlow으로 시작하기에서 확인하십시오.

애니메이션 효과가 적용된 시퀀스를 프로토타입에 추가하여 상호 작용을 시연하는 것이 유용한 경우가 있습니다. 개체 및 타임라인 패널에 있는 것과 같은 키 프레임 애니메이션 도구, 상태 패널 또는 SketchFlow 애니메이션 패널을 사용하여 애니메이션 효과가 적용된 간단한 시퀀스를 만들 수 있습니다.

상태 사용에 대한 자세한 내용은 이 항목 뒷부분의 "시각적 상태"를 참조하십시오.

Blend의 키 프레임 애니메이션 도구를 사용하여 SketchFlow 프로젝트의 모든 화면에서 애니메이션 효과가 적용된 시퀀스를 만들 수 있습니다. 키 프레임 애니메이션은 시각적 상태와 함께 사용하거나(예: 지정된 상태에 도달하면 애니메이션이 트리거됨) 독립적으로 사용할 수 있습니다(예: 특정 작업을 수행하면 애니메이션이 트리거됨).

Blend에서 애니메이션을 만드는 방법에 대한 자세한 내용은 Animating objects in your application을 참조하십시오.

WPF(Windows Presentation Foundation) 응용 프로그램에서는 이동 패스를 사용해 애니메이션 효과가 적용된 시퀀스를 만들 수도 있습니다. 자세한 내용은 Create, modify, or delete a motion path을 참조하십시오.

키 프레임 애니메이션은 매우 유용할 수도 있지만 동시에 매우 세밀해질 수 있으므로 프로토타입 프로젝트의 범위에는 포함되지 않습니다. SketchFlow 애니메이션은 SketchFlow 애니메이션 패널에서 쉽고 빠르게 만들 수 있는 스토리보드 스타일의 단계별 애니메이션입니다. 키 프레임 애니메이션 및 상태와 같이 SketchFlow 애니메이션을 통해서도 사용자 상호 작용을 시연할 수 있습니다.

SketchFlow 애니메이션에서는 SketchFlow 애니메이션 패널을 사용하여 새 프레임을 패널에 추가한 후에 아트보드에서 해당 프레임의 "장면"을 조정하는 방법으로 스냅숏 시퀀스를 만듭니다. 각 프레임 간의 전환 시간과 각 프레임의 확보 시간을 쉽게 조정할 수 있습니다. SketchFlow 애니메이션 패널에서 재생을 클릭하여 문서 창에서 애니메이션 시퀀스를 직접 재생할 수도 있고 F5 키를 눌러 프로젝트를 빌드 및 실행한 후에 SketchFlow 플레이어에서 애니메이션을 재생할 수도 있습니다.

다음은 SketchFlow 애니메이션의 예제입니다. 다음 프레임에서는 포인터가 오른쪽 아래에서 "Halo 2" 이미지로 이동하며, 빨간색 별을 사용하여 클릭 작업이 시뮬레이션됩니다. 그런 다음 "Halo 2" 이미지는 왼쪽으로 이동하고 포인터는 오른쪽으로 이동합니다.

df44ecfb-df4c-40c8-aefb-16243eeea90b 02c55e22-17c4-404d-90a4-2fd308993ad7 9cd3432b-4dd3-4751-80d3-28bfc57f73b3 914aa328-b7ca-4484-82a6-b6a5b8c24d84 fba8a139-19c5-4a84-b0d2-1bce67266301

이 SketchFlow 애니메이션 만들기

  1. 애니메이션을 추가할 화면을 엽니다. SketchFlow 애니메이션 패널에서 새 SketchFlow 애니메이션B4_SF_AddAnimationFrame 을 클릭하여 새 SketchFlow 애니메이션을 만듭니다. 그러면 새 프레임이 SketchFlow 애니메이션 패널에 나타납니다.

    참고 참고

    SketchFlow 애니메이션 패널이 표시되지 않으면 메뉴에서 SketchFlow 애니메이션을 클릭합니다.

    이 예제에서는 기준 상태(화면의 정상 상태)가 첫 프레임과 같습니다.

  2. 첫 번째 프레임에서 상태 추가B4_SF_AddAnimationFrameWhite를 클릭하여 새 프레임을 추가합니다.

  3. 이동할 개체를 선택하여 개체를 표시할 위치로 이동합니다. 이 예제에서는 포인터가 오른쪽 아래에서 "Halo"의 글자 "o"로 이동합니다.

    9cd3432b-4dd3-4751-80d3-28bfc57f73b3
  4. 필요에 따라 다음 작업 중 하나를 수행할 수 있습니다.

    • 확보 시간 편집   확보 시간 편집 대화 상자가 표시될 때까지 포인터를 프레임 위에 놓아 두면 프레임의 확보 시간(현재 상태가 표시되는 시간)을 수정할 수 있습니다. 프레임 안을 두 번 클릭하고 새 값을 입력하거나, 한 번 클릭하고 위쪽 화살표 또는 아래쪽 화살표 키를 사용하여 확보 시간을 늘리거나 줄일 수 있습니다.

    • 일시 중지 및 다시 시작   SketchFlow 애니메이션 패널에서 일시 중지 단추를 사용하여 애니메이션에 일시 중지 및 다시 시작 기능을 추가할 수 있습니다. 애니메이션이 일시 중지 및 다시 시작 기능이 추가된 프레임에 도달하면 일시 중지됩니다. SketchFlow 플레이어의 탐색 패널에서 애니메이션 제목을 클릭하면 애니메이션을 다시 시작할 수 있습니다.

      애니메이션 프레임 위에 포인터를 놓으면 확보 시간 편집 상자 옆에 일시 중지 단추가 나타납니다. 일시 중지 SketchFlow Animation Pause On icon단추를 클릭한 경우 확보 시간 편집 상자는 사용할 수 없습니다.



      애니메이션 프레임의 EditHoldTime 상자 및 일시 중지 단추

      SketchFlowAnimation Hold Time & Pause On button
    • 전환 시간 편집   프레임 사이에 전환 시간 편집 대화 상자를 클릭하면 프레임 간의 전환 시간(프레임 간의 전환이 완료되는 데 걸리는 시간)을 수정할 수 있습니다. 프레임 안을 두 번 클릭하고 새 값을 입력하거나, 한 번 클릭하고 위쪽 화살표 또는 아래쪽 화살표 키를 사용하여 전환 시간을 늘리거나 줄일 수 있습니다.

    • 전환 효과 전환 시간 0 보다 큰 경우 SketchFlow 애니메이션에 TransitionEffect 를 적용할 수 있습니다. SketchFlow 애니메이션 패널에서 TransitionEffectsTransition effect icon을 클릭한 다음에 TransitionEffect 드롭다운 목록에서 원하는 전환 효과 선택합니다. 또한 TransitionEffect의 전환 시간을 수정할 수도 있습니다.

      자세한 내용은 Apply a transition effect to a visual state change in Blend을 참조하십시오.

    • 감속/가속 함수   EasingFunction9718b395-a71d-40b2-9d08-8e29a225151f을 클릭한 다음 EasingFunction 드롭다운 목록에서 원하는 감속/가속 함수를 사용하여 기본 제공 EasingFunction을 적용할 수 있습니다.

  5. SketchFlow 애니메이션 만들기를 완료한 후에는 다음 작업 중 하나를 수행하여 애니메이션을 미리 볼 수 있습니다.

    • SketchFlow 도구 모음에서 재생을 클릭합니다.

      참고 참고

      SketchFlow 애니메이션에서 일시 중지 및 다시 시작 기능을 사용한 경우 SketchFlow 애니메이션 패널에서 애니메이션을 미리 볼 때 일시 중지 확보 시간이 1초로 바뀝니다.

    • 아트보드를 마우스 오른쪽 단추로 클릭하고 SketchFlow 애니메이션 재생을 클릭한 다음 재생할 애니메이션을 선택합니다.

    • F5 키를 눌러 프로젝트를 빌드 및 실행한 다음 SketchFlow 플레이어에서 애니메이션을 봅니다.

SketchFlow 애니메이션 도구 모음을 사용하여 SketchFlow 애니메이션 패널에서 다음 작업을 수행할 수 있습니다.

1afe5d56-20d8-400a-b643-13577ae593cd

첫 프레임으로 이동합니다.

0272e62e-0ad4-43ab-b0ac-f0767907e63b

애니메이션을 재생합니다.

d2d47333-c15d-4aa0-9633-95f39cb96ae0

시간 편집기를 고정합니다.

1ebe2b0a-5891-47f3-be05-fa90157b9312

유체 레이아웃을 설정하거나 해제합니다.

자세한 내용은 Transition between layout changes smoothly in Blend을 참조하십시오.

3308f172-fdae-40f8-ba84-17b679e94134

화살표를 사용하여 드롭다운 목록에서 SketchFlow 애니메이션을 엽니다.

더하기 기호를 사용하여 새 스토리보드를 추가합니다.

단일 화살표를 사용하여 스토리보드를 만들거나 삭제하거나 닫습니다.

c83900c7-5245-4075-8cbf-99e9015f234b

스크롤 막대를 사용하여 애니메이션 프레임 간을 이동합니다.

시각적 상태를 사용해 단일 화면에 여러 대체 디자인을 정의하는 방법으로도 프로토타입에서 대화형 작업을 시연할 수도 있습니다. 다음 예제를 비롯한 다양한 시나리오에서 단일 화면에 여러 상태를 지정해 프로토타입을 만드는 데 유용하게 사용할 수 있습니다.

  • 응용 프로그 화면에서 사용자의 로그인 여부에 따라 서로 다른 사용자 인터페이스(UI) 요소를 표시할 수 있습니다. 시각적 상태를 사용하여 해당 프로토타입에서 단일 화면의 두 가지 표시 옵션을 만들 수 있습니다: 하나는 사용자가 로그인, 다른 하나는 사용자가 로그인 하지 않은 상태. 프로토타입의 지정 된 화면에 대한 다른 설계 대안이 있을 수 있습니다. 이와 같이 같은 화면의 서로 다른 여러 대체 디자인에 대해 상태를 만들 수 있습니다.

  • 상태에는 애니메이션을 포함할 수 있으므로 같은 화면에 대해 서로 다른 여러 상태를 만들고 애니메이션을 포함할 수 있습니다. 이렇게 하면 애니메이션이 포함된 화면 상태를 표시하여 상태의 애니메이션을 트리거할 수 있습니다.

SketchFlow 플레이어에서 SketchFlow 프로젝트를 실행하면 상태가 탐색 패널에 별도의 명령으로 표시됩니다. 다음 그림에서는 전환이 상태 그룹이고 닫기열기가 화면에 대해 정의된 서로 다른 두 상태입니다.

c91a4238-54c4-43ac-b09b-3407eaf58d4e

명령을 사용하여 상태 간을 탐색할 수 있으므로 아트보드에서 만든 상태 간을 전환하는 트리거를 만들 필요가 없습니다.

시각적 상태에 대한 자세한 내용은 Defining different visual states for a control in Blend를 참조하십시오.

동작은 대화형 작업을 만들기 위해 요소에 빠르고 쉽게 적용할 수 있는 기본 제공 코드 요소입니다. 동작은 단추를 클릭하면 애니메이션이 시작되는 것처럼 이벤트가 발생하면 트리거되는 간단할 액션일 수도 있거나 여러 액션에 의해 트리거되는 여러 이벤트가 캡슐화된 것일 수도 있습니다.

동작은 프로토타입 빌드에 유용하게 사용할 수 있는 도구입니다. 예를 들어 화면에 컨트롤을 추가한 후에 해당 컨트롤에 동작을 적용할 수 있습니다. 그런 다음 F5 키를 눌러 프로젝트를 빌드 및 실행할 수 있으며, 그러면 동작을 추가한 컨트롤은 최종 응용 프로그램에서와 같이 화면에서 동작합니다.

기본 제공 SketchFlow 동작에는 뒤로앞으로 탐색이 포함되며, SketchFlow의 컨트롤에 적용할 수 있는 탐색 동작도 있습니다.

자세한 내용은 기본 제공 SketchFlow 동작 사용을 참조하십시오.

SketchFlow 플레이어에서 프로토타입을 볼 때는 탐색 패널을 사용하여 화면 간을 탐색하고 상태 변경을 트리거할 수 있습니다. 이 기능을 사용하면 프로토타입이 미완성 스케치 몇 장으로만 구성되어 있더라도 코드나 UI 요소를 추가할 필요 없이 프로토타입을 탐색할 수 있습니다.

또한 아트보드에 그린 UI 요소에 SketchFlow 동작을 빠르고 쉽게 추가할 수 있으므로 프로토타입에 추가한 애니메이션을 재생하거나 화면 간을 탐색할 수 있습니다.

컨트롤에 SketchFlow 애니메이션 재생 동작 추가

  • SketchFlow 애니메이션 재생 동작을 추가할 컨트롤을 마우스 오른쪽 단추로 클릭하고 SketchFlow 애니메이션 재생을 클릭한 다음 컨트롤을 클릭할 때 재생될 애니메이션을 클릭합니다.

대부분의 응용 프로그램은 데이터베이스를 통해 정보를 생성합니다. 그러나 프로토타입 생성에 사용할 실제 데이터가 없으면 데이터 기반 동작을 모델링하기가 어렵습니다. 이제 Blend에서는 예제 데이터 소스를 만든 후에 해당 데이터를 컨트롤에 바인딩할 수 있습니다. 프로토타입에서 예제 데이터를 사용해 실제 데이터 기반 사용자 시나리오의 동적 특성을 모방하는 데이터 기반 사용자 인터페이스를 모델링할 수 있습니다.

자세한 내용은 Creating sample data in Blend을 참조하십시오.

표시: