메모를 사랑하는 당신을 위해, 옵시디언 웹 클리퍼

🏷️ 정보 오픈소스

옵시디언을 쓰다 보면 어느 순간 거의 모든 정보가 볼트 바깥에 있다는 걸 느끼게 됩니다. 아티클은 브라우저 탭에, 논문은 PDF 다운로드 폴더에, 레퍼런스는 북마크 어딘가에. 그 조각들을 볼트 안으로 끌어오는 과정이 늘 마찰이었습니다. 복사-붙여넣기, 마크다운 정리, 메타데이터 입력 — 읽고 싶은 마음이 식을 만큼의 작업이었죠.

옵시디언 웹 클리퍼는 그 마찰을 없애기 위해 만들어진 공식 브라우저 확장 프로그램입니다. 2024년 공개 이후 꾸준히 기능을 확장해왔고, 현재는 단순 페이지 저장을 넘어 AI 기반 콘텐츠 추출까지 지원합니다. 이 글은 설치부터 고급 템플릿 활용까지 실전 기준으로 정리한 것입니다.

설치와 볼트 연결

지원 브라우저는 Chrome, Firefox, Safari, Edge, Arc, Brave 등 주요 브라우저 전부입니다.

Chrome Web Store
Firefox Add-ons
Safari는 Mac App Store에서 설치 (macOS 13+ / iOS 16+)

설치 후 확장 아이콘을 클릭하면 볼트 선택 화면이 나타납니다. 옵시디언이 열려 있어야 연결이 됩니다. 볼트가 여러 개라면 여기서 기본 볼트를 지정합니다. iOS/iPadOS에서도 Safari용 확장으로 동일한 경험을 제공합니다.

기본 클리핑

페이지에서 확장 아이콘을 클릭하거나 단축키(Alt+Shift+O / Mac은 ⌥⇧O)를 누르면 클리퍼 팝업이 열립니다. 팝업에서 다음을 설정합니다.

노트 이름: 기본적으로 페이지 제목으로 채워지며 수정 가능합니다.
저장 위치: 볼트 내 폴더 경로. 템플릿에서 고정하거나 팝업에서 직접 지정합니다.
클리핑 대상:
- Article — 본문만 추출 (광고·네비게이션 제거)
- Full page — 전체 HTML을 마크다운으로 변환
- Selection — 드래그로 선택한 영역만
- Highlights — 페이지에서 형광펜으로 칠한 부분만

클리핑 대상을 선택하고 Add to Obsidian을 누르면 끝입니다. 볼트에 새 노트가 생성됩니다.

하이라이트 기능

클리퍼의 숨겨진 강점 중 하나입니다. 페이지에서 텍스트를 드래그하면 하이라이트 버튼이 뜨고, 칠하면 페이지 안에 형광펜이 적용됩니다. 같은 페이지에 다시 접속해도 하이라이트가 남아 있습니다. 크롬 로컬 스토리지에 저장되기 때문입니다.

나중에 클리핑할 때 Highlights를 선택하면 표시해둔 구절만 모아서 노트를 만듭니다. 논문을 읽으면서 중요한 문장에 표시해두고, 다 읽은 뒤 정리하는 워크플로우에 효과적입니다.

템플릿 시스템

클리퍼의 핵심 기능입니다. 어떤 사이트에서 무엇을 클리핑하든 일관된 노트 구조를 만들어줍니다. Settings → Templates에서 관리합니다.

템플릿은 세 부분으로 구성됩니다.

노트 이름: {{title}} — {{domain}}처럼 변수를 씁니다.
저장 위치: Clippings/Articles/{{date:YYYY}}처럼 동적으로 폴더를 지정합니다.
노트 내용: 프론트매터 + 본문 구조.

기본 템플릿 예시:

---
url: "{{url}}"
author: "{{author}}"
published: {{date}}
clipped: {{time:YYYY-MM-DD HH:mm}}
tags:
  - clipping
---

> {{description}}

{{content}}

커뮤니티 템플릿

obsidian-community/web-clipper-templates 저장소에 커뮤니티가 만든 템플릿이 쌓이고 있습니다. 레시피, 논문, GitHub 저장소, X(트위터) 스레드, YouTube 영상 등 특화 템플릿을 JSON 파일로 가져오기만 하면 바로 씁니다.

변수 완전 정리

변수는 {{변수명}} 형식으로 쓰며, 다섯 가지 종류가 있습니다.

1. 프리셋 변수

페이지에서 자동으로 추출되는 기본 변수들입니다.

변수	설명
`{{title}}`	페이지 제목
`{{url}}`	전체 URL
`{{domain}}`	도메인 (경로 제외)
`{{content}}`	본문 / 하이라이트 / 선택 영역
`{{author}}`	저자
`{{date}}`	글 게시일
`{{description}}`	메타 설명
`{{image}}`	대표 이미지 URL
`{{time}}`	현재 시각
`{{tags}}`	추천 태그
`{{highlights}}`	하이라이트 목록

2. 메타 변수

HTML <meta> 태그 값을 직접 꺼냅니다. Open Graph 데이터에 특히 유용합니다.

{{meta:og:title}}          — og:title
{{meta:og:image}}          — 썸네일 이미지
{{meta:name:description}}  — description 메타 태그
{{meta:twitter:creator}}   — 트위터 작성자

3. 셀렉터 변수

CSS 셀렉터로 DOM 요소를 직접 집어냅니다. 자동 추출이 잘 안 되는 사이트에서 씁니다.

{{selector:.article-author}}              — 텍스트 추출
{{selector:h1.headline?textContent}}      — 속성 지정
{{selector:meta[name="author"]?content}}  — meta content 추출

4. 스키마 변수

페이지의 Schema.org JSON-LD 구조화 데이터를 읽습니다. 레시피 사이트, 학술 페이지 등에서 정밀한 데이터를 꺼낼 수 있습니다.

{{schema:Recipe:name}}
{{schema:Article:author.name}}
{{schema:Product:offers.price}}

규칙(Rules)에서도 Schema.org 타입 매칭을 쓸 수 있어서, 레시피 페이지에만 특정 템플릿을 자동 적용하는 식으로 활용합니다.

5. 프롬프트 변수

언어 모델을 사용해 페이지 내용을 자연어로 추출·변환합니다. Interpreter가 활성화되어 있어야 합니다.

{{"이 글의 핵심 주장을 3문장으로 요약해"}}
{{"저자의 이름을 영문으로 추출해"}}
{{"이 레시피의 재료 목록을 마크다운 리스트로 만들어"}}

다른 변수와 함께 쓸 수도 있습니다.

{{"다음 내용에서 주요 인물 이름을 추출해: " + content}}

필터

변수에 파이프로 연결해서 출력을 변환합니다. 여러 필터를 체이닝할 수 있습니다.

{{title|title}}                          — 제목 케이스로 변환
{{author|capitalize}}                    — 첫 글자 대문자
{{content|blockquote}}                   — 인용구 형식으로 감싸기
{{url|wikilink}}                         — 위키링크 형식
{{date|date:"YYYY-MM-DD"}}               — 날짜 포맷 지정
{{tags|split:","}}                       — 쉼표 기준 분리
{{description|trim|replace:'"':''}}     — 공백 제거 후 따옴표 제거

자주 쓰는 필터 목록:

필터	동작
`blockquote`	`>` 인용구로 변환
`callout`	옵시디언 callout 블록
`capitalize`	첫 글자 대문자
`date:"FORMAT"`	날짜 포맷 (moment.js 형식)
`lower` / `upper`	소문자 / 대문자
`markdown`	HTML → 마크다운
`replace:"a":"b"`	문자열 치환
`slice:n:m`	부분 문자열
`title`	타이틀 케이스
`trim`	앞뒤 공백 제거
`wikilink`	`[...](2f43b42f.html)` 형식
`prepend:"텍스트"`	앞에 추가
`append:"텍스트"`	뒤에 추가

규칙 (Rules)

사이트마다 자동으로 다른 템플릿을 적용합니다. Settings → Templates → Add rule 에서 설정합니다.

세 가지 매칭 방식이 있습니다.

URL 패턴 매칭 — URL 앞부분 일치

https://arxiv.org/abs/    → 논문 템플릿
https://github.com/       → GitHub 저장소 템플릿
https://www.youtube.com/  → YouTube 템플릿

정규식 매칭 — /패턴/ 형식

/reddit\.com\/r\/\w+\/comments/   → Reddit 스레드 템플릿

Schema.org 매칭 — 페이지 구조화 데이터 기반

Recipe  → 레시피 템플릿
Article → 아티클 템플릿

인터프리터 (AI 기능)

프롬프트 변수를 처리하는 AI 엔진입니다. Settings → Interpreter에서 활성화합니다.

지원 모델 제공자: - OpenAI (GPT-4o, GPT-4o mini) - Anthropic (Claude 3.5 Sonnet, Haiku) - Google (Gemini 1.5 Flash, Pro) - Ollama 등 로컬 모델 연동 가능

API 키를 입력하고 원하는 모델을 선택하면 됩니다. 프롬프트 변수가 포함된 템플릿으로 클리핑할 때 Interpret 버튼이 나타나고, 클릭하면 AI가 페이지를 분석해 결과를 채워 넣습니다.

비용이 걱정된다면 Ollama로 로컬 모델을 돌리는 것도 좋습니다. 응답 속도는 느리지만 무료이고 프라이버시도 지킬 수 있습니다.

실전 활용 예시

논문 클리핑

arXiv 논문 페이지에 Rule을 걸어두면 자동으로 이 템플릿이 적용됩니다:

---
url: "{{url}}"
title: "{{title}}"
authors: "{{meta:citation_author}}"
published: {{meta:citation_date}}
abstract: >
  {{meta:citation_abstract}}
tags:
  - 논문
---

{{"이 논문의 핵심 기여를 세 줄로 요약해"}}

{{content}}

저자, 날짜, 초록을 자동으로 채우고 AI가 핵심 기여를 요약합니다.

YouTube 영상 저장

---
url: "{{url}}"
channel: "{{meta:og:site_name}}"
thumbnail: "{{meta:og:image}}"
tags:
  - video
---

{{"이 영상 제목과 설명을 바탕으로 주요 내용을 정리해"}}

레시피 저장

Schema.org Rule로 레시피 사이트를 자동 감지하고:

---
url: "{{url}}"
recipe_name: "{{schema:Recipe:name}}"
prep_time: "{{schema:Recipe:prepTime}}"
cook_time: "{{schema:Recipe:cookTime}}"
servings: "{{schema:Recipe:recipeYield}}"
---


<!-- -->
## 재료
{{schema:Recipe:recipeIngredient}}


<!-- -->
## 만드는 법
{{schema:Recipe:recipeInstructions}}

기존 클리퍼와 뭐가 다른가

MarkDownload는 오랫동안 쓰인 서드파티 확장입니다. 페이지를 마크다운으로 변환하는 건 동일하지만, 볼트와 직접 연동되지 않아 파일을 수동으로 옮겨야 합니다. 템플릿 시스템도 없습니다.

Clippings.md 플러그인은 볼트 내에서 작동하지만 브라우저 확장이 아니기 때문에 클리핑 트리거가 번거롭습니다.

옵시디언 공식 웹 클리퍼는 볼트 직접 연동 + 템플릿 + AI 추출을 하나로 묶은 공식 솔루션입니다. 오픈소스(GitHub)이기도 해서 커뮤니티가 직접 기능 요청과 버그 리포트를 올리고 있습니다. 공식 문서는 help.obsidian.md/web-clipper에서 확인할 수 있습니다.