검색
검색
공개 노트 검색
회원가입로그인

[GPT 4o 실험] URL to Obsidian 웹 클리퍼 사용법

요약
  • 웹 클리퍼를 이용해 웹 페이지의 이미지 URL을 쉽게 추출하여 Obsidian 노트에 저장하는 방법을 소개합니다.
  • 자바스크립트 코드를 활용해 웹 클리퍼 기능을 구현하는 단계적인 사용 방법을 안내합니다.
  • 이 과정은 프로그래밍 초보자도 쉽게 따라할 수 있으며, 웹 서핑을 더 생산적으로 만듭니다.

DALL·E 2024-04-25 15

(아래 글은 예전에 클로드로 만들어 두었던 코드를 GPT4o로 업데이트해서 GPT4o 에서 작성한 글입니다. )

안녕하세요! 오늘은 여러분에게 웹 클리퍼를 사용하여 웹 페이지의 이미지를 쉽게 저장하는 방법을 소개하려고 합니다. 이 글에서는 여러분이 직접 코드를 사용해 웹 클리퍼를 만들고, 사용법을 단계별로 알아보겠습니다. 이 과정은 재미있고, 마치 전문가가 된 듯한 느낌을 줄 것입니다. 자, 이제 시작해볼까요?

웹 클리퍼란?

웹 클리퍼는 웹 페이지에서 필요한 정보를 쉽게 추출하여 저장할 수 있는 도구입니다. 예를 들어, 웹 페이지의 이미지 URL을 추출하여 저장할 수 있습니다. 이번에 소개할 웹 클리퍼는 JavaScript 코드를 사용하여 이미지 URL을 추출하고, Obsidian 노트에 저장하는 방법을 다룹니다.

준비물

  1. 웹 브라우저: Chrome, Firefox 등

  2. Obsidian: 노트 작성 및 관리 도구

  3. JavaScript 코드: 아래에서 제공하는 코드

사용 방법

1. JavaScript 코드 준비하기

아래 코드를 복사해둡니다. 이 코드는 웹 페이지의 모든 이미지 URL을 추출하여 Obsidian 노트에 저장하는 기능을 합니다.

(function() {
  const vault = "";
  const folder = "Clippings/";
  let tags = "image-urls";

  const images = Array.from(document.images).map(img => img.src);
  const fileName = "image_urls_" + new Date().toISOString().split('T')[0];
  const today = new Date().toISOString().split('T')[0];

  const fileContent = `
---
created: ${today} ${new Date().toLocaleTimeString()}
updated: ${today} ${new Date().toLocaleTimeString()}
date: ${today}
tags:
- "${tags}"
aliases:
- "${fileName}"
---

## Image URLs

${images.join('n')}
`;

  const obsidianUrl = `obsidian://new?file=${encodeURIComponent(folder + fileName)}&content=${encodeURIComponent(fileContent)}${vault ? `&vault=${encodeURIComponent(vault)}` : ''}`;

  const link = document.createElement('a');
  link.href = obsidianUrl;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
})();

2. 북마크 만들기

  1. 웹 브라우저에서 북마크를 추가합니다.

  2. 북마크의 URL 부분에 위에서 복사한 JavaScript 코드를 붙여넣습니다.

  3. 북마크 이름을 "웹 클리퍼"로 설정합니다.

KakaoTalk_Photo_2024-05-13-17-10-17

(크롬의 북마크> 북마크 관리자 로 들어가서 북마크를 생성하세요)

[GPT 4o 실험] URL to Obsidian 웹 클리퍼 사용법 image 3

(생성된 북마크에서 마우스 우클릭해서 edit(편집) 버튼을 눌러서, 위에 제공한 자바스크립트 코드를 주소 부분에 붙여 넣으세요)

[GPT 4o 실험] URL to Obsidian 웹 클리퍼 사용법 image 4

(URL 부분에 자바스크립트 코드를 붙여 넣고 저장하기 하면 완료)

[GPT 4o 실험] URL to Obsidian 웹 클리퍼 사용법 image 5

(마우스로 북마크를 끌어다가 주소 입력창 아래 작업줄에 넣으면 설정이 완료됩니다.)

3. 웹 클리퍼 사용하기

  1. 웹 페이지를 열고, 이미지 URL을 저장하고 싶다면, 만들어둔 "웹 클리퍼" 북마크를 클릭합니다.

  2. Obsidian이 설치되어 있다면, 새로운 노트가 자동으로 생성되고, 이미지 URL이 저장됩니다.

[GPT 4o 실험] URL to Obsidian 웹 클리퍼 사용법 image 6

(지피티 스토어 페이지에서 url 을 클리핑해보겠습니다.

[GPT 4o 실험] URL to Obsidian 웹 클리퍼 사용법 image 7

(옵시디언이 설치되어 있어야 합니다. open obsidian 을 클릭하세요)

[GPT 4o 실험] URL to Obsidian 웹 클리퍼 사용법 image 8

(옵시디언에 URL 이 클리핑 되었습니다.)

코드 설명

이 코드는 JavaScript로 작성되었으며, 다음과 같은 기능을 합니다:

  1. 이미지 URL 추출: Array.from(document.images).map(img => img.src)를 통해 현재 웹 페이지의 모든 이미지 URL을 추출합니다.

  2. 파일 이름 및 내용 생성: 추출한 이미지 URL을 기반으로 Obsidian 노트의 파일 이름과 내용을 생성합니다.

  3. Obsidian URL 생성: Obsidian 프로토콜을 사용하여 새로운 노트를 생성하는 URL을 만듭니다.

  4. 노트 생성 요청: document.createElement('a')를 사용하여 임시 링크를 만들고, 이를 클릭하여 Obsidian에 노트를 생성합니다.

마무리

이제 여러분도 웹 페이지에서 이미지를 쉽게 추출하여 저장할 수 있는 웹 클리퍼를 만들 수 있게 되었습니다. 이 방법은 프로그래밍을 처음 접하는 분들도 쉽게 따라할 수 있도록 설계되었습니다. 직접 시도해보고, 웹 서핑을 더욱 즐겁고 생산적으로 만들어보세요!

궁금한 점이 있으면 언제든지 댓글로 남겨주세요. 감사합니다!

조회수 : 2603
heart
공유하기
카카오로 공유하기
페이스북 공유하기
트위터로 공유하기
url 복사하기
T
페이지 기반 대답
AI Chat