개요
공지사항 작성 UX 개선, 결제 모듈 연동 등 관리자 웹 서비스 개발 및 운영
TypeScriptNext.jsTailwind CSS
개발 상세 내용
실시간 모바일 레이아웃 프리뷰 도입을 통한 공지사항 작성 UX 개선
[실시간 모바일 레이아웃 프리뷰]
문제
- 공지사항 작성 시 작성 내용을 앱에서 반복적으로 확인하고 수정해야 하는 구조로 인해 추가 시간 소요
원인
- 웹과 앱의 레이아웃 차이로 인해 실제 앱에서의 표시 상태를 반복적으로 확인하고 수정해야 하는 구조
대안
- 앱 화면과 유사한 모바일 레이아웃 미리보기 UI 제공
- 앱에서 직접 공지사항 작성 기능 제공
해결
- 공지사항 작성 화면에 모바일 레이아웃 기반의 실시간 미리보기 기능을 도입하여 웹에서 작성하는 내용이 앱에서 어떻게 표시될지를 즉시 확인할 수 있도록 개선하였다.
결과
- 미리보기 UI를 통해 불필요한 수정 반복을 줄이고, 작성 소요 시간을 크게 단축할 수 있었다. 특히 작성자가 실시간으로 결과를 확인할 수 있어, 검토-수정 사이클을 줄이고 작성 편의성을 높이는 데 기여했다.
매장 가입 승인 단계에 결제 모듈을 연동하여 안정성 개선
문제
- 매장 가입 승인 과정에서 관리자가 결제 정보를 수기로 입력하여 입력 실수나 승인 오류 등 휴먼 에러의 리스크 존재
원인
- 결제 정보를 입력하는 과정에서 결제 정보를 검증하는 과정이 없음
대안
- 매장 가입 승인 단계에 결제 모듈을 직접 연동
해결
- 승인 최종 단계에 결제 모듈을 연동하여 결제 성공 여부가 확인된 경우에만 승인 처리가 가능하도록 구조를 개선하였다.
결과
- 결제 모듈 연동을 통해 수기 입력 과정에서 발생하던 승인 오류와 휴먼 에러를 방지할 수 있었고, 승인 조건을 시스템적으로 명확히 정의하여 전체 프로세스의 안정성과 신뢰도를 높일 수 있었다.
- 그러나 결제 정보 연동 후 실제 결제를 통해 유효성을 검증하는 구조이기 때문에, 여전히 사람이 직접 확인하는 절차가 필요하다는 점이 아쉽다.
긴 글 읽어주셔서 감사합니다.
더 궁금하신 내용이 있으시다면,
bangdori8865@gmail.com으로 연락주시면 감사하겠습니다.