CAFE24 RESPONSIVE DESIGN

LILAC

상품과 브랜드에 집중하는
미니멀 커머스 디자인

여백과 타이포그래피를 중심으로 브랜드의 이미지를 살리고,
상품 탐색부터 구매까지 필요한 기능을 간결하게 구성했습니다.

RESPONSIVE   ·   MINIMAL   ·   EDITORIAL   ·   PRODUCT FOCUSED

ABOUT LILAC

브랜드와 커머스의 균형

LILAC은 장식적인 요소를 과도하게 사용하기보다 상품 이미지, 타이포그래피, 여백을 중심으로 구성한 카페24 쇼핑몰 디자인입니다.

일반적인 쇼핑몰처럼 많은 정보를 한 화면에 배치하기보다, 브랜드의 분위기를 유지하면서 상품 탐색과 구매에 필요한 정보가 자연스럽게 이어지도록 설계했습니다.

01

에디토리얼한 미니멀 디자인

불필요한 박스와 장식을 줄이고 넓은 여백, 큰 이미지, 절제된 타이포그래피를 사용했습니다. 쇼핑몰이면서도 브랜드 사이트와 같은 정돈된 인상을 전달합니다.

02

상품 이미지가 중심이 되는 구성

UI가 상품보다 먼저 보이지 않도록 구성했습니다. 메인, 상품목록, 상품상세에서 상품 이미지를 충분히 보여주고 텍스트와 버튼은 필요한 정보 위주로 간결하게 정리했습니다.

03

PC와 모바일을 고려한 반응형 UX

화면 크기에 따라 단순히 축소되는 방식이 아니라, PC와 모바일 각각의 사용환경을 고려해 주요 UI가 변경됩니다.

모바일 메뉴, 터치형 상품 영역, 상품상세 하단 구매 UI 등 스마트폰에서의 탐색과 구매 흐름을 고려했습니다.

04

브랜드 무드와 판매 기능을 함께

브랜드 콘텐츠만 보여주는 사이트도, 판매정보가 지나치게 강조된 쇼핑몰도 아닌 그 중간의 균형을 목표로 했습니다. 브랜드를 보여주면서도 상품 탐색과 실제 구매가 자연스럽게 이어집니다.

TYPOGRAPHY

타이포그래피도 디자인의 일부입니다.

영문 Heading에는 Instrument Serif, Body에는 Manrope, 한글에는 Pretendard를 사용합니다.

세리프와 산세리프의 조합을 통해 브랜드의 감도는 유지하면서 상품 정보는 읽기 쉽게 구성했습니다.

MAIN PAGE

메인 페이지 구성

PRODUCT LIST

상품에 집중한 상품목록

상품 이미지와 기본 정보를 중심으로 구성하여 여러 상품을 빠르게 탐색할 수 있도록 했습니다.

찜하기와 장바구니 등 쇼핑에 필요한 기능을 함께 사용할 수 있으며, 다양한 상품을 등록해도 화면이 복잡해 보이지 않도록 구성했습니다.

PRODUCT DETAIL

구매에 집중한 상품상세

PC에서는 상품 이미지와 구매정보 영역을 분리하여 상품을 확인하면서 옵션과 구매정보를 함께 확인할 수 있습니다.

모바일에서는 화면 크기에 맞게 구매 UI가 변경되며, 카페24의 상품 옵션, 수량 선택, 장바구니 및 구매 기능을 사용할 수 있습니다.

TIME SALE

할인기간을 활용한 타임세일 표시

할인기간이 설정된 상품은 남은 할인시간을 보여주는 카운트다운 표시를 활용할 수 있습니다. 메인, 상품목록, 상품상세에서 프로모션 상품을 보다 명확하게 전달할 수 있습니다.

PAGE 구성

쇼핑몰 운영에 필요한 주요 화면

EASY OPERATION

카페24 관리자 기반 운영

상품, 카테고리, 가격, 옵션, 할인기간 등 쇼핑몰의 기본 정보는 카페24 관리자에서 관리할 수 있습니다.

운영하면서 자주 변경되는 정보를 최대한 카페24의 기본 운영환경과 연결해 디자인과 쇼핑몰 운영을 분리하지 않는 것을 기준으로 제작했습니다.

DESIGN STYLE

컬러보다 콘텐츠가 먼저 보이도록

전체적으로 화이트를 기반으로 한 절제된 컬러 시스템을 사용합니다. 특정 컬러가 디자인을 지배하기보다 상품 이미지와 브랜드 콘텐츠가 화면의 중심이 될 수 있도록 구성했습니다.

PLEASE CHECK

구매 전 확인해 주세요.

· 본 디자인은 카페24 쇼핑몰용 디자인입니다.

· 상품 이미지, 상품정보 및 브랜드 콘텐츠는 운영하는 쇼핑몰에 맞게 등록해야 합니다.

· 카페24 관리자 설정 및 사용 기능에 따라 일부 화면의 표시 내용이 달라질 수 있습니다.

· SNS 로그인 등 외부 서비스와 연결되는 기능은 카페24 및 해당 서비스의 별도 설정이 필요할 수 있습니다.

· 디자인 구매 후 별도의 기능 추가 및 구조 변경은 작업 범위에 따라 추가 비용이 발생할 수 있습니다.

ORDER & CONTACT

구매 후 접수방법

카페24 디자인센터에서 디자인 구매 및 결제를 완료하신 후 아래 방법으로 접수해 주세요.

PROCESS

접수 절차

LILAC

브랜드의 분위기는 살리고,
쇼핑에 필요한 기능은 간결하게.

상품과 콘텐츠에 집중할 수 있도록 설계한
카페24 반응형 커머스 디자인입니다.