리빙 플랜트와 홈 리빙 상품을 파는 모바일 퍼스트 커머스를 구축했습니다. 브랜드 톤에 맞춘 화면과 한 손으로 쓰기 좋은 구매 동선을 설계했습니다. 1) 서비스 구성 - 모바일 네비게이션: 상단 유틸(검색ㆍ마이ㆍ장바구니ㆍ메뉴)과 하단 5탭으로 주요 기능에 바로 닿도록 구성 - 카테고리 탐색: 분위기가 드러나는 비주얼 카드로 카테고리를 보여줘 둘러보는 쇼핑 경험 제공 - 기획 영역: 베스트ㆍ신상ㆍ세일을 분리해 목적에 맞게 탐색 - 상품 목록ㆍ상세: 가격ㆍ옵션ㆍ배송 정보를 구매 판단 순서대로 배치 2) 담당 범위 - 모바일 퍼스트 UI와 카테고리 구조 설계 - ReactㆍNext.js 기반 사용자 화면 개발 - 목록ㆍ상세ㆍ장바구니로 이어지는 구매 동선 구현 - 브랜드 컬러(포레스트 그린) 기준의 디자인 토큰 정리 3) 기술적 이슈와 해결 - 리빙 상품은 사진 비중이 커서 목록이 무거워지는 문제를, 화면 크기에 맞는 이미지를 내려주고 스크롤에 맞춰 불러오는 방식으로 해결했습니다. - 카테고리가 늘어나도 화면이 복잡해지지 않도록, 상위 카테고리는 비주얼 카드로 두고 하위는 목록 안에서 좁혀가는 구조로 정리했습니다. - 하단 탭과 상단 유틸의 기능이 겹치지 않게 역할을 나눠, 한 손 조작에서 이동 단계를 줄였습니다. [배경과 목표] 1) 문제점 - 리빙 상품은 사진으로 분위기를 봐야 하는데 목록이 무겁고 느림 - 카테고리가 많아 원하는 상품까지 여러 단계를 거쳐야 함 - 모바일에서 주요 기능이 흩어져 있어 한 손 조작이 불편 2) 프로젝트 목표 - 모바일에서 둘러보기 좋은 카테고리 탐색 경험 - 목록->상세->장바구니로 이어지는 짧은 구매 동선 - 브랜드 톤을 유지하면서도 빠른 화면 3) 주안점 - 이미지 중심 목록의 로딩 성능 - 카테고리 확장에도 흐트러지지 않는 구조 - 상단 유틸과 하단 탭의 역할 분리 [주요 기능] - 모바일 퍼스트 네비게이션: 상단 유틸과 하단 5탭으로 역할을 나눠, 한 손으로도 검색ㆍ장바구니ㆍ카테고리에 바로 닿습니다. - 비주얼 카드 카테고리 탐색: 분위기가 드러나는 카드로 카테고리를 보여주고, 하위 분류는 목록 안에서 좁혀가 화면이 복잡해지지 않습니다. - 이미지 중심 목록 최적화: 화면 크기에 맞는 이미지를 내려주고 스크롤에 맞춰 불러와, 사진이 많은 목록에서도 빠르게 훑을 수 있습니다. [성과] - 이미지 중심 목록 속도 확보: 화면 크기별 이미지 제공과 스크롤 기반 로딩으로, 사진이 많은 목록도 빠르게 훑을 수 있습니다. - 한 손 조작 동선 정리: 상단 유틸과 하단 5탭의 역할을 나눠, 검색ㆍ장바구니ㆍ카테고리까지 가는 이동 단계를 줄였습니다. [진행 과정] - 2025.01. 브랜드ㆍ정보 구조 정리: 취급 상품과 카테고리 체계, 브랜드 톤 기준을 정리했습니다. - 2025.03. 모바일 UI 설계: 상단 유틸과 하단 5탭 구조, 카테고리 비주얼 카드 방식을 설계했습니다. - 2025.06. 프론트엔드 개발: ReactㆍNext.js로 목록ㆍ상세ㆍ장바구니 화면과 구매 동선을 구현했습니다. - 2026.01. 상품 등록 및 오픈: 상품 데이터를 등록하고 실제 구매 흐름을 확인한 뒤 오픈했습니다. [프로젝트 정보] - 기간: 2025.01 ~ 2026.09 - 역할: UIㆍ커머스 동선 설계ㆍ프론트엔드 개발 - 기술: next.js, React, TypeScript * 표시 금액은 비슷한 규모 작업의 시작 견적(참고용)이며, 실제 금액은 범위 확인 후 안내드립니다.

Grovi 리빙 커머스 웹ㆍ모바일몰 대표 이미지

모바일 구매자 홈 - 컬렉션 배너와 카테고리 진입

기획전 화면 - 테마별 상품 묶음 탐색

카테고리 목록 - 분류를 골라 상품 목록으로 이동