웹사이트는 현대 사회에서 필수적인 존재가 되었습니다. 비즈니스 정보를 찾을 때도, 업무나 학교 과제를 조사할 때도 웹사이트를 활용합니다. 그러나 웹사이트는 웹 프로그래밍 언어로 만들어지기 때문에, 전문 지식이 없는 사람에게는 그 구조가 낯설고 어렵게 느껴질 수 있습니다.
웹사이트의 구성 요소를 자세히 알고 싶다면 맥에서 요소 검사(Inspect Element)를 하는 방법을 알아야 합니다. '요소 검사' 기능을 사용하면 웹사이트의 프런트엔드, 즉 화면에 보이는 부분을 확인하거나 수정해 볼 수 있습니다. 직접 웹사이트를 제작하거나 웹사이트가 어떻게 작동하는지 배우고 싶은 분들에게 매우 유용한 기능입니다.
이 글에서는 맥에서 요소를 검사하는 방법을 자세히 소개합니다. 특정 상황에서 웹사이트 요소를 검사할 수 없는 이유와 함께, 주요 브라우저별로 요소를 검사하는 다양한 방법까지 하나씩 살펴보겠습니다.
1부. 맥에서 요소 검사가 안 되는 이유
맥에서 요소 검사 방법을 익히기 전에, 먼저 기능이 작동하지 않는 이유를 이해해야 합니다. Safari 브라우저에서 '개발자 메뉴(Develop Menu)'가 활성화되어 있어야만 웹사이트 검사가 가능합니다. 따라서 개발자 메뉴를 먼저 활성화해야 Apple의 웹 인스펙터(Web Inspector)를 사용할 수 있습니다.
개발자 메뉴를 활성화하여 맥에서 요소 검사를 사용하는 단계는 다음과 같습니다.
- Safari를 실행합니다.
- 브라우저 환경설정(Preferences) 메뉴를 엽니다.
- '고급(Advanced)' 탭을 클릭합니다.
- 창 하단으로 이동한 뒤, '메뉴 막대에서 개발자용 메뉴 보기(Show Develop Menu In Menu Bar)' 항목에 체크합니다.
- 메뉴 막대에서 '개발자용(Develop)' 메뉴를 선택합니다.
- '웹 속성 보기(Show Web Inspector)' 옵션을 클릭합니다.
2부. 맥 브라우저별 요소 검사 방법
브라우저마다 요소 검사 방법이 조금씩 다릅니다. 아래에서 Chrome, Safari, Firefox 세 가지 브라우저에서 요소를 검사하는 방법을 하나씩 확인해 보겠습니다.
Chrome에서 요소 검사하기
맥의 Chrome에서 요소를 검사할 수 있는 방법은 크게 네 가지입니다.
1. 마우스 오른쪽 클릭 방식
- 맥에서 Chrome을 실행합니다.
- 검사하고 싶은 페이지로 이동합니다.
- 페이지에서 마우스 오른쪽 버튼을 클릭한 후 '검사(Inspect)'를 선택합니다. 특정 요소 위에서 오른쪽 클릭하면 해당 요소가 인스펙터 뷰에서 바로 열립니다.
2. 메뉴 막대 방식
- 상단 메뉴 막대에서 '보기(View)' 메뉴를 클릭합니다.
- '개발자(Developer)'를 선택한 후 '개발자 도구(Developer Tools)'로 이동합니다.
- 또는 '맞춤 설정 및 제어(Customize and Control)' 메뉴를 실행할 수도 있습니다.
3. 설정 아이콘 이용 방식
- 브라우저 우측 상단의 점 세 개 아이콘을 클릭하여 '도구 더보기(More Tools)'로 이동합니다.
- '개발자 도구(Developer Tools)'를 클릭합니다.
4. 키보드 단축키 방식
- macOS에서
CMD + OPTION + C를 입력합니다. - (선택 사항) 점 세 개 아이콘을 클릭하면 패널 위치를 변경할 수 있습니다. 원하는 독 위치를 선택하세요. 예를 들어 '오른쪽에 도킹(Dock To Right)'을 고를 수 있습니다.
위 네 가지 방법 중 하나를 사용하면 Elements, Sources, Console 등 다양한 탭이 나타납니다. 일반적으로 필요한 대부분의 정보는 'Elements' 탭에서 확인할 수 있습니다.
요소를 선택하면 해당 요소의 소스 코드를 볼 수 있습니다. 코드를 확인하는 것 외에도 텍스트 편집, 요소 삭제, 요소 숨기기, HTML 형태로 편집하기 등 다양한 작업이 가능합니다.
'Styles' 탭에서는 요소의 서식, 특히 텍스트 요소의 스타일을 확인할 수 있습니다. 또한 모바일 화면 모드로 페이지를 검사할 수 있어, 모바일 친화적인 사이트를 만들고 싶은 웹 개발자나 비즈니스 운영자에게 유용한 정보를 제공합니다.
Safari에서 요소 검사하기
Safari에서 요소 검사를 사용하기 전에 먼저 개발자 도구를 활성화해야 합니다. 활성화 방법은 다음과 같습니다.
- Safari 브라우저를 열고 '환경설정(Preferences)'을 선택합니다.
- '고급(Advanced)' 탭으로 이동합니다.
- '메뉴 막대에서 개발자용 메뉴 보기(Show Develop Menu In Menu Bar)' 항목에 체크합니다.
- 메뉴 막대에 '개발자용(Develop)'이라는 새 메뉴가 추가되었는지 확인합니다.
이제 Safari에서 요소를 검사하는 방법을 살펴보겠습니다.
1. 마우스 오른쪽 클릭 방식
- 검사하고 싶은 페이지로 이동합니다.
- 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭합니다.
- '검사(Inspect)'를 선택합니다.
2. 개발자 메뉴 방식
- 메뉴 막대에서 '개발자용(Develop)' 메뉴를 엽니다.
- '웹 속성 보기(Show Web Inspector)' 옵션을 클릭합니다.
3. 단축키 방식
CMD + OPTION + I를 누르면 됩니다.
Firefox에서 요소 검사하기
맥의 Firefox에서도 여러 가지 방법으로 요소를 검사할 수 있습니다.
1. 마우스 오른쪽 클릭 방식
- 먼저 해당 페이지로 이동한 후 마우스 오른쪽 버튼을 클릭합니다.
- '요소 검사(Inspect Element)' 옵션을 클릭합니다.
- (선택 사항) 페이지 내 특정 요소 위에서 오른쪽 클릭하면 해당 요소만 바로 검사할 수도 있습니다.
2. 도구 메뉴 방식
- Firefox 브라우저의 '도구(Tools)' 메뉴를 엽니다.
- '웹 개발자(Web Developer)'를 클릭한 후 '검사(Inspect)'를 선택합니다.
3. 단축키 방식
- 단축키를 사용합니다. Windows에서는
CTRL + Shift + C, Mac에서는COMMAND + OPTION + C를 누르면 됩니다.
오른쪽 클릭 없이 요소 검사하는 방법
마우스 오른쪽 클릭 없이도 맥에서 요소를 검사할 수 있습니다. 바로 단축키를 활용하는 것입니다. 브라우저별 단축키는 다음과 같습니다.
- Safari –
COMMAND + OPTION + I - Chrome –
COMMAND + OPTION + C - Firefox –
COMMAND + OPTION + C
또한 오른쪽 클릭 없이 각 브라우저의 환경설정이나 도구 메뉴를 통해서도 요소를 검사할 수 있습니다. 관련 방법은 위의 Safari, Chrome, Firefox 섹션에서 확인할 수 있습니다.