이 API 은 완전히 공개되어 있습니다.

https://postcode.map.daum.net/guide

고맙게도 제이쿼리가 아니라 순자(순수 자바스크립트)로 오픈되어 있는지라 순자만 사용하는 저로서는 천만다행으로 독해하기가 별로 어렵지 않았습니다.

링크페이지에서 제가 생각하는 일종의 "엑기스"만 한번 소개해 볼게요.

먼저 아래코드를 한번 실행해 보세요.

이 코드는 제가 제 방식대로 가장 명료하게 추린 코드입니다. 각 색깔의 아이디는 본인이 다른 이름으로 줘도 됩니다.

상세주소 부분은 주소검색이 끝난 후 자동으로 포커스가 이동되며 "유일"하게 본인이 직접 입력하는 항목입니다.

<style>
input { display:block; width:300px; }
</style>
<button type="button" onclick="daumAddress()">주소검색</button>
<input id="post_code" placeholder="우편번호">
<input id="road_address" placeholder="도로명주소">
<input id="jibun_address" placeholder="지번주소">
<input id="detail_address" placeholder="상세주소">
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function daumAddress() {
    new daum.Postcode({
        oncomplete: function(data) {
            document.querySelector("#post_code").value = data.zonecode; // 우편번호
            document.querySelector("#road_address").value = data.roadAddress; // 도로명주소
            document.querySelector("#jibun_address").value = data.jibunAddress; // 지번주소
        }
    }).open();
    document.querySelector("#detail_address").focus();
}
</script>

----------

이걸 게시판의 여분필드로 적용하는 방법입니다. 지번주소도 필요없을 것 같아서 제외하였습니다.

아래 코드를 write.skin.php 의 적당부분에 넣어보세요.

빨간색이 추가된 소스입니다. 여분필드 1,2,3 을 사용했습니다.

<style>
input { display:block; width:300px; }
</style>
<button type="button" onclick="daumAddress()">주소검색</button>
<input id="post_code" placeholder="우편번호" name="wr_1" value="<?php echo $write['wr_1']; ?>">
<input id="road_address" placeholder="기본주소" name="wr_2" value="<?php echo $write['wr_2']; ?>">
<input id="detail_address" placeholder="상세주소" name="wr_3" value="<?php echo $write['wr_3']; ?>">
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function daumAddress() {
    new daum.Postcode({
        oncomplete: function(data) {
            document.querySelector("#post_code").value = data.zonecode; // 우편번호
            document.querySelector("#road_address").value = data.roadAddress; // 기본주소
        }
    }).open();
    document.querySelector("#detail_address").focus();
}
</script>

뷰페이지에서는 아래처럼 표현해 주면 되겠죠.

<?php echo $view['wr_1']." ".$view['wr_2']." ".$view['wr_3']; ?>

또는 변수를 하나 만들어서 아래처럼요. 리스트페이지도 동일패턴으로 적용합니다.

<?php
$view_address = $view['wr_1']." ".$view['wr_2']." ".$view['wr_3'];
echo $view_address;
?>

저는 3개의 여분필드를 사용하는 것이 낭비라는 생각이 들어 약간의 용을 써서 하나의 여분필드로 만들어 보았습니다.

https://sir.kr/g5_skin/52764

----------

마지막으로 일번페이지에 적용하는 방법입니다.

form 을 하나 감고 폼의 메소드를 post 로 주고 각각의 input 에 name 을 임의대로 주고 submit 를 줍니다.

<style>
input { display:block; width:300px; }
</style>
<button type="button" onclick="daumAddress()">주소검색</button>
<form action="address.php" method="post">
<input id="post_code" placeholder="우편번호" name="address_1" >
<input id="road_address" placeholder="기본주소" name="address_2">
<input id="detail_address" placeholder="상세주소" name="address_3">
<input type="submit">
</form>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function daumAddress() {
    new daum.Postcode({
        oncomplete: function(data) {
            document.querySelector("#post_code").value = data.zonecode; // 우편번호
            document.querySelector("#road_address").value = data.roadAddress; // 기본주소
        }
    }).open();
    document.querySelector("#detail_address").focus();
}
</script>

액션 문서인 address.php 에서는 각 input 의 정보를

$_POST['address_1'] 과 $_POST['address_2'] 와 $_POST['address_3'] 의 포스트변수로 받아서 DB 에 저장하거나 또는 원하는 로직을 지지고 볶고 해 주면 되겠습니다.

css 는 본인의 취향대로요.