프로젝트 소개
전북생생장터는 전북특별자치도의 지역 특산물을 온라인으로 판매하는 커머스 플랫폼입니다. 지역 농가와 소비자를 직접 연결하는 서비스인 만큼, 상품 탐색부터 주문·결제까지의 흐름이 자연스럽고 신뢰감 있게 이어지는 사용자 경험이 중요했습니다.
React와 @shopby/react-components를 활용해 쇼핑몰 전반의 사용자 화면을 구현하고, PC와 모바일 환경을 모두 고려한 UI 개발을 담당했습니다. 단순한 퍼블리싱을 넘어, 실제 사용 흐름 속에서 불편함이 생기지 않도록 화면 구조와 상호작용을 세심하게 다듬는 데 집중했습니다.
특히 고객사의 요구사항 중 NHN Shopby 플랫폼이 기본적으로 지원하지 않는 기능이 많아, 이를 직접 보완해야 하는 상황이 발생했습니다. 복수 배송지 기능, 체험단 게시판 댓글 기능, 장바구니 수량 동기화 문제 등을 해결하며, 플랫폼의 한계를 넘어서는 커스텀 프론트엔드 개발 역량을 키울 수 있었던 프로젝트입니다.
프로젝트 기간
2023.10 - 2024.04
주요 역할
- 쇼핑몰 전체 페이지(PC/Mobile) UI 구현 및 React 컴포넌트 개발
- 플랫폼 미지원 기능을 사용자 흐름에 맞게 커스텀 개발하여 고객사 요구사항 충족
- 배송지 단위 상품 그룹화 구조를 설계하여 주문·게시판·장바구니 영역의 UX 개선 및 기능 안정화
- 체험단 게시판의 댓글 CRUD 구현 및 모달 기반 인터랙션 구현
사용 기술
Challenge & Solution
복수 배송지 기능 커스텀 구현
문제 정의
기존 Shopby 플랫폼은 단일 배송지만 지원해 여러 주소로 상품을 보내고 싶은 사용자 요구를 충족하기 어려웠습니다. 주문서, 주문완료, 주문상세까지 주문 플로우 전반에서 배송지 정보가 일관되게 이어져야 했기 때문에 단순 UI 추가만으로는 해결할 수 없는 문제였습니다.
해결 방안
주문 흐름 전체를 기준으로 배송지 데이터를 나누고 연결하는 구조를 직접 설계해 복수 배송지 기능을 커스텀 구현했습니다. 주문서, 주문완료, 주문상세 페이지 전반에서 정보가 자연스럽게 이어지도록 화면과 데이터 흐름을 함께 맞추며 사용자 입장에서 복잡함이 느껴지지 않도록 구성했습니다.
체험단 게시판 댓글 기능 구현
문제 정의
체험단 게시판은 사용자 참여와 소통이 핵심인 공간이지만, Shopby 플랫폼의 기본 게시판 기능으로는 댓글을 지원하지 않아 사용자 간 자유로운 소통이 불가능한 문제가 있었습니다.
해결 방안
Shopby에서 제공하는 게시판 API의 하위 게시글 기능을 활용해 댓글 CRUD를 직접 구현했습니다. 체험단 게시판이 아닌 경우 댓글 영역이 노출되지 않도록 조건부 렌더링을 적용했고, 댓글 수정 시 모달 인터랙션을 추가해 사용자 경험을 개선했습니다. 플랫폼이 지원하지 않는 기능을 사용자 흐름에 맞게 커스텀 개발하여 고객사 요구사항을 충족했습니다.
헤더 미니카트와 장바구니 수량 불일치 해결
문제 정의
헤더의 미니카트에 표시되는 수량과 실제 장바구니 페이지의 수량이 일치하지 않는 문제가 있었습니다. 장바구니 수량이 변경되었음에도 헤더 영역이 즉시 갱신되지 않아, 사용자가 보는 화면에 따라 다른 수량이 표시되는 상황이었습니다. 이는 주문 직전 단계에서 혼란을 유발하고 서비스 신뢰도를 떨어뜨릴 수 있는 문제라고 판단했습니다.
해결 방안
장바구니 수량 변경 이후 헤더 미니카트 영역이 다시 렌더링되도록 상태 갱신 흐름을 점검하고 수정했습니다. 이를 통해 장바구니 페이지에서 수량이 변경되었을 때 헤더에도 최신 수량이 반영되도록 개선했고, 사용자가 어느 화면에서든 일관된 장바구니 상태를 확인할 수 있도록 안정성을 높였습니다.