웹 개발을 하다 보면 방문자의 공인 IP 주소를 확인해야 하는 경우가 종종 있습니다. 하지만 브라우저에서 실행되는 JavaScript만으로는 사용자의 IP 주소를 직접 알아낼 수 없습니다. 이때 외부 IP 조회 API를 활용하면 간단하게 해결할 수 있습니다.
JSONP를 활용한 IP 주소 조회 예제
아래 코드는 ipinfo.io에서 제공하는 JSONP API를 사용해 클라이언트의 공인 IP 주소를 가져와 화면에 출력하는 전체 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>클라이언트 IP 주소 조회</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-weight: 500;
font-size: 18px;
color: blueviolet;
}
</style>
</head>
<body>
<h1>클라이언트 IP 주소 조회하기</h1>
<div class="result"></div>
<script type="application/javascript">
let resEle = document.querySelector(".result");
function showIP(json) {
resEle.innerHTML = "내 공인 IP 주소는: " + json.ip;
}
</script>
<script type="application/javascript" src="https://ipinfo.io/?format=jsonp&callback=showIP"></script>
</body>
</html>코드 동작 원리
이 예제의 핵심은 JSONP(JSON with Padding) 방식입니다. 동작 과정은 다음과 같습니다.
1. 콜백 함수 정의: showIP 함수는 API 응답으로 받은 JSON 객체에서 ip 값을 추출해 .result 요소의 innerHTML에 출력합니다.
2. 외부 스크립트 로드: ipinfo.io에 format=jsonp와 callback=showIP 파라미터를 붙여 요청하면, 서버가 showIP({"ip": "..."}) 형태의 JavaScript 코드를 반환합니다.
3. 자동 실행: 브라우저가 이 스크립트를 받아 실행하면 콜백 함수가 호출되면서 화면에 IP 주소가 표시됩니다.
실행 결과
페이지를 열면 다음과 같이 접속자의 공인 IP 주소가 화면에 나타납니다.
참고 사항
JSONP는 과거 크로스 도메인 문제를 우회하기 위해 널리 사용되던 방식입니다. 다만 최신 브라우저 환경에서는 CORS를 지원하는 fetch API나 axios를 사용하는 것이 더 안전하고 권장되는 방법입니다. 또한 HTTPS 페이지에서 HTTP 프로토콜의 외부 스크립트를 불러오면 혼합 콘텐츠(mixed content) 오류가 발생할 수 있으므로, 실제 서비스에서는 https://ipinfo.io/json 같은 HTTPS 엔드포인트를 사용하는 것이 좋습니다.