어떤 비즈니스는 “접근 금지”가 아니라, 더 가벼운 “지역 분기(Geo Routing)”가 필요합니다. 같은 페이지에서도 국가/지역이 다른 사용자가 링크나 버튼을 클릭할 때 서로 다른 목표 URL로 이동해야 하는 경우가 있습니다. 이런 분기는 보통: 다운로드 URL 분배, 지역별 결제 진입점, 서로 다른 고객지원 시스템, 서로 다른 사이트(글로벌/로컬) 진입점 전환 등에 사용됩니다.
이 글은 딱 한 가지 핵심만 다룹니다: 페이지 로딩 시 프론트엔드가 GET https://my.ipin.io/info 를 요청해 방문자의 국가 코드 country 를 가져오고,
그 다음 <a> 의 href 또는 <button> 클릭 이동 주소를 해당 지역의 URL로 설정합니다.
예를 들어 API 응답은 다음과 같습니다:
{"ip":"185.220.236.7","country":"TW","region":"Taiwan","city":"Taipei"}1）로직과 동작 원리(2단)
첫 번째 단: 흐름
페이지 로딩 → 프론트엔드가 즉시 https://my.ipin.io/info 요청 → country 획득 → 규칙에 따라 목표 URL 선택(예: TW는 A 주소 1, US는 A 주소 2, 기타 지역은 기본 주소) →
링크/버튼의 “목적지”를 해당 목표 URL로 업데이트합니다. 사용자가 클릭할 때에야 해당 주소로 이동합니다.
두 번째 단: 먼저 기본 주소를 넣고, 지역에 따라 덮어쓰기를 권장하는 이유
프론트엔드 환경은 안정적이지 않을 수 있습니다: 네트워크, CORS, 광고 차단 플러그인, API 타임아웃 등으로 country 를 못 가져올 수 있습니다. 더 안전한 방법은:
페이지에 먼저 사용 가능한 기본 URL(공용 랜딩 페이지)을 넣어두고, 스크립트가 지역을 성공적으로 가져온 후에만 지역 전용 URL로 덮어쓰는 것입니다. 이렇게 하면 API가 실패해도 페이지는 정상적으로 이동할 수 있고, “클릭해도 반응 없음/주소가 비어 있음” 같은 문제를 피할 수 있습니다.
2）코드 구현(아주 간단, A와 button 분리 설명)
2.1 A 링크(id 사용): country에 따라 href 설정
상황: 페이지에 중요한 링크가 하나만 있고, 지역에 따라 다른 주소로 보내고 싶습니다. 아래 예시는 가장 단순한 로직만 보여줍니다:
TW 이면 TW 링크, 아니면 기본 링크를 사용합니다.
<a id="geoLink" href="https://example.com/default">바로 이동</a>
<script>
(async function () {
try {
const info = await fetch("https://my.ipin.io/info").then(r => r.json());
const target = (info.country === "TW")
? "https://example.com/tw"
: "https://example.com/default";
const a = document.getElementById("geoLink");
if (a) a.href = target;
} catch (e) {
// 실패 시 기본 href 유지
}
})();
</script>2.2 A 링크(class 사용): country에 따라 href 일괄 설정
상황: 페이지에 여러 링크가 있고 모두 지역 분기가 필요합니다. 가장 간단한 방법은 같은 class를 붙이고 한 번에 업데이트하는 것입니다. 예시는 여전히 최소: TW는 TW 링크, 기타 지역은 기본 링크를 사용합니다.
<a class="geo-link" href="https://example.com/default">다운로드入口</a>
<a class="geo-link" href="https://example.com/default">구매入口</a>
<script>
(async function () {
try {
const info = await fetch("https://my.ipin.io/info").then(r => r.json());
const target = (info.country === "TW")
? "https://example.com/tw"
: "https://example.com/default";
document.querySelectorAll(".geo-link").forEach(function (el) {
el.href = target;
});
} catch (e) {}
})();
</script>2.3 Button(id 사용): 클릭 후 country에 따라 이동
상황: 버튼은 링크 자체가 아니므로, 프론트엔드에서 클릭 이벤트를 바인딩해야 합니다. 아래 예시는 핵심 로직만 남겼습니다: 먼저 country로 목표 URL을 정하고, 버튼 클릭 시 그 URL로 이동합니다.
<button id="geoBtn" type="button">클릭하여 이동</button>
<script>
(async function () {
let target = "https://example.com/default"; // 기본 주소
try {
const info = await fetch("https://my.ipin.io/info").then(r => r.json());
if (info.country === "TW") target = "https://example.com/tw";
} catch (e) {
// 실패 시 기본 주소 사용
}
const btn = document.getElementById("geoBtn");
if (btn) btn.onclick = function () { window.location.href = target; };
})();
</script>2.4 Button(class 사용): 클릭 이동 일괄 바인딩
상황: 페이지에 여러 버튼이 있고 지역에 따라 이동해야 합니다. 가장 간단한 방법은 공통 class를 쓰고 루프로 클릭 이벤트를 바인딩하는 것입니다. 주의: 버튼은 “기본 href”가 없으므로, 스크립트에서 먼저 기본 URL을 준비해두면 API 실패 시 “버튼 무반응”을 피할 수 있습니다.
<button class="geo-btn" type="button">버튼 1</button>
<button class="geo-btn" type="button">버튼 2</button>
<script>
(async function () {
let target = "https://example.com/default"; // 기본 주소
try {
const info = await fetch("https://my.ipin.io/info").then(r => r.json());
if (info.country === "TW") target = "https://example.com/tw";
} catch (e) {}
document.querySelectorAll(".geo-btn").forEach(function (btn) {
btn.onclick = function () { window.location.href = target; };
});
})();
</script>2.5 다지역（TW、US…）：매핑표로 “목표 URL을 바로 설정”(최단 사용 가능)
가장 단순한 규칙: 먼저 기본 URL을 준비하고, 국가 코드별 매핑표 map 으로 덮어씁니다.
매핑이 있으면 매핑을 쓰고, 없으면 기본값을 씁니다. 핵심은: target을 계산한 뒤 즉시 A의 href 또는 버튼 클릭 이벤트에 적용해야 한다는 점입니다.
2.5.1 A 링크（id）：href를 바로 설정
<a id="geoLink" href="https://example.com/default">바로 이동</a>
<script>
(async function () {
const defaultUrl = "https://example.com/default";
const map = { TW: "https://example.com/tw", US: "https://example.com/us" };
try {
const info = await fetch("https://my.ipin.io/info").then(r => r.json());
const target = map[info.country] || defaultUrl;
document.getElementById("geoLink").href = target; // ✅ 핵심: target을 href에 넣기
} catch (e) {
// 실패하면 기본 href 유지
}
})();
</script>2.5.2 버튼（id）：클릭 시 target으로 이동
<button id="geoBtn" type="button">클릭하여 이동</button>
<script>
(async function () {
const defaultUrl = "https://example.com/default";
const map = { TW: "https://example.com/tw", US: "https://example.com/us" };
let target = defaultUrl;
try {
const info = await fetch("https://my.ipin.io/info").then(r => r.json());
target = map[info.country] || defaultUrl;
} catch (e) {}
document.getElementById("geoBtn").onclick = function () {
window.location.href = target; // ✅ 핵심: 클릭 시 target으로 이동
};
})();
</script>3）WordPress / Joomla / Magento / Shopify 등에서 구현(프론트엔드 방식 + 코드)
이런 “지역에 따라 A 링크/버튼 목적지 변경” 구현의 본질은 스크립트를 사이트 전체 공용 Head 또는 레이아웃 파일에 넣어 가능한 한 빨리 실행되도록 하는 것입니다. 서버 로직을 건드릴 필요는 없습니다. 페이지 로딩 시 스크립트만 실행되면 사용자가 클릭하기 전에 목적지를 준비할 수 있습니다.
3.1 WordPress
- “헤더/푸터 스크립트 삽입” 플러그인으로 Header에 스크립트를 붙여넣기(전체 적용)
- 또는 테마 파일
header.php에서</head>직전에 삽입
3.2 Joomla! / Joomla
- 현재 템플릿의
index.php에서<head>를 찾아</head>직전에 스크립트 붙여넣기 - 또는 템플릿의 “커스텀 head 코드” 입력 기능 사용(템플릿마다 다름)
3.3 Magento
- 테마의 글로벌 head(theme/layout의 head 영역)에 스크립트 추가
- 사이트 전체에서 동일하게 출력되도록 하여 지역 매핑 규칙을 한 곳에서 관리하기 쉽게
3.4 Shopify
- Online Store → Themes → Edit code
theme.liquid를 찾아</head>직전에 스크립트 붙여넣기(전체 적용)
3.5 공통 규칙
- 전역
<head>또는 레이아웃 파일을 편집할 수 있는 시스템이라면 같은 방식으로 “IP 지역에 따라 링크/버튼 목적지 설정”이 가능 - 외부 API가 실패해도 사용 가능하도록 기본 URL은 유지 권장
4）요약
> 페이지 로딩 시 https://my.ipin.io/info 를 요청해 country 를 얻고, country에 따라 목표 URL을 선택한 뒤 A 링크의 href 또는 버튼 클릭 이동 주소를 업데이트하여 “IP 지역별로 서로 다른 목적지로 분기”하는 프론트엔드 방안을 구현한다.
실무에서 가장 중요한 두 가지는: 첫째, 스크립트를 head의 앞부분에 배치해 목적지 설정을 최대한 빨리 끝내는 것; 둘째, API 실패 시 링크가 무효가 되거나 버튼이 무반응이 되지 않도록 항상 기본 URL을 준비해 두는 것입니다. 지역 매핑 규칙만 잘 관리하면 다운로드入口, 결제入口, 지원入口 등 다양한 시나리오에서 안정적으로 사용할 수 있습니다.
5）자주 묻는 질문
console.log(info) 를 사용해 country 를 실제로 받았는지 확인하는 것을 권장합니다.
window.location.href = target 를 window.open(target, "_blank") 로 바꾸면 됩니다. 클릭 이벤트 안에서 실행되면 보통 브라우저에 의해 차단되지 않습니다.
{ TW: "...", US: "..." }. 일치하면 해당 URL을 쓰고, 없으면 기본 URL을 사용합니다.
https://my.ipin.io/info 의 JSON을 읽지 못하면 country 를 얻을 수 없고, 최종적으로 기본 URL만 사용할 수 있습니다. 배포 전에 콘솔에서 요청이 성공하는지 확인하는 것을 권장합니다.