[쇼핑몰 구축기] 결제 단계에서 우편번호 주소 검색 기능 추가하기

워드프레스 쇼핑몰은 그 기반이 미국이다보니 한국적인 특성 반영이 미약합니다. 이중하나가 한국에 맞는 주소 검색 시스템인데요.

여기에서는 워드프레스 쇼핑몰에서 다음 주소 검색 서비스를 이용해 쉽게 줏 검색을 할 수 있도록 만드는 방법에 대해서 알아봅니다.

[쇼핑 경험 개선] 우커머스 결제 단계에서 우편번호 주소 검색 기능 추가하기

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는  https://puripia.com로 아직도 공사중이기는 합니다.) 

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이  공유합니다. 조금 사심이 있기는 합니다.

[쇼핑 경험 개선] 우커머스 결제 단계에서 우편번호 주소 검색 기능 추가하기

워드프레스는 블로깅 시스템으로 시작해 우커머스 플러그인이 등장하면서 쇼핑몰 구축에 용이한 플랫폼으로 성장을 거듭하고 있지만 기본적으로 워드프레스 철학을 반영해 올인원보다는 사람들의 필요에 따라 적절하게 기능을 추가해 사용토록 하고 있습니다.

이런 이유이기도하고, 한국은 시장 규모가 작기 때문에 워드프레스 시장에서 한국 시장을 반영한 프로그램들이 광장히 적습니다.

그렇기 때문에 거듭 이야기하지만 한국에서 워드프레스 쇼핑몰의 최대 단점은 한국적인 특성 반영이 상당히 약하다는 점입니다.

우커머스가 발전하면서 조금씩 동양적인 문화를 반영하기는 하지만 아직도 많은 부분이 부족하기는 합니다. 그렇기에 우리나라 특성에 맞추어 추가해야하는 요소들이 상당히 많이 있죠.

이렇게 우리나라 특성에 맞춰야하는 요소중의 하나가 바로 우리나라 주소 검색 기능입니다.

오늘은 우리나라 특성에 맞추어 주소 검색을 쉽게 할 수 있는 기능 구현을 해보도록 하겟습니다.

1. 워드프레스에 주소 검색 기능 추가 방법

워드프레스에서 우리나라 주소 검색 기능을 추가할 수 있는 방법을 간단히 살펴보죠.

1.1. 유료 플러그인 구입

먼저 제일 쉽게 할 수 있는 방법이 유료로 판매하고 있는 플러그인을 구매해 적용하는 것입니다.

이전에도 한번 소개했지만 한국형 회원관리 플러그인들은 기본적으로 소셜 로그인을 비롯해 주소 검색 기능을 가지고 있습니다.

[쇼핑 경험 개선] 소셜 로그인으로 회원가입 활성화하기

한국형 회원관리 플러그인은 코스모스팜 회원관리(88,000원), 단비 멤버스(99,000원), 망보드 비즈니스(회원관리) 패키지(55,000원) 등이 있습니다.

1.2. 무료 플러그인 설치

그러면 한국형 회원관리 플러그인과 같은 비싼 플러그인만 있을까요?

워드프레스가 각광을 받고 수요가 증가하던 시절에는 다양한 무료 플러그인들이 등장했지만 수요가 시들해진 요즘은 쓸만한 무료 플러그인들은 대부분 자취를 감추었습니다.

그래도 사용 가능한 무료 주소검색 플러그인은 “Beomps Korea Postcode Search” 플러그인인데요.

이 플러그인은 1년이상 업데이트가 안되고 있습니다. 그래서 제대로 작동할까 걱정스러웠지만 제가 테스트해본 바로는 아직은 제대로 작동하기는 하더군요.

아마 이 플러그인은 아주 간단한 구조이고, 우편번호 체계 변동이 없고, 다음 우편번호 검색기능을 끌어오는 것이기 때문에 굳이 업데이트 사항이 없을 수 있을 것입니다.

2. 기존 주소 검색 플러그인들의 단점

위에서 소개한 유료로 판매하는 한국형 회원관리 플러그인들은

• 당근 비싼기도 하거니와
• WP-Members Membership Plugin과 같은 무료 플러그인 기반하에 설계되었기에 무조건 WP-Members Membership Plugin을설치하고 추가로 한국형 회원관리 플러그인을 설치해야 하며
• 다양한 기능들을 제공하도록 설계되었기 때문에 상대적으로 무겁고
• 특정 PG만 사용 가능한다든지 제약이 많고
• 불필요한 기능들로 많이 포함되어 있어 속도에 영향을 줍니다.

또한 무료인 “Beomps Korea Postcode Search” 플러그인은

• 1년이상 업데이트가 되지 않고 있어 찜찜하고
• 간단한 구조이지만 여기에도 다양한 기능들이 있는데 이는 기존 구현 플러그인들에서 이미 해결된 것이라 중복되며
• 우편번호 추가 버튼을 주소 맨 아래에 추가하도록 설계되어 있어 우편번호 옆에 위치하고 있는 일반 검색 시스템에 비교하면 조금 어색합니다.

3. 나만의 주소 검색 기능을 넣어보자.

따라서 불필요한 기능을 제거하고 꼭 필요한 주소 검색 기능만 추가하는 방법을 찾았습니다.

아는 주로 “Beomps Korea Postcode Search” 플러그인에서 제시하는 방법을 따랐고 비슷한 Flow를 적용했습니다.

또한 제대로 작동하지는 않았지만 흐름을 이해하는데는 “워드프레스 WP-Members 우편번호 검색 기능 넣기”라는 글도 참조했습니다.

워드프레스 주소 검색 구현 코드

아래와 같은 코드를 차이드테마 function.php에 추가했습니다.

/*
 * 다음 우편번호 검색 기능 추가
 */
     add_filter( 'woocommerce_checkout_fields' , 'checkout_fields_postcode_lookup' );
     function checkout_fields_postcode_lookup( $fields ) {

             $fields['billing']['billing_postcode']['label'] = '<input type="button" id="billing_postcode_search" value="우편번호 검색" class="btn" onclick="openDaumPostcode();" style="height: 40px;">';

             $fields['shipping']['shipping_postcode']['label'] = '<input type="button" id="shipping_postcode_search" value="우편번호 검색" class="btn" onclick="openDaumPostcode2();" style="height: 40px;">';

             return $fields;
     }

     //워드프레스 초기에 시작할 수 있도록 함
     add_action('init','postcode_lookup_load');

     function postcode_lookup_load() {
     wp_enqueue_script('daum_postcode_woocommerce', 'https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js');
     }

     add_action( 'wp_enqueue_scripts', 'wp_enqueue_scripts_postcode_lookup' );

        //add action for clicking button 
        function wp_enqueue_scripts_postcode_lookup() {
        ?>
            <script type="text/javascript">
                //for billing address
                function openDaumPostcode() {

                    new daum.Postcode({
                        oncomplete: function(data) {
                            document.getElementById('billing_postcode').value = data.zonecode;          
                            document.getElementById('billing_address_1').value = data.address;            
                            document.getElementById('billing_address_2').focus();
                        }
                    }).open();
                }
                //for shipping address
                function openDaumPostcode2() {
                    new daum.Postcode({
                        oncomplete: function(data) {
                            document.getElementById('shipping_postcode').value = data.zonecode;
                            document.getElementById('shipping_address_1').value = data.address;                                
                            document.getElementById('shipping_address_2').focus();
                        }
                    }).open();
                }

            </script>
         <?php
        }Code language: PHP (php)