2026-02-12 07:40:52 +09:00
{
"projectName" : "SAM E-Sign 전자계약 서명 솔루션" ,
2026-02-21 20:47:11 +09:00
"company" : "SAM ((주)코드브릿지엑스)" ,
2026-02-12 07:40:52 +09:00
"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" }
]
}
]
}
