현장 작성
- 약정서 작성
- 기부자 정보
- 기부 내용
- 개인정보·약정 동의
- 전자서명
실제 프로젝트 / 디지털 전환
TOPPING SELECTED WORK전자 기부약정서 시스템
기부약정 전자서명 시스템
종이 기부약정서의 작성 순서를 태블릿 화면으로 옮긴 전자 문서 프로젝트입니다. 기부자 정보와 약정 내용, 동의, 터치 서명을 연결하고 PDF 미리보기와 관리자 업무까지 구성했습니다.
실제 데모 살펴보기 (새 탭)01태블릿 작성·서명
02PDF 문서 미리보기
03관리자·운영 가이드
demo.topping.io / 156497
↗
01 / PROJECT CONTEXT
복잡한 업무를,
연결된 경험으로.
현장 상담에서 익숙하게 쓰던 종이 서식의 흐름을 유지하면서 재입력과 문서 정리의 부담을 줄이는 방향으로 구성했습니다. 작성 화면과 서명 영역을 나란히 두어 진행 상태를 확인할 수 있습니다.
- 업무 분야
- 기부 · 발전기금 운영
- 사용 환경
- 태블릿 PWA · 관리자 웹
- 핵심 사용자
- 기부자 · 현장 상담 담당자 · 문서 관리자
02 / INFORMATION ARCHITECTURE
메뉴에 담긴 업무의 깊이
공개 데모의 메뉴와 세부 기능을
업무 목적별로 정리했습니다.
03 / WORKFLOW
화면 사이로 이어지는 일
- 01
기부자 기본정보 입력
→ - 02
기부 금액·용도·납부방법 작성
→ - 03
개인정보와 약정 내용 동의
→ - 04
손가락·스타일러스로 서명
→ - 05
PDF 미리보기와 문서 저장
→
04 / DESIGN & PLANNING
업무를 이해하고 설계한 지점
종이 서식의 순서를 유지
기부자 정보, 기부 내용과 동의를 순차적으로 묶었습니다. 일시납·정기납·분할납, 용도와 납부방법을 구분해 현장 상담 흐름에 맞춰 작성할 수 있도록 했습니다.
입력과 서명의 병렬 구성
태블릿에서 입력 폼과 전자서명 영역을 함께 보여줍니다. 손가락·스타일러스 입력, 다시쓰기와 초기화 동작으로 서명 과정을 구성했습니다.
작성 이후의 문서 업무
PDF 미리보기와 생성, 임시 저장, 관리자 및 운영 가이드를 연결했습니다. 현장 작성에서 파일 확인까지 이어지는 전자 문서 업무를 보여줍니다.
05 / PRODUCT SCREENS
실제 화면으로 자세히 보기
02
PDF 문서 미리보기
입력한 기부약정 내용을 문서 형태로 검토합니다.
원본 크게 보기 ↗03
현장 운영 가이드
작성부터 문서 생성까지의 사용 흐름과 운영 안내를 제공합니다.
원본 크게 보기 ↗공개 데모 화면 기준으로 구성한 소개입니다. 표시된 수치와 인물 정보는 운영 성과가 아닌 데모 예시이며, 데모가 갱신되면 현재 화면과 차이가 있을 수 있습니다.
산업 · IoT
ERP
ERP