모바일 기기를 체크하여 크로스 브라우징 지원하기 (navigator.userAgent 사용하기)

들어가며

실무를 하면서 느끼는 취준생 때와의 가장 큰 차이점은, 실제 서비스를 제공하는 입장에서 다양한 환경과 브라우저, 기기에 대응하는 크로스 브라우징이 필요하다는 것이다. 이전에 개인 프로젝트, 팀 프로젝트를 진행할 때는 사실 비용(시간과 노력)이 너무 많이 들기 때문에 모바일 화면처럼 만들어 놓은 웹앱 형식의 프로젝트를 많이 구성하였다.

 

이전 프로젝트 예시

1) 스터디 모집을 위한 팀 프로젝트

ㅡ터

2) 우리 동네 가게는 코카콜라, 펩시 중 무엇을 주는지 제공하는 서비스 

물론 현재도 웹 보다 모바일이 주력 서비스라면 이런 형식을 가지는 서비스도 많이 있지만, 우리 서비스는 데스크 탑 웹을 기반으로 서비스를 제공하기 때문에 다양한 브라우저와 기기에 맞게 화면을 보여줘야 한다. 이렇게 실무에 와서 써보게 된 것이 navigator.userAgent이다.

 

window.navigator.userAgent

전역 객체인 window 에는 현재 접속한 기기(디바이스)를 알 수 있는 userAgent 프로퍼티가 존재한다.

window.navigator.userAgent로 접근 가능하며, 콘솔 창에 찍어볼 경우 다음과 같은 결과를 얻을 수 있다.

모바일 환경을 가정할 경우

'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1’

태블릿 PC 환경을 가정할 경우

'Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1'

웹 환경일 경우

'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'

세 가지 문자열을 보면 알 수 있듯이, 모바일 환경을 가정하여 userAgent 프로퍼티에 접근할 경우 'iPhone'과 같은 문자열이 담기는 모습을 볼 수 있다. 이렇게 가상 환경이더라도 개발자 도구를 통해 특정 기기를 대응한 모바일 환경인지 여부를 체크하는 플래그를 만들 수 있다. 

 

export const isMobile = (): boolean =>
  /Android|webOS|iPhone|iPad|iPod/i.test(
    navigator.userAgent
  );

<>
  {isMobile() ? (
    <h1>모바일 유저 환영합니다!</h1>
  ) : (
    <h1>웹 유저 환영합니다!</h1>
  )}
</>

어떻게 활용하면 좋을까?

1. 모바일 웹과 데스크 탑 웹의 조건부 라우팅 

<https://m.naver.com/>

<https://naver.com>

2. 모바일 기기에 따라 조건부 스타일링 제공하기

<>
  {isMobile() ? (
    <div class="basic mobile">...</div>
  ) : (
    <div class="basic">...</div>
  )}
</>

3. 모바일 기기에 따른 조건부 컴포넌트 제공하기

{isMobile() ? (
    <div className='chat-modal'>
      <Scenario user={user} />
    </div>
) : (
  <Draggable>
    <div className='chat-modal'>
      <Scenario user={user} />
    </div>
  </Draggable>
)}

4. 지원하지 않는 브라우저 대응

IE를 더 이상 지원하지 않기 때문에 navigator.userAgent로 브라우저를 감지하여 다른 브라우저로 유도할 수 있다.