모바일 웹 개발자도구, 이 확장 프로그램 하나면 실무에서 바로 써먹습니다

굳이 핸드폰 꺼낼 필요 없다

며칠 전, 회사에서 급하게 모바일 웹 반응형 체크를 해야 하는 일이 생겼다. 평소 같으면 책상 서랍에 처박아둔 테스트용 갤럭시 S21을 꺼내 와이파이 연결하고, URL 치고, 폰 화면 작아서 확대 축소하면서 삽질했을 텐데. 그날은 달랐다.

"아, 크롬 개발자 도구로 하면 되지."

이미 몇 년 전부터 알고 있었던 기능인데도, 막상 급한 상황이 닥치면 예전 방식으로 해결하려는 습관이 남아 있더라. 근데 한번 제대로 써보니까 이거, 진짜 편하다. 핸드폰 거치대에 폰 꽂아놓고 목 빼가며 테스트할 필요가 전혀 없더라.

문제는, 개발자 도구 자체는 워낙 기능이 많다 보니 처음 접하는 사람이 보면 좀 당황할 수 있다는 점이다.

실제로 우리 팀 신입 디자이너분이 개발자 도구 열어놓고 "이거 뭐 어떻게 하는 거예요?"라고 물어본 적이 있다. 그 경험을 바탕으로, 오늘은 실무에서 바로 써먹을 수 있는 모바일 모드 활용법을 진짜 쉽게 풀어보려고 한다.

크롬 개발자 도구를 실행하는 방법은 세 가지다. 첫째, 웹페이지 아무 데나 우클릭하고 '검사' 누르기. 둘째, 키보드에서 F12 누르기. 셋째, Ctrl+Shift+I(맥은 Cmd+Option+I). 나는 개인적으로 F12가 제일 빠르다.

키보드에서 손 하나만 움직이면 되니까.

개발자 도구가 열리면 왼쪽 위에 스마트폰 아이콘이 보일 거다. 이걸 클릭하거나, Ctrl+Shift+M을 누르면 바로 모바일 모드로 전환된다.

여기서 중요한 건, 모바일 모드로 전환했다고 끝이 아니라는 점. 반드시 F5로 새로고침을 해줘야 웹사이트가 모바일 환경에 맞춰서 다시 로딩된다. 이거 모르고 "왜 안 바뀌지?" 하고 헤매는 사람들 꽤 봤다.

기능 단축키 설명
개발자 도구 열기 F12 또는 Ctrl+Shift+I 웹페이지 코드 검사 및 디버깅 환경 진입
모바일 모드 전환 Ctrl+Shift+M PC 화면을 모바일 기기 화면 크기로 변경
페이지 새로고침 F5 모바일 모드 적용 후 반드시 실행
기기 선택 Dimensions 드롭다운 iPhone, Galaxy 등 실제 기기 해상도 적용
네트워크 제한 Network 탭 > Throttling 3G, 4G, 오프라인 환경 시뮬레이션

이 표만 봐도 감이 오겠지만, 개발자 도구 하나면 핸드폰 없이도 거의 모든 모바일 테스트가 가능하다. 특히 네트워크 제한 기능은 꽤 유용한데, 실제로 3G 환경에서 사진이 몇 초 만에 뜨는지 확인할 수 있기 때문이다.

우리나라는 워낙 인터넷 속도가 빨라서 체감이 안 될 수도 있는데, 해외 서비스 타겟으로 하는 사이트라면 이 기능이 꼭 필요하다. 다른 내용도 보러가기 #1

확장 프로그램 하나면 끝나는 이유

개발자 도구만으로도 충분하다고 생각할 수 있다. 근데 실무에서 까다로운 요구사항이 들어오면 확장 프로그램이 진가를 발휘한다.

특히 "User-Agent Switcher for Chrome"이라는 확장 프로그램은 이름 그대로 유저 에이전트를 바꿔주는 기능인데, 이게 왜 필요하냐면...

가끔 웹사이트가 특정 모바일 기기에서만 오류가 나는 경우가 있다. 예를 들어, 아이폰 사파리에서는 잘 되는데 안드로이드 크롬에서만 버튼 클릭이 안 먹힌다든가. 이럴 때 개발자 도구의 Dimensions 메뉴에서 기기만 골라서는 정확한 재현이 안 될 때가 있다.

왜냐면 User-Agent 값까지 완벽하게 바꿔주는 건 아니기 때문이다. User-Agent Switcher는 이 문제를 깔끔하게 해결해준다.

확장 프로그램 아이콘을 클릭하고 Android, iOS, Windows Phone 등 원하는 환경을 선택하면, 웹사이트가 진짜 그 기기에서 접속한 것처럼 행동한다. 실제로 내가 운영하는 쇼핑몰 사이트에서 아이폰에서만 장바구니 버튼이 안 눌리는 버그를 이 확장 프로그램으로 발견한 적이 있다.

확장 프로그램을 고를 때 주의할 점도 있다. 크롬 웹 스토어에 'User-Agent Switcher' 검색만 해도 수십 개가 뜨는데, 평점 4.5 이상이면서 업데이트가 최근 6개월 이내인 걸 고르는 게 좋다.

업데이트가 오래된 건 크롬 버전이 바뀌면서 호환 문제가 생길 수 있기 때문이다.

확장 프로그램 평점 최근 업데이트 주요 기능
User-Agent Switcher for Chrome 4.6 2024년 8월 Android/iOS/태블릿 전환, 커스텀 User-Agent 설정
Mobile View Switcher 4.3 2024년 6월 모바일/데스크톱 전환, 반응형 테스트
Responsive Viewer 4.7 2024년 9월 여러 기기 동시 화면 비교
Chrome Mobile Tools 4.2 2024년 5월 터치 이벤트 시뮬레이션, 가속도계 테스트

내 경험상 가장 추천하는 건 첫 번째와 세 번째다. 'User-Agent Switcher for Chrome'은 User-Agent 값 변경이 정확해서 실제 기기 테스트와 거의 차이가 없었고, 'Responsive Viewer'는 한 화면에서 아이폰 14, 갤럭시 S23, 아이패드 미니를 동시에 띄워놓고 비교할 수 있어서 디자인 QA할 때 엄청 편리했다.

실무에서 바로 써먹는 꿀팁 3가지

1. 콘솔에서 터치 이벤트 시뮬레이션 하기

모바일 웹에서 가장 골치 아픈 게 뭘까? 나는 확실히 터치 이벤트라고 생각한다. PC에서는 마우스 클릭으로 모든 게 해결되지만, 모바일에서는 터치, 스와이프, 핀치 줌 같은 다양한 제스처가 필요하다.

개발자 도구 모바일 모드에서는 이 터치 이벤트를 시뮬레이션할 수 있는데, 방법은 간단하다. 모바일 모드로 전환한 상태에서 마우스로 클릭하면 터치로 인식된다.

근데 여기서 끝이 아니다. 개발자 도구의 Console 탭에서 touchstart, touchmove, touchend 같은 이벤트를 직접 트리거할 수 있다.

예를 들어, 슬라이드 메뉴가 제대로 작동하는지 확인하려면 다음과 같은 코드를 콘솔에 붙여넣으면 된다.

const element = document.querySelector('.slide-menu');
const touchStartEvent = new TouchEvent('touchstart', {
  touches: [{ clientX: 0, clientY: 0 }]
});
const touchEndEvent = new TouchEvent('touchend', {
  touches: [{ clientX: -300, clientY: 0 }]
});
element.dispatchEvent(touchStartEvent);
element.dispatchEvent(touchEndEvent);

물론 이 코드는 상황에 맞게 수정해야 하지만, 기본 개념만 알면 어떤 터치 이벤트든 재현할 수 있다. 실제로 이걸로 갤러리 슬라이드가 아이폰에서만 먹통이 되는 버그를 잡은 적이 있다.

2. 미디어 쿼리 실시간 확인하기

반응형 웹을 만들 때 CSS 미디어 쿼리가 제대로 적용되는지 확인하는 건 기본 중의 기본이다. 개발자 도구의 모바일 모드에서 화면 크기를 드래그로 조절하면, 실시간으로 미디어 쿼리가 적용되는 걸 볼 수 있다.

근데 여기서 더 유용한 기능이 하나 더 있다. 개발자 도구의 Elements 탭에서 스타일 패널을 보면, 현재 적용 중인 CSS 규칙이 회색으로 표시되는데, 그중에서 취소선이 그어진 건 미디어 쿼리 조건에 맞지 않아서 무시된 것이다.

이걸 보면 "아, 지금 화면 크기에서는 이 스타일이 적용 안 되는구나"를 바로 알 수 있다. 실제로 내가 작업한 쇼핑몰 프로젝트에서, 태블릿 화면에서는 상품 이미지가 2열로 보여야 하는데 3열로 보이는 문제가 있었다.

개발자 도구로 확인해보니까 미디어 쿼리 중간에 숫자 하나가 잘못 들어가 있어서 특정 해상도에서 조건이 충돌난 거였다. 이걸 개발자 도구에서 바로 수정하고, 적용된 결과를 실시간으로 확인한 다음에 코드에 반영했다.

확인 항목 개발자 도구 위치 실무 활용 팁
미디어 쿼리 적용 여부 Elements > Styles 취소선 확인, 조건 충돌 발견
반응형 중단점 모바일 모드 화면 크기 드래그 320px, 768px, 1024px 기준 테스트
CSS 우선순위 Elements > Computed 최종 적용 스타일 확인, !important 충돌 체크
폰트 크기 단위 Elements > Styles px, rem, em, vw 단위 혼용 문제 발견

3. 확장 프로그램으로 속도 테스트까지

모바일 웹에서 사용자 이탈의 가장 큰 원인 중 하나가 로딩 속도다. 구글의 연구에 따르면, 페이지 로딩이 3초를 넘기면 사용자의 53%가 이탈한다는 통계가 있다.

실제로 우리나라에서도 모바일 쇼핑몰의 평균 이탈률이 40%를 넘는다는 조사 결과가 있다. 크롬 확장 프로그램 중에 'Lighthouse'라는 게 있다.

이건 구글에서 공식 제공하는 도구인데, 웹사이트의 성능, 접근성, SEO, 모바일 친화도를 종합적으로 점검해준다. 모바일 모드로 전환한 상태에서 Lighthouse를 실행하면, 실제 모바일 기기에서 접속했을 때의 성능 점수를 확인할 수 있다.

점수는 0에서 100까지 나오는데, 90점 이상이면 양호, 50점 미만이면 개선이 필요하다고 보면 된다. 실제로 내 블로그를 테스트해봤는데, 첫 번째 측정에서 62점이 나왔다.

이미지 최적화와 CSS 압축을 하고 나니까 87점까지 올라갔다. 이 점수 차이가 실제 사용자 체감 속도에 고스란히 반영된다.

Lighthouse 말고도 'Web Vitals'라는 확장 프로그램도 있는데, 이건 구글의 핵심 웹 지표인 LCP(최대 콘텐츠 페인트), FID(최초 입력 지연), CLS(누적 레이아웃 이동)를 실시간으로 보여준다. 모바일 환경에서 이 세 가지 지표가 얼마나 중요한지 아는 사람은 많지 않은데, 실제로 구글 검색 순위에도 영향을 미치는 요소다.

LCP가 2.5초 이상이면 개선이 필요하다는 경고가 뜨는데, 우리나라 주요 쇼핑몰 중에서도 이 기준을 못 맞추는 곳이 꽤 있다. 다른 내용도 보러가기 #2

그래서 뭘 써야 하냐고?

자, 여기까지 읽었다면 아마 이런 생각이 들 거다. "개발자 도구랑 확장 프로그램, 둘 중 뭘 써야 하지?"

정답은 '둘 다'다.

상황에 따라 적절히 섞어 쓰는 게 제일 효율적이다. 예를 들어, 간단한 반응형 체크는 개발자 도구 모바일 모드로 하고, 특정 기기에서의 User-Agent 문제를 재현해야 할 때는 확장 프로그램을 쓰는 식이다.

내가 실제로 업무에서 사용하는 패턴을 공개하자면:

  1. 첫 번째 단계: 개발자 도구 모바일 모드로 화면 크기별 레이아웃 확인 (약 5분)
  2. 두 번째 단계: User-Agent Switcher로 아이폰, 갤럭시, 태블릿 각각 테스트 (약 10분)
  3. 세 번째 단계: Lighthouse로 성능 점수 확인 및 개선점 파악 (약 3분)
  4. 네 번째 단계: Web Vitals로 핵심 지표 체크 (약 2분)

이렇게 총 20분이면 모바일 웹의 기본적인 문제는 대부분 걸러낼 수 있다. 물론 실제 기기 테스트를 완전히 대체할 수는 없지만, 개발 초기 단계에서 빠르게 피드백을 받고 수정하는 용도로는 이보다 좋은 방법이 없다.

사용 상황 추천 도구 소요 시간 난이도
화면 크기별 레이아웃 확인 개발자 도구 모바일 모드 5분 하
특정 기기 User-Agent 테스트 User-Agent Switcher 10분 중
성능 최적화 Lighthouse 3분 중
핵심 웹 지표 모니터링 Web Vitals 2분 하
터치 이벤트 디버깅 개발자 도구 Console 15분 상
여러 기기 동시 비교 Responsive Viewer 10분 중

이 표를 보면 알겠지만, 대부분의 작업이 10분 안에 끝난다. 실제 모바일 기기를 꺼내서 테스트하는 데 걸리는 시간(폰 찾고, 와이파이 연결하고, URL 입력하고...)과 비교하면 훨씬 효율적이다.

마지막으로 하나 더 강조하자면, 이 도구들은 공짜다. 크롬 브라우저만 설치되어 있으면 누구나 쓸 수 있고, 확장 프로그램도 전부 무료다.

추가 비용 없이 모바일 웹 개발 생산성을 두 배로 올릴 수 있다는 뜻이다. 다음에 모바일 웹 테스트할 일이 생기면, 핸드폰부터 찾지 말고 크롬 개발자 도구부터 열어보길 권한다.

생각보다 훨씬 편하고, 생각보다 훨씬 많은 걸 알게 될 거다.

관련 영상

댓글

댓글 쓰기