웹에서 사용자 기기 구별 방법

 웹에서 사용자 기기 구별 방법

1. User-Agent 문자열 분석:

   // User-Agent 문자열을 통해 기기 정보 확인
   const userAgent = navigator.userAgent;
    
   const isIOS = /iPad|iPhone|iPod/.test(userAgent);
   const isAndroid = /Android/.test(userAgent);
   const isMobile = /Mobi|Android/i.test(userAgent);
    
   if (isIOS) {
     console.log('iOS 기기 사용자 감지');
     // iOS 특화 기능/UI 제공
   } else if (isAndroid) {
     console.log('Android 기기 사용자 감지');
     // Android 특화 기능/UI 제공
   } else if (isMobile) {
     console.log('기타 모바일 기기 사용자 감지');
   } else {
     console.log('데스크톱 사용자 감지');
   }
   

2. 미디어 쿼리 사용:

   // 화면 크기로 기기 유형 추정
   const isMobileDevice = window.matchMedia('(max-width: 768px)').matches;
   const isTabletDevice = window.matchMedia('(min-width: 769px) and (max-width: 1024px)').matches;
   

3. 브라우저 기능 감지:

   // Safari 브라우저 감지 (주로 iOS에서 사용)
   const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    
   // Chrome 브라우저 감지 (Android 기본 브라우저로 많이 사용)
   const isChrome = /Chrome/.test(navigator.userAgent);
   

현재 앱에서의 구현

현재 미디어 플레이어 앱에서는 useIsMobile 훅을 사용하여 모바일 기기를 감지하고 있습니다:

// client/src/hooks/use-mobile.tsx
export function useIsMobile() {
  const [isMobile, setIsMobile] = useState(false);
  
  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.matchMedia('(max-width: 768px)').matches);
    };
    
    checkMobile();
    window.addEventListener('resize', checkMobile);
    
    return () => window.removeEventListener('resize', checkMobile);
  }, []);
  
  return isMobile;
}

기기별 맞춤 기능 제공 방법

1. iOS 기기 감지 및 최적화:

   const detectIOSDevice = () => {
     const userAgent = navigator.userAgent;
     const isIOS = /iPad|iPhone|iPod/.test(userAgent);
     const isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
     
     return {
       isIOS,
       isSafari,
       isIOSSafari: isIOS && isSafari
     };
   };
    
   // iOS Safari에 맞춤 기능 제공
   const { isIOSSafari } = detectIOSDevice();
   if (isIOSSafari) {
     // iOS 특화 안내 메시지 표시
     showIOSSpecificInstructions();
     
     // iOS에 맞는 미디어 세션 설정
     setupIOSOptimizedMediaSession();
   }
   

2. 기기별 저장소 용량 관리:

   async function manageStorageByDevice() {
     const { isIOS } = detectIOSDevice();
     
     // iOS는 저장소 제약이 더 엄격할 수 있음
     const maxStorageSize = isIOS ? 50 * 1024 * 1024 : 100 * 1024 * 1024; // iOS: 50MB, 그 외: 100MB
     
     // 현재 사용량 확인
     const currentUsage = await getTotalStorageUsed();
     
     return currentUsage < maxStorageSize;
   }
   

3. 완전한 기기 감지 및 최적화 함수:

   // 디바이스 정보를 종합적으로 판단
   function getDeviceInfo() {
     const userAgent = navigator.userAgent;
     
     const isIOS = /iPad|iPhone|iPod/.test(userAgent);
     const isAndroid = /Android/.test(userAgent);
     const isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
     const isChrome = /Chrome/.test(userAgent);
     const isMobile = /Mobi|Android/i.test(userAgent) || isIOS;
     const isTablet = /Tablet|iPad/i.test(userAgent);
     const isDesktop = !isMobile && !isTablet;
     
     // iOS 버전 감지 (iOS 14+ 에서 작동)
     let iOSVersion = null;
     if (isIOS) {
       const matches = userAgent.match(/OS (\d+)_(\d+)/);
       if (matches) {
         iOSVersion = parseInt(matches[1], 10);
       }
     }
     
     return {
       isIOS,
       isAndroid,
       isSafari,
       isChrome,
       isMobile,
       isTablet,
       isDesktop,
       iOSVersion,
       isIOSSafari: isIOS && isSafari,
       isAndroidChrome: isAndroid && isChrome
     };
   }
   

이러한 방법을 통해 사용자 기기를 감지하고, 각 기기의 특성에 맞는 최적화된 경험을 제공할 수 있습니다. 특히 iOS와 Android의 미디어 재생 관련 차이를 고려하여 기기별 맞춤 설정을 적용할 수 있습니다.