응용 프로그램 흐름 만들기

  • 아티클

SketchFlow 맵 패널은 응용 프로그램의 구조, 흐름, 탐색 및 구성을 정의할 수 있는 그래프 편집기입니다.

SketchFlow 맵 패널을 사용하여 응용 프로그램 구조에 초점을 맞추고 아트보드를 사용하여 개별 화면 콘텐츠에 초점을 맞출 수 있습니다.

탐색 화면

프로토타입의 모든 화면은 SketchFlow 맵 패널에 있는 노드를 통해 나타납니다. 화면 간 탐색을 나타내는 탐색 연결을 사용하여 한 화면을 다른 화면에 연결할 수 있습니다. SketchFlow 플레이어에서 프로토타입을 실행할 때 탐색 노드 간 연결은 탐색 패널에서 화면 간 탐색을 시뮬레이션합니다.

또한 구성 요소 화면이 SketchFlow 맵 패널에 표시됩니다. 자세한 내용은 이 항목 뒷부분의 "구성 요소 화면"을 참조하십시오.

SketchFlow에서 화면 간 탐색을 정의하는 여러 가지 방법이 있습니다. SketchFlow 맵 패널의 기존 화면에서 새로 연결된 화면을 만들거나, SketchFlow 맵 패널에서 연결되지 않은 두 화면을 연결할 수 있습니다. 또는 화면의 개체를 마우스 오른쪽 단추로 클릭하고 바로 가기 메뉴의 탐색 명령을 사용하여 탐색을 정의할 수 있습니다.

응용 프로그램 흐름에 새로 연결된 탐색 화면 추가

  1. 새 SketchFlow 프로젝트를 만들 때 Screen 1.xaml이라는 새 파일이 만들어집니다. 이 파일은 SketchFlow 맵 패널에서 노드로, 그리고 프로젝트 패널에서 UserControl로 나타납니다.

    [!참고]

    새 SketchFlow 프로젝트를 열려면 프로토타입 프로젝트 만들기를 참조하십시오.

    SketchFlow 맵 패널의 왼쪽 위 모퉁이에 있는 첫 번째 노드(화면 1) 위로 포인터를 이동합니다.

    [!참고]

    SketchFlow 맵 패널이 나타나지 않으면 창 메뉴에서 SketchFlow 맵을 클릭하거나 SHIFT+F12를 누르십시오.

    해당 노드가 강조 표시되고 노드와 연결된 XAML 파일 이름이 도구 설명에 나타납니다. 또한 시각적 메뉴가 노드 아래쪽에 나타납니다.

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(KO-KR,Expression.30).png

  2. 시각적 메뉴의 왼쪽 아이콘 위로 포인터를 이동합니다. 아이콘을 끌기 시작합니다. 새 "고스트" 노드가 나타나며 포인터를 따라 갑니다.

  3. 새 화면 위치로 탐색 화면 아이콘 끌기 작업을 마칩니다. 기본적으로 "화면 2"라는 새 노드가 나타납니다.

    [!참고]

    노드를 마우스 오른쪽 단추로 클릭한 다음 이름 바꾸기를 클릭하거나, 노드를 클릭하고 SHIFT+F2를 누른 다음 노드에 새 이름을 직접 입력하여 이름을 변경할 수 있습니다.

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

노드 간 연결은 해당 노드 간 탐색을 의미합니다. 또한 탐색 연결이 정의되지 않은 탐색 노드를 만들 수 있습니다.

응용 프로그램 흐름에 연결되지 않은 새 탐색 화면 추가

  1. SketchFlow 맵 패널에서 마우스 오른쪽 단추를 클릭한 후 화면 만들기를 클릭합니다.

    [!참고]

    SketchFlow 맵 패널이 나타나지 않으면 창 메뉴에서 SketchFlow 맵을 클릭하거나 SHIFT+F12를 누르십시오.

    [!참고]

    노드를 마우스 오른쪽 단추로 클릭한 다음 이름 바꾸기를 클릭하거나, 노드를 클릭하고 SHIFT+F2를 누른 다음 노드에 새 이름을 직접 입력하여 이름을 변경할 수 있습니다.

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

    Ee341405.alert_tip(KO-KR,Expression.30).gif팁:

    또는 SketchFlow 맵 도구 모음에서 화면 만들기Ee341405.d63bd8e7-f302-48bb-a42e-119eb2fa06f8(KO-KR,Expression.30).png를 클릭합니다.

연결되지 않은 두 탐색 화면 연결

  1. SketchFlow 맵 패널에서 연결할 노드 위로 포인터를 이동합니다.

    [!참고]

    SketchFlow 맵 패널이 나타나지 않으면 창 메뉴에서 SketchFlow 맵을 클릭하거나 SHIFT+F12를 누르십시오.

    해당 노드가 강조 표시되고 노드와 연결된 XAML 파일 이름이 도구 설명에 나타납니다. 또한 시각적 메뉴가 노드 아래쪽에 나타납니다.

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(KO-KR,Expression.30).png

  2. 시각적 메뉴의 왼쪽에서 두 번째에 있는 기존 화면 연결Ee341405.edc454d7-a6dd-4721-a849-4069d5ffebe6(KO-KR,Expression.30).png 아이콘 위로 포인터를 이동합니다. 아이콘을 끌기 시작하여 새 탐색 연결을 만듭니다. 화살표가 나타나며 마우스 포인터를 따라 갑니다.

  3. 연결할 화면으로 화살표 끌기 작업을 마칩니다. 연결을 제거하려면 화살표를 마우스 오른쪽 단추로 클릭하고 제거를 클릭합니다.

    Ee341405.alert_tip(KO-KR,Expression.30).gif팁:

    또는 연결할 대상 노드 위로 노드를 클릭하여 끌어 놓습니다.

구성 요소 화면

탐색 노드와 같은 구성 요소 노드가 SketchFlow 맵 패널에 나타납니다. 구성 요소 노드와 탐색 노드 간 한 가지 중요한 차이점은 탐색 노드와 달리 구성 요소 노드에는 받는 연결이 없다는 것입니다. 구성 요소 노드에는 나가는 연결만 있습니다. 응용 프로그램 흐름에서 노드 간 연결을 나타내는 화살표인 연결은 구성 요소 화면이 나타나는 화면을 표시합니다.

구성 요소 노드는 여러 화면에서 다시 사용될 수 있는 콘텐츠를 포함합니다. 예를 들어, 백그라운드를 포함하는 구성 요소 노드와 메뉴를 포함하는 다른 구성 요소 노드를 만든 다음 프로토타입 전체의 여러 화면에 해당 구성 요소들을 사용할 수 있습니다.

새 구성 요소 노드를 만드는 여러 가지 방법이 있습니다. SketchFlow 맵 패널에서 직접 새 구성 요소 노드를 추가하거나, 화면에서 콘텐츠를 선택하고 이를 SketchFlow 맵에 구성 요소 노드로 나타나는 화면으로 만들 수 있습니다.

연결되지 않은 새 구성 요소 화면을 추가하고 이를 응용 프로그램 흐름에 추가

  • SketchFlow 맵 패널의 아무 곳을 마우스 오른쪽 단추를 클릭한 후 구성 요소 화면 추가를 클릭합니다.

연결된 새 구성 요소 화면을 추가하고 이를 응용 프로그램 흐름에 추가

  1. SketchFlow 맵 패널에서 연결된 구성 요소 화면을 추가할 노드 위로 포인터를 이동합니다.

    [!참고]

    SketchFlow 맵 패널이 나타나지 않으면 창 메뉴에서 SketchFlow 맵을 클릭하거나 SHIFT+F12를 누르십시오.

    해당 노드가 강조 표시되고 노드와 연결된 XAML 파일 이름이 도구 설명에 나타납니다. 또한 시각적 메뉴가 노드 아래쪽에 나타납니다.

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(KO-KR,Expression.30).png

  2. 시각적 메뉴의 오른쪽에서 두 번째에 있는 구성 요소 화면 만들기 및 삽입Ee341405.91c06759-86fc-4dbf-a8b7-061300304308(KO-KR,Expression.30).png 아이콘 위로 포인터를 이동합니다. 아이콘을 끌기 시작하여 새 구성 요소 연결을 만듭니다. 화살표가 나타나 마우스 포인터를 따라 갑니다.

  3. 화살표를 연결할 화면으로 끌고 마우스를 놓습니다.

UserControl을 구성 요소 화면으로 만들기

  1. 구성 요소 화면으로 변환할 개체 또는 개체 그룹을 선택합니다.

    [!참고]

    개체 그룹을 선택하려면 포함한 개체 그룹 주위에 경계 윤곽선을 끌어 놓습니다.

  2. 선택 항목을 마우스 오른쪽 단추로 클릭한 다음 구성 요소 화면으로 만들기를 클릭합니다.

  3. 구성 요소 화면으로 만들기 대화 상자의 이름 상자에 UserControl의 이름을 입력합니다.

  4. 선택 사항: 구성 요소 화면을 응용 프로그램 흐름에 추가하려면 SketchFlow 맵에 추가를 선택합니다.

  5. 확인을 클릭합니다.

    [!참고]

    구성 요소 화면이 탐색 화면에 나타나기 전에 프로젝트를 다시 빌드해야 할 수 있습니다(F5).

시각적 태그

시각적 태그는 SketchFlow 맵에서 서로 다른 형식의 화면 및 연결에 서로 다른 색상을 적용하여 화면 형식 및 연결 형식을 구분하는 데 도움을 줄 수 있습니다.

노드에 시각적 태그 추가

  1. SketchFlow 맵 패널에서 태그를 추가할 노드 위로 포인터를 이동합니다.

    [!참고]

    SketchFlow 맵 패널이 나타나지 않으면 창 메뉴에서 SketchFlow 맵을 클릭하거나 SHIFT+F12를 누르십시오.

  2. 해당 노드가 강조 표시되고 노드와 연결된 XAML 파일 이름이 도구 설명에 나타납니다. 또한 시각적 메뉴가 노드 아래쪽에 나타납니다.

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(KO-KR,Expression.30).png

  3. 오른쪽의 아이콘 위로 포인터를 이동합니다. 아이콘을 클릭한 다음 노드에 사용할 색상을 클릭합니다.

연결에 시각적 태그 추가

  1. SketchFlow 맵 패널에서 태그를 추가할 연결 위로 포인터를 이동합니다.

    [!참고]

    SketchFlow 맵 패널이 나타나지 않으면 창 메뉴에서 SketchFlow 맵을 클릭하거나 SHIFT+F12를 누르십시오.

    연결이 강조 표시됩니다.

  2. 시각적 태그를 클릭한 다음 연결에 사용할 색상을 클릭합니다.

또한 SketchFlow 프로젝트 설정을 수정하여 전체 프로젝트에 대한 시각적 태그를 변경할 수 있습니다.

자세한 내용은 SketchFlow 프로젝트 설정 수정을 참조하십시오.