티스토리 뷰



이전부터 사용하던 그누보드4의 기능중에 자주 사용하지 않아서 모르고 있었던 변화가 있었더군요. 회원가입이나  회원 정보 수정에서 주소 입력에 사용하던 우편번호 검색 기능입니다. 기존 코드에서 AJAX 방식으로 sir.co.kr 사이트에서 정보를 검색 및 출력해 주는 방식이었는데 sir.co.kr에서 더이상 지원하지 않는다는 공지가 있더군요. 늦었지만 해결 방법을 찾아보니 다른 분이 주소만 바꾸면 동일한 방식으로 사용할 수 있도록 서비스를 제공하기도 하지만 근원적인 해결 방법이 아니고 또 새로운 우편번호 체계를 적용하는 문제와 지속적인 데이터베이스 업데이트를 생각한 다면 포털에서 제공하는 서비스를 적용하는 것이 적절하다고 생각 되었습니다. 무엇보다 아래와 같은 장점이 있었습니다.

  • 별도의 등록 과정이 필요없습니다.
    OPENAPI만 하더라도 개발자 등록과 키발급등의 과정이 필요했습니다.

  • 트래픽 제한이 없습니다.
    OPENAPI의 경우에는 일 트래픽 제한이 있습니다.

  • 무엇보다 무료이고, 친절한 예제와 빠른 속도는 마음에 쏙 들었습니다.

  • 우편번호 데이터베이스의 최신 업데이트에 대한 부담이 없어졌습니다.

  • 최근 해외 배송으로 영문 주소 활용에 대한 필요가 늘고 있는데 그에 대한 자연스러운 대처가 가능합니다.

  • 맵과의 연동, 자동 완성등 다양한 부가 기능을 제공합니다.


이상의 장점을 활용하는 예제로 그누보드4의 우편번호 검색 기능을 DAUM 우편번호 서비스로 교체하는 과정을 다루어 보겠습니다. 

우선 DAUM 우편번호 서비스의 사이트 주소는 http://postcode.map.daum.net/guide입니다. 상단의 예제와 함수등을 참조하면 더욱 다듬어진 응용을 개발하실 수 있습니다.




        

위의 HTML 은 그누보드4의 회원 가입 코드인 skin/member/basic 폴더의 register_form.skin.php의 주소 연관 부분 입니다. 기존과 달라진 점이라면 각 텍스트 항목에 name= 뿐만아니라 id=로 개별 항목을 document.getElementById()로 자바스크립트에서 접근할 수 있도록 추가해준것과 우편번호 검색 이미지를 클릭하면 DAUM의 자바스크립트 함수가 호출되도록 했다는 것입니다. 하단에서 정의한 execDaumPostcode()에 해당하며 이 함수를 통해서 팝업을 띄우고 사용자가 검색된 주소중 하나를 클릭하면 그 결과를 각 텍스트 항목에 입력합니다.  함수 끝부분에 있는 "open('',100,100,'zipsearch')" 부분이 팝업 창을 띄우는 부분으로 4번째 인수가 창의 이름을 지정하는 부분으로 이 이름을 통해서 창을 여러개 중복해서 띄우지 않도록 예방할 수 있습니다. 첫번째 인수는 기본 검색어, 두번째와 세번째 위칭의 창의 위치를 지정합니다. 함수내에 주석처리되어 있는 "data.zonecode" 변수를 통해서 5자리 새우편번호를 사용할 수 있습니다. 아래 그림은 DAUM 우편번호 검색 창을 띄운 그림입니다.



댓글
댓글쓰기 폼