비건 화장품 브랜드의 자사몰을 구축했습니다. 성분과 인증을 중요하게 보는 고객층에 맞춰 브랜드 스토리와 제품 정보를 앞세운 커머스를 만들었습니다. 1) 서비스 구성 - 브랜드ㆍ제품 탐색: 브랜드 스토리와 성분ㆍ인증 정보를 제품 탐색 흐름에 배치 - 구매 흐름: 상품 상세->장바구니->주문->결제를 반응형으로 제공 - 매시업 관리도구: 상품ㆍ주문ㆍ전시를 운영자가 직접 처리하는 관리 화면 - PCㆍ모바일 대응: 같은 구매 경험을 두 환경에서 제공 2) 담당 범위 - Next.js 기반 사용자 화면 개발 - Spring Boot 기반 API 서버 설계와 구현 - 상품ㆍ주문 데이터 구조 설계 - 운영자용 매시업 관리도구 개발 3) 기술적 이슈와 해결 - 성분ㆍ인증 정보는 제품마다 항목이 달라, 고정된 칸 대신 항목을 추가할 수 있는 구조로 만들어 제품별로 다르게 보여줍니다. - 기획전과 전시 영역이 자주 바뀌어, 운영자가 코드 없이 노출 순서와 구성을 바꿀 수 있도록 관리도구에서 처리하게 했습니다. - 화장품 상세는 이미지가 길어 로딩이 느려지는데, 스크롤에 맞춰 이미지를 불러오는 방식으로 첫 화면을 빠르게 했습니다. [배경과 목표] 1) 문제점 - 비건ㆍ성분ㆍ인증 정보가 제품마다 달라 일관되게 보여주기 어려움 - 기획전과 전시 영역을 바꿀 때마다 개발이 필요 - 상세 이미지가 길어 페이지가 무거움 2) 프로젝트 목표 - 성분ㆍ인증 정보를 제품별로 유연하게 노출 - 운영자가 직접 전시를 관리 - PCㆍ모바일에서 같은 구매 흐름 3) 주안점 - 제품별 가변 속성 구조 - 관리도구 기반 전시 운영 - 이미지 중심 상세의 로딩 최적화 [주요 기능] - 제품별 성분ㆍ인증 정보 노출: 제품마다 다른 성분ㆍ인증 항목을 고정 칸 대신 추가형 구조로 관리해, 필요한 정보만 골라 보여줍니다. - 매시업 관리도구: 운영자가 상품ㆍ주문과 함께 기획전ㆍ전시 구성을 직접 바꿀 수 있어, 전시 변경에 개발이 필요 없습니다. - 반응형 구매 흐름: PC와 모바일에서 같은 구매 경험을 제공하고, 긴 상세 이미지는 스크롤에 맞춰 불러와 첫 화면을 빠르게 띄웁니다. [성과] - 제품별 성분ㆍ인증 정보 유연화: 고정 칸 대신 항목을 추가하는 구조로 바꿔, 제품마다 다른 성분ㆍ인증 정보를 그대로 노출합니다. - 전시 변경의 개발 의존 제거: 관리도구에서 기획전과 노출 순서를 바꾸도록 해, 전시를 바꿀 때마다 개발이 필요하던 과정을 없앴습니다. [진행 과정] - 2024.01. 브랜드ㆍ상품 정보 정리: 취급 제품과 성분ㆍ인증 표기 항목, 전시 운영 방식을 정리했습니다. - 2024.03. 화면ㆍAPI 설계: 제품별 가변 속성 구조와 전시 관리 방식, API를 설계했습니다. - 2024.05. 개발 및 관리도구 구현: Next.js 화면과 Spring Boot API, 매시업 관리도구를 개발했습니다. - 2024.10. 상품 등록 및 오픈: 상품과 성분 정보를 등록하고 구매 흐름을 확인한 뒤 오픈했습니다. [프로젝트 정보] - 기간: 2024.01 ~ 2024.12 - 역할: 풀스택 개발 - 기술: Spring Boot, next.js, Java * 표시 금액은 비슷한 규모 작업의 시작 견적(참고용)이며, 실제 금액은 범위 확인 후 안내드립니다.

비건 화장품 쇼핑몰 구축 대표 이미지