WebTools

Useful Tools & Utilities to make life easier.

Source Code Downloader

웹페이지의 전체 소스 코드를 파일로 다운로드합니다.

소스 코드 다운로드란?

주소를 넣으면 그 웹페이지의 HTML 원본을 그대로 가져와 텍스트 상자에 담아 주는 도구입니다. 우리가 화면에서 보는 글자와 이미지는 사실 HTML이라는 뼈대 위에 그려진 결과물인데, 이 도구는 그 뼈대 자체를 꺼내 보여 줍니다. 브라우저의 '페이지 소스 보기'와 비슷하지만, 결과를 바로 복사해 다른 곳에 옮길 수 있다는 점이 다릅니다.

페이지 구조가 어떻게 짜였는지 공부하거나, 특정 태그·메타 정보가 들어 있는지 확인하거나, 마음에 드는 마크업 조각을 참고할 때 씁니다. 서버가 처음 내려보내는 원본 그대로를 담으므로, 제작에 앞서 밑그림을 살펴보는 용도로 알맞습니다.

사용 방법

  1. 원본을 받아 볼 페이지 주소를 입력 칸에 넣습니다.
  2. 가져오기 버튼을 누르면 해당 페이지의 HTML이 아래 상자에 채워집니다.
  3. 복사 버튼으로 전체 코드를 클립보드에 담아 편집기나 문서에 붙여 넣습니다.

가져온 코드로 무엇을 확인하나요?

HTML 원본에는 화면에 안 보이는 정보도 함께 들어 있습니다. 자주 살펴보는 부분을 정리했습니다.

살펴볼 부분담긴 정보
<title> 태그브라우저 탭·검색 결과에 뜨는 페이지 제목
meta 태그설명문·검색용 정보·공유 미리보기 설정
본문 마크업제목·문단·링크가 어떤 구조로 짜였는지

자주 묻는 질문

화면에서 보이던 내용이 코드에 없어요.

요즘 사이트는 접속 후 자바스크립트로 내용을 나중에 채워 넣는 경우가 많습니다. 이 도구는 서버가 처음 내려보내는 원본만 가져오므로, 나중에 그려지는 부분은 코드에 빠져 있을 수 있습니다. 초기 뼈대만 담긴다고 이해하면 됩니다.

한글이 깨져 보일 때는요?

페이지가 쓰는 문자 인코딩에 따라 일부 글자가 다르게 표시될 수 있습니다. 이럴 때는 코드 안의 meta 태그에서 어떤 인코딩(예: UTF-8)을 쓰는지 확인해 두면, 다른 편집기에 붙여 넣을 때 맞춰 열기 쉽습니다.

가져온 코드를 마음대로 써도 되나요?

구조를 공부하고 참고하는 것은 자유지만, 남의 페이지 내용이나 디자인을 그대로 베껴 쓰는 것은 저작권 문제가 될 수 있습니다. 학습과 점검 용도로 쓰고, 실제 발행에는 직접 만든 코드를 쓰는 것이 안전합니다.

원본 말고 서버 설정 정보도 볼 수 있나요?

이 도구는 본문 HTML을 다룹니다. 서버가 함께 보내는 응답 헤더나 캐시·보안 설정을 보고 싶다면 HTTP 헤더 조회를, 그 주소가 다른 곳으로 넘어가는지 궁금하다면 리다이렉트 확인을 함께 쓰세요.