StoryBridge

행정안전부(juso.go.kr)의 주소 검색 API는 보안 정책상 타 도메인에서 일반적인 </code>으로 직접 호출하면 차단되거나 정상 작동하지 않습니다. 대신 행안부에서 제공하는 <strong>팝업/인터넷 창 호출 가이드라인</strong>을 따르거나, 가장 널리 쓰이고 편리한 카카오(Daum) 우편번호 서비스(행안부 주소 데이터 연동)를 이용해 layer(iframe 형태)로 구현하는 것이 표준입니다.</p><p>여기서는 <strong>1) 가장 깔끔하고 장애가 없는 카카오/행안부 연동 레이어(iframe) 방식</strong>과 <strong>2) 행안부 가이드 기준 코드</strong> 두 가지 중 훨씬 안정적인 전자 방식으로 구현해 드립니다.</p><p>제공해주신 HTML 구조에 '주소'와 '상세주소'를 입력받을 수 있도록 input을 매칭하여 구성했습니다.</p><hr><h3>1. HTML 및 레이어 구성 (수정 및 추가)</h3><p>우편번호와 주소창 외에, 주소 검색 창이 들어갈 <code><strong><div></strong></code><strong> 레이어 영역</strong>과 주소를 담을 input을 명확히 정의합니다.</p><p>HTML</p><p> </p><pre><code class="language-plaintext"><div class="address-input2">  <input type="number" name="coZipCode" id="coZipCode" class="business_num" placeholder="우편번호" maxlength='5' readonly />  <button type="button" onclick="openAddressSearch()">주소 검색</button> <br/>  <input type="text" name="coAddr2" id="coAddr2" placeholder="기본 주소" readonly style="width:100%; margin-top:5px;" />  <input type="text" name="coAddrDetail" id="coAddrDetail" placeholder="상세 주소" style="width:100%; margin-top:5px;" /> </div>  <div id="addressLayer" style="display:none; position:fixed; overflow:hidden; z-index:1000; -webkit-overflow-scrolling:touch; border:1px solid #ccc; width:100%; max-width:500px; height:400px;"> <img src="//t1.daumcdn.net/postcode/resource/images/close.png" id="btnCloseLayer" style="cursor:pointer; position:absolute; right:-3px; top:-3px; z-index:1; width:20px;" onclick="closeAddressSearch()" alt="닫기 버튼"> </div> </code></pre><hr><h3>2. 자바스크립트 구현 (카카오/행안부 주소 레이어 API)</h3><p>이 방식은 내부적으로 <code><iframe></code>을 동적으로 생성하여 <code>addressLayer</code> 변수 영역에 주소창을 띄워줍니다. 페이지 전환이나 팝업 차단이 걸리지 않아 UX 측면에서 가장 훌륭합니다.</p><p><code><head></code> 태그 안이나 자바스크립트 파일 상단에 아래 라이브러리를 먼저 로드해 주세요.</p><p>HTML</p><p> </p><pre><code class="language-plaintext"><script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script> </code></pre><p>그리고 아래 스크립트 함수를 추가합니다.</p><p>JavaScript</p><p> </p><pre><code class="language-plaintext">// 주소 레이어 element 가져오기 const element_layer = document.getElementById('addressLayer'); function closeAddressSearch() { // 레이어 div를 숨깁니다. element_layer.style.display = 'none'; } function openAddressSearch() { new daum.Postcode({ oncomplete: function(data) { // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분. // 각 주소의 노출 규칙에 따라 주소를 조합한다. // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가짐 let addr = ''; // 주소 변수 //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다. if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우 addr = data.roadAddress; } else { // 사용자가 지번 주소를 선택했을 경우(J) addr = data.jibunAddress; } // 우편번호와 주소 정보를 해당 필드에 넣는다. document.getElementById('coZipCode').value = data.zonecode; // 5자리 우편번호 document.getElementById('coAddr2').value = addr; // 기본 주소 // 커서를 상세주소 필드로 이동한다. document.getElementById('coAddrDetail').focus(); // iframe을 넣은 element를 안보이게 한다. element_layer.style.display = 'none'; }, width : '100%', height : '100%', maxSuggestItems : 5 }).embed(element_layer); // iframe을 넣은 element를 보이게 한다. element_layer.style.display = 'block'; // 함수를 호출하여 레이어 팝업 위치를 화면 중앙으로 맞춤 initLayerPosition(); } // 브라우저 리사이즈 및 레이어 위치를 가운데로 정렬하는 함수 function initLayerPosition(){ const width = 400; //우편번호 서비스가 들어갈 element의 width const height = 450; //우편번호 서비스가 들어갈 element의 height const borderWidth = 1; //샘플에서 사용하는 border의 두께 // 위에서 설정한 값으로 element의 size를 지정한다. element_layer.style.width = width + 'px'; element_layer.style.height = height + 'px'; element_layer.style.border = borderWidth + 'px solid'; // 실행할 순간의 화면 너비와 높이를 가져와서 중앙에 배치한다. element_layer.style.left = (((window.innerWidth || document.documentElement.clientWidth) - width)/2) - borderWidth + 'px'; element_layer.style.top = (((window.innerHeight || document.documentElement.clientHeight) - height)/2) - borderWidth + 'px'; } </code></pre><hr><h3>💡 왜 행안부(juso.go.kr) 직호출 대신 이 방식을 쓰나요?</h3><p>행안부 공식 API 가이드는 결과를 돌려받을 때 도메인이 다른 자식 iframe 간의 통신 기능(PostMessage)이나 <strong>별도 검색용 주소 팝업 호출 후 검색 결과를 리턴받는 Controller(서버단 연동) 과정</strong>을 직접 프로그래밍해야 합니다.</p><p>반면 위 프론트엔드형 카카오/행안부 연동 스크립트는 국가 표준 도로명 주소 데이터를 그대로 매칭해 오면서도, 개발자가 서버 단(PHP 등)을 수정할 필요 없이 스크립트 몇 줄로 iframe 레이어 구현이 가능하여 실무에서 99% 이상 채택하는 방식입니다.<br> </p> </div> </div> </article> <div class="d-flex justify-content-between align-items-center border-top pt-4"> <a href="http://www.cjstory.net/posts/data" class="btn btn-outline-secondary px-4 shadow-sm"> <i class="bi bi-list me-1 text-primary"></i> 목록으로 </a> <div class="gap-2 d-flex"> </div> </div> </div> </div> <section class="mb-5"> <h3 class="h5 fw-bold mb-4 d-flex align-items-center"> <i class="bi bi-chat-dots me-2 text-primary"></i> 댓글 <span class="text-primary ms-1 small">0</span> </h3> <div class="mb-4"> <div class="text-center py-4 text-muted border rounded bg-white small shadow-sm"> 작성된 댓글이 없습니다. 첫 댓글을 남겨보세요! </div> </div> <div class="card border-0 shadow-sm overflow-hidden"> <form action="http://www.cjstory.net/comments/169" method="POST"> <input type="hidden" name="_token" value="1jBYNvqm68QFGGKE6cNbuqOU711Madm0cxpk58oB" autocomplete="off"> <input type="hidden" name="commentable_type" value="App\Models\Post"> <input type="hidden" name="parent_id" id="parent_id_input" value=""> <textarea name="content" class="form-control border-0 p-3" rows="3" placeholder="타인을 비방하거나 욕설이 포함된 댓글은 삭제될 수 있습니다." style="border-radius: 0; resize: none;" required></textarea> <div class="card-footer bg-white d-flex justify-content-between align-items-center p-3"> <div class="form-check form-check-inline"> <input type="checkbox" name="is_private" id="comment_is_private" class="form-check-input" value="1"> <label for="comment_is_private" class="form-check-label small text-muted cursor-pointer"><i class="bi bi-lock-fill"></i> 비밀글</label> </div> <button type="submit" class="btn btn-primary px-4 fw-bold">댓글 등록</button> </div> </form> </div> </section> </main> </div> </div> <footer class="bg-dark text-white py-5 mt-auto"> <div class="container text-center"> <p class="mb-1 fw-bold">StoryBridge</p> <p class="text-white-50 small mb-0">© 2026 All rights reserved.</p> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script> // 페이지 로드 후 아이콘 렌더링 document.addEventListener('DOMContentLoaded', function() { feather.replace(); }); </script> </body> </html>

짜이리의 추억라디오

오늘도 반짝이는 순간들

juso.go.kr 주소 API 이용해서 아래 소스에 iframe 띄어서 우편번호 주소 상세주소 띄우게 만들어 줘