자바스크립트 실무 유틸 함수 시리즈 23 - 브라우저 환경 감지 및 대응 유틸

이번 23편에서는 사용자의 브라우저 환경에 따라 조건부 처리를 하거나 기능을 제한하는 데 필요한 유틸 함수들을 소개합니다. 디바이스, 브라우저, 운영체제 감지 등 프론트엔드 대응에 중요한 역할을 하는 함수들입니다.

---

✅ 1. isMobileDevice (모바일 디바이스 감지)

📌 User Agent를 기반으로 모바일 기기 여부 반환

function isMobileDevice() {
  return /Mobi|Android|iPhone/i.test(navigator.userAgent);
}

📌 활용 예시

if (isMobileDevice()) {
  alert('모바일 최적화 모드로 전환됩니다.');
}

---

✅ 2. getBrowserInfo (브라우저 이름 감지)

📌 User Agent 문자열로부터 브라우저 정보 추출

function getBrowserInfo() {
  const ua = navigator.userAgent;
  if (/chrome|crios/i.test(ua)) return 'Chrome';
  if (/firefox/i.test(ua)) return 'Firefox';
  if (/safari/i.test(ua) && !/chrome/i.test(ua)) return 'Safari';
  if (/edg/i.test(ua)) return 'Edge';
  return 'Unknown';
}

📌 활용 예시

console.log(`현재 브라우저: ${getBrowserInfo()}`);

---

✅ 3. isDarkMode (다크 모드 감지)

📌 사용자의 시스템 색상 모드 여부 반환

function isDarkMode() {
  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

📌 활용 예시

if (isDarkMode()) {
  document.body.classList.add('dark');
}

---

✅ 4. getOS (운영체제 정보 반환)

📌 플랫폼 기반으로 OS 명칭 반환

function getOS() {
  const platform = navigator.platform.toLowerCase();
  if (platform.includes('mac')) return 'MacOS';
  if (platform.includes('win')) return 'Windows';
  if (/linux/.test(platform)) return 'Linux';
  return 'Unknown';
}

📌 활용 예시

console.log(`운영체제: ${getOS()}`);

---

✅ 5. isTouchDevice (터치 디바이스 여부 확인)

📌 터치 스크린 지원 여부 확인

function isTouchDevice() {
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
}

📌 활용 예시

if (isTouchDevice()) {
  document.body.classList.add('touch-enabled');
}

---

✅ 결론

사용자의 환경에 따라 적절한 UI/UX를 제공하는 것은 웹 개발의 기본입니다. 이번 시리즈에서 다룬 브라우저 감지 유틸 함수들은 조건부 렌더링, 접근성 대응, 성능 최적화에 효과적으로 활용할 수 있습니다.