웹사이트의 기본 코드가 궁금해서 살펴보고 싶었던 적이 있나요? 다행히도 Mac의 기본 브라우저를 포함한 대부분의 웹 브라우저는 사용자가 HTML 및 CSS 코드를 자세히 보고 분석할 수 있는 “요소 검사”라는 접근 가능한 도구를 제공합니다.
이 도구는 요소 검사 기능을 통해 웹사이트를 구성하는 기본 HTML, CSS 및 JavaScript 코드를 볼 수 있을 뿐만 아니라 개발자가 필요에 따라 조정하여 웹 페이지와 애플리케이션을 실험하고 개선할 수 있게 해줍니다. 또한 일반 사용자도 개별 브라우저 설정에서 타이포그래피를 사용자 지정하는 데 사용할 수 있으므로 이 기능은 전문가에게만 국한되지 않습니다.
아래 제공된 절차를 살펴보고 Mac에서 실행 중인 모든 웹 브라우저에서 ‘요소 검사’ 기능을 활용하여 원하는 대로 소스 코드를 해결하는 방법에 대해 알아보세요.
Mac의 Safari 및 기타 브라우저에서 엘리먼트 검사 방법
엘리먼트 검사 기능을 활용하는 기능은 macOS에서 지원되는 모든 웹 브라우저에서 일관되게 유지됩니다. 이 기능에 액세스하려면 최소한의 노력만 필요합니다. 단, Safari의 경우 예외가 적용되므로 기능을 사용하기 전에 해당 기능을 활성화해야 합니다. 활성화 프로세스를 명확히 설명하기 위해 가이드의 다른 곳에 전용 하위 섹션이 포함되어 있습니다.
Mac 웹 브라우저에서 ‘요소 검사’ 기능을 활용하려면 먼저 해당 기능이 활성화되어 있는지 확인해야 합니다. 이 기능을 통해 사용자는 웹페이지의 구조와 디자인의 다양한 측면을 검토하고 수정할 수 있습니다. 이를 통해 개인은 선호하는 웹사이트가 어떻게 운영되는지 더 깊이 이해하고 필요에 따라 필요한 조정을 할 수 있습니다.
선호하는 웹 브라우징 애플리케이션을 열고 자세히 살펴보고자 하는 웹사이트로 이동합니다.
⭐ 웹페이지의 아무 곳이나 Control-클릭(마우스 오른쪽 버튼 클릭)하고 컨텍스트 메뉴에서 검사 또는 요소 검사를 선택합니다. 
Inspector 도구를 사용하면 웹사이트의 기본 소스 코드를 접근 가능한 형식으로 표시할 수 있습니다. 사용자는 ‘요소 검사’ 기능을 활용하여 Safari 등 선호하는 브라우저에서 텍스트와 이미지를 편집하는 등 원하는 대로 코드를 유연하게 조작할 수 있습니다.
⭐ 인스펙터 도구를 닫으려면 X 버튼을 클릭합니다. 
Safari에서 요소 검사 기능을 활성화하는 방법
Mac 컴퓨터의 Safari에서 요소 검사 기능에 액세스하려면 개발 메뉴를 활성화해야 합니다. 이를 위해서는 다음 단계를 따르세요:
먼저 Dock 또는 애플리케이션 폴더에 있는 아이콘을 클릭하여 애플리케이션을 엽니다. 애플리케이션이 활성화되면 화면 상단의 메뉴 표시줄을 찾아 ‘설정’을 클릭하세요. 이 메뉴는 쉼표 키(Cmd + ,)와 함께 Command 키를 누르고 있는 키보드 단축키를 통해서도 액세스할 수 있습니다.
메뉴에서 ‘고급’ 섹션을 클릭하거나 옵션 목록에서 선택하여 ‘고급’ 섹션으로 이동합니다.
화면 상단에 있는 메뉴 아이콘을 클릭하고 결과 드롭다운 목록에서 원하는 옵션을 선택하여 액세스할 수 있는 애플리케이션의 기본 인터페이스에서 “개발” 메뉴로 이동하세요.
Safari를 웹 브라우저로 사용하는 경우 이제 개발 메뉴가 최상단 탐색 모음에 눈에 잘 띄게 표시되어 Mac 기기에서 사용할 수 있는 상황에 맞는 메뉴에서 바로 요소 검사로 이동할 수 있습니다.
브라우저에서 요소 검사 사용 시기
요소 검사는 개발자가 웹페이지 레이아웃 조정을 실험하고 다양한 브라우저에서 기능을 평가하여 사용자 상호 작용 중에 발생할 수 있는 불일치나 문제를 식별하는 데 사용하는 유용한 도구입니다. 그러나 이 편리한 유틸리티는 개발자에게만 국한된 것이 아니라 일반 사용자도 웹사이트 구조 내의 요소를 탐색 및 수정하고 잠재적인 문제가 심각한 문제로 발전하기 전에 발견할 수 있는 기능을 활용할 수 있습니다.
웹사이트에 해석하기 어려운 타이포그래피가 사용되거나 시각적 팔레트가 사용자의 선호도와 맞지 않는 경우 ‘요소 검사’ 기능을 사용하면 콘텐츠를 더 읽기 쉽고 시각적으로 매력적으로 보이도록 수정할 수 있습니다. 또한 이 기능은 동일한 방법을 통해 웹사이트 제목을 조정하는 데까지 확장되어 지인을 장난스럽게 속일 수 있습니다.
요소 검사 기능의 유용성은 Mac 운영 체제와 현재 사용 중인 특정 웹 브라우저의 컨텍스트 내에서 변경하는 것으로 제한됩니다. 따라서 이 기능은 개인의 취향이나 선호도에 맞게 웹사이트를 편리하게 수정하고자 할 때 활용할 수 있습니다.
요소 검사: 사용자 경험을 개선하는 기능
Mac에서 ‘요소 검사’ 기능을 능숙하게 활용하면 디스플레이 관련 문제를 효율적으로 해결할 수 있고 개발자가 기술적 결함을 쉽게 식별하고 해결할 수 있으므로 웹사이트를 탐색할 때 사용자 경험을 크게 향상시킬 수 있습니다.
이 포괄적인 가이드는 Safari와 같은 다양한 웹 브라우저에서 이 기능을 효과적으로 활용할 수 있도록 설계되어 향후 발생할 수 있는 모든 문제를 자신감 있고 쉽게 해결할 수 있도록 도와줍니다.