16 KiB
ERP-node 시스템 시연 시나리오
전체 개요
주제: 발주 → 입고 프로세스 자동화
목표: 버튼 클릭 한 번으로 발주 데이터가 입고 테이블로 자동 이동하는 것을 보여주기
총 시간: 10분
Part 1: 테이블 2개 생성 (2분)
1-1. 발주 테이블 생성
화면 조작:
-
테이블 관리 메뉴 접속
-
"새 테이블" 버튼 클릭
-
테이블 정보 입력:
- 테이블명(영문):
purchase_order - 테이블명(한글):
발주 - 설명:
발주 관리
- 테이블명(영문):
-
컬럼 추가 (4개):
| 컬럼명(영문) | 컬럼명(한글) | 타입 | 필수 여부 |
|---|---|---|---|
| order_no | 발주번호 | text | ✓ |
| item_name | 품목명 | text | ✓ |
| quantity | 수량 | number | ✓ |
| unit_price | 단가 | number | ✓ |
- "테이블 생성" 버튼 클릭
- 성공 메시지 확인
1-2. 입고 테이블 생성
화면 조작:
-
"새 테이블" 버튼 클릭
-
테이블 정보 입력:
- 테이블명(영문):
receiving - 테이블명(한글):
입고 - 설명:
입고 관리
- 테이블명(영문):
-
컬럼 추가 (5개):
| 컬럼명(영문) | 컬럼명(한글) | 타입 | 필수 여부 | 비고 |
|---|---|---|---|---|
| receiving_no | 입고번호 | text | ✓ | 자동 생성 |
| order_no | 발주번호 | text | ✓ | 발주 테이블 참조 |
| item_name | 품목명 | text | ✓ | |
| quantity | 수량 | number | ✓ | |
| receiving_date | 입고일자 | date | ✓ | 오늘 날짜 자동 입력 |
- "테이블 생성" 버튼 클릭
- 성공 메시지 확인
포인트 강조:
- 클릭만으로 데이터베이스 테이블 자동 생성
- Input Type에 따라 적절한 UI 자동 설정
Part 2: 메뉴 2개 생성 (1분)
2-1. 발주 관리 메뉴 생성
화면 조작:
- 관리자 메뉴 > 메뉴 관리 접속
- "새 메뉴 추가" 버튼 클릭
- 메뉴 정보 입력:
- 메뉴명:
발주 관리 - 순서: 1
- 메뉴명:
- "저장" 클릭
2-2. 입고 관리 메뉴 생성
화면 조작:
- "새 메뉴 추가" 버튼 클릭
- 메뉴 정보 입력:
- 메뉴명:
입고 관리 - 순서: 2
- 메뉴명:
- "저장" 클릭
- 좌측 메뉴바에서 새로 생성된 메뉴 2개 확인
포인트 강조:
- URL 기반 자동 라우팅
- 아이콘으로 직관적인 메뉴 구성
Part 3: 플로우 생성 (2분)
3-1. 플로우 생성
화면 조작:
- 제어 관리 메뉴 접속
- "새 플로우 생성" 버튼 클릭
- 플로우 생성 모달에서 입력:
- 플로우명:
발주-입고 프로세스 - 설명:
발주에서 입고로 데이터 자동 이동
- 플로우명:
- "생성" 버튼 클릭
- 플로우 편집 화면(캔버스)으로 자동 이동
3-2. 노드 구성
내레이션: "플로우는 소스 테이블과 액션 노드로 구성합니다. 발주 테이블에서 입고 테이블로 데이터를 INSERT하는 구조입니다."
노드 1: 발주 테이블 소스
화면 조작:
- 캔버스 좌측 팔레트에서 "테이블 소스" 에서 테이블 노드 드래그
- 캔버스에 드롭
- 생성된 노드 클릭 → 우측 속성 패널 표시
- 속성 패널에서 설정:
- 노드명:
발주 테이블 - 소스 테이블:
purchase_order선택 - 색상: 파란색 (#3b82f6)
- 노드명:
- 데이터 소스 타입 컨텍스트 데이터 선택
노드 2: 입고 INSERT 액션
화면 조작:
- 좌측 팔레트에서 "INSERT 액션" 노드 드래그
- 캔버스의 발주 테이블 오른쪽에 드롭
- 노드 클릭 → 우측 속성 패널 표시
- 속성 패널에서 설정:
- 노드명:
입고 처리 - 타겟 테이블:
receiving(입고) 선택 - 액션 타입: INSERT
- 색상: 초록색 (#22c55e)
- 노드명:
3-3. 노드 연결 및 필드 매핑
내레이션: "소스 테이블과 액션 노드를 연결하고 필드 매핑을 설정합니다."
화면 조작:
-
"발주 테이블" 노드의 오른쪽 연결점(핸들)에 마우스 올리기
-
연결점에서 드래그 시작
-
"입고 처리" 노드의 왼쪽 연결점으로 드래그
-
연결선 자동 생성됨
-
"입고 처리" (INSERT 액션) 노드 클릭
-
우측 속성 패널에서 "필드 매핑" 탭 선택
-
필드 매핑 설정:
| 소스 필드 (발주) | 타겟 필드 (입고) | 비고 |
|---|---|---|
| order_no | order_no | 발주번호 복사 |
| item_name | item_name | 품목명 복사 |
| quantity | quantity | 수량 복사 |
| (자동 생성) | receiving_no | 입고번호 |
| (현재 날짜) | receiving_date | 입고일자 |
- 우측 상단 "저장" 버튼 클릭
- 성공 메시지: "플로우가 저장되었습니다"
포인트 강조:
- 테이블 소스 → 액션 노드 구조
- 필드 매핑으로 데이터 자동 복사 설정
- INSERT 액션으로 새 테이블에 데이터 생성
참고:
receiving_no와receiving_date는 자동 생성 필드로 설정- 같은 이름의 필드는 자동 매핑됨
Part 4: 화면 설계 (2분)
4-1. 발주 관리 화면 설계
화면 조작:
- 화면 관리 > 화면 설계 메뉴 접속
- "발주 관리" 메뉴의 "화면 할당" 클릭
- "새 화면 생성" 선택
- 테이블 선택:
purchase_order(발주)
화면 구성:
전체: 테이블 리스트 컴포넌트 (CRUD 기능 포함)
- 컴포넌트 팔레트에서 "테이블 리스트" 드래그
- 테이블 설정:
- 연결 테이블:
purchase_order - 컬럼 표시:
- 연결 테이블:
| 컬럼 | 표시 | 정렬 가능 | 너비 |
|---|---|---|---|
| order_no | ✓ | ✓ | 150px |
| item_name | ✓ | ✓ | 200px |
| quantity | ✓ | 100px | |
| unit_price | ✓ | 120px |
-
기능 설정:
- 조회: 활성화
- 등록: 활성화 (신규 버튼)
- 수정: 활성화
- 삭제: 활성화
- 페이징: 10개씩
- 입고 처리 버튼: 커스텀 액션 추가
-
입고 처리 버튼 설정:
- 버튼 라벨:
입고 처리 - 버튼 위치: 행 액션
- 연결 플로우:
발주-입고 프로세스선택 - 플로우 액션:
입고 처리(Connection에서 정의한 액션)
- 버튼 라벨:
-
"화면 저장" 버튼 클릭
4-2. 입고 관리 화면 설계
화면 조작:
- "입고 관리" 메뉴의 "화면 할당" 클릭
- "새 화면 생성" 선택
- 테이블 선택:
receiving(입고)
화면 구성:
전체: 테이블 리스트 컴포넌트 (조회 전용)
- 컴포넌트 팔레트에서 "테이블 리스트" 드래그
- 테이블 설정:
- 연결 테이블:
receiving - 컬럼 표시:
- 연결 테이블:
| 컬럼 | 표시 | 정렬 가능 | 너비 |
|---|---|---|---|
| receiving_no | ✓ | ✓ | 150px |
| order_no | ✓ | ✓ | 150px |
| item_name | ✓ | ✓ | 200px |
| quantity | ✓ | 100px | |
| receiving_date | ✓ | ✓ | 120px |
-
기능 설정:
- 조회: 활성화
- 등록: 비활성화 (플로우로만 데이터 생성)
- 수정: 비활성화
- 삭제: 비활성화
- 페이징: 20개씩
- 정렬: 입고일자 내림차순
-
"화면 저장" 버튼 클릭
포인트 강조:
- 테이블 리스트 컴포넌트로 CRUD 자동 구성
- 발주 화면에는 "입고 처리" 버튼으로 플로우 실행
- 입고 화면은 조회 전용 (플로우로만 데이터 생성)
Part 5: 실행 및 동작 확인 (3분)
5-1. 발주 등록
화면 조작:
-
좌측 메뉴에서 "발주 관리" 클릭
-
화면 구성 확인:
- 테이블 리스트 컴포넌트 (빈 테이블)
- 상단에 "신규" 버튼
-
"신규" 버튼 클릭
-
입력 모달 창 표시
-
데이터 입력:
- 발주번호: PO-001
- 품목명: 노트북 (LG Gram 17)
- 수량: 10
- 단가: 2,000,000
-
"저장" 버튼 클릭
-
성공 메시지 확인: "저장되었습니다"
-
결과 확인:
- 테이블에 새 행 추가됨
- 행 우측에 "입고 처리" 버튼 표시됨
추가 발주 등록 (옵션):
- "신규" 버튼 클릭
- 2번째 데이터 입력:
- 발주번호: PO-002
- 품목명: 모니터 (삼성 27인치)
- 수량: 5
- 단가: 300,000
- "저장" 클릭
- 테이블에 2개 행 확인
5-2. 입고 처리 실행 ⭐ (핵심 데모)
화면 조작:
-
발주 테이블에서 첫 번째 행(PO-001 노트북) 확인
-
행 우측의 "입고 처리" 버튼 클릭
-
확인 대화상자:
- "이 발주를 입고 처리하시겠습니까?"
- "예" 클릭
-
성공 메시지: "입고 처리되었습니다"
5-3. 자동 데이터 이동 확인 ⭐⭐⭐
실시간 변화 확인:
1) 발주 테이블 자동 업데이트
- PO-001 항목이 테이블에서 즉시 사라짐
- PO-002만 남아있음 (추가로 등록했다면)
2) 입고 관리 화면으로 이동
- 좌측 메뉴에서 "입고 관리" 클릭
- 입고 테이블에 자동으로 데이터 생성됨:
| 입고번호 | 발주번호 | 품목명 | 수량 | 입고일자 |
|---|---|---|---|---|
| RCV-20250124-001 | PO-001 | 노트북 (LG Gram 17) | 10 | 2025-01-24 |
- 데이터 자동 생성 확인:
- 입고번호: 자동 생성됨 (RCV-20250124-001)
- 발주번호: PO-001 복사됨
- 품목명: 노트북 (LG Gram 17) 복사됨
- 수량: 10 복사됨
- 입고일자: 오늘 날짜 자동 입력
3) 다시 발주 관리로 돌아가기
- 좌측 메뉴 "발주 관리" 클릭
- PO-001은 여전히 사라진 상태 확인
- PO-002만 남아있음
4) 제어 관리에서 확인
- 제어 관리 > 플로우 목록 접속
- "발주-입고 프로세스" 클릭
- 플로우 현황 확인:
- 발주 완료: 1건 (PO-002)
- 입고 완료: 1건 (PO-001)
5-4. 추가 입고 처리 (옵션)
화면 조작:
-
"발주 관리" 화면에서 PO-002 (모니터) 선택
-
"입고 처리" 버튼 클릭
-
확인 후 입고 완료
-
최종 확인:
- 발주 관리: 0건 (모두 입고 처리됨)
- 입고 관리: 2건 (PO-001, PO-002)
- 제어 관리 플로우:
- 발주 완료: 0건
- 입고 완료: 2건
시연 마무리 (30초)
화면 정리 및 요약:
보여준 핵심 기능:
- ✅ 코딩 없이 테이블 생성: 클릭만으로 DB 테이블 자동 생성
- ✅ 시각적 플로우 구성: 드래그앤드롭으로 업무 흐름 설계
- ✅ 자동 데이터 이동: 버튼 클릭 한 번으로 테이블 간 데이터 자동 복사 및 이동
- ✅ 실시간 상태 추적: 제어 관리에서 플로우 현황 확인
- ✅ 빠른 화면 구성: 테이블 리스트 컴포넌트로 CRUD 자동 완성
마지막 화면:
- 대시보드 또는 시스템 전체 구성도
- 로고 및 연락처 정보
자막: "개발자 없이도 비즈니스 담당자가 직접 업무 시스템을 구축할 수 있습니다."
시간 배분 요약
| 파트 | 시간 | 주요 내용 |
|---|---|---|
| Part 1 | 2분 | 테이블 2개 생성 (발주, 입고) |
| Part 2 | 1분 | 메뉴 2개 생성 |
| Part 3 | 2분 | 플로우 구성 및 연결 설정 |
| Part 4 | 2분 | 화면 2개 디자인 |
| Part 5 | 3분 | 발주 등록 → 입고 처리 실행 |
| 마무리 | 0.5분 | 요약 및 정리 |
| 합계 | 10.5분 |
시연 준비사항
사전 설정
- 개발 서버 실행:
http://localhost:9771 - 로그인 정보:
wace / qlalfqjsgh11 - 데이터베이스 초기화 (테스트 데이터 제거)
녹화 설정
- 해상도: 1920x1080 (Full HD)
- 프레임: 30fps
- 마우스 효과: 클릭 하이라이트 활성화
- 배경음악: 부드러운 BGM (옵션)
- 자막: 주요 포인트마다 표시
시연 팁
- 각 단계마다 2-3초 대기 (시청자 이해 시간)
- 중요한 버튼 클릭 시 화면 확대 효과
- 플로우 위젯 카운트 변화는 빨간색 박스로 강조
- 성공 메시지는 충분히 길게 보여주기 (최소 3초)
- 입고 테이블에 데이터 들어오는 순간 화면 확대
시연 스크립트 (참고용)
오프닝 (10초)
"안녕하세요. 오늘은 ERP-node 시스템의 핵심 기능을 시연하겠습니다. 발주에서 입고까지 데이터가 자동으로 이동하는 과정을 보여드립니다."
Part 1 (2분)
"먼저 발주와 입고를 관리할 테이블을 생성합니다. 코딩 없이 클릭만으로 데이터베이스 테이블이 자동으로 만들어집니다."
Part 2 (1분)
"이제 사용자가 접근할 메뉴를 추가합니다. URL만 지정하면 자동으로 라우팅이 연결됩니다."
Part 3 (2분)
"발주에서 입고로 데이터가 이동하는 흐름을 제어 플로우로 정의합니다. 두 테이블을 연결하고 버튼을 누르면 자동으로 데이터가 복사 및 이동하도록 설정합니다."
Part 4 (2분)
"실제 사용자가 볼 화면을 디자인합니다. 테이블 리스트 컴포넌트를 사용하면 CRUD 기능이 자동으로 구성되고, 각 행에 입고 처리 버튼을 추가하여 플로우를 실행할 수 있습니다."
Part 5 (3분)
"이제 실제로 작동하는 모습을 보겠습니다. 발주를 등록하고... (데이터 입력) 저장하면 테이블에 추가됩니다. 입고 처리 버튼을 누르면... (클릭) 발주 테이블에서 데이터가 사라지고 입고 테이블에 자동으로 생성됩니다!"
클로징 (10초)
"이처럼 ERP-node는 코딩 없이 비즈니스 로직을 구현할 수 있는 노코드 플랫폼입니다. 감사합니다."
체크리스트
시연 전
- 개발 서버 실행 확인
- 로그인 테스트
- 기존 테스트 데이터 삭제
- 브라우저 창 크기 조정 (1920x1080)
- 녹화 프로그램 설정
- 마이크 테스트
- 시나리오 1회 이상 리허설
시연 중
- 천천히 명확하게 진행
- 각 단계마다 결과 확인
- 플로우 위젯 카운트 강조
- 입고 테이블 데이터 자동 생성 강조
시연 후
- 녹화 파일 확인
- 자막 추가 (필요 시)
- 배경음악 삽입 (옵션)
- 인트로/아웃트로 편집
- 최종 영상 검수
추가 개선 아이디어
시연 버전 2 (고급)
- 발주 승인 단계 추가 (발주 요청 → 승인 → 입고)
- 입고 수량 불일치 처리 (일부 입고)
- 대시보드에서 통계 차트 표시
시연 버전 3 (실전)
- 실제 업무: 구매 요청 → 견적 → 발주 → 입고 → 검수
- 권한 관리: 요청자, 승인자, 구매담당자 역할 분리
- 알림: 각 단계 변경 시 담당자에게 알림
작성일: 2025-01-24
버전: 1.0
작성자: AI Assistant