📂 프로젝트

공연 물품 중개 플랫폼 - 바로바로

#삼성청년SW아카데미, #Next.js, #Zustand,2024-09-30

전자계약서 기반 공연물품 대여 중개 플랫폼 '바로바로'의 개발과정을 소개합니다. 기존 대여가 이뤄지던 플랫폼의 문제점과 어떤 방식으로 이를 해결했는지 소개하려합니다.

프로젝트를 진행하게 된 이유

응원봉 등 공연 물품 대여는 주로 X.com, 번개장터등에서 이루어졌습니다. 하지만, 이는 사기 가능성이 높았습니다. 실제로도 구글에 검색하면 쉽게 사기사례를 확인할 수 있어요.

실제 법적 효력이 있는 전자계약서를 제공하면 이와 같은 사기사례를 줄일 수 있지 않을까라는 생각에서 이 프로젝트를 기획했어요.

담당한 기능

제가 구현한 기능 중 핵심 기능을 중심적으로 소개할게요.

1. 메인페이지, 검색기능, 상세페이지, 레이아웃
1. PIN번호 입력 (부인방지)
1. 계약서 뷰어

첫번째, 메인페이지/검색/상세페이지/레이아웃 기능

구현 이미지

기본적인 UI/UX 틀을 구현했어요. 메인페이지엔 카테고리별로 바로 검색을 진행할 수 있도록 하였고, 상세페이지에선 해당 상품의 이미지를 카로셀로, 직거래 희망 장소를 카카오맵으로 구현했어요.

두번째, PIN 번호 입력 (부인방지)

전자계약이 동반되는 서비스이기에 부인방지 기능을 구현해야했어요. 하나은행에서 근무하시는 현직자분의 PIN번호도 충분히 부인방지 효과가 있을 수 있다는 조언을 듣고 이를 구현했어요.

처음 등록할 때, 재 확인 과정에서의 틀린 PIN입력이 발생했을 때 등 다양한 상황에 맞게 동작할 수 있도록 기능을 구현했어요. 또, 입력할 때 다른 사람이 이를 보고 인식할 수 없도록 랜덤으로 다른 번호가 눌리는 것 처럼 보이는 효과를 구현했어요.

세번째, 계약서 뷰어

바로바로의 핵심 기능은 계약서 작성 기능이에요.

실시간 채팅 도중 실시간 계약 작성이 가능한데, 다음의 순서로 계약을 진행해요.

소유자가 계약서를 작성한다.
소유자가 작성한 이후 대여인이 최종 확인하고 계약서를 작성한다.

소유자가 대여인이 각각 거래서를 확인하고 서명하는 로직을 구현하여 실제 거래하는 과정과 동일하게 전자계약을 맺을 수 있도록 했어요.

@naverpay/react-pdf 라이브러리를 활용하여 개발했고, 서명을 서버측에 전달하면 서버측에서 서명과 워터마크가 포함된 pdf 문서를 작성할 수 있도록 기능을 구현했어요.

트러블슈팅

실제 법적인 효력을 가지는 전자계약서 조건을 성립시키기위해 팀원들과 많은 고민을 했던 프로젝트입니다. 프로젝트의 목적인 법적 효력 보장을 통한 거래 안정성 강화 기능을 구현하기 위해선 이 기능이 필수적으로 구현되어야 했어요.

이를 위해 하나은행에서 앱 개발을 담당하는 실무자 멘토분의 조언을 통해 PIN 번호 입력으로 부인방지 기능을 구현했어요. 또한, 실제 효력이 있는 전자계약서 내용 구성을 위해 조사를 진행하며 계약서 내용을 구성하였고, 계약서에 서명하는 마지막 과정에 워터마크를 삽입하여 바로바로에서 작성한 전자계약서임을 보장할 수 있도록 했어요.

성과 & 결론

실제로 서비스를 개발할 때 고려해야하는 것이 무엇인지 그 어느때보다 진지하게 고민한 프로젝트였어요. 법적 효력이 있는 전자계약서 구성을 위해 고민하는 과정을 통해 개발 외적인 부분에서도 학습할 수 있는 좋은 기회였어요.

그 외의 프로젝트 이미지

로그인/회원가입

게시물 작성

인증과정