아름다운 웹페이지 뒤에는 항상 '소스 코드'라 불리는 복잡한 코드가 숨어 있습니다. 이 코드는 웹페이지의 디자인과 기능을 사용자에게 제공하는 역할을 하죠. 때로는 어떤 코드가 웹페이지를 만들고 있는지 직접 확인해 보고 싶은 호기심이 생기기도 합니다. 다행히 대부분의 웹 브라우저에서는 웹페이지의 소스 코드를 볼 수 있으며, 맥(Mac)용 사파리(Safari)도 예외는 아닙니다.
다만 맥용 사파리는 크롬(Chrome)이나 파이어폭스(Firefox)와 달리 기본적으로 소스 보기 기능이 활성화되어 있지 않습니다. 소스 코드를 확인하려면 먼저 브라우저에 숨겨져 있는 개발자 메뉴를 잠금 해제해야 합니다.
이번 글에서는 해당 메뉴를 활성화하는 방법과 함께, 여러 가지 방식으로 웹페이지의 소스를 확인하는 방법까지 자세히 알려드리겠습니다.
맥 사파리에서 웹페이지 소스 코드 보기
1. 맥에서 사파리를 실행합니다.
2. 사파리가 실행되면 화면 상단의 'Safari' 메뉴를 클릭한 뒤 '환경설정(Preferences...)'을 선택합니다.
3. 환경설정 창이 열리면 상단 탭 중 가장 마지막에 있는 '고급(Advanced)' 탭을 클릭합니다.
4. 고급 탭 안에는 '메뉴 막대에서 개발자용 메뉴 보기(Show Develop menu in menu bar)'라는 옵션이 있습니다.
이 옵션 앞의 체크박스에 체크하면 즉시 브라우저 메뉴 막대에 새로운 메뉴가 추가됩니다.
이제 맥 사파리에서 개발자(Develop) 메뉴가 잠금 해제되었습니다. 아래에서 이 메뉴를 활용해 웹페이지의 소스 코드에 접근하는 다양한 방법을 살펴보겠습니다.
1. 개발자 메뉴 활용하기
사파리의 메뉴 막대를 보면 방금 활성화된 '개발자용(Develop)'이라는 새로운 메뉴가 나타납니다. 페이지 소스를 보려면 '개발자용' 메뉴를 클릭한 후 '페이지 소스 표시(Show Page Source)'를 선택하세요.
사파리가 즉시 해당 웹페이지의 전체 소스 코드를 화면에 표시해 줍니다.
2. 키보드 단축키 활용하기
여러 웹페이지의 소스 코드를 자주 확인해야 한다면 키보드 단축키를 사용하는 것이 훨씬 빠릅니다. 메뉴 막대를 클릭하고 옵션을 선택하는 과정보다 시간을 크게 절약할 수 있기 때문입니다.
사파리에서 웹페이지가 열린 상태에서 'Option + Command + U' 키 조합을 누르면 바로 해당 페이지의 소스 코드를 확인할 수 있습니다.
3. 우클릭 메뉴 활용하기
웹페이지 소스 보기 기능은 사파리의 컨텍스트 메뉴(마우스 오른쪽 버튼 메뉴)에도 추가됩니다. 웹페이지 위에서 마우스 오른쪽 버튼을 클릭한 후 '페이지 소스 표시(Show Page Source)' 옵션을 선택하기만 하면 됩니다.
마무리
사파리를 주 브라우저로 사용하고 있다면, 위에서 소개한 방법들을 통해 다른 브라우저로 전환할 필요 없이 언제든지 웹페이지 뒤에 숨겨진 코드를 손쉽게 확인할 수 있습니다. 개발자 메뉴만 한 번 활성화해 두면 메뉴, 단축키, 우클릭 등 자신에게 가장 편한 방식으로 소스 코드를 열람할 수 있으니 참고하시기 바랍니다.