웹페이지의 모든 링크를 복사하는 방법

모든 링크가 필요한 이유

링크 모으기는 의외로 흔한 작업입니다. 읽기 목록의 모든 기사, 다운로드 목록의 모든 파일, 한 카테고리의 모든 상품, 또는 깨진 링크를 확인하려고 사이트 메뉴의 모든 페이지가 필요할 수 있습니다. 오른쪽 클릭 후 링크 주소 복사로 하나씩 복사하는 것은 다섯 개라면 괜찮지만 이백 개라면 고역입니다.

기본 제공 방법

Chrome에는 '모든 링크 복사' 명령이 없습니다. 다른 이름으로 저장으로 페이지 전체를 저장할 수 있고 저장된 HTML에 모든 링크가 들어 있지만, 여전히 파일에서 직접 골라내야 합니다.

수동 방법

Chrome의 개발자 도구가 링크를 모아 줄 수 있으며, 프로그래밍을 몰라도 쓸 수 있습니다.

1. 페이지에서 F12(Mac에서는 Cmd+Option+J)를 누르고 콘솔(Console) 탭을 엽니다.
2. 아래 줄을 붙여 넣고 Enter를 누릅니다.

copy([...new Set([...document.querySelectorAll("a[href]")].map((a) => a.href))].join("\n"))

3. 이제 페이지의 모든 링크가 한 줄에 하나씩 클립보드에 있습니다. 텍스트 파일이나 스프레드시트에 붙여 넣으세요.

이 줄이 하는 일을 말로 하면: 페이지의 모든 링크 요소를 찾고, 각각의 전체 주소를 가져와, 중복을 없애고, 줄바꿈으로 이어 붙인 뒤 결과를 복사합니다. copy 함수는 DevTools 콘솔에만 있으므로 다른 곳에서는 작동하지 않습니다.

알아 둘 점이 두 가지 있습니다. 콘솔에 처음 붙여 넣을 때 Chrome이 확인 문구를 입력하라고 할 수 있습니다. 누군가에게 속아 해로운 코드를 실행하는 일을 막기 위한 장치입니다. 좋은 습관이니, 위의 줄처럼 이해하는 코드만 붙여 넣으세요. 그리고 이 줄은 그 순간 페이지에 있는 링크만 봅니다. 스크롤할 때 더 불러오는 페이지라면 먼저 맨 아래까지 내려가세요.

도구로 영구히 해결하기

같은 사이트에서 자주 링크를 모은다면, 매번 콘솔을 여는 것보다 페이지의 버튼이 편합니다. 사용자 스크립트는 원하는 웹사이트에서 실행되는 짧은 JavaScript 코드입니다. 링크 복사 버튼을 추가하는 스크립트는 클릭할 때 콘솔 줄과 같은 일을 하면서 더 똑똑하게 할 수 있습니다. 사이트 메뉴와 하단의 링크는 건너뛰거나, 주요 목록의 링크만 남기거나, PDF 파일만처럼 종류별로 거를 수 있습니다.

ScriptPanda는 간단한 설명만으로 이런 도구를 만드는 Chrome 확장 프로그램입니다. 페이지에서 사이드 패널을 열고 이 가이드 끝의 요청을 붙여 넣으면, 도구를 작성해 그 페이지에 설치합니다. 페이지 구조를 볼 수 있으므로 '검색 결과의 링크만'이나 '상품 페이지로 가는 링크만'처럼 원하는 링크를 평범한 말로 설명하면 됩니다.

링크 복사는 AI를 호출하지 않으므로 버튼을 써도 요금제의 요청을 쓰지 않습니다. 도구를 만들거나 고칠 때만 요청을 씁니다.

이어서 해 볼 만한 아이디어:

• 링크마다 텍스트와 함께 Markdown 목록으로 복사하기.
• 복사하기 전에 링크 개수 보여 주기.
• 복사 대신 링크를 텍스트 파일로 내려받기.

링크 이상이 필요할 때

각 항목의 제목, 링크, 가격을 스프레드시트의 열로 원한다면 CSV 내보내기가 더 알맞습니다. 관련 가이드에서 어떤 목록에든 CSV 내보내기 버튼을 추가합니다.

한계

버튼은 클릭한 순간 페이지에 있는 링크를 복사합니다. 다른 페이지로 링크를 따라가 그 페이지의 링크를 모을 수는 없고, 예약 실행도 하지 않습니다. 스크롤해야 나타나거나 '더 보기' 버튼 뒤에 있는 링크는 불러온 뒤에만 포함됩니다. 일부 사이트는 일반 링크 요소 대신 스크립트로 링크를 만들기 때문에 빠질 수 있습니다. 무엇이 빠졌는지 ScriptPanda에 말하고 도구를 고쳐 달라고 하세요. 사이트 레이아웃이 바뀌었을 때도 마찬가지입니다.