핵심 요약
- 웹페이지에서 마우스 오른쪽 버튼을 클릭하고 페이지 소스 보기를 선택하세요.
- 단축키: Windows PC에서는 Ctrl+U, Mac에서는 Command+Option+U를 누르세요.
- 크롬 개발자 도구를 사용하려면 메뉴(점 세 개) > 도구 더보기 > 개발자 도구를 선택하세요.
이 글에서는 구글 크롬 웹 브라우저에서 웹사이트의 HTML 소스 코드에 접근하는 방법과 크롬 개발자 도구를 활용하는 방법을 소개합니다. 사이트의 소스 코드를 직접 들여다보는 것은 초보자가 HTML을 익히기에 가장 좋은 학습 방법 중 하나입니다.
크롬에서 소스 코드 보기
그렇다면 웹사이트의 소스 코드는 어떻게 확인할 수 있을까요? 구글 크롬 브라우저를 기준으로 단계별로 살펴보겠습니다.
구글 크롬 웹 브라우저를 실행합니다. (크롬이 설치되어 있지 않다면 공식 홈페이지에서 무료로 다운로드할 수 있습니다.)
살펴보고 싶은 웹 페이지로 이동합니다.
페이지 빈 곳에서 마우스 오른쪽 버튼을 클릭하면 메뉴가 나타납니다. 이 메뉴에서 페이지 소스 보기(View page source)를 클릭합니다.
해당 페이지의 소스 코드가 브라우저의 새 탭으로 열립니다.
마우스 대신 키보드 단축키를 사용할 수도 있습니다. PC에서는 Ctrl+U를 누르면 사이트의 소스 코드가 표시된 창이 열리고, Mac에서는 Command+Option+U를 누르면 됩니다.
크롬 개발자 도구 활용하기
구글 크롬이 기본 제공하는 간단한 페이지 소스 보기 기능 외에도, 강력한 개발자 도구(Developer Tools)를 활용하면 사이트를 한층 깊이 있게 분석할 수 있습니다. 이 도구를 사용하면 HTML뿐만 아니라 해당 HTML 문서의 각 요소에 적용된 CSS까지 함께 확인할 수 있습니다.
크롬 개발자 도구를 사용하는 방법은 다음과 같습니다.
구글 크롬을 실행합니다.
살펴보고 싶은 웹 페이지로 이동합니다.
브라우저 창 오른쪽 상단의 점 세 개 메뉴를 클릭합니다.
메뉴에서 도구 더보기(More tools) 위에 마우스를 올린 뒤, 나타나는 하위 메뉴에서 개발자 도구(Developer tools)를 선택합니다.
화면에 패널이 열리면 왼쪽에는 HTML 소스 코드가, 오른쪽에는 관련 CSS가 표시됩니다.
더 편리한 방법도 있습니다. 웹 페이지의 특정 요소에서 마우스 오른쪽 버튼을 클릭하고 검사(Inspect)를 선택하면, 개발자 도구가 열리면서 선택한 부분이 HTML 코드에서 강조 표시되고 해당 CSS가 오른쪽에 함께 나타납니다. 사이트의 특정 부분이 어떻게 만들어졌는지 궁금할 때 매우 유용한 기능입니다.
소스 코드를 보는 것은 합법일까?
지난 몇 년간 많은 웹 디자인 입문자들이 사이트의 소스 코드를 보고 학습하거나 자신의 작업에 참고하는 것이 괜찮은 일인지 질문해 왔습니다. 사이트의 코드를 통째로 복사해 마치 자신의 것인 양 웹사이트에 올리는 행위는 당연히 용납될 수 없습니다. 하지만 그 코드를 학습의 발판으로 삼는 것은 실제로 이 업계의 수많은 발전이 이루어진 방식이기도 합니다.
앞서 언급했듯이, 사이트의 소스를 보며 배운 것이 하나도 없는 현직 웹 전문가를 찾기란 거의 불가능합니다. 네, 사이트의 소스 코드를 보는 것은 합법입니다. 그 코드를 참고 자료로 삼아 비슷한 결과물을 만들어가는 것도 안전합니다. 문제가 되는 지점은 코드를 있는 그대로 가져다 자신의 작품인 것처럼 내놓을 때부터입니다.
결국 웹 전문가들은 서로에게서 배우고, 영감을 받은 작업을 더 발전시켜 나갑니다. 따라서 주저하지 말고 사이트의 소스 코드를 열어보고 학습 도구로 적극 활용하세요.
HTML 그 이상의 것들
기억해야 할 점은 소스 파일이 상당히 복잡할 수 있다는 것입니다. 보고 있는 웹사이트가 정교할수록 그 사이트의 코드 역시 복잡할 가능성이 높습니다. 페이지를 구성하는 HTML 구조 외에도 사이트의 시각적인 모습을 결정하는 CSS(종속형 스타일 시트)가 포함되어 있으며, 오늘날 많은 웹사이트는 HTML과 함께 여러 스크립트 파일도 함께 사용합니다.
스크립트 파일은 하나가 아니라 여러 개가 포함되어 있는 경우가 많고, 실제로 각각의 파일은 사이트의 서로 다른 기능을 담당합니다. 솔직히 말해 사이트의 소스 코드는 처음 접하는 사람에게는 압도적으로 느껴질 수 있습니다. 사이트의 작동 방식을 한눈에 파악하지 못한다고 좌절할 필요는 없습니다. HTML 소스 보기는 이 긴 여정의 첫 번째 단계일 뿐입니다. 경험이 조금씩 쌓이면 이 모든 요소들이 어떻게 어우러져 브라우저 화면에 보이는 웹사이트를 만드는지 점점 더 잘 이해하게 될 것입니다. 코드에 익숙해질수록 배울 수 있는 것도 많아지고, 소스 코드는 더 이상 어렵고 부담스러운 존재가 아니게 될 것입니다.