CodeCrayon - 구매 이후 흐름까지 이어지는 고객 커머스

고객의 모바일 사용 흐름과 개발 여력을 고려해 앱처럼 사용하는 화면을 중심으로 만들고 데스크톱에서도 같은 구조를 재사용했습니다. 반대로 판매자·운영자 백오피스는 데스크톱 중심으로 개발했습니다.

고객 서비스에 한국어·일본어·영어·중국어 번체를 적용하고 국내·해외 카드와 PayPal 결제 선택, SDK 요청 데이터, 국가별 주소·배송 정보를 연결했습니다. 결제 화면과 주문 상태 처리를 맡았으며 서버 승인·환불 트랜잭션은 백엔드 협업 영역입니다.

선물 수령·취소에서 구매 확정, 반품·교환·환불, 리뷰까지 이어지는 프론트엔드를 개발했습니다. 부분 반품 대상과 금액을 표시하고 구매 확정 여부·동일 상품·반품 상태에 맞춰 리뷰 작성 조건을 적용했습니다.

상품 목록과 상세를 오갈 때 다시 탐색해야 하는 부담을 줄이도록 무한 스크롤과 복귀 시 목록·스크롤 위치 복원을 다뤘습니다. 개별 기능을 나열하기보다 주문 상태에 따라 고객이 할 수 있는 다음 행동을 연결하는 데 초점을 뒀습니다.

라이브 위젯은 5초 간격 조회로 참여 상태를 갱신하고 confetti 효과를 표시했습니다. 기획 요구사항에 따른 위젯에 AWS Polly 음성 안내를 직접 제안해 추가했습니다.

위 작업은 프론트엔드 반영까지 확인한 사례입니다. 구매 전환율·라이브 참여율의 변화는 별도로 측정하지 않았습니다.

Next.js, React, TypeScript, Tailwind CSS, Jotai, SWR, React Hook Form, Toss Payments, PayPal, AWS Polly