코딩에 익숙하지 않은 사람이라면 실수로 Inspect Element(요소 검사)를 열었을 때 복잡한 코드에 놀라 겁부터 날 수 있습니다. 하지만 침착하게 코드를 들여다보면, 사용 방법만 알면 이 도구를 통해 생각보다 다양한 유용한(그리고 재미있는) 작업을 수행할 수 있습니다.
이번 글에서는 브라우저의 개발자 도구(DevTools)와 Inspect Element로 할 수 있는 7가지 재미있는 기능을 소개합니다.
Inspect Element란 무엇인가?
Inspect Element는 브라우저에서 제공하는 개발자 도구로, 웹페이지의 소스 코드를 확인하고 임시로 수정할 수 있는 기능입니다. 개발자와 디자이너는 이 도구를 활용해 웹사이트의 프론트엔드를 점검하고 변경할 수 있습니다.
코드를 수정하면 브라우저는 웹페이지를 실시간으로 갱신합니다. 다만 이러한 변경 사항은 해당 세션 동안, 그리고 본인의 기기에서만 적용됩니다. 페이지를 벗어나는 순간 모든 변경 사항은 자동으로 사라지므로 안심해도 됩니다.
1. 이미지 및 동영상 다운로드하기
보통 웹에서 사진을 저장하려면 마우스 오른쪽 버튼을 클릭해 저장하면 됩니다. 하지만 모든 웹사이트에서 이 방법이 가능한 것은 아닙니다. 이럴 때 Inspect Element가 유용하게 쓰입니다.
미디어 파일을 다운로드하려면 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 검사(Inspect)를 선택하세요. <div> 태그를 확장하면 src 속성을 통해 파일의 원본 주소를 확인할 수 있습니다. 이 주소를 복사해 새 탭에서 연 뒤, 미디어 파일을 오른쪽 클릭하여 다른 이름으로 저장(Save As) 옵션으로 내려받으면 됩니다.
2. 제목과 텍스트를 바꿔 친구에게 장난치기
처음부터 가짜 이미지를 만드는 대신 DevTools를 활용하면 웹페이지의 텍스트를 손쉽게 바꿔 친구에게 장난을 칠 수 있습니다.
가짜 웹페이지를 만들려면 신뢰할 만한 언론사나 유명 사이트의 페이지를 열고 제목을 마우스 오른쪽 버튼으로 클릭한 뒤 검사(Inspect)를 선택해 패널을 여세요. 강조된 코드의 더 보기(More) 아이콘을 클릭하고 HTML로 편집(Edit as HTML)을 선택한 후, 제목을 원하는 가짜 헤드라인으로 교체하면 됩니다.
같은 방식으로 요약문, 날짜, 작성자 이름 같은 다른 텍스트도 자유롭게 변경할 수 있습니다. 이미지를 바꾸고 싶다면 동일한 단계로 기존 이미지 소스를 삭제한 뒤, 구글에서 관련 이미지를 찾아 이미지 주소를 복사해 붙여넣으면 됩니다.
이렇게 하면 번거로움 없이 친구에게 깜짝 놀랄 만한 장난을 칠 수 있습니다. 단, 변경 사항은 일시적이므로 링크가 아니라 DevTools 패널을 숨긴 상태의 스크린샷을 보내야 자연스럽습니다.
3. 웹페이지의 색상과 글꼴 변경하기
Inspect Element로 할 수 있는 또 다른 재미있는 작업은 웹페이지의 색상과 글꼴을 바꾸는 것입니다. 색상을 변경하고 싶은 요소를 마우스 오른쪽 버튼으로 클릭해 검사(Inspect)를 선택한 뒤, 스타일(Styles) 탭에서 color 또는 background-color 항목을 찾아 헥스 코드를 입력하세요. 마찬가지로 스타일 탭에서 글자 크기와 서체도 변경할 수 있습니다.
이 기능을 활용하면 어떤 웹사이트든 자신에게 맞게 꾸며 가독성을 높일 수 있습니다. 예를 들어 웹사이트에 다크 모드를 만들거나, 글자 크기를 키워 읽기 편하게 하거나, 거슬리는 요소를 삭제하는 것도 가능합니다.
4. 숨겨진 비밀번호 확인하기
웹사이트가 비밀번호를 별표(***)로 가리고 있다면, 코드를 살짝 수정해 실제 값을 확인할 수 있습니다. 숨겨진 비밀번호 입력란을 마우스 오른쪽 버튼으로 클릭해 DevTools를 연 뒤, input 태그 안에서 type 값을 password에서 text로 변경하고 빈 화면을 클릭하면 비밀번호가 그대로 표시됩니다.
이 기능은 비밀번호를 잊어버렸지만 브라우저나 비밀번호 관리자에 저장해 둔 경우에 특히 유용합니다. 웹페이지에서 직접 비밀번호를 확인해 기억해 낼 수 있습니다.
5. 웹사이트의 모바일 버전 보기
모바일 기기에서 데스크톱 사이트를 보는 방법은 누구나 알고 있지만, Inspect Element를 사용하면 반대로 데스크톱에서 모바일 버전을 확인할 수도 있습니다. DevTools를 열고 기기 툴바 전환(Toggle Device Toolbar) 버튼(오른쪽 상단에서 두 번째 버튼)을 클릭하세요.
또한 사용자 에이전트(User Agent)를 전환하면 다양한 환경에서의 웹사이트 모습도 확인할 수 있습니다. 개발자 도구에서 왼쪽 상단의 더 보기(More) 아이콘을 클릭하고 네트워크 환경(Network conditions)을 선택하세요. User Agent 섹션에서 기본 브라우저 사용(Use Default Browser) 체크박스를 해제한 뒤, 드롭다운 메뉴에서 다른 사용자 에이전트를 고르면 됩니다.
6. 웹사이트에서 색상 추출하기
별도의 색상 추출 확장 프로그램을 설치할 필요 없이, Inspect Element만으로 원하는 색상을 추출할 수 있습니다. 웹페이지에서 색상을 뽑아내려면 검사(Inspect)를 연 뒤 스타일(Styles) 탭에서 color 또는 background 항목을 찾으세요. 그런 다음 색상 옆의 작은 사각형을 클릭하면 색상 추출기(Color Picker)가 나타납니다.
이제 페이지의 아무 곳이나 클릭해 색상을 추출하고, 스타일 탭에서 헥스 코드를 복사하면 됩니다. RGB나 HSLA 값이 필요하다면 화살표 버튼을 눌러 다른 형식의 코드도 확인할 수 있습니다.
따라서 나중에 디자인에 활용하고 싶은 멋진 색상을 발견했다면, Inspect Element로 코드를 추출해 저장해 두는 습관을 들이면 좋습니다.
7. 확장 프로그램 없이 스크린샷 찍기
DevTools는 깔끔하고 선명한 스크린샷 촬영 기능도 제공합니다. 스크린샷을 찍으려면 DevTools를 열고 더 보기(More) 아이콘을 클릭한 뒤 명령 실행(Run a Command)을 선택하세요. 검색 상자에 screenshot을 입력하면 네 가지 유형의 캡처 옵션이 표시됩니다.
영역 스크린샷(Capture area screenshot)을 선택하면 창의 특정 영역을 직접 지정해 캡처할 수 있으며, 결과물은 PNG 파일로 저장됩니다.
전체 크기 스크린샷(Capture full size screenshot)은 화면에 보이지 않는 부분까지 포함해 웹페이지 전체를 하나의 이미지로 저장합니다. 노드 스크린샷(Capture node screenshot)은 선택한 특정 요소만 캡처하고, 마지막으로 스크린샷 캡처(Capture screenshot) 옵션은 현재 화면에 보이는 모든 내용을 그대로 저장합니다.
Inspect Element의 숨겨진 기능을 익혀보세요
지금까지 소개한 것은 Inspect Element로 할 수 있는 몇 가지 기능에 불과합니다. DevTools를 활용하면 이 외에도 성능 분석, 디버깅 등 정말 다양하고 유용한 작업을 수행할 수 있습니다.
파워 유저가 되어 친구들에게 능력을 뽐내고 싶다면, DevTools의 숨겨진 기능들을 하나씩 익혀두는 것을 추천합니다.