대화형 작업 추가

  • 아티클

대화형 작업(사용자와 응용 프로그램 간의 상호 작용)을 모델링하면 사용자가 응용 프로그램과 상호 작용하는 다양한 방법을 시연할 수 있습니다. Microsoft Expression Blend에서는 프로토타입의 대화형 동작을 시연하는 다양한 도구를 제공합니다. 예를 들어 다음 작업 중 하나를 수행할 수 있습니다.

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

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

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

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

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

애니메이션

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

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

키 프레임 애니메이션

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

Expression Blend에서 애니메이션을 만드는 방법에 대한 자세한 내용은 개체에 애니메이션 적용을 참조하십시오.

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

SketchFlow 애니메이션

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

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

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

Ee341387.df44ecfb-df4c-40c8-aefb-16243eeea90b(KO-KR,Expression.30).pngEe341387.02c55e22-17c4-404d-90a4-2fd308993ad7(KO-KR,Expression.30).pngEe341387.9cd3432b-4dd3-4751-80d3-28bfc57f73b3(KO-KR,Expression.30).pngEe341387.914aa328-b7ca-4484-82a6-b6a5b8c24d84(KO-KR,Expression.30).pngEe341387.fba8a139-19c5-4a84-b0d2-1bce67266301(KO-KR,Expression.30).png

이 SketchFlow 애니메이션 만들기

  1. 애니메이션을 추가할 화면을 엽니다. SketchFlow 애니메이션 패널에서 새 SketchFlow 애니메이션Ee341387.d68c6600-ebf7-4b74-8416-6179ce5ad38e(KO-KR,Expression.30).png을 클릭하여 새 SketchFlow 애니메이션을 만듭니다. 그러면 새 프레임이 SketchFlow 애니메이션 패널에 나타납니다.

    [!참고]

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

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

  2. 첫 번째 프레임에서 상태 추가Ee341387.46bc69ec-93a3-4f56-a3d2-9de601ada74d(KO-KR,Expression.30).png를 클릭하여 새 프레임을 추가합니다.

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

    Ee341387.9cd3432b-4dd3-4751-80d3-28bfc57f73b3(KO-KR,Expression.30).png

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

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

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

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

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

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

SketchFlow 애니메이션 도구 모음

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

Ee341387.1afe5d56-20d8-400a-b643-13577ae593cd(KO-KR,Expression.30).png

첫 프레임으로 이동합니다.
Ee341387.0272e62e-0ad4-43ab-b0ac-f0767907e63b(KO-KR,Expression.30).png

애니메이션을 재생합니다.
Ee341387.d2d47333-c15d-4aa0-9633-95f39cb96ae0(KO-KR,Expression.30).png

시간 편집기를 고정합니다.
Ee341387.1ebe2b0a-5891-47f3-be05-fa90157b9312(KO-KR,Expression.30).png

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

자세한 내용은 레이아웃 변경 간 매끄러운 전환을 참조하십시오.
Ee341387.3308f172-fdae-40f8-ba84-17b679e94134(KO-KR,Expression.30).png

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

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

단일 화살표를 사용하여 스토리보드를 만들거나 삭제하거나 닫습니다.
Ee341387.c83900c7-5245-4075-8cbf-99e9015f234b(KO-KR,Expression.30).png

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

시각적 상태

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

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

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

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

Ee341387.c91a4238-54c4-43ac-b09b-3407eaf58d4e(KO-KR,Expression.30).png

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

시각적 상태에 대한 자세한 내용은 컨트롤에 대해 다른 시각적 상태 정의를 참조하십시오.

Behavior

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

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

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

자세한 내용은 개체에 동작 추가를 참조하십시오.

탐색 및 상태 변경

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

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

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

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

예제 데이터

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

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