카페24 쇼핑몰에서 네이버페이 버튼과 카카오체크아웃 버튼 배치 최적화하기

 

네이버페이와 카카오체크아웃은 국내 소비자들이 많이 사용하는 간편결제 시스템입니다. 올바른 버튼 배치를 통해 쇼핑몰의 구매 전환율을 높일 수 있습니다. 잘못된 위치에 버튼을 배치하면 고객이 결제 옵션을 찾지 못하거나, UX가 불편하여 이탈률이 높아질 수 있습니다.

🔹 버튼 최적화의 장점

• ✅ 구매 전환율 증가: 고객이 원하는 결제 수단을 빠르게 찾을 수 있음
• ✅ UX 개선: 직관적인 디자인으로 쇼핑몰의 사용성을 향상
• ✅ 이탈률 감소: 복잡한 결제 단계 없이 간편결제 유도 가능

1. 네이버페이 & 카카오체크아웃 버튼의 기능 비교

기능네이버페이카카오체크아웃

주요 사용자층	네이버 회원	카카오톡 사용자
결제 방식	신용카드, 계좌이체, 포인트 사용 가능	신용카드, 카카오머니 사용
장점	높은 신뢰도, 네이버 쇼핑과 연계 가능	카카오톡 기반으로 높은 접근성
단점	사용자의 네이버 ID 필요	카카오머니 사용 시 잔액 부족 문제 가능

2. UX/UI 최적화를 위한 버튼 배치 전략

📌 1) 버튼의 위치는 어디가 좋을까?

• 상품 상세 페이지: "구매하기" 버튼과 함께 간편결제 버튼을 배치
• 장바구니 페이지: 기존 결제 버튼과 나란히 배치하여 옵션 제공
• 결제 페이지: 결제 수단 선택 시 네이버페이와 카카오체크아웃을 강조

📌 2) 버튼 디자인 및 크기 최적화

• 버튼 크기는 충분히 크고 눈에 띄게 (모바일 기준 44px 이상 권장)
• 색상 대비를 활용하여 시각적 강조 (네이버페이: 녹색, 카카오체크아웃: 노란색)
• "즉시 결제 가능" 등의 문구 추가하여 신뢰감 제공

📌 3) 모바일과 PC 환경 최적화

PC에서의 노출

 

모바일에서의 노출

• 모바일에서는 손가락 터치가 편한 하단 중앙에 배치
• PC에서는 기존 결제 버튼과 나란히 배치하여 선택을 쉽게 제공

3. 카페24에서 실제 적용하는 방법

🔹 네이버페이 버튼 설정 방법

1. 카페24 관리자 페이지 접속
2. "상점관리" → "결제설정" 메뉴 이동
3. 네이버페이 연동 설정 진행 후 버튼 위치 조정
4. 모바일과 PC 각각 버튼 크기 및 위치 확인 후 저장

🔹 카카오체크아웃 버튼 설정 방법

1. 카페24 관리자 페이지에서 "카카오페이" 플러그인 추가
2. "디자인 수정" 메뉴에서 결제 버튼 위치 조정
3. 결제 옵션에서 기본 결제 수단으로 추가

4. 네이버페이 및 카카오체크아웃 버튼 커스텀 코드 예제

<style>
@media screen and (min-width: 768px) {
    #NaverChk_Button {
        text-align: left;
        margin-left: -26px;
    }
    #appPaymentButtonBox {
        margin-top: -93px;
        text-align: right;
        margin-right: -26px;
    }
}
</style>
<!-- 네이버 체크아웃 구매 버튼 -->
<div id="NaverChk_Button"></div>
<!-- 상품 상세 페이지에 추가되는 앱 관련 결제 버튼 div -->
<div id="{$app_payment_button_box_id}"></div>

 

@media 태그를 활용하여 모바일과 PC를 구분하여 최적화 시킬 수 있다.