Google Chrome은 빠르고 편리한 일반 사용자용 브라우저일 뿐만 아니라, 그 안에는 다양한 개발자 기능이 숨겨져 있습니다. 이러한 강력한 기능 중 일부를 손쉽게 활용할 수 있게 해주는 것이 바로 '검사(Inspect)' 도구입니다. 처음 접하면 다소 복잡해 보일 수 있지만, 이 도구를 사용하면 웹사이트가 어떻게 구성되어 있는지 내부 구조를 들여다볼 수 있고, 직접 만든 사이트의 오류를 디버깅하는 데에도 큰 도움이 됩니다.
검사 도구 실행 방법
검사 도구는 크롬의 컨텍스트 메뉴에서 바로 열 수 있습니다.
브라우저 화면에서 아무 요소나 마우스 오른쪽 버튼으로 클릭한 뒤, 나타나는 메뉴에서 '검사'를 선택하세요.
그러면 아래 이미지처럼 크롬 브라우저 측면에 새로운 창이 열립니다. 이것이 바로 DevTools(개발자 도구) 패널입니다. 예전에 파이어폭스(Firefox)에서 Firebug를 사용해 본 적이 있다면 익숙한 인터페이스를 발견할 수도 있습니다.
패널에는 여러 가지 기능이 담겨 있으므로, 지금부터 각 구성 요소를 하나씩 살펴보겠습니다.
검사 패널 둘러보기
검사 패널은 창 상단에 표시되는 여러 개의 탭으로 나뉩니다. 여기서는 기본 탭인 '요소(Elements)' 탭을 중심으로 설명합니다.
탭 옆에는 두 가지 유용한 버튼이 있습니다. 첫 번째는 '요소 검사' 도구입니다.
이 도구를 활성화하면 마우스를 올려 다양한 DOM 요소를 선택하고 검사할 수 있습니다.
두 번째 버튼은 기기 미리보기(Device Preview) 모드를 켜는 버튼입니다. 이 모드에서는 웹페이지가 다양한 해상도와 화면 크기에서 어떻게 보이는지 확인할 수 있습니다.
버튼을 클릭하면 웹페이지가 새로운 보기 형태로 전환됩니다.
이후 페이지 미리보기 위의 드롭다운 메뉴를 사용하거나, 미리보기 창 양옆의 조절 핸들을 드래그하여 기기 미리보기 창의 크기를 자유롭게 변경할 수 있습니다.
HTML 보기
DevTools 탭의 대부분은 HTML 창이 차지하고 있습니다.
이 창은 강력한 기능을 갖춘 '페이지 소스 보기'라고 생각하면 됩니다. DOM 구조에 따라 요소들이 부모 요소 안에 중첩된 형태로 정렬되어 표시됩니다.
처음에 '검사'했던 요소는 회색 또는 파란색 배경으로 자동으로 강조 표시됩니다. 여기서는 링크 안에 포함된 이미지를 검사해 보았는데, 예상대로 앵커(<a>) 태그가 강조되어 있는 것을 확인할 수 있습니다.
그렇다면 이미지는 어디에 있을까요? <a> 태그 옆의 삼각형 화살표를 클릭하면 앵커 태그 안에 중첩된 DOM 요소들을 펼쳐볼 수 있습니다. 이 경우 화살표를 클릭하니 예상했던 대로 <img> 태그가 나타났습니다.
HTML 창 하단에는 작은 메뉴 막대도 있는 것을 알 수 있습니다.
이것을 '브레드크럼(breadcrumb) 경로'라고 부르며, 선택된 요소의 모든 부모 요소를 보여줍니다. 해당 요소로 이동하려면 단순히 클릭하기만 하면 됩니다.
스타일(Styles)
HTML 보기 아래에는 선택한 요소에 적용되는 CSS 규칙을 보여주는 창이 있습니다. 이것이 바로 스타일(Styles) 창이며, 여기서는 앞서 검사한 앵커 태그에 적용된 모든 규칙을 확인할 수 있습니다.
규칙 위에 마우스를 올린 후 체크박스를 클릭하면 해당 규칙을 켜고 끌 수 있습니다.
변경 사항은 페이지 미리보기에 즉시 반영됩니다. 또한 규칙을 직접 클릭하면 이름과 값을 수정할 수도 있습니다.
필터(Filter) 검색창을 이용하면 특정 규칙을 빠르게 찾아낼 수도 있습니다.
물론 스타일 창의 기능은 이것보다 훨씬 다양합니다. 스타일 창의 세부 기능이 궁금하다면 Google의 공식 문서에서 자세한 설명을 확인해 보세요.
박스 모델과 계산된 스타일
스타일 보기 옆에는 선택한 요소의 박스 모델(Box Model)이 표시됩니다. 박스 모델이 익숙하지 않은 분들을 위해 간단히 설명하면, 특정 요소에 적용된 마진(margin), 보더(border), 패딩(padding), 콘텐츠(content) 크기를 시각적으로 추상화하여 보여주는 것입니다.
이 예시에서는 해당 요소의 기본 크기가 461 x 209픽셀이며, 마진·보더·패딩 규칙이 없어 해당 영역이 비어 있는 것을 확인할 수 있습니다.
반면 위치(position), 마진, 보더, 패딩 규칙이 적용된 요소를 선택하면 박스 모델이 아래와 같이 더 복잡하게 표시됩니다.
'요소 검사' 도구를 켠 상태에서 DOM 요소 위에 마우스를 올리면, 실제 화면 위에 박스 모델이 겹쳐 표시되는 것도 확인할 수 있습니다.
박스 모델 아래에는 해당 요소에 적용되는 모든 스타일 규칙 목록이 나타납니다. 이 목록은 앞서 살펴본 스타일 창과 약간 다릅니다. 실제 CSS 코드를 보여주는 것이 아니라, 그 규칙들이 최종적으로 만들어내는 결과만 표시합니다. 이를 객체의 '계산된 스타일(computed style)'이라고 부르며, 여러 CSS가 결합된 최종 결과물입니다.
마지막으로 필터(Filter) 입력란에 키워드를 입력하면 원하는 특정 규칙을 검색할 수 있습니다.
마무리
웹페이지 작업을 자주 하는 분이라면 크롬의 검사 도구를 깊이 있게 익혀두는 것이 매우 worthwhile한 투자입니다. 또한 DevTools의 다른 탭들, 예를 들어 콘솔(Console)이나 네트워크(Network) 탭은 개발자에게 없어서는 안 될 소중한 도구가 될 수 있습니다. 이번 글에서 다루지 못한 부분도 많지만, Google의 공식 문서가 방대하고 유용하므로 참고해 보시길 권합니다.