다음(카카오) 우편번호 API
웹사이트에 주소 검색 기능을 추가하고 싶으신가요? 별도의 API 키 발급 없이 간단한 자바스크립트 코드만으로 다음 우편번호 API를 사용하는 방법을 안내해 드립니다.
다음 우편번호 API란?
다음 우편번호 API는 카카오에서 제공하는 무료 주소 검색 서비스입니다. 별도의 API 키나 복잡한 인증 절차 없이 웹페이지에 간단한 자바스크립트 코드만 추가하면 우편번호와 도로명 주소 검색 기능을 구현할 수 있습니다. 상업적 용도로도 무료로 사용이 가능합니다.
이 API는 주로 사용자의 주소 입력 편의성을 높이기 위해 쇼핑몰, 회원가입 페이지 등에서 널리 사용됩니다.
기본 사용 방법 (팝업 방식)
가장 일반적인 방법으로, 버튼 클릭 시 주소 검색 창이 새 창(팝업)으로 뜨는 방식입니다.
-
스크립트 추가하기
다음 API 스크립트 파일을 <head> 태그나 <body> 태그 내부에 추가합니다.HTML<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script> -
HTML 요소 생성하기
우편번호와 주소를 표시할 입력 필드와 주소 검색을 실행할 버튼을 만듭니다.HTML<input type="text" id="postcode" placeholder="우편번호"> <input type="button" onclick="execDaumPostcode()" value="우편번호 찾기"><br> <input type="text" id="roadAddress" placeholder="도로명주소"> <input type="text" id="jibunAddress" placeholder="지번주소">
-
자바스크립트 함수 작성하기
버튼 클릭 시 실행될 자바스크립트 함수를 작성합니다. oncomplete 함수는 사용자가 주소를 선택했을 때 호출되며, 선택된 주소 정보를 data 객체로 반환합니다.JavaScriptfunction execDaumPostcode() { new daum.Postcode({ oncomplete: function(data) { // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드 // 우편번호와 주소 정보를 해당 필드에 넣는다. document.getElementById('postcode').value = data.zonecode; document.getElementById('roadAddress').value = data.roadAddress; document.getElementById('jibunAddress').value = data.jibunAddress; } }).open(); }
iframe 방식 사용법
팝업 대신 현재 페이지 내에 레이어를 띄우는 방식입니다. 이 방식은 모바일 환경에서 특히 유용하며, UI/UX 측면에서 더 나은 경험을 제공할 수 있습니다. 공식 가이드에서 제공하는 샘플 코드를 활용하는 것이 좋습니다.
- 레이어(div)를 페이지에 미리 추가하고, CSS를 이용해 숨겨둡니다.
- 주소 검색 버튼 클릭 시 레이어를 보이게 하고 API를 호출합니다.
- oncomplete 함수에서 주소 정보를 받은 후, 레이어를 다시 숨기는 로직을 추가합니다.
자세한 코드 예제는 다음 우편번호 서비스 공식 가이드를 참고하세요.
oncomplete 함수에서 반환되는 데이터
oncomplete 함수로 전달되는 data 객체에는 우편번호와 주소 관련 다양한 정보가 포함되어 있습니다. 자주 사용되는 주요 속성은 다음과 같습니다.
| 속성명 | 설명 | 예시 |
|---|---|---|
zonecode |
5자리 신규 우편번호 | 13494 |
roadAddress |
도로명 주소 | 경기 성남시 분당구 판교역로 235 |
jibunAddress |
지번 주소 | 경기 성남시 분당구 삼평동 681 |
sido |
시도 명칭 | 경기 |
sigungu |
시군구 명칭 | 성남시 분당구 |
bname |
법정동/법정리 이름 | 삼평동 |
data.userSelectedType을 통해 사용자가 선택한 주소의 타입('R'은 도로명, 'J'는 지번)을 확인할 수 있어, 이를 활용해 상세 주소를 조합하는 로직을 구현할 수 있습니다.
댓글