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

응용 프로그램 흐름 만들기

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

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

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

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

SketchFlow Map

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

SketchFlow 맵에 새로 연결된 탐색 화면 추가

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

    참고 참고

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

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

    참고 참고

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

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

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

  3. 새 화면 위치로 탐색 화면 아이콘 끌기 작업을 마칩니다. 이제 텍스트 상자에 직접 입력하여 화면 이름을 지정할 수 있습니다. 새 화면의 이름을 지정하지 않은 경우 새 노드의 이름이 "Screen x"로 지정됩니다. 여기서 "x"는 응용 프로그램 흐름에 표시되는 번호가 지정된 화면 이름 시리즈의 다음 번호입니다.

    참고 참고

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

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

SketchFlow 맵에 연결되지 않은 새 탐색 화면 추가

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

    참고 참고

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

    참고 참고

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

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

    팁

    또는 SketchFlow 맵 도구 모음에서 화면 만들기d63bd8e7-f302-48bb-a42e-119eb2fa06f8를 클릭합니다.

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

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

    참고 참고

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

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

    051894cf-0f0d-482f-a15c-02ed9cdd0a01
  2. 시각적 메뉴의 왼쪽에서 두 번째에 있는 기존 화면 연결edc454d7-a6dd-4721-a849-4069d5ffebe6 아이콘 위로 포인터를 이동합니다. 아이콘을 끌기 시작하여 새 탐색 연결을 만듭니다. 화살표가 나타나며 포인터를 따라 갑니다.

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

    팁

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

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

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

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

SketchFlow 맵에 연결되지 않은 새 구성 요소 화면 추가

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

SketchFlow 맵에 연결된 새 구성 요소 화면 추가

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

    참고 참고

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

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

    051894cf-0f0d-482f-a15c-02ed9cdd0a01
  2. 시각적 메뉴의 오른쪽에서 두 번째에 있는 구성 요소 화면 만들기 및 삽입91c06759-86fc-4dbf-a8b7-061300304308아이콘 위로 포인터를 이동합니다. 아이콘을 끌기 시작하여 새 구성 요소 연결을 만듭니다. 화살표가 나타나며 포인터를 따라 갑니다.

구성 요소 화면은 UserControl 형식입니다. 구성 요소 화면을 만들면 SketchFlow 맵에 해당 화면이 표시됩니다. 또한 구성 요소 화면이 아닌 UserControl을 만들 수 있습니다. 구성 요소 화면이 아닌 사용자 정의 컨트롤은 SketchFlow 맵에 표시되지 않습니다.

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

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

    참고 참고

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

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

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

  4. 확인을 클릭합니다.

    참고 참고

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

기존 개체에서 새 UserControl 만들기

  1. UserControl 로 변환할 개체 또는 개체 그룹을 선택합니다.

    참고 참고

    개체 그룹을 선택하려면 개체 주위에 경계 윤곽선을 끌어 놓습니다. 리소스 패널에서 개체를 직접 선택할 수도 있습니다.

  2. 선택 항목을 마우스 오른쪽 단추로 클릭한 다음 UserControl로 만들기를 클릭합니다.

  3. UserControl로 만들기 대화 상자의 이름 상자에 UserControl의 이름을 입력합니다.

    자세한 내용은 Create an empty user control in Blend을 참조하십시오.

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

노드에 시각적 태그 추가

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

    참고 참고

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

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

    051894cf-0f0d-482f-a15c-02ed9cdd0a01
  3. 시각적 태그 변경(오른쪽의 아이콘) 위로 포인터를 이동합니다. 아이콘을 클릭한 다음 노드에 사용할 색상을 클릭합니다.

연결에 시각적 태그 추가

  1. SketchFlow 맵 패널에서 태그를 추가할 연결을 마우스 오른쪽 단추로 클릭합니다.

    참고 참고

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

    연결이 강조 표시됩니다.

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

표시: