사례 시나리오를 문서화하기 위해 애니메이션 대화형 순서도를 생성하는 방법

사례 시나리오를 문서화하기 위해 애니메이션 대화형 순서도를 생성하는 방법

 

사례 시나리오를 문서화하기 위해 애니메이션 대화형 순서도를 생성하는 방법

기술 작가로서 내가 가장 좋아하는 도구 중 하나는 다이어그램 작성입니다. 이러한 유형의 시각적 콘텐츠는 독자에게 자료에 대한 더 나은 이해를 제공할 뿐만 아니라 작가가 창의성으로 기술적인 요소를 더할 수 있도록 합니다.

대화형 다이어그램에 대한 나의 첫 번째 기사는 많은 관심과 긍정적인 피드백을 받아 이 주제를 더 탐구하기로 결정했습니다. 이 기사에서는 소프트웨어 비즈니스 로직의 여러 시나리오를 설명하는 애니메이션 흐름도 다이어그램(물론 상호 작용 포함!)을 살펴보겠습니다.

소프트웨어 비즈니스 로직을 설명할 때 나는 일반적으로 순서도 풀 다이어그램을 사용합니다. 특정 작업을 담당하는 소프트웨어 부분을 강조하는 단계별 프로세스를 통해 독자를 안내할 수 있습니다.

예를 들어 사용자 등록을 담당하는 모듈이 있는 모바일 애플리케이션을 상상해 보십시오. 이 모듈은 여러 클래스로 나뉘며 각 클래스는 프로세스 내에서 특정 활동을 수행합니다.

• 사용자 데이터 검증
• 사용자 사진 압축
• 사용자의 지리적 위치를 기반으로 사용자의 주소 가져오기
• 서버 저장소에 데이터 저장
• 등.

개요 스키마는 다음과 같습니다.

그러나 '사용자 데이터 유효성 검사', '사용자 사진 압축' 및 '사용자 주소 추출' 프로세스를 더 자세히 살펴봐야 하는 경우 다이어그램이 수많은 중첩 조건, 긴 루프, 병렬 프로세스 등으로 채워질 수 있습니다.

물론 예는 인위적이고 등록 절차가 그렇게 복잡해 보일 가능성은 거의 없습니다.

하지만 그렇게 보이더라도 이 번거로운 다이어그램을 여러 개의 다이어그램으로 나누어 서로 다른 페이지에 배치하고 그 사이를 탐색하는 것은 좋은 제안이 될 것입니다. 그러나 때때로 독자는 페이지를 건너뛰는 것이 불편하다고 생각합니다. 그들은 모두 같은 화면에 동시에 표시되기를 원하므로 쉽게 따라할 수 있습니다.

이 요구 사항을 충족시키기 위해 현재 압도적인 스키마를 보다 사용자 친화적으로 만들어 보겠습니다. 성공적인 등록 시나리오와 성공하지 못한 등록 시나리오의 몇 가지 구체적인 예를 추가하여 핵심 단계에 중점을 둔 프로세스를 통해 독자를 원활하게 안내할 수 있습니다.

따라서 우리가 달성하고자 하는 것은 다음과 같습니다.

준비가 된? 해보자!

에 배경 레이어, 다이어그램 자체와 함께 다양한 시나리오 간에 전환할 수 있는 버튼이 있는 제어판이 필요합니다. 하나의 성공적인 시나리오와 실패한 등록에 대한 두 가지 시나리오를 설명합니다.

이 단계에서 다이어그램은 다음과 같습니다.

중요 참고 사항

• 에 배경 레이어세 가지 시나리오에 해당하는 버튼의 불투명도 = 50%인 반면 버튼 시나리오 없음 opacity=100%이고 현재 선택된 시나리오가 없다는 것을 강조하기 위해 다른 스타일을 가지고 있습니다.

주요 아이디어는 성공적인 시나리오가 있는 새 레이어를 맨 위에 배치하는 것입니다. 배경 레이어. 이 새 레이어에서 수행된 활동에 악센트를 표시하고 화살표에 숫자를 추가하여 활동의 구체적인 순서를 지정하고 텍스트 패널에서 전체 시나리오를 설명합니다.

1. 에 배경 레이어성공적인 시나리오에 참여하는 모든 요소(화살표, 활동, 조건)를 선택합니다.
❗성공적인 시나리오에서는 거의 모든 활동이 수행되기 때문에 모든 요소를 선택한 다음 불필요한 요소를 해제할 수 있습니다.
선택한 항목을 복사합니다.

2. 레이어 패널로 이동하여 성공적인 시나리오.
잠금 배경 레이어잠금 해제 성공적인 시나리오 레이어후자에 중점을 둡니다.

3. 1단계에서 복사한 항목을 화면에 붙여넣습니다. 성공적인 시나리오 레이어. 요소의 색상과 스타일을 변경하여 강조 표시합니다.

4. 에 성공적인 시나리오 레이어모든 요소를 선택하고 해당 요소의 바로 위로 이동합니다. 배경 레이어. 이 단계 후에는 스키마가 어지럽게 분할되지 않습니다.

5. 화살표에는 프로세스가 흐르는 순서를 나타내는 숫자를 입력하십시오.

6. 에 두 개의 새 버튼을 만듭니다. 성공적인 시나리오 레이어:

• 하나를 복제 성공적인 시나리오 버튼 배경 레이어; 이 새 버튼에는 클릭한 것과 같은 스타일이 있습니다.
• 하나를 복제 시나리오 없음 버튼 배경 레이어; 이 새 버튼은 출시된 것과 같은 스타일을 가지고 있습니다.

이 버튼을 해당 버튼 위에 놓으십시오. 배경 레이어.

7. 제어판에서 성공적인 시나리오에 대한 설명이 포함된 새 텍스트 패널을 만듭니다.

지금은 이미 성공적인 흐름을 충분히 강조했으며 다음 시나리오로 넘어갈 수 있습니다. 하지만 처음에 애니메이션을 발표했으므로 다이어그램에 약간의 역동성을 추가해 보겠습니다.

8. draw.io 상단 메뉴에서 추가 기능 -> 플러그인. 버튼을 클릭 추가하다 옵션을 선택하고 흐름.

추가된 기능을 활성화하려면 페이지를 새로고침하세요.

9. 다이어그램에서 성공적인 시나리오 레이어. draw.io 상단 메뉴에서 편집 -> 가장자리 선택.
다이어그램의 모든 화살표가 선택된 것으로 표시되면 오른쪽의 설정 패널로 이동하여 매개변수를 확인합니다. 흐름 애니메이션:

이 단계에서 우리의 성공적인 시나리오 레이어 다음과 같이 보입니다.

중요 참고 사항

• 9단계에서 가장자리를 선택할 때 모든 화살표를 이동하여 배경 화살표가 있는 위치와 정확히 일치하지 않도록 할 수 있습니다. 배경 화살표 바로 위에 있으면 애니메이션이 눈에 띄지 않을 것입니다.

실패한 시나리오에 대한 아이디어는 동일합니다. 각 실패한 시나리오에 대한 새 레이어를 맨 위에 배치합니다. 배경 레이어.

1. 레이어 패널에서 배경 레이어 눈에 보이고 그것에 초점을 맞춥니다.

2. 에 배경 레이어 첫 번째 실패한 시나리오에 참여하는 모든 요소(화살표, 활동, 조건)를 선택합니다.
선택한 항목을 복사합니다.

3. 레이어 패널로 이동하여 실패시나리오1.
잠금 배경 레이어잠금 해제 UnsuccessfulScenario1 레이어후자에 중점을 둡니다.

4. 2단계에서 복사한 항목을 화면에 붙여넣습니다. UnsuccessfulScenario1 레이어. 요소의 색상과 스타일을 변경하여 강조 표시합니다.

5. 에 UnsuccessfulScenario1 레이어모든 요소를 선택하고 해당 요소의 바로 위로 이동합니다. 배경 레이어.

6. 화살표에는 프로세스가 흐르는 순서를 나타내는 숫자를 입력하십시오.

7. 에 두 개의 새 버튼을 만듭니다. UnsuccessfulScenario1 레이어:

• 하나를 복제 성공하지 못한 시나리오 1 버튼 배경 레이어; 이 새 버튼에는 클릭한 것과 같은 스타일이 있습니다.
• 하나를 복제 시나리오 없음 버튼 배경 레이어; 이 새 버튼은 출시된 것과 같은 스타일을 가지고 있습니다.

이 버튼을 해당 버튼 위에 놓으십시오. 배경 레이어.

8. 제어판에서 첫 번째 실패한 시나리오에 대한 설명이 포함된 새 텍스트 패널을 만듭니다.

9. draw.io 상단 메뉴에서 편집 -> 가장자리 선택.
다이어그램의 모든 화살표가 선택된 것으로 표시되면 오른쪽의 설정 패널로 이동하여 매개변수를 확인합니다. 흐름 애니메이션.

첫 번째 실패한 시나리오는 다음과 같습니다.

두 번째 실패한 시나리오에 대해 동일한 루틴이 수행되면 다음과 같이 표시됩니다.

이제 시나리오를 완료하고 상호 작용할 준비가 되었습니다.

이제 버튼에 클릭 가능성을 추가해 보겠습니다. Successful 시나리오와 Unsuccessful 시나리오.

성공적인 시나리오 버튼

1. 레이어 패널에서 SuccessfulScenario 층;

2. 레이어 패널의 하단 메뉴에서 펜 아이콘을 클릭하여 편집할 레이어를 엽니다.

3. 레이어의 ID를 복사합니다.

❗ 레이어의 ID 복사 무례한시나리오1 그리고 무례한Scenario2 도.

4. 전환 배경 레이어 다이어그램의:

• 다른 모든 레이어를 잠그고 숨깁니다(SuccessfulScenario, UnsuccessfulScenario1, UnsuccessfulScenario2);
• 표시 및 잠금 해제 배경 레이어;
• 에 초점을 맞추다 배경 레이어.

5. 마우스 오른쪽 버튼으로 클릭 성공적인 시나리오 버튼을 누르고 선택 링크 수정… 팝업 메뉴에서:

6. 첫 번째 텍스트 영역에 다음 코드를 붙여넣습니다.

data:action/json,{“actions”:[{“toggle”: {“cells”: [“layer_ID_toShow”]}},{“hide”: {“cells”: [“layer_ID_toHide1”, “layer_ID_toHide2”]}}]}

• layer_ID_toShow 이다 SuccessfulScenario 3단계에서 복사한 레이어 ID
• layer_ID_toHide1 이다 UnsuccessfulScenario1 3단계에서 복사한 레이어 ID
• layer_ID_toHide2 이다 UnsuccessfulScenario2 3단계에서 복사한 레이어 ID

7. 버튼을 클릭하십시오 적용하다:

이 코드는 독자가 Successful 시나리오 버튼 배경 레이어 두 가지 실패한 시나리오를 모두 숨깁니다.

나머지 시나리오에 대해 동일한 접근 방식을 사용합니다. 추가 후 toggle 그리고 hide 세 가지 시나리오 버튼 모두에 대한 작업을 수행하면 다음과 같은 결과가 나타납니다.

버튼에 클릭 가능성을 추가하기만 하면 됩니다. 시나리오 없음 배경 레이어를 제외한 각 레이어에

1. 전환 SuccessfulScenario 다이어그램의 레이어:

• 다른 모든 레이어를 잠그고 숨깁니다(UnsuccessfulScenario1, UnsuccessfulScenario2, background);
• 표시 및 잠금 해제 SuccessfulScenario 층;
• 에 초점을 맞추다 SuccessfulScenario 층.

2. 마우스 오른쪽 버튼을 클릭합니다. 시나리오 없음 버튼을 누르고 선택 링크 수정… 팝업 메뉴에서:

3. 첫 번째 텍스트 영역에 다음 코드를 붙여넣습니다.

data:action/json,{"actions":[{"hide": {"cells": ["layer_ID_toHide1", "layer_ID_toHide2", "layer_ID_toHide13"]}}]}

• layer_ID_toHide1 이다 SuccessfulScenario 3단계에서 복사한 레이어 ID
• layer_ID_toHide2 이다 UnsuccessfulScenario1 3단계에서 복사한 레이어 ID
• layer_ID_toHide3 이다 UnsuccessfulScenario2 3단계에서 복사한 레이어 ID

4. 버튼을 클릭하십시오 적용하다:

두 가지 모두에 대해 이 섹션의 1-4단계를 반복합니다. UnsuccessfulScenario1 그리고 UnsuccessfulScenario2 레이어. 버튼의 코드는 각 레이어에 대해 동일하게 유지됩니다.

그래서, 이것이다! 다이어그램이 완료되었습니다.

이 기사에서 구체적인 작업 예제를 제공하지는 않지만 이 기능을 적용할 수 있는 백로그에서 수많은 작업을 찾을 수 있을 것이라고 확신합니다.

다이어그램의 XML 코드는 이 요지에서 사용할 수 있습니다.