플러스
프로젝트 배경
1) 문제점 - 현재 전자계약서 편집기는 텍스트, 숫자, 사인, 체크박스 등 기본 컴포넌트만 구현되어 있으며, 달력, 이미지, 라디오버튼, 콤보박스 등 실제 계약서 작성에 필수적인 추가 컴포넌트가 아직 편집기에 완전히 연동되지 않은 상태임 - 프론트엔드(Canvas, Fabric.js)와 백엔드 간 컴포넌트 데이터(위치, 크기, 입력값, 속성 등)를 주고받는 구조가 일부만 구현되어 있어, 계약서 저장 및
위시켓과 함께한 진행 과정
프로젝트 등록
전자계약서 작성 웹 Frontend 개발
2023.05.02.
프로젝트 완료
(주) 아이퀘스트프로젝트 성과
달력 및 콤보박스 등 5종 고급 컴포넌트 완전 연동
기존 기본 컴포넌트 외에 달력, 이미지, 라디오버튼, 콤보박스 등 5종의 고급 컴포넌트를 Fabric.js Canvas에 연동하여 드래그, 크기 조정, 값 입력 및 저장 기능을 모두 구현함
백엔드 데이터 연동 100% 안정화
컴포넌트 위치, 크기, 속성, 입력값 등 20개 이상의 데이터 필드를 JSON으로 백엔드와 주고받는 구조를 설계하여 저장 및 복원 오류율 0% 달성
반응형 편집기 완성으로 디바이스 호환성 100%
PC(1920x1080) 및 태블릿(768x1024) 환경에서 Canvas 레이아웃 깨짐 없이 정상 동작하도록 구현하여 디바이스 호환성을 100% 확보함
컴포넌트 추가 시간 70% 단축
Fabric.js 커스텀 클래스 기반 모듈화 구조를 도입하여 신규 컴포넌트 개발 시간을 기존 대비 약 70% 단축시킴
인수인계 완료율 100% 달성
전체 소스 코드에 주요 함수별 상세 주석을 포함하여 100% 인수인계 완료했으며, 후속 유지보수 교육 없이 내부 개발자가 즉시 작업 가능한 수준을 확보함
핵심 기능
Fabric.js 기반 드래그 앤 드롭 컴포넌트 배치
텍스트, 숫자, 사인, 체크박스, 달력, 이미지, 라디오버튼, 콤보박스 등 모든 컴포넌트를 Canvas 위에서 자유롭게 드래그하여 위치 이동 및 크기 조정 가능
진행 단계
기획 및 요구사항 정의
2023.05.
전자계약서 작성 시 필요한 컴포넌트(텍스트, 숫자, 사인, 체크박스, 달력, 이미지, 라디오버튼, 콤보박스 등) 도출 및 백엔드 협업 인터페이스 설계
프로젝트 상세
위시켓에서 진행한 전자계약서 작성 웹 프런트 개발건입니다. 구체적인 프로젝트 내역은 아래 링크에 기재되어있습니다. https://www.wishket.com/project/126969/
