Global Web i18n

글로벌 서비스 개발 지침
인증 상태: 비로그인

글로벌 웹 애플리케이션 제작 시
5대 필수 고려사항 & 핵심 설계 건축 가이드

전 세계 사용자를 대상으로 서비스를 확장할 때는 단순 문맥 번역을 넘어 URL 구조 설계, 브라우저 자동 감지, 타임존(UTC) 통합, 엣지 인프라 라우팅, 개인정보 규제(GDPR) 준수가 필수적으로 작동해야 합니다.

현재 URL 구분 방식 (?lang=)

loading...

브라우저 감지 언어

loading...

최종 적용된 언어 코드

loading...

글로벌 웹앱 핵심 5대 아키텍처 수칙

PILLAR 01

다국어(i18n) & URL 체계 구조화

?lang=ko 또는 /en/와 같이 URL로 언어를 명시적 구분하여 SEO 랭킹을 보호하고, 첫 방문 시 브라우저 언어를 자동 탐지하되 사용자의 수동 변경을 쿼리스트링과 LocalStorage에 최우선 반영해야 합니다.

✓ SEO 대응 canonical & hreflang 태그 지정
✓ RTL(아랍어/헤브라이어) 텍스트 방향 지원
PILLAR 02

타임존(UTC) & 서머타임 표준화

모든 서버 데이터베이스와 API 응답은 UTC (ISO 8601) 타임존으로 저장·전송하고, 클라이언트의 Intl.DateTimeFormat API로 사용자의 현지 시간 및 서머타임(DST)을 자동 포맷팅합니다.

✓ DB 표준 타임존 UTC 저장 필수
✓ 국가별 통화/숫자 구분 기호 동적 변환
PILLAR 03

엣지 CDN & 지연시간(TTFB) 최적화

글로벌 사용자가 대륙 간 네트워크 지연 없이 빠르게 접속할 수 있도록 Anycast GeoDNS 및 글로벌 CDN 엣지 서버(Cloudflare/CloudFront)로 정적 자산과 엣지 캐싱을 최우선 배치합니다.

✓ 글로벌 멀티 리전 DB Read Replica
✓ TTFB 50ms 미만 유지 목표
PILLAR 04

GDPR & 데이터 주권 컴플라이언스

유럽연합(GDPR), 미국(CCPA) 등 국가별 개인정보보호법 준수를 위해 사용자 동의(Cookie Consent) 팝업, 국외 데이터 이전 규제 준수, 그리고 통화별 결제 PG사(Stripe, PayPal)를 유연하게 연결합니다.

✓ 동의 기반 개인정보 수집 모듈
✓ 글로벌 결제 PG & 세금(VAT) 자동 계산
PILLAR 05

웹폰트 용량 최적화 & 다국어 서체 폴백(Fallback)

한중일(CJK) 및 아랍어 폰트는 용량이 매우 크므로 unicode-range 서브셋으로 필요한 글자만 분할 로딩하고, 폰트 로딩 시 텍스트 렌더링이 밀리는 레이아웃 시프트(CLS)를 방지하는 폰트 폴백 스택을 구성해야 합니다.

✓ Google Fonts unicode-range 경량화
✓ font-display: swap 으로 레이아웃 밀림 방지

🧪 실시간 다국어 Intl API 포맷팅 시연

선택된 언어 로케일에 따라 날짜, 통화, 숫자 기호가 어떻게 동적 변환되는지 직접 확인하세요.

Locale: ko-KR
📅 현지 날짜 및 시간 포맷팅

loading...

Intl.DateTimeFormat(locale, { dateStyle: 'full', timeStyle: 'short' })

💵 현지 통화 (Currency) 포맷팅

loading...

Intl.NumberFormat(locale, { style: 'currency', currency })

🔢 숫자 천단위 기호 포맷팅

loading...

Intl.NumberFormat(locale).format(1234567.89)

URL 기반 다국어 라우팅 구현 패턴 (JavaScript Snippet) 

// 1. URL 쿼리 파라미터 또는 브라우저 언어 자동 탐지 함수
function getActiveLanguage() {
    const urlParams = new URLSearchParams(window.location.search);
    const urlLang = urlParams.get('lang');
    if (urlLang && ['ko', 'en', 'ja', 'zh'].includes(urlLang)) {
        localStorage.setItem('user_lang', urlLang);
        return urlLang; // Manual override via URL parameter
    }
    const saved = localStorage.getItem('user_lang');
    if (saved) return saved;

    const navLang = (navigator.language || 'ko').substring(0, 2);
    return ['ko', 'en', 'ja', 'zh'].includes(navLang) ? navLang : 'en';
}

// 2. 수동 언어 변경 시 URL 파라미터 업데이트 & 새로고침 없이 즉시 적용
function setLanguage(lang) {
    localStorage.setItem('user_lang', lang);
    const newUrl = new URL(window.location.href);
    newUrl.searchParams.set('lang', lang);
    window.history.pushState(null, '', newUrl.toString());
    applyTranslations(lang);
}