핵심 요약
- Safari 메뉴에서 개발자용 > 페이지 소스 보기를 선택합니다.
- 또는 페이지를 마우스 오른쪽 버튼으로 클릭한 후 드롭다운 메뉴에서 페이지 소스 보기를 선택합니다.
- 키보드 단축키: Option + Command + U
이 글에서는 Safari 브라우저에서 웹 페이지의 HTML 소스 코드를 확인하는 방법을 단계별로 소개합니다.
Safari에서 소스 코드 확인하기
Safari에서 소스 코드를 확인하는 방법은 아주 간단합니다.
Safari를 실행합니다.
확인하고 싶은 웹 페이지로 이동합니다.
상단 메뉴 바에서 개발자용 메뉴를 선택한 뒤, 페이지 소스 보기 옵션을 클릭하면 해당 페이지의 HTML 소스가 담긴 텍스트 창이 열립니다.
또는 키보드에서 Option + Command + U를 눌러도 같은 결과를 얻을 수 있습니다.
만약 개발자용 메뉴가 보이지 않는다면, 환경설정의 고급 탭으로 이동해 '메뉴 막대에서 개발자용 메뉴 보기' 항목을 체크하면 됩니다.
대부분의 웹 페이지에서는 페이지의 빈 곳(이미지가 아닌 곳)을 마우스 오른쪽 버튼으로 클릭하고 페이지 소스 보기를 선택해도 소스를 확인할 수 있습니다. 단, 이 옵션이 나타나려면 먼저 환경설정에서 개발자용 메뉴를 활성화해야 합니다.
Safari에는 HTML 소스를 빠르게 여는 전용 단축키도 있습니다. Command 키와 Option 키를 함께 누른 상태에서 U 키를 누르면 됩니다(Cmd + Opt + U).
소스 코드를 보면 좋은 점
웹 디자이너가 어떤 방식으로 레이아웃을 구현했는지 소스를 통해 살펴보면, 배움의 폭을 넓히고 자신의 작업 실력을 향상시키는 데 큰 도움이 됩니다. 지금까지 수많은 웹 디자이너와 개발자들이 웹 페이지의 소스를 보는 것만으로도 상당한 수준의 HTML을 익혀왔습니다. 초보자에게는 HTML을 배우는 최고의 학습 방법이며, 경험 많은 웹 전문가에게는 다른 사람들이 새로운 기술을 어떻게 적용했는지 확인할 수 있는 귀중한 기회가 됩니다.
다만 소스 파일은 생각보다 매우 복잡할 수 있다는 점을 기억하세요. 페이지의 HTML 마크업 외에도 사이트의 디자인과 기능을 구성하는 방대한 양의 CSS와 스크립트 파일이 함께 포함되어 있습니다. 처음에 구조를 한눈에 파악하지 못하더라도 좌절할 필요는 없습니다. HTML 소스 보기는 어디까지나 첫걸음일 뿐입니다. 이후에는 Chris Pederick의 Web Developer 확장 프로그램 같은 도구를 활용하면 CSS와 스크립트를 살펴보거나 HTML의 특정 요소를 자세히 검사할 수도 있습니다.
소스 코드 보기는 합법일까?
어떤 사이트의 코드를 통째로 복사해 마치 자신의 작품인 것처럼 게시하는 행위는 분명히 용납될 수 없습니다. 하지만 그 코드를 학습의 발판으로 삼는 것은 실제로 이 업계에서 수많은 사람들이 성장해온 방식입니다. 사이트의 소스를 보면서 새로운 것을 배운 적 없는 현직 웹 전문가를 찾기란 거의 불가능할 정도입니다!
웹 전문가들은 서로에게 배우고, 영감을 받은 작업을 바탕으로 더 발전된 결과물을 만들어냅니다. 그러니 주저하지 말고 관심 있는 사이트의 소스 코드를 열어보고, 소중한 학습 도구로 적극 활용해 보세요.