Web Clipper로 웹페이지를 Obsidian에 저장하는 방법

템플릿에 대해 다뤘습니다. 변수를 사용해 날짜와 제목을 자동으로 채우고, 새 노트를 만들 때 한 번의 클릭으로 서식을 적용하는 방법이었죠. 이제 한 걸음 더 나아가 보겠습니다.

메모만으로는 부족합니다. 매일 트위터를 둘러보고, 위챗 기사를 읽고, Reddit을 스크롤합니다. 좋은 내용을 발견했을 때 어떻게 저장하시나요? 스크린샷? 이미지가 되어 검색이 불가능합니다. 복사-붙여넣기? 서식이 엉망이고, 제목과 링크를 수동으로 추가해야 합니다. 브라우저 북마크에 넣기? 북마크의 영원한 안식처입니다. 들어가기만 하고 나오지 않으며, 다시는 보지 않게 됩니다.

이 장에서는 그 문제를 해결합니다: 웹 콘텐츠를 Obsidian에 빠르고 깔끔하게 저장하는 방법입니다. 도구는 Obsidian 공식 브라우저 확장 프로그램인 Web Clipper입니다.

왜 Web Clipper를 사용해야 할까요?

Web Clipper 이전에는 웹 기사를 저장하는 데 대략 세 단계를 거쳤습니다:

첫 번째 단계: 스크린샷. 한 번 클릭, 노트에 넣기. 문제: 스크린샷은 검색이 안 됩니다. 석 달 후에 무엇을 캡처했는지조차 모르고, 찾을 수도 없습니다.

두 번째 단계: 복사-붙여넣기. 텍스트를 Obsidian에 복사한 다음 제목과 출처 링크를 수동으로 추가합니다. 문제: 서식이 대부분 깨집니다. 제목이 본문 텍스트가 되고, 굵은 글씨가 사라지며, 코드 블록이 일반 텍스트가 됩니다. 매번 정리하는 데 몇 분씩 걸립니다.

세 번째 단계: 북마크. 브라우저에서 별표를 클릭, 가장 쉽습니다. 대가: 그 링크를 다시는 열지 않게 됩니다.

Web Clipper의 논리: 한 번 클릭으로 저장, 깔끔한 서식, 자동 메타데이터, Obsidian에 직접 저장. 제목, 원본 링크, 저장 날짜가 모두 자동으로 채워집니다. 콘텐츠는 Markdown 형식이며, 이미지도 보존됩니다. AI 해석기를 사용하면 클리핑하면서 AI가 콘텐츠를 요약하도록 할 수도 있습니다.

설치

Web Clipper는 브라우저 확장 프로그램입니다. 현재 Chrome, Edge, Firefox, Safari를 지원합니다 (일부 기능은 다를 수 있음).

중요: 위챗 기사는 먼저 브라우저에서 열어야 합니다. 위챗 클라이언트에서는 직접 사용할 수 없습니다. 위챗 클라이언트는 별도 환경이므로 브라우저 확장 프로그램이 접근할 수 없습니다. 링크를 복사하여 Chrome이나 Edge에서 연 다음 클리핑하세요.

설치 단계

1단계: Chrome 사용자는 Chrome 웹 스토어를 열고 “Obsidian Web Clipper"를 검색한 후, 공식 확장 프로그램(Obsidian과 동일한 아이콘, 보석 패턴)을 찾아 “Chrome에 추가"를 클릭합니다.

2단계: Edge 사용자는 마찬가지로 Edge 부가 기능 스토어를 열고 “Obsidian Web Clipper"를 검색하여 설치합니다. Edge는 Chrome 웹 스토어 버전도 사용할 수 있으며, 둘 다 가능합니다.

3단계: 설치 후 확장 프로그램 아이콘이 오른쪽 상단 도구 모음에 나타납니다. 보이지 않으면 도구 모음 맨 오른쪽에 있는 퍼즐 조각 아이콘(확장 프로그램)을 클릭하여 Obsidian Web Clipper를 찾아 도구 모음에 고정합니다.

설치는 이것으로 끝입니다.

기본 설정

도구 모음에서 확장 프로그램 아이콘을 클릭하여 클리핑 패널을 엽니다. 오른쪽 아래에 작은 톱니바퀴 아이콘이 있는데, 이것이 설정 진입점입니다. 설정으로 들어가 기본 사항을 구성합니다.

Obsidian 저장소 연결

설정에서 가장 먼저 할 일은 저장소를 연결하는 것입니다. “저장소” 섹션에서 “저장소 추가"를 클릭하고 Obsidian 왼쪽 아래에 표시된 저장소 이름을 입력합니다. 예를 들어 제 저장소 이름은 “Obsidian Vault"이므로 그대로 입력합니다.

참고: 처음 연결할 때 Obsidian에서 Web Clipper 접근을 허용할지 묻는 권한 창이 나타납니다. “허용"을 선택하세요. 이는 정상적인 보안 알림입니다.

기본 저장 폴더 설정

저장소를 연결한 후 기본 위치를 설정합니다.

전용 인박스 폴더(예: 00-Inbox 또는 Inbox)를 만들어 클리핑된 콘텐츠를 전용으로 저장하는 것이 좋습니다. 저장소 루트에 바로 덤프하지 마세요. 시간이 지나면 루트가 지저분해지고 어떤 노트가 정리된 것이고 어떤 것이 처리되지 않은 웹 아카이브인지 알 수 없게 됩니다.

인터페이스 개요

설정을 마친 후 확장 프로그램을 열 때마다 세 가지 주요 영역이 표시됩니다:

• 상단: 속성 영역 — 현재 페이지의 제목, URL, 작성자(가능한 경우)를 자동으로 식별합니다.
• 중간: 콘텐츠 미리보기 영역 — 본문이 Markdown으로 변환되었습니다.
• 하단: 작업 영역 — 저장할 저장소와 폴더를 선택하고 템플릿을 선택한 다음 “클리핑"을 클릭하여 저장합니다.

AI 해석기

Web Clipper에서 가장 많은 시간을 투자할 가치가 있는 기능입니다.

무엇인가요?

AI 해석기를 사용하면 템플릿에 지시문을 작성하고, 클리핑할 때 “Obsidian에 추가” 버튼을 클릭하면 AI가 지정된 콘텐츠를 처리합니다. 예: 전체 텍스트 요약, 키워드 추출, 번역… 프롬프트를 어떻게 작성하느냐에 따라 가능한 작업이 달라집니다.

이 기능을 사용하려면 API 키가 필요합니다. 이미 OpenAI, DeepSeek, Anthropic의 API 키가 있다면 바로 사용할 수 있고, 없다면 해당 플랫폼에 등록하세요.

구성

설정으로 이동하여 “해석기” 탭을 찾습니다.

1단계: 모델 소스를 선택하고 해당 API 키를 입력합니다. OpenAI, Anthropic(Claude), Ollama(로컬 모델) 등을 지원합니다. 저는 DeepSeek를 사용합니다 — 기사 요약에 가장 좋다고 생각합니다.

2단계: “해석기 활성화"를 켜고 이 스위치를 활성화합니다.

그런 다음 템플릿에 프롬프트 변수를 작성하면 클리핑할 때 확장 프로그램 창에 해석기 영역이 나타나 클릭하여 실행할 수 있습니다.

사용자 정의 템플릿 만들기

Web Clipper에는 기본 템플릿이 포함되어 있습니다 — 작동은 하지만 훌륭하지는 않습니다. 몇 분만 투자하여 자신만의 템플릿을 만들면 모든 클리핑이 훨씬 편리해집니다.

템플릿을 사용자 정의하는 이유

콘텐츠 유형에 따라 필요한 정보가 다릅니다:

• 기술 기사: 제목, 링크, AI 요약, 본문
• 위챗 기사: 제목, 작성자, 발행일, AI 요약
• 제품 페이지: 제목, 가격, 링크, 본문은 필요 없음

하나의 템플릿으로 모든 시나리오를 다룰 수 없습니다. 콘텐츠 유형에 따라 몇 개의 템플릿을 만들고 클리핑할 때 적절한 것을 선택하면 매우 편리합니다.

템플릿 설정 접근

Web Clipper 설정에서 왼쪽의 “새 템플릿"을 클릭하여 새 템플릿을 만듭니다. 저는 게을러서 하나만 사용합니다.

템플릿 이름을 지정합니다(예: “기사 수집”). 그런 다음 콘텐츠 작성을 시작합니다.

템플릿 변수

Web Clipper는 두 가지 유형의 변수를 지원합니다:

페이지 변수 — 현재 웹페이지에서 자동으로 추출됩니다:

해석기 변수 — 속성 또는 콘텐츠에서 AI를 호출합니다:

해석기 구문은 간단합니다. AI에게 전달할 지시문을 큰따옴표 안에 넣고, 이중 중괄호로 감쌉니다. 다음과 같이:

{{"Summarize the full article without using an H1 heading"}}

안쪽 텍스트는 AI에 대한 지시문입니다. 바깥쪽 {{" "}} 형식은 변경하지 마십시오. Web Clipper는 이 구문을 인식하여 클리핑할 때 AI를 호출합니다.

속성과 콘텐츠 모두에서 사용할 수 있습니다. 속성 필드가 AI에 의해 자동으로 채워지도록 하려면 속성 값에 이 형식을 작성하고, 콘텐츠에 AI 요약을 삽입하려면 거기에도 작성하면 됩니다.

완전한 템플릿 예제

제가 사용하는 템플릿입니다:

템플릿 속성:

URL: {{url}}
Saved: {{date}}

템플릿 콘텐츠:

# Summary

한 가지 언급할 점이 있습니다: 작성자 줄은 {{author|split:", "|wikilink|join}}를 사용하고, 단순한 {{author}}가 아닙니다. 이는 변수 + 필터 조합입니다. 먼저 작성자 필드를 쉼표로 분할한 다음(일부 기사는 여러 작성자를 인식함), 각 이름을 Obsidian 위키링크 형식 [[작성자 이름]]으로 변환하고, 마지막으로 다시 결합합니다. 이렇게 하면 클리핑 후 작성자 이름을 클릭하면 해당 노트로 이동합니다. 꼭 이렇게 할 필요는 없습니다. {{author}}로 일반 텍스트를 출력해도 괜찮습니다. 취향에 따라 선택하세요.

콘텐츠 영역은 빈 줄 두 개만 남겼습니다: 주제 분류/링크는 수동으로 관련 정보를 추가하기 위한 것이고, # 요약은 제목 자리 표시자입니다. 해석기가 활성화되어 있으면 그 아래에 {{"전체 기사를 H1 제목 없이 요약해 주세요"}}를 추가하여 AI가 내용을 자동으로 채우도록 할 수 있고, 그렇지 않으면 클리핑 후 수동으로 몇 문장을 작성할 수 있습니다.

실습: 기사 클리핑하기

모든 설정이 완료되었습니다. 이제 실제로 사용해 보겠습니다.

마음에 드는 위챗 기사를 발견했다고 가정해 보겠습니다.

1단계: 링크를 복사하여 브라우저에서 엽니다. 위챗 기사에서 오른쪽 상단 메뉴를 탭하고 “기본 브라우저에서 열기"를 선택합니다.

2단계: Web Clipper 아이콘을 클릭합니다. 오른쪽 상단 도구 모음의 보석 아이콘을 클릭하여 클리핑 패널을 엽니다.

3단계: 속성을 확인합니다. 패널이 자동으로 기사 제목과 URL을 인식합니다. 작성자 필드가 인식되지 않으면 수동으로 입력합니다. 날짜는 오늘이므로 변경할 필요가 없습니다.

4단계: 템플릿을 선택합니다. 생성한 “기사 수집” 템플릿을 선택합니다. AI 해석기가 활성화되어 있으면 회전하는 애니메이션이 표시됩니다 — AI가 요약을 생성 중입니다. 완료될 때까지 기다립니다.

5단계: “Obsidian에 추가"를 클릭합니다. 1초 후 Obsidian을 열어 인박스 폴더로 이동하면 기사가 있습니다. 제목, 링크, 날짜, AI 요약이 모두 있고 콘텐츠는 깔끔한 Markdown입니다.

요약

오늘 배운 내용:

1. Web Clipper는 Obsidian의 공식 브라우저 확장 프로그램으로, 웹페이지를 한 번 클릭으로 Obsidian 노트로 저장하며 서식이 깔끔하고 메타데이터가 자동으로 추가됩니다.
2. 위챗 기사는 브라우저에서 열어야 클리핑할 수 있습니다. 위챗 클라이언트에서는 사용할 수 없습니다.
3. AI 해석기는 API 키가 필요합니다. 구성하면 클리핑 중에 자동으로 요약을 생성하고 정보를 추출할 수 있습니다.
4. 사용자 정의 템플릿 = 속성 변수 + AI 프롬프트. 콘텐츠 유형에 따라 다른 템플릿을 사용하면 클리핑 효율이 높아집니다.

핵심 포인트:

• 전용 인박스 폴더를 만드세요. 클리핑된 콘텐츠를 저장소 루트에 직접 덤프하지 마십시오.
• 먼저 기본 템플릿으로 워크플로를 작동시킨 다음, 시간을 들여 템플릿을 사용자 정의하세요. 템플릿은 언제든지 변경할 수 있습니다. 시작하는 것이 더 중요합니다.
• AI 요약은 보너스이지 필수가 아닙니다. API 키 없이도 정상적으로 클리핑할 수 있습니다. AI 처리 단계만 없을 뿐입니다.