커머스
하이엔드 쇼핑몰
브랜드 감도를 그대로 살린 하이엔드 패션 커머스. 상품 탐색부터 결제까지 한 호흡으로 이어집니다.
비공개·데모 — AI 가상 데이터로 재구성한 예시입니다
문제
기성 쇼핑몰 솔루션으로는 브랜드가 원하는 화면 연출과 상품 구성의 자유도가 나오지 않았습니다. 하이엔드 패션 커머스는 여백과 서체, 사진의 톤이 곧 브랜드인데 템플릿형 솔루션은 정해진 레이아웃 안에서 배너와 상품 그리드만 바꿀 수 있었습니다. 남성·여성 의류부터 잡화와 주얼리, 골프웨어까지 이어지는 세 단계 분류 구조도 기성 체계에 억지로 끼워 맞춰야 했습니다. 룩북이나 브랜드 에세이처럼 판매 페이지가 아닌 콘텐츠를 상품 탐색 사이에 자연스럽게 놓을 방법도 없었습니다. 그래서 화면과 데이터 구조를 처음부터 직접 설계하는 쪽을 택했습니다.
해결
Laravel로 상품·주문·회원을 직접 설계하고, 프론트는 TailwindCSS로 브랜드 톤을 그대로 옮겼습니다. 카테고리는 대분류 여덟 갈래 아래 중분류와 세부 분류가 이어지는 세 단계로 짜서 의류부터 주얼리, 골프웨어까지 한 체계에 담았습니다. 상품 상세에는 사이즈별 품절 표시와 착용 노트를 넣어 화보 같은 화면에서도 구매 판단에 필요한 정보가 빠지지 않게 했습니다. 검색은 인기 검색어와 최근 검색어를 함께 보여 주는 오버레이로 만들었고 메인의 룩북과 브랜드 에세이, 추천 상품과 최근 본 상품까지 탐색 동선이 끊기지 않고 쇼핑백으로 이어지게 구성했습니다.
- 1.4s
- 평균 페이지 로드
- 98%
- 결제 완료율
- 3개월
- 기획부터 런칭까지
제작 노트
여덟 갈래 분류와 상품 화면
메인은 신상품 여덟 종과 계절 룩북 세 장면, 브랜드 에세이로 시작합니다. 카테고리는 남성·여성 의류와 잡화, 주얼리, 골프웨어, 시계, 세일까지 여덟 갈래로 나뉘고 각 갈래 아래에 상의·아우터 같은 중분류와 셔츠·니트 같은 세부 분류가 이어집니다. 상품 상세에는 사이즈 선택과 품절 표시, 착용감을 설명하는 착용 노트, 함께 입기 좋은 상품 추천이 붙습니다. 쇼핑백에 담으면 버튼이 담았다는 표시로 바뀌고 주문 요약이 있는 쇼핑백 화면으로 이어집니다. 최근 본 상품은 어느 화면에서든 하단에 따라옵니다.
Laravel을 고른 이유
상품 옵션과 재고, 주문 상태처럼 관계가 얽힌 데이터가 많아 스키마를 직접 다루는 편이 유리했습니다. Laravel과 MySQL 조합이면 세 단계 카테고리 구조나 품절 처리 같은 요구를 ORM과 마이그레이션으로 명확하게 관리하면서 운영 화면까지 한 코드베이스에서 해결됩니다. 화면은 TailwindCSS로 만들었습니다. 기성 UI 키트를 걷어내고 유틸리티 클래스로 여백과 서체 크기를 직접 지정하는 방식이라 브랜드가 요구하는 화보 톤을 수치 그대로 재현하는 데 맞았습니다. 정해진 테마를 고치는 것보다 빈 화면에서 쌓는 쪽이 결과적으로 빨랐습니다.
갤러리에서 부티크로
첫 화면 문장이 낮에는 갤러리, 밤에는 부티크입니다. 이 컨셉대로 조명 바꾸기 버튼 하나로 밝은 화면과 어두운 화면을 오가게 했습니다. 방문자는 화보를 넘기듯 신상품과 룩북을 훑다가 마음에 드는 장면에서 상품으로 들어갑니다. 상세 화면은 사진을 크게 두고 정보는 착용 노트로 짧게 정리해 감상과 구매 판단이 한 화면에서 끝나게 했습니다. 쇼핑백에도 함께 두면 좋은 물건을 놓아 탐색이 중간에 끊기지 않습니다. 실서비스처럼 동작하는 데모라 상품 탐색부터 쇼핑백 담기까지 직접 눌러 볼 수 있습니다.
화면
