다국어 블로그의 언어 전환 UX 개선: 스마트한 언어 제안 배너 만들기

function isKoreanUser() {
  const userLang = navigator.language || navigator.userLanguage;
  return userLang.startsWith('ko');
}

function isKoreanPage() {
  const htmlLang = document.documentElement.lang;
  return htmlLang === 'ko' || htmlLang.startsWith('ko-');
}

// 배너를 표시해야 하는 경우
const shouldShowBanner =
  (isKoreanUser() && !isKoreanPage()) ||  // 한국어 사용자가 영문 페이지
  (!isKoreanUser() && isKoreanPage());     // 비한국어 사용자가 한국어 페이지

<link rel="alternate" hreflang="ko" href="https://www.codeslog.com/posts/language-switcher-banner/" />
<link rel="alternate" hreflang="en" href="https://www.codeslog.com/en/posts/language-switcher-banner/" />

function getAlternateLanguageUrl() {
  const alternateLinks = document.querySelectorAll('link[rel="alternate"][hreflang]');

  for (const link of alternateLinks) {
    const hreflang = link.getAttribute('hreflang');
    const href = link.getAttribute('href');

    // 현재 한국어 페이지면 영어 링크 찾기
    if (isKoreanPage() && hreflang.startsWith('en')) {
      return href;
    }

    // 현재 영어 페이지면 한국어 링크 찾기
    if (!isKoreanPage() && hreflang.startsWith('ko')) {
      return href;
    }
  }

  // 대체 링크가 없으면 URL 패턴 변환 시도
  const currentPath = window.location.pathname;
  return isKoreanPage()
    ? `/en${currentPath}`
    : currentPath.replace(/^\/en\//, '/');
}

# index.ko.md
translationKey: "my-post"

# index.en.md
translationKey: "my-post"  # 반드시 동일해야 함!

const banner = document.createElement('div');
banner.id = 'language-switcher-banner';
banner.className = 'language-switcher-banner';
banner.setAttribute('role', 'region');
banner.setAttribute('aria-label', isKoreanPage() ? '언어 제안' : 'Language suggestion');
banner.setAttribute('aria-live', 'polite');
banner.setAttribute('tabindex', '-1');

banner.innerHTML = `
  <div class="banner-content">
    <span class="banner-icon" aria-hidden="true">🌐</span>
    <p class="banner-message">
      Would you like to read this page in English?
    </p>
    <div class="banner-actions">
      <a href="${alternateUrl}"
         class="banner-button banner-button-primary"
         lang="en">
        Switch to English
      </a>
      <button type="button"
              class="banner-button banner-button-secondary"
              data-action="dismiss"
              aria-label="Dismiss language suggestion and continue in Korean">
        Continue in Korean
      </button>
    </div>
  </div>
`;

.language-switcher-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--theme);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

.language-switcher-banner.is-visible {
  transform: translateY(0);
}

.banner-content {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* WCAG 2.5.8: 터치 타겟 최소 크기 기준 상회 */
.banner-button {
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
}

/* 키보드 포커스 표시 */
.banner-button:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .banner-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .banner-icon {
    display: none; /* 모바일에서는 아이콘 숨김 */
  }

  .banner-actions {
    width: 100%;
  }

  .banner-button {
    flex: 1;
    text-align: center;
  }
}

banner.setAttribute('aria-live', 'polite');

banner.setAttribute('aria-label', isKoreanPage() ? '언어 제안' : 'Language suggestion');

<button aria-label="언어 제안 닫기 및 영어로 계속하기">
  Continue in English
</button>

const primaryAction = banner.querySelector('.banner-button-primary');
primaryAction?.focus();

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    dismissBanner();
  }
});

.banner-button:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.language-switcher-banner:focus-within {
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
}

.banner-button {
  min-height: 44px;
  min-width: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .language-switcher-banner {
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .banner-button-primary {
    border-width: 2px;
  }
}

const STORAGE_KEY = 'language-preference-asked';

function dismissBanner() {
  const banner = document.getElementById('language-switcher-banner');
  if (!banner) return;

  banner.classList.remove('is-visible');

  setTimeout(() => {
    banner.remove();
  }, 300);

  // localStorage에 저장
  try {
    localStorage.setItem(STORAGE_KEY, 'true');
  } catch (e) {
    console.warn('Failed to save language preference:', e);
  }
}

function init() {
  // 이미 물어봤는지 확인
  try {
    if (localStorage.getItem(STORAGE_KEY) === 'true') {
      return; // 배너 표시 안 함
    }
  } catch (e) {
    console.warn('Failed to read language preference:', e);
  }

  // ... 배너 표시 로직
}

<script src="{{ "js/language-switcher-banner.js" | relURL }}" defer></script>

setTimeout(() => {
  showBanner();
}, 1000);

if (localStorage.getItem(STORAGE_KEY) === 'true') {
  return; // 배너 표시 안 함
}

<!-- Language Switcher Banner Styles -->
<link rel="stylesheet" href="{{ "css/language-switcher-banner.css" | relURL }}" />

<!-- 언어 전환 제안 배너 -->
<script src="{{ "js/language-switcher-banner.js" | relURL }}" defer></script>

# index.ko.md
translationKey: "my-post"

# index.en.md
translationKey: "my-post"

// 미래 개선안
const userCountry = request.headers.get('cf-ipcountry');
if (userCountry === 'KR') {
  // 한국 IP → 한국어 제안
}

const supportedLanguages = ['ko', 'en', 'ja', 'zh'];
const userLang = navigator.language.split('-')[0];
const suggestedLang = supportedLanguages.includes(userLang)
  ? userLang
  : 'en'; // 기본값

// 배너 표시
gtag('event', 'language_banner_shown', {
  from_lang: currentLang,
  to_lang: suggestedLang
});

// 언어 전환 클릭
gtag('event', 'language_switched', {
  from_lang: currentLang,
  to_lang: suggestedLang
});

if (!hasConsentForStorage()) {
  // localStorage 대신 세션스토리지 사용
  sessionStorage.setItem(STORAGE_KEY, 'true');
}