FlowChart(WorkFlow)
회사 내부 프로젝트 중 BPMN이라는
것에 UI적인 표현을 위해 워크플로우
라는 것을 이용하려고 하고 있습니다.
워크플로우(WorkFlow) 라는 용어는
저희 회사 내부적으로만 사용하는
용어로 대략적으로 특정 비즈니스나 작업의
흐름을 표준화된 형태로 파일로 기록하면
그 것을 기반으로 UI 적으로 표현을
해주는 기능을 의미하고 있습니다.
그리고 동적으로 추가/삭제/수정이
화면에서 수행되어야 합니다.
그러다가 연휴 전 날에 하나 재미있는
예제를 찾았습니다. 실행한 예제는
아래와 같습니다. 아! 예제는 카페에
올려 놓았습니다~~!
>카페가기<
대략적으로 설명을 해보겠습니다.
일단 오른쪽에 차트가 그려져 있고,
차트 위에 네 개의 버튼이 있습니다.
그리고 왼쪽에는 뭔가 단어들이
나열되어 있는데 JSON 형태로
작성된 내용입니다.
일단 차트에는 두 개의 노드가 존재하고
있습니다. 이 때 Node1은 A,B,C 라는
Input과 A,B,C라는 아웃풋이 존재하고,
Node2 역시 A,B,C라는 인풋과 아웃풋이
존재합니다.
(Input, output, node 명은 수정이 가능합니다)
그리고 Node1의 B라는 output이 Node2의
C라는 Input으로 연결되어 있습니다.
위에 내용과 같은 형식으로 표현될 수 있는
작업(Work)이나 비즈니스(business)가
실무에서 존재할 것이며, 위와 같이 길게
말로 설명할 수도 있겠지만 한 눈에
볼 수 있는 즉 가독성이 좋은 형태는
역시 UI 적으로 보여주는 겁니다.
그래서 위에 긴 내용이 그림으로 표현된 것이
오른쪽에 차트 형식으로 그려진 겁니다.
그리고 오른쪽 상단에 버튼 네 개 중
Add Node 라는 버튼을 누르면
위와 같이 새로운 노드를 추가할 수
있고 확인 버튼을 누르면 어플의
재시작 없이 바로 아래처럼
웹 브라우저에 새로운 노트가 추가되며,
마우스 드래그를 통해 원하는 위치로
이동도 가능합니다.
그리고 Add Input Connector,
Add Output Connector 버튼을
통해 아래 이미지처럼 원하는 노드의
input, output 값도 수정이 가능합니다.
input(왼쪽)에 원래 X, Y, Z 라는
인풋만 존재했는데 1이라는 인풋을
추가해 준 모습니다.
그리고 화면에서 추가된 사항은
바로바로 위와 같이 왼쪽의
JSON에 반영이 됩니다~
생성된 Node3의 3 output을
기존에 존재하던 Node2의
C Output으로 연결해 주었습니다.
실제에서는 output에서 다른 노드의
output으로 가는 케이스가 많을까?
라는 의심이 들지만 단순 예제이니
그냥 넘어가도록 하겠습니다~
여기서 중요한 건 화면에서 동적으로
이러한 내용들을 실시간으로
표현해주고 반영이 바로 된다는
사실이니깐요~
위와 같이 화면에서 적용을 하면
당연히 왼쪽의 JSON에도 반영이
되어야 하겠지요~!?
위에 내용이 JSON 내용 중 노드 간
연결 정보를 표현하고 있는 부분입니다.
출발지(source) 정보와 도착지(dest)
라는 각각의 key에 node명과 connection라는
value를 가지고 있습니다.
AngularJS에서 통신을 하거나 어떤
값/상태를 표시할 때 JSON을
사용하는데 잘 알지 못할 때는
음.. 뭐 이런 것도 있나보구나 하고
넘어갔었는데 AngularJS에서 자주
사용하다 보니 참 괜찮은 놈이구나란
생각이 듭니다~
이 녀석을 있는 그대로 사용할 순 없고,
좀 더 프로젝트에 맞게 다듬어야 하겠지만
정말 이런 예제가 있다라는 것만으로도
엄청난 시간을 절약한 셈입니다.
AngularJS 짱~ㅎㅎㅎㅎ
