웹사이트에서 에셋을 추출하는 방법: 5가지 쉬운 방법

웹사이트는 이미지, 아이콘, 비디오, 글꼴, CSS 파일, JavaScript 및 기타 리소스를 포함한 다양한 유형의 자산으로 구성됩니다. 웹 디자이너가 사이트 구축 방식을 연구하든, 개발자가 페이지를 테스트하든, 또는 단순히 공개적으로 접근 가능한 이미지를 오프라인 참조용으로 저장하려는 경우든, 웹사이트 자산을 추출하는 방법을 아는 것은 유용할 수 있습니다.

다행히도, 웹사이트에서 에셋을 추출하는 데 항상 고급 기술 지식이 필요한 것은 아닙니다. 이 가이드에서는 간단한 브라우저 기반 방법부터 프로그래밍 방식까지, 웹사이트에서 에셋을 추출하는 다섯 가지 실용적인 방법을 살펴보겠습니다.

1. 브라우저 개발자 도구를 사용하여 웹사이트 자산 추출

브라우저 개발자 도구는 웹사이트의 개별 자산을 검사하고 추출하는 가장 쉬운 방법 중 하나입니다. 크롬, 엣지, 파이어폭스 등 최신 브라우저에는 웹페이지에서 로드되는 파일을 확인할 수 있는 개발자 도구가 포함되어 있습니다.

시작하려면 대상 웹페이지를 열고 누르세요. F12 또는 Ctrl + Shift + I 페이지를 마우스 오른쪽 버튼으로 클릭하고 선택할 수도 있습니다. 검사 .

다음으로, 열어보세요 회로망 탭을 누르고 페이지를 새로고침하세요. 브라우저에 웹사이트에서 요청한 리소스가 표시됩니다.

필터를 사용하여 특정 자산을 찾을 수 있습니다.

• 이미지 – JPG, PNG, WebP, GIF 파일과 같은 이미지
• 메디아 – 오디오 및 비디오 자료
• CSS – 스타일시트
• 제이시 – 자바스크립트 파일
• 세례반 – 웹 폰트
• Fetch/XHR - 페이지에서 동적으로 요청하는 데이터

개별 리소스를 클릭하면 해당 URL 및 기타 정보를 확인할 수 있습니다. 리소스에 따라 마우스 오른쪽 버튼을 클릭하고 다음과 같은 옵션을 선택할 수 있습니다. 새 탭에서 열기 또는 해당 URL을 복사하세요.

DevTools는 특정 에셋이 필요하거나 웹사이트가 리소스를 로드하는 방식을 이해하고 싶을 때 특히 유용합니다. 하지만 수십, 수백 개의 에셋을 수동으로 저장하는 것은 번거로울 수 있는데, 이때 전용 추출 도구가 도움이 될 수 있습니다.

2. 전문 이미지 추출 도구를 사용하여 웹사이트 자산을 추출합니다. Imaget

웹사이트에서 이미지를 추출하는 것이 주된 목표라면, 모든 이미지를 수동으로 검토하는 것보다 전용 이미지 다운로더를 사용하는 것이 훨씬 편리할 수 있습니다.

Imaget 이 프로그램은 웹페이지에서 이미지를 감지하고 다운로드하도록 설계된 전문 이미지 다운로더입니다. 개별 이미지 파일을 하나씩 열어 저장하는 대신, 이 소프트웨어를 사용하여 여러 이미지를 식별하고 필요한 이미지만 다운로드할 수 있습니다.

단계 사용 Imaget 웹사이트의 모든 이미지를 추출하려면:

• 다운로드 및 설치 Imaget '에스 Windows 또는 Mac 컴퓨터의 버전입니다.

• 추출하려는 이미지가 포함된 웹페이지의 URL을 복사한 다음 엽니다. Imaget 웹페이지 URL을 입력하거나 붙여넣으세요.
• 소프트웨어가 웹페이지를 스크롤하여 분석하고 사용 가능한 이미지를 감지하도록 하세요.
• 미리 보기를 통해 저장하고 싶은 이미지를 선택하세요.
• 원하는 다운로드 설정을 선택하고 다운로드를 시작하세요.

이미지 전용 추출기는 이미지가 많은 페이지, 갤러리, 제품 카탈로그, 포트폴리오 및 기타 시각적 자산이 많은 웹사이트에 특히 유용할 수 있습니다.

3. 브라우저 확장 프로그램을 사용하여 웹사이트 자산 추출

또 다른 편리한 방법은 웹사이트 이미지나 기타 리소스를 감지하고 다운로드하도록 설계된 브라우저 확장 프로그램을 사용하는 것입니다.

이러한 확장 프로그램은 크롬, 엣지, 파이어폭스와 같은 브라우저 내에서 직접 작동합니다. 적절한 확장 프로그램을 설치한 후 웹페이지를 열고 브라우저 도구 모음에서 확장 프로그램을 활성화할 수 있습니다.

확장 프로그램에 따라 현재 페이지를 스캔하여 감지된 이미지와 크기, 파일 형식, 이미지 URL과 같은 정보를 표시할 수 있습니다. 그러면 개별 이미지를 선택하거나 여러 파일을 한 번에 다운로드할 수 있습니다.

일반적인 워크플로는 다음과 같습니다.

• 신뢰할 수 있는 이미지 다운로더 확장 프로그램(예: Imageye) 또는 에셋 다운로더 확장 프로그램(예: All Assets Downloader)을 설치하세요.
• 에셋이 포함된 웹페이지를 열고 확장 프로그램 아이콘을 클릭한 다음 확장 프로그램이 현재 페이지를 스캔하도록 허용하세요.
• 원하는 이미지 또는 자료를 선택하고 다운로드를 시작하세요.

브라우저 확장 프로그램은 애플리케이션을 전환할 필요가 없기 때문에 편리합니다. 웹페이지에서 여러 이미지를 가끔씩 가져와야 할 때 좋은 선택이 될 수 있습니다.

4. 웹사이트 전체를 삭제하세요

때로는 개별 이미지뿐만 아니라 오프라인 테스트, 아카이빙 또는 개발 연구를 위해 웹사이트 전체의 로컬 복사본이 필요할 수 있습니다.

웹사이트 미러링 도구(예: ...) 스위쉐어 아카이브킷 사이트 구조 및 접근 제한에 따라 웹페이지와 해당 페이지에서 참조하는 리소스를 재귀적으로 다운로드할 수 있습니다.

예를 들어, 명령줄 도구는 다음과 같습니다. wget 다운로드 권한이 있는 웹사이트를 미러링하는 데 사용할 수 있습니다.

wget --mirror --convert-links --adjust-extension --page-requisites --no-parent https://example.com/

이 접근 방식을 통해 페이지에서 참조하는 HTML, CSS, JavaScript, 이미지 및 기타 공개적으로 접근 가능한 리소스를 검색할 수 있습니다.

5. 프로그램 방식으로 자산 추출

프로그래밍에 익숙하다면 파이썬이나 다른 프로그래밍 언어를 사용하여 에셋 추출을 자동화할 수 있습니다. 이는 특히 많은 웹페이지를 처리하거나 특정 유형의 리소스만 추출해야 할 때 유용합니다.

예를 들어, 파이썬의 requests 해당 라이브러리는 HTML을 가져올 수 있고, BeautifulSoup은 페이지를 구문 분석하여 이미지, 스타일시트 및 스크립트 참조를 식별할 수 있습니다.

간단한 예는 다음과 같습니다.

이 스크립트는 에셋을 다운로드하지 않습니다. 대신, 일반적인 HTML 태그에서 참조되는 URL을 식별하고 상대 URL을 절대 URL로 변환합니다.

6. 결론

웹사이트에서 에셋을 추출하는 데 반드시 고급 웹 개발 기술이 필요한 것은 아닙니다. 개별 리소스의 경우 브라우저 개발자 도구를 사용하면 파일을 검사하고 URL을 찾는 간단한 방법을 제공합니다. 하지만 대량의 이미지를 다룰 때는 전문적인 도구가 필요합니다. Imaget 대량 추출을 간소화할 수 있습니다. 브라우저 확장 프로그램은 또 다른 편리한 옵션을 제공하며, 웹사이트 미러링 도구도 있습니다. 아카이브킷 승인된 웹사이트의 로컬 복사본을 만들 수 있습니다.

개발자 및 기술적으로 숙련된 사용자의 경우, 프로그래밍 방식을 이용한 추출은 수집 대상과 파일 구성 방식을 훨씬 더 세밀하게 제어할 수 있도록 해줍니다.