자바스크립트 환경에서 모바일 대응하기

요즘에는 회사에서 진행 중인 프로젝트를 고도화하는 업무를 진행하고 있어요. 고도화하는 업무 중에 제일 먼저 모바일 반응형을 대응하게 됐어요. 처음에는 PWA 나 웹뷰 같은 형태로 개발하려고 했지만 개발 일정을 고려하여 기존의 서비스를 웹앱 형태로 개발하는 방법을 채택하게 돼 자바스크립트 환경에서 모바일 기기에 따른 반응형 전략을 어떻게 수립할지 분석해 보았습니다.

 

모바일 환경을 특정할 수 있는 방법은 아래와 같아요

• CSS Media Qurey를 사용하여 감지하기
• User-Agent의 문자열을 감지하기
• 터치 기능의 유무로 감지하기

가장 보편적인 방법은 CSS의 Media Qurey를 사용하는 방법으로 아래 코드를 통해 살펴보도록 할게요.

function detectMobile() {
  // 화면 너비가 800px 이하면 모바일로 판단해요
  return window.matchMedia('(max-width: 800px)').matches;
}
 
if (detectMobile()) {
  // 모바일일 때 실행할 코드
  document.body.classList.add('mobile');
} else {
  // 데스크톱일 때 실행할 코드
  document.body.classList.add('desktop');
}
 
// 화면 크기 변경을 감지하는 코드에요
window.addEventListener('resize', function() {
  if (detectMobile()) {
    document.body.classList.add('mobile');
    document.body.classList.remove('desktop');
  } else {
    document.body.classList.add('desktop');
    document.body.classList.remove('mobile');
  }
})

Media Qurey를 사용할 경우 아래와 같은 특징이 있어요.

• CSS와 같은 방식으로 동작하여 쉽게 작성할 수 있어요
• 화면 크기로 판단하기 때문에 정확도가 높아요
• 자바스크립트와 CSS로 작성하기 때문에 코드의 유지보수성이 용이해요

다음은 User-Agent 문자열로 감지하는 방법에 대해서 알아볼게요. User-Agent는 웹 브라우저나 다른 애플리케이션 서버에 요청을 보낼 때, 자신을 식별하기 위해 사용하는 문자열이에요. 주로 웹 브라우저에서 사용하고 어떤 브라우저와 운영체제, 버전을 사용하는지 서버에 알려주는 역할을 합니다.

function detectUserAgent() {
  // 브라우저가 웹서버에 보내는 자신의 정보예요
  const userAgent = navigator.userAgent;
  // 모바일 기기 이름이 있는지 확인해요
  return /Android|iPhone|iPad|iPod|BlackBerry|IEMobile/i.test(userAgent);
}

User-Agnet는 아래와 같은 특징이 있어요.

• 새로운 기기가 출시될 경우, 수동으로 추가해야 할 필요가 있어요
• 사용자 설정으로 브라우저 설정을 우회할 수 있기 때문에 신뢰성이 부족해요
• 개인정보 보호 문제로 최근에는 브라우저에서 OS 정보를 제공하지 않는 것이 권장되고 있어요

마지막으로 터치 기능의 사용 유무를 통해 감지하는 방법이에요.

function ifTouchDevice() {
  // 터치 기능이 있는지 확인해요 
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0; 
}

터치 기능을 통해 감지하면 아래와 같은 특징이 있어요.

• 터치 스크린을 지원하는 노트북이 많아져 모바일 구분을 하기 어려워요
• e-reader, 특수 기기들은 모바일 환경이지만 터치 스크린이 없는 경우가 있어 구분하는데 어려울 수 있어요

자바스크립트 환경에서 모바일 환경을 감지할 수 있는 방법에 대해서 분석해 보았어요. 제가 생각했을 때는 Media Qurey를 사용하여 우선적으로 UI/UX를 대응하고 User-Agent를 통해 디바이스를 명시적으로 감지하여 처리하는 것이 좋아 보여요 만약 최신 브라우저 환경(FireFox, Safari 미지원)이라면 userAgentData를 활용하여 브라우저를 속이는 행위인 스푸핑 행위를 방지할 수도 있어 보이네요. 그 외 다양한 방법이 있다면 언제든지 댓글로 알려주시면 감사하겠습니다 🙂