패션 브랜드의 자사몰을 PC와 모바일 모두에서 쓸 수 있게 구축하고, 운영자가 직접 전시를 관리하는 도구까지 함께 만들었습니다. 1) 서비스 구성 - 상품 탐색: 카테고리ㆍ필터로 원하는 상품을 좁혀가는 탐색 흐름 - 구매 흐름: 상품 상세->옵션 선택->장바구니->주문->결제 - 매시업 관리도구: 상품ㆍ주문ㆍ전시를 한 화면에서 처리 - 반응형: PC와 모바일에서 같은 구매 경험 제공 2) 담당 범위 - Next.js 기반 사용자 화면 개발 - Spring Boot 기반 API 서버 설계와 구현 - 상품ㆍ옵션ㆍ주문 데이터 구조 설계 - 운영자용 매시업 관리도구 개발 3) 기술적 이슈와 해결 - 패션 상품은 색상ㆍ사이즈 조합이 많아 재고 관리가 복잡해, 조합 단위로 재고를 두고 품절 조합은 선택 단계에서 바로 막았습니다. - 시즌마다 전시가 크게 바뀌어, 노출 영역과 순서를 관리도구에서 바꿀 수 있게 만들어 개발 없이 대응하도록 했습니다. - 목록에서 상품 이미지를 여러 장 보여줘야 해 화면이 무거워지는 문제를, 대표 이미지만 먼저 띄우고 나머지는 상호작용할 때 불러오는 방식으로 해결했습니다. [배경과 목표] 1) 문제점 - 색상ㆍ사이즈 조합이 많아 재고와 품절 처리가 복잡 - 시즌마다 전시를 바꿔야 하는데 매번 개발이 필요 - 상품 이미지가 많아 목록 화면이 무거움 2) 프로젝트 목표 - 조합 단위 재고 관리로 주문 오류 방지 - 운영자가 직접 전시를 바꾸는 환경 - PCㆍ모바일 동일한 구매 경험 3) 주안점 - 품절 조합의 선택 차단 - 관리도구 기반 전시 운영 - 목록 이미지 로딩 최적화 [주요 기능] - 옵션 조합 단위 재고 관리: 색상ㆍ사이즈 조합마다 재고를 두고, 품절 조합은 선택 단계에서 막아 주문 후 취소되는 일을 줄였습니다. - 매시업 관리도구: 상품ㆍ주문과 함께 전시 영역과 노출 순서를 운영자가 직접 바꿔, 시즌 변경에 개발이 필요 없습니다. - 반응형 상품 탐색: PC와 모바일에서 같은 흐름으로 탐색하고, 목록은 대표 이미지만 먼저 띄워 빠르게 훑을 수 있습니다. [성과] - 품절 조합 주문 차단: 색상ㆍ사이즈 조합 단위로 재고를 관리해, 주문 후 취소되던 품절 건을 선택 단계에서 막았습니다. - 시즌 전시 자체 운영: 노출 영역과 순서를 관리도구에서 바꾸도록 해, 시즌마다 개발이 필요하던 전시 변경을 없앴습니다. [진행 과정] - 2024.01. 요구사항 정의: 취급 상품과 옵션 체계, 전시 운영 방식과 관리 범위를 확정했습니다. - 2024.03. 상품ㆍ재고 구조 설계: 색상ㆍ사이즈 조합 단위 재고 구조와 전시 관리 방식을 설계했습니다. - 2024.05. 개발 및 관리도구 구현: Next.js 화면과 Spring Boot API, 매시업 관리도구를 개발했습니다. - 2024.10. 상품 등록 및 오픈: 상품과 옵션ㆍ재고를 등록하고 주문 흐름을 확인한 뒤 오픈했습니다. [프로젝트 정보] - 기간: 2024.01 ~ 2024.12 - 역할: 풀스택 개발 - 기술: Spring Boot, next.js, Java * 표시 금액은 비슷한 규모 작업의 시작 견적(참고용)이며, 실제 금액은 범위 확인 후 안내드립니다.

N.MOOD 쇼핑몰 구축 대표 이미지