카페24 쇼핑몰의 네이버페이, 카카오페이는 디자인이 몇가지 타입으로 고정이 되어있습니다. 그래서 브랜드의 쇼핑몰 디자인에 어울리지 않아도 억지로 사용해야하죠.
또 많은 고객님들이 수정을 문의주시는 내용이기도 합니다. 네이버페이와 카카오페이 간편결제 버튼 디자인은 수정이 가능할까요?
네이버페이 버튼 기본 디자인
먼저 네이버페이버튼부터 살펴보도록 하겠습니다. 단순히 버튼만 노출되는 것이 아니라, 제목과 찜 버튼, 그리고 네이버페이 이벤트 내용이 노출됩니다.
각 간편결제 플랫폼마다 결제를 유도해야하니 이해가 되는 부분이지만 역시나 브랜드의 디자인이 베어있는 쇼핑몰에는 어울리지 않는 내용입니다.
카카오페이(톡체크아웃) 버튼 기본 디자인
카카오페이 버튼도 비슷하게 구성되어있어요. 제목과, 찜버튼, 채널추가, 이벤트가 역시 노출됩니다. 역시나 단순한 버튼이 아니라 많은 내용이 노출되어서 깔끔하지 못하죠.
다음으로 간편결제 버튼들의 소스코드를 살펴봐야합니다.
간편결제 버튼 소스코드
네이버페이 버튼은 id=”NaverChk_Button” 아래에 표시되고,
카카오페이(톡체크아웃) 버튼은 id=”appPaymentButtonBox” 아래에서 자동으로 마크업이 삽입되는 방식입니다.
그리고 네이버페이 버튼은 !important로 스타일이 적용되어 있어서… 단순히 스타일만 적용하면 되는 것이 아니라 기존 스타일보다 조금더 확실한 셀렉터를 선언함으로써 우선순위를 높여 스타일을 적용하는 방법이 필요합니다.
그렇게 불필요한 요소들은 모두 숨김처리를 하고, 필요한 버튼만 스타일링해주면 됩니다. 결국 네이버페이와 카카오페이 간편결제 버튼의 디자인 수정은 가능한 것이죠.
그리고 작업의 복잡도는 적응형이냐 반응형이냐에 따라서 또 달라지는데요. 네이버페이 버튼의 경우에는 데스크톱과 모바일 관계없이 동일한 스타일을 유지합니다.
카카오페이(톡체크아웃) 버튼 PC와 Mobile 디자인 차이
하지만 카카오페이 버튼의 경우에는 접속 환경 데스크톱이냐 모바일이냐(Useragent)에 따라서 스타일이 다르게 적용됩니다.
그래서 데스크탑에서 화면크기에 따른 모바일 레이아웃을 볼 때와 모바일 디바이스에서 볼 때의 버튼 모양이 다르게 보일 수 있는데 조금 더 디테일하게 작업을 마무리하고자 한다면 이 차이도 대응을 해야하죠.
다만, 모바일 화면은 보통 모바일 디바이스에서 접속한다는 점을 고려하여 디테일한 수정은 넘어갈지, 작업할지를 결정하여 작업하면 될만한 사항입니다.
간편결제 수정 서비스 중단 이슈
이전에는 간편결제 버튼의 디자인 수정 작업의 경우에는 의뢰를 받지 않았습니다. 이유는 정해져있는 대로 사용하지 않을 경우 네이버나 카카오페이에서 서비스 중단이 될 수 있기 때문입니다.
카페24 디자인센터에서도 간편결제 디자인 수정에 대한 내용을 정리해서 알리고 있습니다. 카카오페이(톡체크아웃)만 가이드에 따른 수정이 가능하다는 것이죠.
실제로 서비스 중단된 브랜드가 있었습니다. 네이버페이측에 문의한 결과 변경된 로고를 사용하지 않았다는 이유뿐이었습니다.
위 사례를 통해서는 카페24 쇼핑몰에서 삽입되는 간편결제 버튼의 경우에는 버튼을 제외한 불필요한 요소들을 숨기는 수준의 작업으로도 문제가 발생할지는 아직 알 수 없습니다.
제가 작업하는 방법은 삽입된 버튼 그대로에서 불필요한 요소들을 삭제하기 때문에 변경된 디자인을 신경쓰지 않아도 자동으로 적용이 될 것이기에 로고가 변경되는 상황에서 리스크는 적다고 할 수 있지만, 그래도 네이버페이에서 발신되는 메일이나 알림을 잘 체크하여 대응을 해야합니다.
이로써 서비스 중단의 리스크는 있지만, 브랜드 디자인에 맞춰서 간편결제 디자인을 최적화 할 수 있게 되었네요. 의뢰하실 때는 꼭 이 부분을 감안하셔야 합니다.
