303 lines
32 KiB
JSON
303 lines
32 KiB
JSON
{
|
|
"projectName": "SAM E-Sign 전자계약 서명 솔루션",
|
|
"company": "SAM ((주)코드브릿지엑스)",
|
|
"author": "DX 추진팀",
|
|
"date": "2026.02.12",
|
|
"version": "v1.0",
|
|
"purpose": "모두싸인과 유사한 간편 전자계약 서명 솔루션을 SAM 시스템에 자체 구축하여, 두 당사자(계약 생성자 A, 상대방 B)가 온라인으로 계약서에 서명하고 법적 효력이 있는 형태로 보관하는 시스템",
|
|
"features": [
|
|
"PDF 업로드 기반 전자계약 생성",
|
|
"드래그&드롭 서명 위치 지정 (PDF.js)",
|
|
"이메일 OTP 본인인증 (6자리, 5분 유효)",
|
|
"캔버스 직접 서명 (SignaturePad)",
|
|
"SHA-256 문서 무결성 검증",
|
|
"감사 추적 로그 (Audit Trail)",
|
|
"순차 서명 (A→B 또는 B→A)",
|
|
"이메일 서명 요청/리마인더 발송"
|
|
],
|
|
"effects": [
|
|
{ "icon": "📝", "title": "계약 간소화", "desc": "PDF 업로드 → 서명 위치 지정 → 링크 발송, 3단계 완료" },
|
|
{ "icon": "🔒", "title": "보안 강화", "desc": "문서 해시 검증, OTP 본인인증, IP/UA 기록, 감사 추적" },
|
|
{ "icon": "⚖️", "title": "법적 효력", "desc": "전자서명법 제2조에 부합하는 전자서명 요건 충족" },
|
|
{ "icon": "⏱️", "title": "업무 효율", "desc": "대면 서명 불필요, 이메일 링크로 언제 어디서든 서명" }
|
|
],
|
|
"tocItems": [
|
|
{ "num": "01", "title": "프로젝트 개요", "desc": "목적, 주요 기능, 기대 효과" },
|
|
{ "num": "02", "title": "메뉴 구조 (IA)", "desc": "관리자 화면 + 공개 서명 화면" },
|
|
{ "num": "03", "title": "관리자 화면", "desc": "대시보드, 계약 생성, 상세, 필드 설정, 발송" },
|
|
{ "num": "04", "title": "서명자 화면", "desc": "본인인증(OTP), 서명 수행, 완료" }
|
|
],
|
|
"mainMenus": [
|
|
{ "title": "계약 대시보드", "children": ["계약 현황 통계", "계약 목록 조회"] },
|
|
{ "title": "계약 생성", "children": ["PDF 업로드", "서명자 정보 입력"] },
|
|
{ "title": "계약 상세", "children": ["서명 현황", "감사 로그"] },
|
|
{ "title": "서명 위치 지정", "children": ["PDF 뷰어", "필드 배치"] },
|
|
{ "title": "서명 요청 발송", "children": ["발송 전 확인", "이메일 발송"] }
|
|
],
|
|
"screens": [
|
|
{
|
|
"taskName": "계약 대시보드",
|
|
"route": "/esign",
|
|
"screenName": "계약 대시보드",
|
|
"screenId": "ES_DASH",
|
|
"descriptions": [
|
|
{ "title": "상태별 통계 카드", "content": "전체/진행중/대기/완료/만료 건수를 카드 형태로 표시. API: GET /api/v1/esign/contracts/stats", "markerX": 1.8, "markerY": 1.5 },
|
|
{ "title": "필터/검색 영역", "content": "상태 필터(드롭다운), 키워드 검색, 날짜 범위 필터 제공", "markerX": 1.8, "markerY": 2.3 },
|
|
{ "title": "계약 목록 테이블", "content": "계약코드, 제목, 상대방, 상태(배지), 기한, 생성일 컬럼. 페이지네이션 포함. API: GET /api/v1/esign/contracts", "markerX": 1.8, "markerY": 3.0 },
|
|
{ "title": "새 계약 생성 버튼", "content": "우측 상단 '+ 새 계약' 버튼 → /esign/create로 이동", "markerX": 6.2, "markerY": 1.5 }
|
|
],
|
|
"wireframeElements": [
|
|
{"type": "rect", "x": 1.6, "y": 1.3, "w": 5.4, "h": 0.35, "fill": "1e293b", "text": "계약 대시보드", "color": "FFFFFF", "fontSize": 12, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 5.8, "y": 1.3, "w": 1.2, "h": 0.35, "fill": "0d9488", "text": "+ 새 계약", "color": "FFFFFF", "fontSize": 9, "align": "center"},
|
|
{"type": "rect", "x": 1.6, "y": 1.8, "w": 1.2, "h": 0.7, "fill": "e0f2fe", "text": "전체\n50건", "fontSize": 9, "align": "center"},
|
|
{"type": "rect", "x": 2.9, "y": 1.8, "w": 1.2, "h": 0.7, "fill": "fef3c7", "text": "진행중\n15건", "fontSize": 9, "align": "center"},
|
|
{"type": "rect", "x": 4.2, "y": 1.8, "w": 1.2, "h": 0.7, "fill": "dcfce7", "text": "완료\n28건", "fontSize": 9, "align": "center"},
|
|
{"type": "rect", "x": 5.5, "y": 1.8, "w": 1.2, "h": 0.7, "fill": "fee2e2", "text": "만료/취소\n7건", "fontSize": 9, "align": "center"},
|
|
{"type": "rect", "x": 1.6, "y": 2.65, "w": 1.5, "h": 0.3, "fill": "f1f5f9", "text": "상태 필터 ▼", "fontSize": 8, "align": "center"},
|
|
{"type": "rect", "x": 3.2, "y": 2.65, "w": 2.5, "h": 0.3, "fill": "f1f5f9", "text": "🔍 제목 검색...", "fontSize": 8, "align": "left", "color": "94a3b8"},
|
|
{"type": "rect", "x": 5.8, "y": 2.65, "w": 1.2, "h": 0.3, "fill": "f1f5f9", "text": "날짜 범위", "fontSize": 8, "align": "center"},
|
|
{"type": "rect", "x": 1.6, "y": 3.1, "w": 5.4, "h": 0.3, "fill": "1e293b", "text": "계약코드 제목 상대방 상태 기한 생성일", "color": "FFFFFF", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 1.6, "y": 3.4, "w": 5.4, "h": 0.25, "fill": "FFFFFF", "text": "ES-20260212-A3F 소프트웨어 개발 용역 박을동 서명대기 02-19 02-12", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 1.6, "y": 3.65, "w": 5.4, "h": 0.25, "fill": "f8fafc", "text": "ES-20260211-B7K 디자인 외주 계약 이상미 완료 02-18 02-11", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 1.6, "y": 3.9, "w": 5.4, "h": 0.25, "fill": "FFFFFF", "text": "ES-20260210-C2M 유지보수 계약서 김철수 초안 02-17 02-10", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 1.6, "y": 4.15, "w": 5.4, "h": 0.25, "fill": "f8fafc", "text": "ES-20260209-D5P 컨설팅 용역 계약 정미경 부분서명 02-16 02-09", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 4.6, "y": 4.55, "w": 2.4, "h": 0.25, "fill": "f1f5f9", "text": "< 1 2 3 4 5 >", "fontSize": 8, "align": "center"}
|
|
]
|
|
},
|
|
{
|
|
"taskName": "계약 생성",
|
|
"route": "/esign/create",
|
|
"screenName": "새 계약 생성",
|
|
"screenId": "ES_CREATE",
|
|
"descriptions": [
|
|
{ "title": "계약 정보 입력", "content": "계약 제목(필수), 설명(선택), 서명 순서 선택(상대방 먼저/작성자 먼저), 서명 기한(기본 7일)", "markerX": 1.8, "markerY": 1.5 },
|
|
{ "title": "PDF 파일 업로드", "content": "드래그&드롭 영역으로 PDF 업로드. 최대 20MB. 업로드 시 SHA-256 해시 자동 생성", "markerX": 1.8, "markerY": 2.6 },
|
|
{ "title": "작성자(갑) 정보", "content": "이름, 이메일(필수), 전화번호(선택). 로그인 사용자 정보 자동 입력", "markerX": 1.8, "markerY": 3.4 },
|
|
{ "title": "상대방(을) 정보", "content": "이름, 이메일(필수), 전화번호(선택). 서명 요청 이메일 발송 대상. API: POST /api/v1/esign/contracts", "markerX": 4.5, "markerY": 3.4 }
|
|
],
|
|
"wireframeElements": [
|
|
{"type": "rect", "x": 1.6, "y": 1.3, "w": 5.4, "h": 0.35, "fill": "1e293b", "text": "새 계약 생성", "color": "FFFFFF", "fontSize": 12, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 1.6, "y": 1.8, "w": 5.4, "h": 0.6, "fill": "FFFFFF"},
|
|
{"type": "rect", "x": 1.7, "y": 1.85, "w": 1.0, "h": 0.2, "text": "계약 제목 *", "fontSize": 8, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 2.8, "y": 1.85, "w": 4.1, "h": 0.25, "fill": "f1f5f9", "text": "계약 제목을 입력하세요", "fontSize": 8, "color": "94a3b8", "align": "left"},
|
|
{"type": "rect", "x": 1.7, "y": 2.15, "w": 1.0, "h": 0.2, "text": "서명 순서", "fontSize": 8, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 2.8, "y": 2.15, "w": 2.0, "h": 0.25, "fill": "f1f5f9", "text": "상대방 먼저 ▼", "fontSize": 8, "align": "left"},
|
|
{"type": "rect", "x": 5.0, "y": 2.15, "w": 0.8, "h": 0.2, "text": "서명 기한", "fontSize": 8, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 5.9, "y": 2.15, "w": 1.0, "h": 0.25, "fill": "f1f5f9", "text": "7일 ▼", "fontSize": 8, "align": "center"},
|
|
{"type": "rect", "x": 1.6, "y": 2.55, "w": 5.4, "h": 0.7, "fill": "f1f5f9"},
|
|
{"type": "rect", "x": 3.3, "y": 2.7, "w": 2.0, "h": 0.2, "text": "PDF 파일을 여기에 드래그하세요", "fontSize": 8, "color": "64748b", "align": "center"},
|
|
{"type": "rect", "x": 3.7, "y": 2.95, "w": 1.2, "h": 0.25, "fill": "0d9488", "text": "파일 선택", "color": "FFFFFF", "fontSize": 8, "align": "center"},
|
|
{"type": "rect", "x": 1.6, "y": 3.4, "w": 2.6, "h": 1.2, "fill": "FFFFFF"},
|
|
{"type": "rect", "x": 1.7, "y": 3.45, "w": 2.4, "h": 0.25, "fill": "e0f2fe", "text": "작성자 (갑) 정보", "fontSize": 8, "bold": true, "align": "center"},
|
|
{"type": "rect", "x": 1.7, "y": 3.75, "w": 0.6, "h": 0.18, "text": "이름 *", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 2.4, "y": 3.75, "w": 1.7, "h": 0.2, "fill": "f1f5f9", "text": "김갑순", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 1.7, "y": 4.0, "w": 0.6, "h": 0.18, "text": "이메일 *", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 2.4, "y": 4.0, "w": 1.7, "h": 0.2, "fill": "f1f5f9", "text": "kim@sam.kr", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 1.7, "y": 4.25, "w": 0.6, "h": 0.18, "text": "전화번호", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 2.4, "y": 4.25, "w": 1.7, "h": 0.2, "fill": "f1f5f9", "text": "010-1234-5678", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 4.4, "y": 3.4, "w": 2.6, "h": 1.2, "fill": "FFFFFF"},
|
|
{"type": "rect", "x": 4.5, "y": 3.45, "w": 2.4, "h": 0.25, "fill": "fee2e2", "text": "상대방 (을) 정보", "fontSize": 8, "bold": true, "align": "center"},
|
|
{"type": "rect", "x": 4.5, "y": 3.75, "w": 0.6, "h": 0.18, "text": "이름 *", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 5.2, "y": 3.75, "w": 1.7, "h": 0.2, "fill": "f1f5f9", "text": "", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 4.5, "y": 4.0, "w": 0.6, "h": 0.18, "text": "이메일 *", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 5.2, "y": 4.0, "w": 1.7, "h": 0.2, "fill": "f1f5f9", "text": "", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 5.6, "y": 4.7, "w": 1.4, "h": 0.35, "fill": "0d9488", "text": "계약 생성", "color": "FFFFFF", "fontSize": 9, "bold": true, "align": "center"}
|
|
]
|
|
},
|
|
{
|
|
"taskName": "계약 상세",
|
|
"route": "/esign/{id}",
|
|
"screenName": "계약 상세",
|
|
"screenId": "ES_DETAIL",
|
|
"descriptions": [
|
|
{ "title": "계약 기본 정보", "content": "계약코드, 제목, 설명, 서명 순서, 기한, 상태 배지 표시. 상태별 색상 구분", "markerX": 1.8, "markerY": 1.5 },
|
|
{ "title": "서명자 현황 카드", "content": "작성자(갑)/상대방(을) 각각의 서명 상태, 인증 시각, 서명 시각 표시. 프로그레스 바로 진행률 시각화", "markerX": 1.8, "markerY": 2.5 },
|
|
{ "title": "감사 추적 타임라인", "content": "계약 생성→발송→열람→인증→서명 등 모든 이벤트를 타임라인 형태로 표시. IP, 시각 포함", "markerX": 1.8, "markerY": 3.5 },
|
|
{ "title": "액션 버튼 영역", "content": "상태에 따라 발송/리마인더/취소/다운로드/검증 버튼 동적 표시", "markerX": 5.2, "markerY": 1.5 }
|
|
],
|
|
"wireframeElements": [
|
|
{"type": "rect", "x": 1.6, "y": 1.3, "w": 3.8, "h": 0.35, "fill": "1e293b", "text": "계약 상세 - ES-20260212-A3F", "color": "FFFFFF", "fontSize": 11, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 5.5, "y": 1.3, "w": 0.55, "h": 0.3, "fill": "3b82f6", "text": "발송", "color": "FFFFFF", "fontSize": 8, "align": "center"},
|
|
{"type": "rect", "x": 6.1, "y": 1.3, "w": 0.55, "h": 0.3, "fill": "f59e0b", "text": "리마인더", "color": "FFFFFF", "fontSize": 7, "align": "center"},
|
|
{"type": "rect", "x": 6.7, "y": 1.3, "w": 0.3, "h": 0.3, "fill": "dc2626", "text": "취소", "color": "FFFFFF", "fontSize": 7, "align": "center"},
|
|
{"type": "rect", "x": 1.6, "y": 1.8, "w": 5.4, "h": 0.6, "fill": "FFFFFF"},
|
|
{"type": "rect", "x": 1.7, "y": 1.85, "w": 0.6, "h": 0.18, "text": "제목", "fontSize": 7, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 2.4, "y": 1.85, "w": 2.5, "h": 0.18, "text": "소프트웨어 개발 용역 계약서", "fontSize": 8, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 5.3, "y": 1.85, "w": 0.3, "h": 0.18, "text": "상태", "fontSize": 7, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 5.7, "y": 1.82, "w": 0.7, "h": 0.22, "fill": "dbeafe", "text": "서명대기", "fontSize": 7, "color": "1d4ed8", "align": "center"},
|
|
{"type": "rect", "x": 1.7, "y": 2.1, "w": 0.6, "h": 0.18, "text": "기한", "fontSize": 7, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 2.4, "y": 2.1, "w": 1.5, "h": 0.18, "text": "2026-02-19 (D-7)", "fontSize": 8, "color": "dc2626", "align": "left"},
|
|
{"type": "rect", "x": 1.6, "y": 2.55, "w": 2.6, "h": 0.8, "fill": "FFFFFF"},
|
|
{"type": "rect", "x": 1.7, "y": 2.6, "w": 2.4, "h": 0.22, "fill": "e0f2fe", "text": "작성자 (갑) - 김갑순", "fontSize": 8, "bold": true, "align": "center"},
|
|
{"type": "rect", "x": 1.7, "y": 2.85, "w": 0.8, "h": 0.15, "text": "상태: 대기중", "fontSize": 7, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 4.4, "y": 2.55, "w": 2.6, "h": 0.8, "fill": "FFFFFF"},
|
|
{"type": "rect", "x": 4.5, "y": 2.6, "w": 2.4, "h": 0.22, "fill": "fee2e2", "text": "상대방 (을) - 박을동", "fontSize": 8, "bold": true, "align": "center"},
|
|
{"type": "rect", "x": 4.5, "y": 2.85, "w": 1.2, "h": 0.15, "text": "상태: 이메일 발송됨", "fontSize": 7, "color": "f59e0b", "align": "left"},
|
|
{"type": "rect", "x": 1.6, "y": 3.5, "w": 5.4, "h": 0.25, "fill": "1e293b", "text": " 감사 추적 로그 (Audit Trail)", "color": "FFFFFF", "fontSize": 8, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 1.6, "y": 3.75, "w": 5.4, "h": 0.2, "fill": "FFFFFF", "text": " 02-12 10:00 계약 생성 김갑순 192.168.1.100", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 1.6, "y": 3.95, "w": 5.4, "h": 0.2, "fill": "f8fafc", "text": " 02-12 10:05 서명 요청 발송 시스템 -", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 1.6, "y": 4.15, "w": 5.4, "h": 0.2, "fill": "FFFFFF", "text": " 02-12 11:20 서명 링크 접속 박을동 121.xxx.xxx.55", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 1.6, "y": 4.35, "w": 5.4, "h": 0.2, "fill": "f8fafc", "text": " 02-12 11:21 OTP 인증 완료 박을동 121.xxx.xxx.55", "fontSize": 7, "align": "left"}
|
|
]
|
|
},
|
|
{
|
|
"taskName": "서명 위치 지정",
|
|
"route": "/esign/{id}/fields",
|
|
"screenName": "서명 위치 지정",
|
|
"screenId": "ES_FIELDS",
|
|
"descriptions": [
|
|
{ "title": "PDF 뷰어 (PDF.js)", "content": "원본 PDF를 브라우저에서 렌더링. 페이지 네비게이션 제공. 확대/축소 가능", "markerX": 1.8, "markerY": 1.8 },
|
|
{ "title": "서명 필드 추가", "content": "서명자 선택 후 PDF 위에 클릭하여 필드 추가. 타입: 서명/도장/텍스트/날짜/체크박스", "markerX": 2.5, "markerY": 3.0 },
|
|
{ "title": "필드 속성 패널", "content": "우측에 선택된 필드의 속성 표시. 필드 타입, 라벨, 필수 여부, 좌표값(%) 편집", "markerX": 5.5, "markerY": 2.5 },
|
|
{ "title": "저장 버튼", "content": "설정 완료 후 저장 → API: POST /api/v1/esign/contracts/{id}/fields", "markerX": 5.5, "markerY": 4.5 }
|
|
],
|
|
"wireframeElements": [
|
|
{"type": "rect", "x": 1.6, "y": 1.3, "w": 5.4, "h": 0.35, "fill": "1e293b", "text": "서명 위치 지정 - 소프트웨어 개발 용역 계약서", "color": "FFFFFF", "fontSize": 10, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 1.6, "y": 1.8, "w": 3.8, "h": 3.0, "fill": "FFFFFF"},
|
|
{"type": "rect", "x": 1.7, "y": 1.85, "w": 3.6, "h": 0.3, "fill": "f1f5f9", "text": "◀ 1 / 3 페이지 ▶ 🔍 100%", "fontSize": 8, "align": "center"},
|
|
{"type": "rect", "x": 1.8, "y": 2.25, "w": 3.4, "h": 2.3, "fill": "f8fafc"},
|
|
{"type": "rect", "x": 2.0, "y": 2.4, "w": 3.0, "h": 0.15, "fill": "e2e8f0", "text": "제 1 조 (목적)", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 2.0, "y": 2.6, "w": 3.0, "h": 0.08, "fill": "e2e8f0"},
|
|
{"type": "rect", "x": 2.0, "y": 2.72, "w": 3.0, "h": 0.08, "fill": "e2e8f0"},
|
|
{"type": "rect", "x": 2.2, "y": 3.7, "w": 1.2, "h": 0.5, "fill": "bfdbfe", "text": "갑 서명\n(클릭하여 이동)", "fontSize": 7, "color": "1d4ed8", "align": "center"},
|
|
{"type": "rect", "x": 3.8, "y": 3.7, "w": 1.2, "h": 0.5, "fill": "fecaca", "text": "을 서명\n(클릭하여 이동)", "fontSize": 7, "color": "dc2626", "align": "center"},
|
|
{"type": "rect", "x": 5.6, "y": 1.8, "w": 1.4, "h": 0.3, "fill": "1e293b", "text": "필드 속성", "color": "FFFFFF", "fontSize": 8, "bold": true, "align": "center"},
|
|
{"type": "rect", "x": 5.6, "y": 2.1, "w": 1.4, "h": 2.0, "fill": "FFFFFF"},
|
|
{"type": "rect", "x": 5.65, "y": 2.15, "w": 0.5, "h": 0.15, "text": "서명자", "fontSize": 7, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 6.2, "y": 2.15, "w": 0.75, "h": 0.18, "fill": "f1f5f9", "text": "작성자(갑)", "fontSize": 7, "align": "center"},
|
|
{"type": "rect", "x": 5.65, "y": 2.4, "w": 0.5, "h": 0.15, "text": "타입", "fontSize": 7, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 6.2, "y": 2.4, "w": 0.75, "h": 0.18, "fill": "f1f5f9", "text": "서명 ▼", "fontSize": 7, "align": "center"},
|
|
{"type": "rect", "x": 5.65, "y": 2.65, "w": 0.5, "h": 0.15, "text": "라벨", "fontSize": 7, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 6.2, "y": 2.65, "w": 0.75, "h": 0.18, "fill": "f1f5f9", "text": "갑 서명", "fontSize": 7, "align": "center"},
|
|
{"type": "rect", "x": 5.65, "y": 2.9, "w": 0.5, "h": 0.15, "text": "필수", "fontSize": 7, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 6.2, "y": 2.9, "w": 0.75, "h": 0.18, "text": "☑ 필수 항목", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 5.6, "y": 4.2, "w": 0.65, "h": 0.3, "fill": "e2e8f0", "text": "+ 갑 필드", "fontSize": 7, "color": "1d4ed8", "align": "center"},
|
|
{"type": "rect", "x": 6.3, "y": 4.2, "w": 0.65, "h": 0.3, "fill": "e2e8f0", "text": "+ 을 필드", "fontSize": 7, "color": "dc2626", "align": "center"},
|
|
{"type": "rect", "x": 5.6, "y": 4.6, "w": 1.4, "h": 0.35, "fill": "0d9488", "text": "필드 설정 저장", "color": "FFFFFF", "fontSize": 9, "bold": true, "align": "center"}
|
|
]
|
|
},
|
|
{
|
|
"taskName": "서명 요청 발송",
|
|
"route": "/esign/{id}/send",
|
|
"screenName": "서명 요청 발송",
|
|
"screenId": "ES_SEND",
|
|
"descriptions": [
|
|
{ "title": "발송 전 체크리스트", "content": "서명 필드 설정 여부, 서명자 정보 완료 여부, PDF 무결성 검증 결과를 체크리스트로 표시", "markerX": 1.8, "markerY": 1.8 },
|
|
{ "title": "서명 순서 확인", "content": "설정된 서명 순서와 각 서명자 정보를 시각적으로 확인. 순서 변경 불가 (생성 시 결정)", "markerX": 1.8, "markerY": 2.8 },
|
|
{ "title": "발송 확인 버튼", "content": "최종 확인 후 발송 → 상태 draft→pending, 첫 서명자에게 이메일 발송", "markerX": 4.0, "markerY": 4.3 }
|
|
],
|
|
"wireframeElements": [
|
|
{"type": "rect", "x": 1.6, "y": 1.3, "w": 5.4, "h": 0.35, "fill": "1e293b", "text": "서명 요청 발송", "color": "FFFFFF", "fontSize": 12, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 1.6, "y": 1.8, "w": 5.4, "h": 0.8, "fill": "FFFFFF"},
|
|
{"type": "rect", "x": 1.7, "y": 1.85, "w": 2.0, "h": 0.22, "text": "발송 전 확인사항", "fontSize": 9, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 1.8, "y": 2.1, "w": 4.0, "h": 0.15, "text": "✅ 서명 필드가 설정되었습니다 (갑: 1개, 을: 1개)", "fontSize": 8, "color": "16a34a", "align": "left"},
|
|
{"type": "rect", "x": 1.8, "y": 2.28, "w": 4.0, "h": 0.15, "text": "✅ 서명자 정보가 완료되었습니다", "fontSize": 8, "color": "16a34a", "align": "left"},
|
|
{"type": "rect", "x": 1.8, "y": 2.46, "w": 4.0, "h": 0.15, "text": "✅ PDF 문서 무결성이 확인되었습니다 (SHA-256)", "fontSize": 8, "color": "16a34a", "align": "left"},
|
|
{"type": "rect", "x": 1.6, "y": 2.8, "w": 5.4, "h": 1.3, "fill": "FFFFFF"},
|
|
{"type": "rect", "x": 1.7, "y": 2.85, "w": 2.0, "h": 0.22, "text": "서명 순서", "fontSize": 9, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 2.0, "y": 3.15, "w": 1.8, "h": 0.7, "fill": "fee2e2"},
|
|
{"type": "rect", "x": 2.1, "y": 3.2, "w": 0.3, "h": 0.25, "fill": "dc2626", "text": "1", "color": "FFFFFF", "fontSize": 10, "bold": true, "align": "center"},
|
|
{"type": "rect", "x": 2.5, "y": 3.2, "w": 1.2, "h": 0.18, "text": "상대방 (을)", "fontSize": 8, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 2.5, "y": 3.42, "w": 1.2, "h": 0.15, "text": "박을동", "fontSize": 8, "align": "left"},
|
|
{"type": "rect", "x": 2.5, "y": 3.6, "w": 1.2, "h": 0.15, "text": "park@corp.com", "fontSize": 7, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 4.0, "y": 3.45, "w": 0.6, "h": 0.2, "text": "→", "fontSize": 14, "color": "64748b", "align": "center"},
|
|
{"type": "rect", "x": 4.8, "y": 3.15, "w": 1.8, "h": 0.7, "fill": "e0f2fe"},
|
|
{"type": "rect", "x": 4.9, "y": 3.2, "w": 0.3, "h": 0.25, "fill": "3b82f6", "text": "2", "color": "FFFFFF", "fontSize": 10, "bold": true, "align": "center"},
|
|
{"type": "rect", "x": 5.3, "y": 3.2, "w": 1.2, "h": 0.18, "text": "작성자 (갑)", "fontSize": 8, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 5.3, "y": 3.42, "w": 1.2, "h": 0.15, "text": "김갑순", "fontSize": 8, "align": "left"},
|
|
{"type": "rect", "x": 5.3, "y": 3.6, "w": 1.2, "h": 0.15, "text": "kim@sam.kr", "fontSize": 7, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 2.5, "y": 4.3, "w": 3.5, "h": 0.4, "fill": "0d9488", "text": "서명 요청 발송", "color": "FFFFFF", "fontSize": 11, "bold": true, "align": "center"}
|
|
]
|
|
},
|
|
{
|
|
"taskName": "본인인증 (OTP)",
|
|
"route": "/esign/sign/{token}",
|
|
"screenName": "본인인증 (서명자용)",
|
|
"screenId": "ES_AUTH",
|
|
"descriptions": [
|
|
{ "title": "계약 정보 확인", "content": "계약 제목, 서명자 이름/이메일, 서명 기한 표시. 토큰 기반 조회 (비로그인)", "markerX": 2.8, "markerY": 1.8 },
|
|
{ "title": "OTP 발송 버튼", "content": "등록된 이메일로 6자리 인증 코드 발송. 5분 유효, 최대 5회 시도", "markerX": 2.8, "markerY": 3.0 },
|
|
{ "title": "OTP 입력 폼", "content": "6자리 숫자 입력 (대형 폰트). 인증 성공 시 sign_session_token 발급 → 서명 화면 이동", "markerX": 2.8, "markerY": 3.7 }
|
|
],
|
|
"wireframeElements": [
|
|
{"type": "rect", "x": 2.3, "y": 1.15, "w": 4.0, "h": 0.4, "text": "SAM E-Sign", "fontSize": 16, "bold": true, "align": "center"},
|
|
{"type": "rect", "x": 2.3, "y": 1.5, "w": 4.0, "h": 0.2, "text": "전자계약 서명", "fontSize": 9, "color": "64748b", "align": "center"},
|
|
{"type": "rect", "x": 2.5, "y": 1.9, "w": 3.6, "h": 3.0, "fill": "FFFFFF"},
|
|
{"type": "rect", "x": 2.6, "y": 1.95, "w": 3.4, "h": 0.25, "text": "계약 정보 확인", "fontSize": 10, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 2.6, "y": 2.25, "w": 3.4, "h": 0.35, "fill": "f8fafc"},
|
|
{"type": "rect", "x": 2.7, "y": 2.27, "w": 0.8, "h": 0.12, "text": "계약 제목", "fontSize": 6, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 2.7, "y": 2.4, "w": 3.2, "h": 0.15, "text": "소프트웨어 개발 용역 계약서", "fontSize": 8, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 2.6, "y": 2.65, "w": 3.4, "h": 0.35, "fill": "f8fafc"},
|
|
{"type": "rect", "x": 2.7, "y": 2.67, "w": 0.8, "h": 0.12, "text": "서명자", "fontSize": 6, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 2.7, "y": 2.8, "w": 3.2, "h": 0.15, "text": "박을동 (park@corp.com)", "fontSize": 8, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 2.6, "y": 3.05, "w": 3.4, "h": 0.35, "fill": "f8fafc"},
|
|
{"type": "rect", "x": 2.7, "y": 3.07, "w": 0.8, "h": 0.12, "text": "서명 기한", "fontSize": 6, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 2.7, "y": 3.2, "w": 3.2, "h": 0.15, "text": "2026-02-19", "fontSize": 8, "bold": true, "color": "dc2626", "align": "left"},
|
|
{"type": "rect", "x": 2.6, "y": 3.5, "w": 3.4, "h": 0.3, "text": "본인인증을 위해 등록된 이메일로 인증 코드를 발송합니다.", "fontSize": 8, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 2.6, "y": 3.85, "w": 3.4, "h": 0.4, "fill": "3b82f6", "text": "인증 코드 발송", "color": "FFFFFF", "fontSize": 10, "bold": true, "align": "center"},
|
|
{"type": "rect", "x": 2.6, "y": 4.35, "w": 3.4, "h": 0.2, "text": "OTP 입력 화면 (발송 후 전환)", "fontSize": 7, "color": "94a3b8", "align": "center"},
|
|
{"type": "rect", "x": 3.2, "y": 4.55, "w": 2.2, "h": 0.3, "fill": "f1f5f9", "text": "4 8 2 9 1 7", "fontSize": 14, "align": "center"}
|
|
]
|
|
},
|
|
{
|
|
"taskName": "서명 수행",
|
|
"route": "/esign/sign/{token}/sign",
|
|
"screenName": "전자서명 수행 (서명자용)",
|
|
"screenId": "ES_SIGN",
|
|
"descriptions": [
|
|
{ "title": "문서 확인 단계", "content": "계약서 PDF 다운로드 링크 제공. 동의 체크박스로 전자서명 법적 효력 동의 확인", "markerX": 2.8, "markerY": 1.8 },
|
|
{ "title": "서명 입력 (SignaturePad)", "content": "캔버스에 터치/마우스로 서명 입력. '지우기' 버튼으로 초기화. 3단계: 문서확인→서명→확인", "markerX": 2.8, "markerY": 2.8 },
|
|
{ "title": "서명 확인/제출", "content": "입력된 서명 미리보기. '다시 서명' 또는 '서명 제출' 선택. base64 PNG로 전송", "markerX": 2.8, "markerY": 3.8 },
|
|
{ "title": "거절 기능", "content": "상단 '거절' 버튼으로 서명 거절 가능. 거절 사유 입력 필수", "markerX": 5.5, "markerY": 1.3 }
|
|
],
|
|
"wireframeElements": [
|
|
{"type": "rect", "x": 1.6, "y": 1.2, "w": 5.4, "h": 0.4, "fill": "FFFFFF"},
|
|
{"type": "rect", "x": 1.7, "y": 1.25, "w": 3.0, "h": 0.15, "text": "소프트웨어 개발 용역 계약서", "fontSize": 9, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 1.7, "y": 1.42, "w": 2.0, "h": 0.12, "text": "박을동 님의 전자서명", "fontSize": 7, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 6.2, "y": 1.25, "w": 0.7, "h": 0.28, "fill": "FFFFFF", "text": "거절", "fontSize": 8, "color": "dc2626", "align": "center"},
|
|
{"type": "rect", "x": 2.3, "y": 1.8, "w": 4.0, "h": 1.5, "fill": "FFFFFF"},
|
|
{"type": "rect", "x": 2.4, "y": 1.85, "w": 2.0, "h": 0.22, "text": "계약 문서 확인", "fontSize": 10, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 2.5, "y": 2.15, "w": 3.8, "h": 0.5, "fill": "f1f5f9"},
|
|
{"type": "rect", "x": 3.5, "y": 2.2, "w": 1.5, "h": 0.15, "text": "PDF 문서", "fontSize": 8, "color": "64748b", "align": "center"},
|
|
{"type": "rect", "x": 3.3, "y": 2.4, "w": 1.8, "h": 0.25, "fill": "3b82f6", "text": "문서 열기 / 다운로드", "color": "FFFFFF", "fontSize": 8, "align": "center"},
|
|
{"type": "rect", "x": 2.5, "y": 2.75, "w": 0.2, "h": 0.2, "fill": "3b82f6"},
|
|
{"type": "rect", "x": 2.75, "y": 2.75, "w": 3.5, "h": 0.35, "text": "위 계약서의 내용을 확인하였으며, 전자서명에\n동의합니다. 전자서명은 법적 효력을 가집니다.", "fontSize": 7, "align": "left"},
|
|
{"type": "rect", "x": 2.3, "y": 3.35, "w": 4.0, "h": 1.5, "fill": "FFFFFF"},
|
|
{"type": "rect", "x": 2.4, "y": 3.4, "w": 1.5, "h": 0.22, "text": "서명 입력", "fontSize": 10, "bold": true, "align": "left"},
|
|
{"type": "rect", "x": 5.5, "y": 3.4, "w": 0.7, "h": 0.2, "text": "지우기", "fontSize": 8, "color": "64748b", "align": "right"},
|
|
{"type": "rect", "x": 2.4, "y": 3.65, "w": 3.0, "h": 0.15, "text": "아래 영역에 서명을 입력해 주세요.", "fontSize": 7, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 2.5, "y": 3.85, "w": 3.6, "h": 0.9, "fill": "FFFFFF"},
|
|
{"type": "rect", "x": 2.3, "y": 4.85, "w": 1.9, "h": 0.3, "fill": "e2e8f0", "text": "이전", "fontSize": 9, "align": "center"},
|
|
{"type": "rect", "x": 4.3, "y": 4.85, "w": 2.0, "h": 0.3, "fill": "3b82f6", "text": "서명 확인", "color": "FFFFFF", "fontSize": 9, "bold": true, "align": "center"}
|
|
]
|
|
},
|
|
{
|
|
"taskName": "서명 완료",
|
|
"route": "/esign/sign/{token}/done",
|
|
"screenName": "서명 완료 (서명자용)",
|
|
"screenId": "ES_DONE",
|
|
"descriptions": [
|
|
{ "title": "완료 상태 표시", "content": "서명 완료 시 녹색 체크 아이콘 + 메시지. 모든 서명 완료 시 계약 체결 안내", "markerX": 3.5, "markerY": 2.0 },
|
|
{ "title": "거절 상태 표시", "content": "서명 거절 시 빨간 X 아이콘 + 메시지. 계약 담당자 알림 발송 안내", "markerX": 3.5, "markerY": 2.8 },
|
|
{ "title": "계약 요약 정보", "content": "계약 제목, 서명자 이름, 서명 일시를 카드 형태로 표시", "markerX": 3.5, "markerY": 3.5 }
|
|
],
|
|
"wireframeElements": [
|
|
{"type": "rect", "x": 2.8, "y": 1.2, "w": 3.0, "h": 0.35, "text": "SAM E-Sign", "fontSize": 16, "bold": true, "align": "center"},
|
|
{"type": "rect", "x": 2.8, "y": 1.7, "w": 3.0, "h": 3.0, "fill": "FFFFFF"},
|
|
{"type": "rect", "x": 3.8, "y": 1.85, "w": 0.8, "h": 0.8, "fill": "dcfce7"},
|
|
{"type": "rect", "x": 3.95, "y": 2.0, "w": 0.5, "h": 0.5, "text": "✓", "fontSize": 22, "color": "16a34a", "bold": true, "align": "center"},
|
|
{"type": "rect", "x": 2.9, "y": 2.75, "w": 2.8, "h": 0.25, "text": "서명이 완료되었습니다", "fontSize": 12, "bold": true, "align": "center"},
|
|
{"type": "rect", "x": 2.9, "y": 3.05, "w": 2.8, "h": 0.35, "text": "서명이 정상적으로 접수되었습니다.\n다른 서명자의 서명이 완료되면\n알려드리겠습니다.", "fontSize": 8, "color": "64748b", "align": "center"},
|
|
{"type": "rect", "x": 3.0, "y": 3.55, "w": 2.6, "h": 0.8, "fill": "f8fafc"},
|
|
{"type": "rect", "x": 3.1, "y": 3.6, "w": 0.5, "h": 0.15, "text": "계약", "fontSize": 7, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 4.0, "y": 3.6, "w": 1.5, "h": 0.15, "text": "소프트웨어 개발 용역", "fontSize": 8, "bold": true, "align": "right"},
|
|
{"type": "rect", "x": 3.1, "y": 3.8, "w": 0.5, "h": 0.15, "text": "서명자", "fontSize": 7, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 4.0, "y": 3.8, "w": 1.5, "h": 0.15, "text": "박을동", "fontSize": 8, "bold": true, "align": "right"},
|
|
{"type": "rect", "x": 3.1, "y": 4.0, "w": 0.5, "h": 0.15, "text": "서명일시", "fontSize": 7, "color": "64748b", "align": "left"},
|
|
{"type": "rect", "x": 4.0, "y": 4.0, "w": 1.5, "h": 0.15, "text": "2026-02-12 11:23", "fontSize": 8, "bold": true, "align": "right"},
|
|
{"type": "rect", "x": 3.2, "y": 4.55, "w": 2.2, "h": 0.2, "text": "SAM E-Sign 전자계약 서명 시스템", "fontSize": 7, "color": "94a3b8", "align": "center"}
|
|
]
|
|
}
|
|
]
|
|
}
|