"우리는 모두 인터넷에 연결되어 있다. 거대한 뇌의 신경 세포처럼." ~ 스티븐 호킹
정말 공감되는 말이지 않나요? 인터넷의 힘은 그 어떤 것과도 비교할 수 없습니다. 웹에는 수백만 개의 웹사이트와 방대한 정보가 넘쳐납니다. 연구를 위한 자료 검색, 엔터테인먼트 사이트 탐방, 소셜 미디어 활동까지—웹사이트는 우리를 디바이스 앞에 머물게 하는 필수적인 존재가 되었습니다.
이미지 출처: YouTube
웹사이트를 이용하다 보면 '요소 검사(Inspect Element)'라는 기능을 들어본 적이 있으신가요? 요소 검사는 웹페이지의 HTML과 CSS 코드를 확인하고 수정해 볼 수 있는 브라우저 도구입니다. 이 기능은 모든 브라우저에서 사용할 수 있지만, 브라우저마다 명칭이 조금씩 다릅니다. Chrome에서는 '개발자 모드', Safari에서는 '웹 속성 검사기(Web Inspector)', Firefox에서는 '검사(Inspect)'라고 부릅니다.
이 글에서는 Mac의 대표적인 웹 브라우저인 Safari, Google Chrome, Firefox에서 요소 검사 기능을 사용하는 방법을 알아보겠습니다. 시작하기 전에 요소 검사 도구가 무엇이고 왜 유용한지 간단히 살펴보겠습니다.
요소 검사(Inspect Element)란 무엇인가?
웹사이트에서 마우스 오른쪽 버튼을 클릭하면 컨텍스트 메뉴에 '검사' 항목을 볼 수 있습니다. 기술적으로 설명하면, 요소 검사 도구는 사용자가 웹페이지의 프론트엔드를 확인하거나 수정할 수 있게 해주는 기능입니다. 주로 프런트엔드 개발자들이 실제 서비스 중인 코드를 망가뜨릴 걱정 없이 웹사이트의 디자인과 동작을 실험해 볼 때 사용합니다. 테스트 단계에서 특정 웹사이트의 요소를 점검할 때도 활용됩니다.
Mac에서 요소 검사 사용하는 방법
요소 검사 기능은 Safari, Chrome, Firefox 등 모든 웹 브라우저에 기본적으로 내장되어 있습니다. 지금부터 각 브라우저별로 Mac에서 요소 검사를 사용하는 방법을 알아보겠습니다.
Safari에서 요소 검사하기
시작하기 전에 Safari에서 '개발용' 메뉴가 활성화되어 있는지 먼저 확인하세요. 기본 설정으로 꺼져 있을 수 있습니다.
Safari를 실행한 후 환경설정(Preferences)을 엽니다.
'고급' 탭으로 이동한 뒤, '메뉴 막대에서 개발용 메뉴 보기' 옵션에 체크합니다.
이 옵션을 체크하는 즉시 메뉴 막대에 새로운 '개발용' 메뉴가 추가됩니다.
Safari에서 요소 검사를 사용하는 방법은 다음과 같습니다.
방법 1: 우클릭으로 열기
가장 빠른 방법은 마우스 오른쪽 클릭입니다. 원하는 웹페이지에 접속한 후 화면 빈 공간을 우클릭하고 '검사'를 선택합니다.
방법 2: '개발용' 메뉴 활용
새롭게 추가된 '개발용' 메뉴를 통해서도 요소 검사를 사용할 수 있습니다.
웹사이트에 접속한 뒤 상단 메뉴 막대의 '개발용'을 클릭하고, '웹 속성 검사기 보기'를 선택합니다.
방법 3: 단축키 사용
세 번째 방법은 단축키입니다. Command + Option + I 키 조합을 누르면 해당 웹페이지의 요소 검사 창이 바로 열립니다.
Google Chrome에서 요소 검사하기
Chrome에서는 4가지 방법으로 요소 검사를 사용할 수 있습니다.
방법 1: 우클릭으로 열기
Mac에서 Chrome을 실행하고 요소를 검사할 웹사이트에 접속합니다. 화면 아무 곳이나 우클릭한 후 '검사'를 선택합니다.
방법 2: 메뉴 막대 활용
Chrome을 실행한 후 상단 메뉴 막대에서 '보기'를 클릭합니다.
이미지 출처: Super User
개발자 > 개발자 도구 순서로 이동하여 선택합니다. 또는 '맞춤설정 및 제어' 옵션을 통해서도 요소 검사를 실행할 수 있습니다.
방법 3: 단축키 사용
Command + Option + C 키 조합을 누르면 Chrome에서 요소 검사 창이 열립니다.
방법 4: 설정 메뉴 활용
macOS에서 Chrome을 실행한 후 우측 상단의 점 세 개(⋮) 아이콘을 클릭합니다. '도구 더보기'를 선택한 다음 '개발자 도구'를 누르면 됩니다.
Mozilla Firefox에서 요소 검사하기
Firefox에서도 몇 가지 간단한 방법으로 요소 검사를 사용할 수 있습니다.
방법 1: 우클릭으로 열기
Firefox를 실행하고 원하는 웹사이트에 접속합니다. 화면 아무 곳이나 우클릭한 후 '검사'를 선택합니다.
방법 2: 메뉴 활용
Mac에서 Firefox를 실행한 후 상단 메뉴 막대의 '도구'를 클릭하고 '웹 개발자'를 선택합니다. 그다음 '검사'를 누르면 됩니다.
방법 3: 단축키 사용
Firefox에서 요소 검사를 여는 단축키는 Command + Option + C입니다.
자주 묻는 질문(FAQ)
Q1. Mac에서 요소 검사 창은 어떻게 열 수 있나요?
이미지 출처: Zapier
가장 빠른 방법은 웹사이트에서 우클릭한 후 컨텍스트 메뉴에서 '검사'를 선택하는 것입니다.
Q2. Mac에서 요소 검사 단축키는 무엇인가요?
브라우저마다 단축키가 조금씩 다릅니다.
- Safari: Command + Option + I
- Chrome: Command + Option + C
- Firefox: Command + Option + C
Q3. Mac의 Chrome에서 요소 검사는 어떻게 열나요?
Chrome에서 요소 검사를 사용하려면 Command + Option + C 키 조합을 누르거나, 화면 아무 곳이나 우클릭한 후 '검사'를 선택하면 요소 검사 창이 열립니다.
마무리
지금까지 macOS의 Safari, Chrome, Firefox에서 요소 검사 도구를 사용하는 방법을 알아보았습니다. 요소 검사는 개발자뿐 아니라 일반 사용자에게도 웹페이지 구조를 이해하는 데 큰 도움이 되는 강력한 기능입니다. 평소 요소 검사 기능을 얼마나 자주 사용하시고, 어떤 용도로 활용하시는지 댓글로 의견을 나눠주세요!