Mac에서 웹페이지 요소를 파고드는 것은 그렇게 어려운 일은 아니지만, 모든 것을 제대로 작동시키기 위해 얼마나 많은 미묘한 단계가 필요한지, 특히 처음 접하는 사람이라면 더욱 그렇습니다.레이아웃 문제를 해결하거나, 디자인 수정을 시도하거나, 단순히 사이트 구성 방식에 대한 호기심을 충족시키려는 경우든, 브라우저 개발자 도구에 제대로 접근하고 사용하는 방법을 아는 것은 큰 차이를 만듭니다. Mac은 이러한 작업을 처리하는 방식에 몇 가지 문제가 있기 때문에, 특히 Safari를 사용하는 경우, 아무것도 놓치지 않도록 이 과정을 신중하게 수행하는 것이 좋습니다.몇 번만 해 보면 놀라울 정도로 간단해집니다.
Safari, Chrome 또는 Firefox에서 Mac의 요소를 검사하는 방법
방법 1: Safari에서 개발자 도구 활성화(Safari의 기본 설정에서는 해당 메뉴가 표시되지 않음)
Safari를 사용하시는 경우, 먼저 개발자 메뉴를 켜야 합니다.처음에는 약간 숨겨져 있는데, 이상하지만 Apple 특유의 특징입니다.방법은 다음과 같습니다.
- Safari를 열고 Safari > 설정 (또는 환경 설정 :: 을 누를 수도 있음 Cmd +, ) 으로 이동합니다.
- 가장 오른쪽에 있는 고급 탭을 클릭하세요
- 메뉴 막대에서 개발 메뉴 표시 라고 적힌 상자를 체크하세요.
이제 바로 상단에 개발 메뉴가 나타납니다.이 메뉴를 통해 요소 검사를 포함한 모든 유용한 기능에 액세스할 수 있습니다.하지만 이 기능이 바로 작동하지 않는 경우도 있고, 일부 설정에서는 메뉴가 제대로 표시되려면 Safari를 다시 로드하거나 재시작해야 할 수도 있습니다.필요한 경우 이 기능을 껐다 켜면 됩니다.
페이지로 이동
설정이 완료되면 둘러보고 싶은 웹페이지를 열어주세요.재밌는 건 Safari의 개인정보 보호 설정 때문에 특정 페이지를 확인하기가 조금 어려울 때가 있지만, 일단 들어가면 일반적으로는 문제없습니다. Chrome과 Firefox는 처음에는 더 간단하지만, Safari는 개발자를 위한 추가 단계가 있습니다.
요소 검사하기
- Safari에서: 요소를 마우스 오른쪽 버튼으로 클릭(또는 Control 키를 누른 채 클릭)한 다음, 요소 검사를 선택합니다.
- Chrome/Firefox의 경우: 동일한 방법으로 마우스 오른쪽 버튼을 클릭하고 검사 또는 요소 검사를 선택하세요.
개발자 패널이 열리는데, 보통 하단이나 측면에 고정되어 있습니다.솔직히 어떤 설정에서는 좀 느리거나 바로 열리지 않는 경우가 있습니다. Mac과 브라우저는 항상 불편하게 만드는 요소가 있기 때문이죠.
HTML 및 스타일 살펴보기
요소 탭 에서는 마크업 구조를 확인할 수 있고, HTML 위에 마우스를 올리면 페이지에서 관련 부분이 강조 표시됩니다.오른쪽 스타일 창에는 적용된 CSS 규칙이 표시됩니다.스타일을 실시간으로 조정하여 변경 사항을 확인할 수도 있습니다.마치 마법처럼 말이죠.모달이나 오버레이가 상호작용을 방해하거나 실제 코드 파일을 수정하지 않고 색상과 글꼴을 실험해 보고 싶을 때 매우 유용합니다.
더 자세한 정보를 위한 더 많은 탭
- 콘솔 : 오류를 보거나 빠른 JavaScript 명령을 실행합니다.
- 네트워크 : 요청을 추적하고, 느린 부분을 확인하고, 로딩 문제를 진단합니다.
- 출처 : 스크립트와 자산을 자세히 살펴보세요.
- 접근성 : 대비율이나 ARIA 라벨을 확인하세요.
레이아웃 버그는 스크립트나 차단된 리소스로 인해 발생하는 경우가 있으므로, 문제가 발생하면 네트워크 탭을 자세히 살펴보는 것이 좋습니다.또한, 오버레이가 이상하게 작동하거나 응답하지 않을 경우 Mac에서 팝업 권한을 활성화하는 것이 도움이 될 수 있습니다.
네, 그렇게 하고 싶으시다면 iPhone이나 iPad를 USB로 연결한 다음, Mac의 Safari에서 개발자 모드 로 들어가서 기기를 선택하세요.처음에는 설정이 조금 까다로울 수 있지만, 놀라울 정도로 편리합니다.
좀 이상하긴 하지만… 아닙니다.수정 사항은 일시적일 뿐입니다.페이지를 새로 고치면 모든 내용이 초기화됩니다.그러니 수정 사항에 너무 집착하지 마세요.하지만 실제 코드 파일을 수정하기 전에 테스트하기에는 좋습니다.
Chrome/Firefox에서는 Command + Option + I가 잘 작동합니다. Safari에서도 같은 단축키를 사용하지만, 먼저 개발자용 메뉴를 켜야 합니다.
그렇지 않습니다.검사 도구는 브라우저별로 다릅니다.macOS 네이티브 앱의 경우 Xcode나 다른 개발자 도구가 필요합니다.따라서 웹사이트처럼 Mac 앱을 마우스 오른쪽 버튼으로 클릭해서 디버깅할 수 있을 거라고 기대하지 마세요.
개발자 메뉴가 활성화되어 있지 않아서 그럴 수 있습니다(주로 Safari에서 그렇습니다).Chrome이나 Firefox에서는 페이지 자체가 검사 기능을 차단하거나 이상한 상황이 발생하지 않는 한, 마우스 오른쪽 버튼을 클릭하면 항상 검사 옵션이 표시됩니다.
검사를 최대한 활용하기
솔직히 말해서, Mac에서 개발 도구를 사용해 보는 것은 웹의 숨겨진 모습을 엿보는 방법일 뿐입니다.개발자만을 위한 것이 아닙니다.웹사이트 구축 방식에 관심이 있거나, 기다리지 않고 레이아웃 문제를 해결하려는 사람이라면 정말 유용할 겁니다.메뉴 토글, CSS 실시간 편집, 네트워크 요청 확인 등에 익숙해지면 패턴을 파악하고 코딩 여정을 시작할 수 있을 겁니다. Mac 설정 자체는 브라우저마다 상당히 일관적이기 때문에, 어디를 살펴봐야 할지 알게 되면 익숙해질 가치가 있습니다.아, 그리고 더 자세히 알고 싶다면 Mac에서 Safari 배경을 변경하여 작업 공간을 개인화하고 살펴보고 학습할 수도 있습니다.