카페24 쇼핑몰 제작, 반려견 간식 브랜드에 맞게 커스텀한 사례

카페24 메인페이지 (출처: 카페24)

 

카페24로 쇼핑몰을 만들다 보면 기본 기능만으로 구현하기 어려운 화면이 생깁니다.

특히 상품 구성이 여러 개이거나, 상세페이지 안에서 옵션 비교와 구매를

함께 처리해야 하는 경우에는 기본 상품 페이지 구조만으로는 원하는 사용성을 만들기 어렵습니다.

이번 프로젝트는 반려견 치석 제거 간식을 판매하는 브랜드의 카페24 쇼핑몰 제작 사례입니다.

카페24의 기본적인 주문·결제·회원 기능은 그대로 활용하면서,

상품 비교와 옵션 선택, 고정 구매 영역 등 브랜드에 필요한 화면을 별도로 설계하고 적용했습니다.

---

카페24 기본 기능에서 부족했던 부분

이번 쇼핑몰에서 가장 먼저 확인한 부분은 상품 판매 방식이었습니다.

단순한 단품 판매가 아니라 여러 개의 묶음 상품을 함께 판매하고 있었기 때문에,

일반적인 옵션 선택 방식만으로는 각 상품 구성을 빠르게 비교하기 어려웠습니다.

또 상세페이지 안에 제품 설명이 많아질수록 페이지가 길어지는데,

사용자가 구매를 위해 다시 상단으로 이동해야 하는 불편도 있었습니다.

 

고객사의 주요 요구사항은 다음과 같았습니다.

• 이벤트와 주요 혜택을 쉽게 노출할 것
• 묶음 상품의 차이를 빠르게 비교할 수 있을 것
• 상세페이지 안에서 옵션을 직관적으로 선택할 수 있을 것
• 페이지 어느 위치에서도 바로 구매로 이동할 수 있을 것

이 요구사항을 기준으로 기존 카페24 기능은 유지하고, 필요한 부분만 커스텀하는 방향으로 개발했습니다.

---

묶음 상품을 한눈에 비교할 수 있도록 옵션 구조를 변경했습니다

이번 프로젝트에서 가장 중요했던 기능 중 하나는 묶음 옵션 선택 영역이었습니다.

일반적인 셀렉트 박스 형태로 옵션을 제공하면 사용자가 옵션을 하나씩 눌러보면서 가격과 구성을 비교해야 합니다.

상품 구성이 많아질수록 이 과정도 복잡해집니다.

그래서 단품과 묶음 상품을 한 화면에서 확인할 수 있도록 옵션 구조를 다시 설계했습니다.

옵션 선택 페이지 (상품명은 고객사 요청으로 지웠습니다)

 

각 구성에는 가격과 할인율을 함께 표시해 사용자가 별도의 계산 없이 차이를 확인할 수 있도록 했습니다.

옵션을 선택한 뒤에는

• 선택 수량
• 상품별 금액
• 최종 합계 금액
• 당일 출고 안내

등이 함께 표시되도록 구성했습니다.

카페24의 주문 기능 자체를 새로 만드는 것이 아니라, 상품을 선택하는 과정만 브랜드에 맞게 변경한 방식입니다.

---

상세페이지 어디서든 구매할 수 있는 고정 구매 바를 적용했습니다

상세페이지를 제작할 때 자주 생기는 문제가 있습니다.

제품 설명을 아래까지 읽은 사용자가 구매를 결정하더라도, 다시 페이지 위로 올라가 옵션을 선택해야 하는 경우입니다.

이번 쇼핑몰에서는 이 동선을 줄이기 위해 하단 고정 구매 바를 적용했습니다.

하단 고정 구매하기 펼쳤을 때 (상품명은 고객사 요청으로 지웠습니다)

 

사용자가 페이지를 스크롤해도 화면 하단에는

• 상품명, 선택 금액, 장바구니 버튼, 바로구매 버튼

이 계속 표시됩니다.

제품 설명을 확인하다가 구매하고 싶어진 시점에 바로 다음 단계로 넘어갈 수 있도록 만든 구조입니다.

상세페이지가 긴 상품일수록 이런 작은 UI 차이가 실제 사용성에 큰 영향을 줍니다.

---

메인 화면에는 운영에 필요한 영역을 별도로 구성했습니다

쇼핑몰은 오픈한 이후에도 계속 내용이 바뀝니다.

신규회원 쿠폰을 변경하거나, 특정 상품을 할인하거나, 진행 중인 이벤트를 노출해야 하는 경우가 많습니다.

그래서 메인 화면에서는 운영 중 자주 변경되는 콘텐츠를 별도의 영역으로 구분했습니다.

쇼핑몰 메인페이지

베스트셀러 영역

주요 상품을 메인 화면에서 바로 확인할 수 있도록 베스트셀러 영역을 구성했습니다.

상품 카드에는 할인율과 정가, 판매가를 함께 표시해 가격 정보를 한눈에 볼 수 있도록 했습니다.

신규회원 쿠폰 배너

베스트셀러 영역 아래에는 신규 회원을 위한 웰컴쿠폰 배너를 배치했습니다.

운영자가 현재 진행 중인 가입 혜택을 메인에서 쉽게 노출할 수 있도록 구성했습니다.

상단 띠배너

사이트 최상단에는 공지나 이벤트 내용을 노출할 수 있는 띠배너를 적용했습니다.

쇼핑몰을 운영하면서 자주 바뀌는 내용은 이렇게 별도의 영역으로 분리해두는 것이 관리하기 편합니다.

---

필요한 부분만 바꿔도 쇼핑몰 사용성은 달라집니다

카페24를 사용하고 있다고 해서 기본 구조에만 맞춰 운영할 필요는 없습니다.

 

상품 옵션이나 구매 동선, 메인 화면처럼
브랜드에 맞지 않는 부분은 필요한 범위만 따로 설계하고 개발할 수 있습니다.

 

현재 카페24 쇼핑몰을 운영 중인데 불편한 기능이 있거나 원하는 화면을 구현하지 못하고 있다면
기존 구조를 먼저 확인해보는 것이 좋습니다.

 

노바링크는 카페24 쇼핑몰 제작부터 기존 사이트 기능 개선, UI 커스텀까지 진행하고 있습니다.

“이 기능도 카페24에서 구현할 수 있을까?” 고민 중이라면
원하시는 화면이나 기능을 보내주세요.

 

가능한 구현 방식과 개발 범위부터 함께 정리해드리겠습니다.

 

노바링크에 팔리는 쇼핑몰 개발 문의하기