업무시스템 화면에 '사용 절차 + 업무 프로세스 + 실제 코드 흐름'을 같이 표시해 봤습니다
일반적으로 SI 업무시스템을 만들다 보면 화면 자체는 완성되어 있어도
처음 보는 개발자나 운영자가 해당 화면의 업무 흐름을 파악하려면
소스나 문서를 다시 확인해야 하는 경우가 많았습니다.
그래서 이번에는 생성되는 React ITSM 화면에 세 가지를 같이 표시하도록 해봤습니다.
1. 화면 가이드
현재 화면을 실제로 어떻게 사용하는지 표시합니다.
예를 들어
센터 선택 → 층 선택 → 상면도 선택 → 구역 생성 → 랙 배치 → 저장 같은 화면 조작 방법을 단계별로 보여줍니다.
2. 업무 프로세스
화면 사용법과 업무 프로세스는 분리했습니다.
DR센터 상면도의 경우에는
대상 선택 → 도면 준비 → 영역 정의 → 구성 배치 → 검증·저장 → 결과 확인 형태로 해당 업무 자체의 흐름을 표시합니다.
3. 실제 프로그램 연결 구조
개인적으로 이번에 가장 신경 쓴 부분입니다.
현재 화면이 실제 생성 프로젝트에서 어떤 코드와 연결되어 있는지
Controller → Service → Mapper → DB → API Client
형태로 화면에서 같이 확인할 수 있도록 했습니다.
예를 들어 현재 메뉴의 Controller, Service, Mapper XML,
연결 테이블, 프론트 API Client 정보를 실제 생성 artifact를 기준으로 표시합니다.
영상에서는 DR센터 상면도를 실제로 편집하는 과정도 들어 있습니다.
센터와 층, 상면도를 선택하고
구역 내부에 랙을 추가한 뒤
위치, 크기, 회전, 상태 등을 변경해서 저장합니다.
단순히 다이어그램만 그려주는 게 아니라
실제 DB 데이터와 연결되는 관리 화면으로 만든 구조입니다.
이런 식으로 요청관리, 변경관리, 결재, 문제관리, 백업관리,
SLA/KPI, 보고서 같은 업무도
화면 사용법 + 업무 프로세스 + 프로그램 실행 구조 를 같이 보여주는 방향으로 확장하고 있습니다.
APG를 만들면서 계속 고민하는 부분은
AI가 '코드를 많이 생성하는 것'보다
요구사항과 업무 흐름이 실제 코드 구조까지 일관되게 이어지도록 하는 것입니다.
특히 SI 프로젝트에서는
화면은 있는데 업무 흐름이 안 맞거나,
API는 있는데 메뉴가 연결되지 않거나,
DB 필드와 화면 모델이 달라지는 문제
같은 것들이 실제로 더 큰 문제가 되기 때문에
생성 후 검증도 같이 가져가는 방향으로 개발하고 있습니다.
영상으로 실제 화면을 찍어봤습니다.
개발자 입장에서
'업무화면에 프로그램 흐름까지 보여주는 것이 실제 유지보수에 도움이 될지'
의견을 들어보고 싶습니다.
화면 가이드
이런화면으로 모든 화면에 화면 가이드를 작성해봤습니다.
운영 절차 부터 실제 프로그렘 플로우 까지 표현을 해봤습니다.
