MacOS: Safari에서 웹 검사기 활성화하기

macOS Sierra에서 Apple Safari의 웹 페이지 소스 코드를 보려면 다음 방법 중 하나를 사용하여 Safari 웹 검사기 도구를 활성화해야 합니다.

Apple, Google 등과 같은 웹 브라우저 개발자들은 기본적으로 내부 코드를 볼 수 있는 도구를 제공합니다. 개발자들은 이 도구를 사용하여 실시간 웹사이트의 변경 사항을 디버깅하고 시각화하며, 서버의 실제 코드를 방해하지 않고도 작업을 수행할 수 있습니다. 그러나 이 도구는 이제 개인적 또는 전문적인 목적으로 실시간 웹사이트를 수정하고자 하는 콘텐츠 제작자 및 기술에 능숙한 인터넷 사용자들 사이에서 인기를 얻고 있습니다. 당신이 그런 사람 중 한 명이라면, Safari 웹 검사기에 대한 모든 것을 배우기 위해 기사를 끝까지 읽어보세요. 요소 검사하는 방법도 함께 안내합니다.

1 Safari 웹 검사기란?
2 Safari 10 이상에서 Safari 웹 검사기 활성화하는 방법
3 macOS에서 Safari 웹 검사기 사용하는 방법
4 이전 버전의 macOS에서 Safari 웹 검사기 열기
- 4.1 Safari 웹 검사기: 결론

Safari 웹 검사기란?

MacOS: Safari에서 웹 검사기 활성화하기 — Safari 웹 검사기가 무엇인지 배워보세요 (사진: Apple 제공)

웹 검사기는 전 세계적으로 웹사이트 및 앱 개발자에게 Apple이 제공하는 개발 도구 모음의 일부입니다. 이 도구는 macOS 및 iOS 장치 모두에서 사용할 수 있습니다. 개발자들은 웹사이트를 수정, 최적화 및 디버깅하여 온라인 자산의 최적 성능을 얻을 수 있습니다.

Safari의 웹 검사기 도구는 웹사이트 리소스를 하나의 통합된 인터페이스로 제공합니다. 이 도구는 리소스와 그 매개변수를 전용 탭으로 분리하여 많은 코드와 옵션에 압도당하지 않도록 합니다. 웹 검사기는 또한 웹사이트 메모리의 타임라인 뷰를 제공하여 메모리를 쉽게 디버깅할 수 있도록 합니다. 더욱이 개발자로서 기능적인 웹사이트 개발에 필요한 150개 이상의 인기 CSS 속성을 조정하고 최적화할 수 있습니다.

웹 검사기 도구에서는 다음과 같은 웹사이트 리소스 탭을 확인할 수 있습니다:

요소
콘솔
소스
네트워크
타임라인
스토리지
그래픽
레이어
감사

Safari 10 이상에서 Safari 웹 검사기 활성화하는 방법

기본적으로 Apple Mac은 Safari에서 웹 검사기를 비활성화합니다. 이는 웹 브라우저 사용자 인터페이스(UI)에 불필요한 혼잡을 방지하기 위함입니다. 그러나 당신이 개발자이거나 콘텐츠 제작자 또는 숙련된 Mac 사용자라면, 다음의 단계에 따라 이 기능을 활성화할 수 있습니다:

MacBook 또는 iMac에서 Safari 앱을 엽니다.
Mac 도구 모음에서 Safari 아이콘을 가져오려면 브라우저를 클릭했는지 확인하세요.

Safari를 클릭하고 환경설정을 선택합니다.
대안으로 단축키 Command + ,를 사용하여 환경설정 메뉴를 표시할 수 있습니다.
환경설정 메뉴에서 일반 탭에 있어야 합니다.

고급 탭으로 이동합니다.
프록시 옵션 아래에서 메뉴 막대에 개발 메뉴 표시 체크박스를 확인합니다.

이제 Safari 개발 메뉴가 Mac 도구 모음에 표시됩니다.

이렇게 하면 Mac 브라우저 Safari에서 웹 검사기 기능을 활성화할 수 있습니다. 최신 macOS 버전인 Ventura 및 이전 버전인 Monterey, Big Sur, Catalina 등에서도 유사한 단계로 진행할 수 있습니다.

추가로 읽어보세요: Html 4.01

지금까지 Mac Safari 앱에서 웹 검사기 기능을 사용하는 방법을 배웠습니다. 아래에서는 실시간 웹사이트에서 어떻게 사용하는지 배워보세요:

macOS에서 Safari 웹 검사기 사용하는 방법

웹 개발, 콘텐츠 생성 또는 기타 목적으로 웹 검사기 도구를 호출하는 방법은 다음과 같습니다. 이 기사에서는 macOS Monterey 운영 체제를 사용하여 단계를 보여드립니다. 그러나 단계는 macOS Jaguar부터 Ventura까지 유사합니다.

Safari를 열고 검토하고 싶은 웹사이트를 방문합니다.
웹사이트의 HTML/CSS 코드를 검사하거나 Apple 개발자 도구 웹 검사기를 사용하여 변경하려면 두 가지 방법이 있습니다:
- 개발 > 웹 검사기 표시.
- 오른쪽 클릭 > 요소 검사.
첫 번째 방법을 사용하려면 Safari 브라우저의 Mac 도구 모음으로 이동하고 개발 메뉴를 클릭합니다.

팝업되는 컨텍스트 메뉴에서 웹 검사기 표시를 클릭합니다. 이 작업의 단축��는 옵션 + Command + I입니다.

이렇게 하면 웹 브라우저 하단에 웹 검사기 도구가 열립니다. 보이는 코드는 액세스한 전체 URL 또는 웹 페이지에 대한 것입니다.
특정 요소의 기본 코드를 시각화하고 싶다면 웹 페이지의 특정 요소를 선택합니다.

오른쪽 클릭하고 열리는 컨텍스트 메뉴에서 요소 검사를 선택합니다.
Safari의 웹 검사기가 열립니다.

그러면 Safari가 당신을 감사 중인 요소의 기본 HTML 또는 CSS 코드로 직접 안내할 것입니다.
이 도구에서는 검사 중인 웹 페이지 요소의 HTML 및 CSS 코드를 확인할 수 있습니다.

추가로 읽어보세요: Technipages에서 CSS 설명

이전 버전의 macOS에서 Safari 웹 검사기 열기

당신이 Jaguar보다 오래된 Mac을 사용하고 있고 웹 검사기 도구를 사용해야 한다면, 위의 단계를 찾을 수 없을 수도 있습니다. 이 경우 웹 검사기를 활성화하기 위한 간단한 코드를 실행할 수 있습니다. 방법은 다음과 같습니다:

응용 프로그램을 열고 유틸리티 폴더로 이동합니다.
유틸리티 안에서 터미널을 찾아야 합니다. 이건 macOS 컴퓨터의 명령 프롬프트입니다.
이제 터미널 명령줄 인터페이스를 시작하고 다음 간단한 명령을 입력합니다:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Return을 눌러 명령을 실행합니다.
이제 Safari에서 웹 페이지를 열고 페이지의 아무 곳에서나 마우스 오른쪽 버튼을 클릭하거나 마우스 버튼을 누르고 계십시오.
그곳에서 요소 검사 옵션을 클릭하여 웹사이트의 기본 CSS 및 HTML 코드를 확인할 수 있습니다.

Safari 웹 검사기: 결론

이것이 Safari에서 웹 검사기를 손쉽게 활성화하는 방법입니다. 스스로 단계를 따라가면서 몇 분 만에 개발하거나 콘텐츠 제작을 시작할 수 있습니다. 새로운 macOS 버전과 구식 macOS 버전에서 Safari의 요소 검사를 활성화하는 방법을 배웠습니다. 웹 검사기를 얻고 사용하는 방법을 놓쳤다면 아래에 댓글을 남겨주세요.

다음으로는 iPad를 위한 최고의 코딩 앱입니다.