다음API」우편번호 서비스( 도로명,지번,영문 ) : 홈페이지에 주소검색서비스 구현

네이버API 오픈소스도 유용한게 많지만 다음도 만만치 않습니다.

이번에 소개할 내용은 다음에서 제공하는 우편번호조회 API는 스크립트 오픈소스로 별도의 인증절차 없이 웹소스에 삽입하는 방법으로 정말 간단하게 우편번호조회 및 주소찾기 기능이 구현됩니다.

사이트개발 시 주소검색 서비스를 제공하려면 우체국에서 DB를 받아서 사이트에 데이터 밀어넣고 웹코딩도 별도로 해야 하고..  생각보다 손이 많이 가는 작업에 매년 DB 갱신될 때마다 업데이트 또한 간단한 작업은 아닙니다.

이제 이런 불편함을 한방에 날려줄 다음 우편번호 서비스 API에 대해 알아보겠습니다.

다음 우편번호 서비스 : http://postcode.map.daum.net/guide

다음 우편번호 서비스 API 사이트로 접속하면 지원되는 내용이 상세히 나와있는데 유독 눈에 띄는 문구가 보입니다.

"Key를 발급받을 필요가 없습니다."

"사용량에 대한 제한은 전혀 없습니다.."

"기업용이든 상업적 용도이든 상관없이 무료로 사용 가능합니다."

"도로명 주소, 지번 주소, 영문 주소까지 모두 확인 가능합니다."

"가장 최신의 데이터를 이용하실 수 있습니다."

정말 원하는 내용을 꼭 집어서 보여줍니다. 이런 점은 네이버와는 차이가 있네요.

아래로 내려보면 여러가지 지원모드와 적용방법이 상세하게 나와있습니다.

내용이 많아서 복잡해 보이지만 차분하게 살펴보면 그리 어려운게 아니란걸 알수있을 겁니다.

스크립트 쭉 복사해다 붙여넣고 id값만 잘 맞춰서 사용하면 됩니다.

아래는 이번에 작업한 사이트에 적용한 내용입니다.

도로명주소와 지번주소를 동시에 검색하며 데이터 피드백 또한 모든 값을 가져 올 수 있습니다.

팝업창, 레이어, 프레임, 다음지도 등 여러가지 모드별 적용이 가능합니다. 물론 해당 소스 또한 제공하니 그냥 소스복사해서 뿌려놓고 변수 값만 지정해서 쓰시면 됩니다.

사이트에 적용한 소스코드입니다.

<div class="form-group">
	<label for="MemberAddr" class="col-sm-2 control-label">주소</label>
	<div class="col-sm-10">
		<input type="text" name="PostCode" id="sample4_postcode" class="form-control inp-post inp-post-1" value="<?=$Info[POST_CODE]?>" placeholder="우편번호" readonly>
		<input type="button" class="btn btn-primary" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>
		<input type="text" name="RoadAddr" id="sample4_roadAddress" class="form-control inp-post inp-post-2" value="<?=$Info[ROAD_ADDR]?>" placeholder="도로명주소" readonly>
		<input type="text" name="JibunAddr" id="sample4_jibunAddress" class="form-control inp-post inp-post-2" value="<?=$Info[JIBUN_ADDR]?>" placeholder="지번주소" readonly>
		<input type="text" name="Addr" class="form-control inp-post inp-post-2" value="<?=$Info[ADDR]?>" placeholder="상세주소">
		<span id="guide" style="color:#999"></span>
	</div>
</div>

<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
 //본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다.
 function sample4_execDaumPostcode() {
	  new daum.Postcode({
			oncomplete: function(data) {
				 // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

				 // 도로명 주소의 노출 규칙에 따라 주소를 조합한다.
				 // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
				 var fullRoadAddr = data.roadAddress; // 도로명 주소 변수
				 var extraRoadAddr = ''; // 도로명 조합형 주소 변수

				 // 법정동명이 있을 경우 추가한다. (법정리는 제외)
				 // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
				 if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
					  extraRoadAddr += data.bname;
				 }
				 // 건물명이 있고, 공동주택일 경우 추가한다.
				 if(data.buildingName !== '' && data.apartment === 'Y'){
					 extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
				 }
				 // 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
				 if(extraRoadAddr !== ''){
					  extraRoadAddr = ' (' + extraRoadAddr + ')';
				 }
				 // 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다.
				 if(fullRoadAddr !== ''){
					  fullRoadAddr += extraRoadAddr;
				 }

				 // 우편번호와 주소 정보를 해당 필드에 넣는다.
				 document.getElementById('sample4_postcode').value = data.zonecode; //5자리 새우편번호 사용
				 document.getElementById('sample4_roadAddress').value = fullRoadAddr;
				 document.getElementById('sample4_jibunAddress').value = data.jibunAddress;

				 // 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
				 if(data.autoRoadAddress) {
					  //예상되는 도로명 주소에 조합형 주소를 추가한다.
					  var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
					  document.getElementById('guide').innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';

				 } else if(data.autoJibunAddress) {
					  var expJibunAddr = data.autoJibunAddress;
					  document.getElementById('guide').innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';

				 } else {
					  document.getElementById('guide').innerHTML = '';
				 }
			}
	  }).open();
 }
</script>

개발자를 위한 편리한 API 오픈소스에 대해 또 알아보도록 하겠습니다.