프리미엄 수제ㆍ보석 도장 브랜드의 자사몰을 구축했습니다. 고관여 제품이라 브랜드를 이해하고 옵션을 고른 뒤 구매까지 이어지는 흐름을 중심으로 설계했습니다. 1) 서비스 구성 - 기프트 히어로: 선물 패키지를 앞세운 첫 화면으로 구매 목적을 빠르게 안내 - 카테고리 그리드: Shop by Category로 제품군을 한눈에 탐색 - 브랜드 스토리: 장인정신(Craftsmanship) 섹션으로 제작 과정과 브랜드 배경 전달 - 기획 분류: BESTㆍNEWㆍSALEㆍMD'S PICK으로 목적별 탐색 - 맞춤 옵션 상세: 각인ㆍ소재 등 옵션을 고르며 가격과 결과를 확인 - VIPㆍ이벤트ㆍ뉴스레터: 재구매와 관계 유지를 위한 영역 2) 담당 범위 - 브랜드 스토어 UI와 커머스 UX 설계 - 사용자 화면 전체 프론트엔드 개발 - 맞춤 옵션형 상품 상세와 장바구니ㆍ주문 동선 구현 - 크림ㆍ딥 브라운 톤 기준의 디자인 토큰 정리 3) 기술적 이슈와 해결 - 옵션 조합에 따라 가격과 재고가 달라져, 조합별 정보를 미리 정리해 두고 선택할 때마다 바로 반영되도록 했습니다. - 고관여 제품이라 정보를 많이 담아야 하는데 화면이 길어지는 문제를, 판단에 필요한 순서대로 나눠 배치해 해결했습니다. - 브랜드 무드를 살리려면 이미지 품질이 중요해, 화면 크기별로 알맞은 이미지를 내려주는 방식으로 화질과 속도를 함께 잡았습니다. [배경과 목표] 1) 문제점 - 수제ㆍ맞춤 제품은 설명할 내용이 많아 화면이 길어지고 구매 판단이 늦어짐 - 옵션 조합에 따라 가격ㆍ재고가 달라져 주문 과정에서 혼선이 생김 - 브랜드 인상을 살리려면 이미지가 커야 하는데 그만큼 화면이 무거워짐 2) 프로젝트 목표 - 브랜드 이해->제품 탐색->옵션 선택->구매로 이어지는 자연스러운 흐름 - 옵션 조합별 가격ㆍ재고의 정확한 표시 - 프리미엄 인상과 화면 속도의 양립 3) 주안점 - 정보 배치를 구매 판단 순서에 맞추기 - 옵션 조합 데이터의 사전 정리 - 화면 크기별 이미지 제공 [주요 기능] - 맞춤 옵션형 상품 상세: 각인ㆍ소재 등 옵션을 고르면 가격과 재고가 바로 반영됩니다. 조합별 정보를 미리 정리해 두어 주문 시 혼선이 없습니다. - 브랜드 스토리와 장인정신 섹션: 제작 과정과 브랜드 배경을 보여줘, 고관여 제품을 처음 접한 방문자도 가치를 이해하고 구매로 이어집니다. - VIPㆍ이벤트ㆍ뉴스레터: VIP 전용관과 이벤트, 뉴스레터를 두어 한 번 구매한 고객이 다시 찾도록 연결했습니다. [성과] - 옵션 조합별 가격ㆍ재고 정확도 확보: 조합 정보를 미리 정리해 선택 즉시 반영하도록 해, 주문 과정에서 생기던 가격ㆍ재고 혼선을 없앴습니다. - 고관여 제품의 구매 판단 지원: 브랜드 스토리와 장인정신 섹션을 탐색 흐름에 배치해, 처음 방문한 고객도 제품 가치를 이해하도록 했습니다. [진행 과정] - 2026.01. 브랜드ㆍ상품 구조 정리: 취급 제품과 옵션 체계, 브랜드 메시지 구조를 정리했습니다. - 2026.03. 스토어 UX 설계: 기프트 히어로ㆍ카테고리 그리드ㆍ브랜드 스토리의 화면 순서를 설계했습니다. - 2026.05. 프론트엔드 개발: 맞춤 옵션형 상세와 장바구니ㆍ주문 동선, VIPㆍ이벤트 영역을 구현했습니다. - 2026.08. 상품 등록 및 오픈: 상품과 옵션 조합 데이터를 등록하고 구매 흐름을 확인한 뒤 오픈했습니다. [프로젝트 정보] - 기간: 2026.01 ~ 2026.09 - 역할: UIㆍ커머스 UX 설계ㆍ프론트엔드 개발 - 기술: next.js, React, TypeScript * 표시 금액은 비슷한 규모 작업의 시작 견적(참고용)이며, 실제 금액은 범위 확인 후 안내드립니다.

VIVACERIA 프리미엄 자사몰 구축 대표 이미지

구매자용 메인 - 브랜드 메인 비주얼과 BRANDㆍCRAFTSMANSHIP 등 메뉴 진입

메인 (동일 화면) - 검색ㆍ위시리스트ㆍ장바구니 진입