좋아하는 웹사이트가 어떻게 만들어져 있는지 궁금해 본 적이 있다면, 브라우저의 '검사(Inspect)' 기능은 숨겨진 보물과도 같습니다. 앞서 크롬의 '검사' 도구를 소개한 바 있는데, 파이어폭스에도 이와 유사한 강력한 기능이 내장되어 있습니다.
파이어폭스의 '요소 검사(Inspect Element)' 도구를 활용하면 웹사이트가 작동하는 원리를 깊이 있게 들여다볼 수 있습니다. 사이트에서 사용하는 HTML과 CSS 요소는 물론, 네트워크 부하 상태, 각 요소의 로딩 지연 시간, 쿠키처럼 저장소에 남기는 파일까지 모두 확인할 수 있습니다.
경험 많은 개발자에게는 다소 익숙한 내용일 수 있지만, 초보자나 일반 사용자라면 파이어폭스가 지닌 강력한 잠재력과 인터넷상 모든 웹사이트 아래에 숨어 있는 방대한 파일과 동작의 세계를 새롭게 발견하게 될 것입니다.
설치하기
이미 파이어폭스를 사용 중이라면 별도로 준비할 것이 없습니다. 윈도우, 리눅스, 맥, iOS, 안드로이드 환경에서 파이어폭스를 처음 사용하려면 공식 웹사이트에서 최신 버전을 내려받아 설치하면 됩니다. 설치 파일을 더블클릭하거나, 스마트폰이라면 화면을 탭하는 평소의 방식 그대로 진행하시면 됩니다.
참고로 주요 리눅스 배포판은 대부분 파이어폭스가 기본 설치되어 있거나, 소프트웨어 센터·패키지 저장소에서 손쉽게 설치할 수 있습니다.
'요소 검사' 열기
파이어폭스 설치 후에는 웹페이지의 아무 요소나 마우스 오른쪽 버튼으로 클릭하면 검사기를 실행할 수 있습니다. 그러면 아래 이미지처럼 드롭다운 메뉴가 나타나며, 목록 하단 근처에서 '요소 검사(Inspect Element)' 항목을 찾을 수 있습니다.
인스펙터(Inspector)
'요소 검사'를 클릭하면 화면 하단에 곧바로 검사기가 열립니다. 이때부터 명칭이 조금 헷갈릴 수 있는데, 엄밀히 말해 검사기 서비스 중 '인스펙터(Inspector)' 부분이 열린 것입니다.
클릭했던 요소는 도구 창 가운데 표시되며, 해당 요소 위로 마우스를 올리면 – 아래 스크린샷에서 <div> 태그 위에 커서를 올린 것처럼 – 실제 웹페이지에서 그 시각적 요소가 하이라이트됩니다.
덕분에 어떤 요소를 보고 있는지 직관적으로 알 수 있고, 각 요소의 다양한 속성도 쉽게 찾을 수 있습니다. 인스펙터 오른쪽 패널을 보면 해당 <div> 태그의 속성, 즉 마진(margin), 패딩(padding), 테두리(border), 글자 크기, 세로 정렬 설정 등을 한눈에 확인할 수 있습니다.
오른쪽 패널을 스크롤하면 다른 요소로부터 상속받은 속성들도 볼 수 있습니다. 심지어 이 창에서 속성값을 직접 수정하면 웹페이지에 실시간으로 반영되는 모습을 확인할 수도 있습니다.
스타일 에디터(Style Editor)
검사기 상단의 툴바를 따라 CSS(종속형 시트)의 세계로 나아갈 수 있습니다. 'Style Editor(스타일 편집기)'를 클릭하면 화면 하단에 세 개의 새로운 패널이 열립니다.
여기서 DuckDuckGo가 사용하는 두 개의 스타일 시트 파일, 선택된 첫 번째 스타일 시트의 요소들, 그리고 크고 작은 화면에 대응하는 반응형 디자인을 제어하는 '@media' 규칙들을 확인할 수 있습니다.
이 스타일 시트 역시 '인스펙터' 영역에서처럼 자유롭게 편집할 수 있습니다. 다만 규칙의 수가 매우 많은데, 첫 번째 스타일 시트만 해도 무려 1,262개의 규칙이 담겨 있습니다.
툴바에서 더 나아가 'Network Monitor(네트워크 모니터)'로 이동하면 웹사이트가 파일들을 요청한 기록과 그 처리 상태를 볼 수 있습니다. 이 탭에는 이미지나 폰트 같은 다른 요소들도 함께 표시되며, 요청이 처리된 후 각 파일의 용량까지 모두 확인할 수 있습니다.
성능(Performance)
'Performance(성능)' 탭을 열면 먼저 'Start Recording Performance(성능 기록 시작)' 버튼을 눌러야 정보 수집이 시작됩니다. 몇 초만 기다리면 페이지가 구동되는 프레임 속도(FPS), 발생한 DOM(문서 객체 모델) 이벤트, 스타일 재계산 기록과 함께 각 요소가 로드되는 데 걸린 시간(대개 밀리초 단위)을 확인할 수 있습니다.
예시 사이트의 경우, 하이라이트된 DOM 이벤트인 마우스오버(mouseover) 하나를 로드하는 데 6.03밀리초가 걸렸습니다. 이 페이지의 평균 FPS는 약 39였으며, 응답 시간 범위를 보여주는 차트에서 일부 이벤트는 9,000밀리초에 달하기도 했습니다.
메모리(Memory)
'Memory(메모리)' 탭에서도 정보를 수집하려면 'Take Snapshot(스냅샷 찍기)' 버튼을 클릭해야 합니다. 필자의 경우 약 600KB의 문자열, 1MB의 객체, 1MB의 스크립트가 메모리에 올라간다는 결과가 지도 형태로 표시되었습니다. 스크린샷에서 보듯 'Tree Map(트리 맵)'이라 적힌 드롭다운 메뉴를 클릭하면 같은 데이터를 여러 가지 방식으로 볼 수 있습니다.
저장소(Storage)
마지막으로 'Storage(저장소)' 탭을 클릭하면 웹사이트가 여러분의 컴퓨터에 남긴 영구 파일들을 확인할 수 있습니다. 대부분의 사용자와 관련이 깊은 것이 바로 쿠키입니다. 아래 이미지에서 로드된 쿠키 하나를 볼 수 있습니다.
오른쪽 패널을 보면 이 쿠키가 다음 10년대 중반까지 유효하도록 설정되어 있고, 필자가 이 글을 작성하는 세션 동안 접근했다는 사실도 알 수 있습니다.
마치며
파이어폭스 검사기를 활용하면 탐험할 거리가 정말 많습니다. 이번 입문 가이드만으로도 한동안 즐겁게 실험하고 배울 수 있을 것입니다.
웹사이트의 HTML 요소를 직접 바꿔 보세요. 여러 사이트를 돌아다니며 로딩 시간을 비교해 보세요. 특정 페이지가 여러분의 컴퓨터에 얼마나 많은 쿠키를 저장하려 하는지 확인해 보세요. 때로는 그 정보가 생각보다 놀랍게 느껴질 수도 있습니다.
이런 탐험이 웹사이트가 어떻게 우리가 기대하는 대로 작동하는지 이해하는 데 도움이 되기를 바랍니다. 생각했던 것보다 훨씬 많은 일들이 벌어지고 있다는 사실을 알게 되실 겁니다.