Avatar Shopping Mall | CREDIT 포트폴리오

AVATAR
SHOPPING MALL_

CLIENT:
LOUCHE 9
SERVICE:
LOUCHE 9 SHOPPING PLATFORM
CATEGORY:
- WEBSITE
- RESPONSIVE WEB DESIGN
- ADMIN PAGE
EXECUTION:
2025.06
PROJECT:
아바타 쇼핑몰 플랫폼 구축

louche 9 is a new type of shopping platform that integrates avatar-based virtual fashion elements into the traditional e-commerce experience. Users can purchase real clothing items, receive corresponding avatar outfits linked to their purchases, or buy avatar-only items independently. The platform was built to reflect a real commerce environment, including an admin dashboard that supports product registration, inventory management, order monitoring, and fulfillment operations. Through this system, Luchinine offers a seamless shopping experience where the real and virtual worlds come together naturally.

루치나인은 기존 쇼핑 경험에 아바타 기반의 가상 패션 요소를 결합한 새로운 형태의 쇼핑 플랫폼입니다. 사용자는 실제 의류를 구매할 수 있을 뿐만 아니라, 구매한 상품과 연동된 아바타 의상 아이템을 함께 획득하거나, 아바타 전용 아이템만 개별적으로 구매할 수도 있습니다. 실제 커머스 환경을 반영해 개발했으며, 관리자 페이지를 통한 상품 등록, 재고 관리, 주문 확인 및 처리 기능까지 포함한 대시보드 시스템을 함께 구현했습니다. 이를 통해 사용자에게 현실과 가상 세계가 자연스럽게 연결된 새로운 쇼핑 경험을 제공합니다.

VIEW SITE

Avatar Shopping Mall

OVERVIEW

블로그형 레이아웃을 기반으로 설계하여 시각적 흐름과 정보 전달력을 높였습니다. 아바타와 브랜드를 소개하는 메인 배너, 브랜드의 분위기와 아이덴티티를 강조하는 사이드 배너, 그리고 판매 중인 상품을 롤링 형식으로 보여주는 콘텐츠 영역을 배치해 사용자에게 강한 첫인상을 전달합니다. 이러한 구조를 통해 브랜드의 개성을 직관적으로 전달하면서도, 방문자의 시선을 자연스럽게 상품으로 이끌어 매력적인 쇼핑 경험을 제공합니다. 상품 상세페이지에서는 다양한 각도의 상품 사진과 함께 상품명, 가격, 적립 혜택, 사이즈, 색상 정보를 명확하게 제공하여 구매 판단을 돕습니다. 기본 쇼핑몰과 동일하게 장바구니 및 바로 구매 기능을 지원하며, 실제 상품과 연동된 아바타 아이템이 있는 경우에는 아바타에게 옷을 미리 입혀볼 수 있는 가상 피팅 기능을 제공합니다.

TONE &
MANNER

브랜드가 기존에 사용하던 컬러를 중심으로 톤앤매너를 구성했습니다. 각기 다른 톤의 핑크를 사용함으로써 여성스러운 감성부터 생동감 있는 분위기까지 다양한 무드 연출이 가능해졌습니다. 메인 컬러인 오렌지는 페이지 전체에 활력과 에너지를 더해주는 강조색으로 활용되어, 사용자의 시선을 상품과 주요 콘텐츠로 효과적으로 이끕니다. 이 조합은 쇼핑몰의 전반적인 분위기를 따뜻하고 유연하게 만들면서도, 명확한 집중 포인트를 제공해 브랜드 아이덴티티와 사용자 경험을 동시에 강화합니다.

Petal Pink
Dusty Pink
Bright Pink
Orange

AVATAR
SHOP

아바타 제품 판매 페이지는 실제 상품 구매 시 제공되는 아바타 아이템과 아바타 전용 아이템을 직접 구매하는 방식을 명확히 구분해 보여주도록 설계했습니다. 기존 쇼핑몰의 가격표 위치에 두 가지 구매 방식을 병렬로 배치하여 사용자가 어떤 형태의 아이템을 얻는 것인지 직관적으로 이해할 수 있도록 구성했습니다. 각 제품을 클릭하면 아바타가 해당 아이템을 즉시 착용해볼 수 있는 가상 피팅 기능이 제공되어, 실제 착장 느낌을 직관적으로 확인할 수 있습니다. 또한 가상 피팅 이후에는 바로 구매로 연결되는 흐름을 적용해, 탐색 → 체험 → 구매까지의 사용자 여정을 자연스럽고 간결하게 완성했습니다.

Avatar Shop

Avatar Product Detail Page

AVATAR
EDIT

아바타 편집 페이지는 사용자가 구매한 아바타 아이템을 손쉽게 관리하고 꾸밀 수 있도록 구성했습니다. 현재 아바타가 착용 중인 아이템은 왼쪽 상단, 사용자가 보유한 전체 아이템은 하단 영역에 구분해 배치하여 직관적으로 확인할 수 있습니다. 또한 아이템 모두 벗기, 원래대로 되돌리기, 아바타 이미지 저장하기 기능을 제공해 사용자가 자유롭게 스타일링을 시도하고, 결과물을 저장하며 즐길 수 있는 재미 요소 중심의 인터랙션 경험을 구현했습니다.

Avatar Edit

주문내역 페이지는 사용자가 주문 완료, 배송 준비 중, 배송 중, 배송 완료 상태별로 제품 리스트를 확인하고, 주문 취소, 반품·교환 요청, 리뷰 작성 등의 기능을 이용할 수 있도록 설계되었습니다. 결제 페이지는 사용자가 선택한 배송지와 주문 상품 정보를 기반으로 직관적이고 안전한 결제 과정을 진행할 수 있도록 구축했습니다. 이 두 페이지를 통해 사용자는 주문부터 결제까지 일관되고 편리한 쇼핑 경험을 누릴 수 있습니다.

My Orders

Payment

CONTEST

콘테스트 페이지는 이벤트성 참여를 지원하는 페이지로, 관리자가 콘테스트를 개설하면 사용자가 직접 참여할 수 있습니다. 사용자는 ‘참여하기’ 버튼 클릭 시 현재 아바타가 착용 중인 의상과 상태를 한눈에 확인할 수 있으며, 좋아요 수 기반으로 순위가 산정되어 순위별 혜택이 제공됩니다. 이를 통해 사용자는 자신의 아바타를 활용한 경쟁과 참여 경험을 직관적이고 재미있게 누릴 수 있도록 설계되었습니다.

Contest List

Contest Winner

ADMIN PAGE

어드민 페이지는 웹사이트 관리자가 접근할 수 있는 콘텐츠 관리 전용 인터페이스입니다. 관리자는 로그인 후, 커뮤니티 공지사항 및 언론보도 콘텐츠를 쉽게 업로드할 수 있습니다. 콘텐츠 업로드 과정은 직관적이고 간편한 방식으로 설계되었으며, 다양한 글쓰기 기능과 편집 도구를 제공하여 관리자가 콘텐츠를 풍부하게 구성할 수 있도록 지원합니다.

Admin Page_dashboard
Admin Page_order Management
Admin Page_product Management