JavaScript로 모바일 기기 감지하기
안녕하세요 무택입니다 :)
오늘은 프론트엔드 개발할 때 정말 자주 필요한 모바일 기기 감지 방법에 대해 알아볼게요. 모바일과 데스크톱에서 각각 다른 UI를 보여주고 싶을 때 많이 고민하셨죠? 😊
다양한 방법이 있지만, 각각의 장단점을 비교해서 가장 좋은 방법을 알려드릴게요! 특히 초보자분들도 쉽게 따라 할 수 있도록 자세히 설명해 드릴게요~
1. 미디어 쿼리로 모바일 감지하기 (가장 추천해요!)
제가 가장 추천하는 방법은 미디어 쿼리를 사용하는 거예요! 간단하고 정확해서 요즘 웹 개발에서 가장 많이 쓰이는 방법이랍니다.
function detectMobile() {
// 화면 너비가 768px 이하면 모바일로 판단해요
return window.matchMedia('(max-width: 768px)').matches;
}
// 이렇게 사용하면 돼요!
if (detectMobile()) {
// 모바일일 때 실행할 코드
document.body.classList.add('mobile-view');
} else {
// 데스크톱일 때 실행할 코드
document.body.classList.add('desktop-view');
}화면 크기가 바뀔 때도 대응하고 싶으시다면, 아래 코드도 추가해 보세요:
// 화면 크기 변경을 감지하는 코드에요
window.addEventListener('resize', function() {
if (detectMobile()) {
document.body.classList.add('mobile-view');
document.body.classList.remove('desktop-view');
} else {
document.body.classList.add('desktop-view');
document.body.classList.remove('mobile-view');
}
});
만약 모바일에서 실행할 js와 PC에서 사용할 js가 다르다면 아래처럼 코드를 사용하면 됩니다.
// 모바일 감지 함수
function detectMobile() {
return window.matchMedia('(max-width: 768px)').matches;
}
// 모바일 환경에서 실행할 코드
function runMobileCode() {
console.log('모바일 코드 실행');
// 여기에 모바일에서만 실행할 코드 작성
document.body.classList.add('mobile-view');
document.body.classList.remove('desktop-view');
// 모바일 전용 기능 예시
document.querySelector('.mobile-menu')?.classList.add('active');
}
// PC 환경에서 실행할 코드
function runDesktopCode() {
console.log('PC 코드 실행');
// 여기에 PC에서만 실행할 코드 작성
document.body.classList.add('desktop-view');
document.body.classList.remove('mobile-view');
// PC 전용 기능 예시
document.querySelector('.desktop-menu')?.classList.add('active');
}
// 디바이스에 맞는 코드 실행
function runDeviceSpecificCode() {
if (detectMobile()) {
runMobileCode();
} else {
runDesktopCode();
}
}
// 페이지 로드 시 실행
document.addEventListener('DOMContentLoaded', runDeviceSpecificCode);
// 화면 크기 변경 시 실행
window.addEventListener('resize', runDeviceSpecificCode);
2. 미디어 쿼리가 좋은 4가지 이유! 👍
제가 이 방법을 가장 추천하는 이유가 있어요:
- CSS와 똑같은 방식으로 작동해요: CSS에서
@media (max-width: 768px) { ... }이렇게 스타일 지정하는 것처럼, 자바스크립트에서도 같은 기준으로 판단할 수 있어요. 디자인과 기능이 딱 맞게 동작하죠! - 화면 크기로 판단해서 정확해요: 폰 이름이나 브라우저 정보가 아니라 실제 화면 크기로 판단하니까 새로운 폰이 나와도 코드 고칠 필요가 없어요. 아이폰20든 갤럭시 S30이든 화면 크기만 맞으면 OK랍니다!
- 코드 유지보수가 쉬워요: 매번 새 기기가 나올 때마다 코드 수정할 필요 없이, 한 번 작성하면 그대로 쓸 수 있어서 정말 편해요.
- 화면 회전에도 바로 반응해요: 사용자가 폰을 가로로 돌리거나 창 크기를 바꿀 때도 바로바로 반응해서 UX가 훨씬 좋아져요!
3. 다른 모바일 감지 방법은 뭐가 있을까요?
User Agent 문자열로 감지하기 (예전 방식)
function detectMobileByUA() {
// 브라우저가 웹서버에 보내는 자신의 정보예요
const userAgent = navigator.userAgent;
// 모바일 기기 이름이 있는지 확인해요
return /Android|iPhone|iPad|iPod|BlackBerry|IEMobile/i.test(userAgent);
}이 방법은 예전에 많이 썼지만 요즘엔 추천하지 않아요. 왜냐하면:
- 새 기기가 나올 때마다 코드를 계속 업데이트해야 해요 😫
- 스푸핑에 취약해요: 스푸핑이란 브라우저가 "난 다른 브라우저야~" 하고 속이는 거예요. 사용자가 설정으로 쉽게 바꿀 수 있어서 믿기 어려워요.
- 점점 정보가 줄어들고 있어요: 개인정보 보호 때문에 크롬, 사파리 같은 브라우저들이 정보를 점점 숨기고 있어요. 예전엔 "나는 아이폰 14의 사파리야"라고 알려줬는데, 이제는 "나는 사파리야" 정도만 알려주고 있어요.
터치 기능으로 감지하기 (참고용)
function isTouchDevice() {
// 터치 기능이 있는지 확인해요
return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
}이 방법도 완벽하진 않아요:
- 요즘은 터치스크린 노트북도 많아서 모바일인지 구분하기 어려워요
- 킨들 같은 e-리더나 특수 기기들은 모바일인데도 터치스크린이 없는 경우도 있어요
4. 모바일 감지, 이렇게 하세요! 꿀팁 5가지 🍯
- 미디어 쿼리를 먼저 사용하세요: 화면 크기로 판단하는 게 가장 정확해요.
- CSS와 같은 기준점을 쓰세요: CSS에서 모바일 기준이 768px이면, 자바스크립트에서도 같은 기준을 쓰는 게 좋아요.
- 성능 최적화하세요: resize 이벤트는 엄청 자주 발생해요. 스로틀링(이벤트 처리 횟수 제한)을 적용하면 성능이 확 좋아져요!
- 여러 조건을 같이 보세요: 화면 크기만 보지 말고, 터치 지원, 카메라 기능 등도 함께 확인하면 더 정확해져요.
- 실제 기기로 테스트하세요: 시뮬레이터만 믿지 말고, 실제 폰이나 태블릿으로 꼭 테스트해보세요!
정리해 볼게요!
요즘 웹 개발에선 단순히 "이게 모바일이야? 데스크톱이야?"로만 구분하기보다는 화면 크기와 기기 기능을 함께 고려하는 게 좋아요. 미디어 쿼리 방식이 가장 믿을 만하고, 반응형 디자인과 함께 쓰면 모든 기기에서 완벽하게 작동하는 웹사이트를 만들 수 있어요!
여러분도 이 방법들 활용해서 멋진 반응형 웹사이트 만들어보세요~ 😊 질문이나 궁금한 점 있으시면 댓글로 남겨주세요! 다음에 또 유익한 내용으로 찾아올게요~
