OC
close
프로필 배경
프로필 로고

OC

Obsidian · 2025. 11. 28. fullscreen 넓게보기

크롬에서 보던 URL을 클릭한번에 옵시디언 웹뷰어(Web viewer)로 열기

개요 

크롬 브라우저에서 유용한 글을 읽다가 옵시디언에 정리하고 싶을 때가 있다.

보통은 옵시디언 웹클리퍼를 사용해 글 전체를 저장하는 방식을 많이 쓴다.

하지만 전체 스크랩보다 원본을 띄워두고 필요한 부분만 발췌해서 정리하고 싶을 때가 있다.

 

아래 방법을 활용하면, 클릭 한 번으로 보고 있던 웹페이지를 옵시디언 내부로 띄우고 
창을 왔다 갔다 할 필요 없이 효율적으로 정리할 수 있다

 

Web viewer 가 좋은이유 

 

보통은 '옵시디언 웹클리퍼'를 사용해 글 전체를 저장하지만, 원본을 띄워두고 필요한 부분만 발췌하거나 단순히 참고만 하고 싶을 때가 있다. 이때 웹뷰어를 활용하면 다음과 같은 장점이 있다.

  • 드래그 앤 드롭: 텍스트를 드래그한 상태에서 우클릭하여 검색하거나 새 문서로 만들 수 있다.
  • 유연한 브라우징: 보던 페이지를 다시 크롬으로 열거나, 옵시디언 내부에서 계속 탐색할 수 있다.
  • 문서화 용이: '볼트에 저장하기' 옵션을 통해 필요시 본문을 문서로 변환할 수 있다.

 

 

 

설정 방법

설정방식이 약간 복잡하지만 한번세팅해두면 옵시디언을 편하게 사용하기 좋다 

 

작동방식 설명 

[크롬 보고있던 URL 복사 → 옵시디언 수신 → 옵시디언 웹뷰어로 열기] 과정을 자동화하는 방법을 다룬다.

설정은 역순으로 진행된다.

 

1단계 옵시디언에서 "받는 놈" 만들기 (Templater플러그인)

URL을 받아서 웹뷰어로 띄워줄 템플릿 코드를 작성하는 단계다.

  • Templater 플러그인 설치
  • 템플릿을 저장할 폴더를 만든다. (예: templates)
  • 새 템플릿 파일을 생성한다. (예: code_Open webviewer)
  • 생성한 파일에 아래 코드를 붙여넣는다 
<%*
// 1. 클립보드에서 URL 읽어오기
const url = await navigator.clipboard.readText();

if (url && url.startsWith("http")) {
    // 2. 코어 웹뷰어로 열기 (아까 확인한 코드)
    const leaf = app.workspace.getLeaf('split', 'vertical'); 
    
    // 아래 옵션중에 선택해서 위 문장을 바꿔서 사용할 수 도 잇따. 
	//기본 옵션 : 탭으로 열기 
	//const leaf = app.workspace.getLeaf('tab'); 
    //다른 옵션 : 오른쪽으로 split 하면서 열기 
    //const leaf = app.workspace.getLeaf('split', 'vertical'); 
    //다른 옵션 : 아래로 split 하면서 열기 
    //const leaf = app.workspace.getLeaf('split', 'horizontal'); 
    //다른 옵션 : 새창으로 열기 
    //const leaf = app.workspace.getLeaf('window');
    
    
    await leaf.setViewState({
        type: "webviewer", 
        active: true,
        state: { url: url }
    });
    // 3. 포커스 이동
    app.workspace.setActiveLeaf(leaf, { focus: true });
} else {
    new Notice("클립보드에 유효한 URL이 없습니다.");
}
%>

  • Templater 설정 메뉴로 이동한다.
    • 'Template folder location'을 위에서 만든 폴더로 지정한다. = 템플릿 폴더 위치 지정
    • 'Template Hotkeys' 부분 - 템플릿 파일을 명령어로 등록 

2단계: 외부에서 실행할 수 있게 ID 따기

크롬에서 옵시디언의 특정 명령(1단계에서 만든 템플릿)을 실행할 수 있도록 고유 주소(URI)를 생성하는 단계다.

  • Advanced URI 플러그인 설치 
  • Ctrl + P를 눌러 명령어 창을 연다.
  • `Advanced URI: Copy URI for command`를 검색하여 실행한다.
  • 파일을 선택하지 않고 `<Don't specify a file>`을 선택한다.
  • 명령어 목록에서 `Templater: Insert (지정한 템플릿 파일명)`을 찾아 선택한다.

  • 클립보드에 복사된 주소를 메모장에 잠시 붙여넣는다.
    • 형식 예시: `obsidian://adv-uri?vault=...
    • 붙여넣기 하면 이런식으로 나옴 `"obsidian://adv-uri?vault=Obsidian%20icloud&commandid=templater-obsidian%3A(templates)%2Fcode_Open%20webviewer.md"`

이 주소는 자신의 볼트이름, 템플릿 폴더이름, 템플릿 파일이름에 따라 다 다르게 생성됨. 

 

위 단계로 명령어를 실행하면 주소가 만들어놓은 코드 템플릿을  실행하는 주소(URI) 가 자동으로 복사된것임. 

 

Advanced URI 는 특정 커맨드 실행, 특정 파일 열기를 시켜주는  링크를 자동으로 만들어주는데 도움을 주는 플러그인

 

3단계: 크롬 북마크릿 만들기 (보내는 놈)

크롬에서 버튼을 누르면 URL을 복사하고 옵시디언을 호출하는 버튼을 만든다.

 

  • 크롬 브라우저를 켠다.
  • 북마크 바의 빈 공간에 우클릭 후 '페이지 추가'를 누른다.
  • 이름은 'Obsidian으로 열기' 등으로 정한다.
  • URL 칸에 아래 코드를 복사해서 넣는다.
  • 주의: 코드 맨 마지막의 YOUR_OBSIDIAN_URI_HERE 부분을 2단계에서 복사해 둔 주소로 교체해야 한다.

 

javascript:(function(){
    var input = document.createElement('textarea');
    input.value = document.location.href;
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
    document.location.href = "YOUR_OBSIDIAN_URI_HERE";
})();

 

크롬 북마크바에 북마크를 만든다음 URL 위치에 위 javascript 붙여넣으면 된다 (=북마크릿) 

 

 

이 북마크릿은 "현재 주소를 복사하고 -> 아까 딴 옵시디언 명령어를 실행" 하는 역할을 한다 

주석과 함께 보면 다음과 같다 

javascript:(function(){
    /* 1. 현재 주소를 클립보드에 복사하기 위한 꼼수 (execCommand 사용) */
    var input = document.createElement('textarea');
    input.value = document.location.href;
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);

    /* 2. 옵시디언 명령 실행 (Advanced URI) */
    /* 아래 주소를 2단계에서 얻은 주소로 바꾸세요 */
    document.location.href = "YOUR_OBSIDIAN_URI_HERE";
})();

 

사용방법 

  • 크롬에서 옵시디언으로 보고 싶은 페이지에 접속한다.
  • 북마크 바에 만들어 둔 버튼을 클릭한다.
  • 자동으로 옵시디언이 활성화되며 화면이 분할되고 해당 웹페이지가 열린다.

참고: 작동 원리 및 코드 정보

  • 작동 방식: 자바스크립트가 현재 URL을 클립보드에 복사함 -> Advanced URI를 통해 옵시디언 호출 -> Templater가 클립보드의 URL을 읽어서 웹뷰어로 오픈.
  • 플러그인 ID 확인: Ctrl + Shift + I (개발자 도구) -> 콘솔 창에 app.plugins.plugins (커뮤니티) 또는 app.internalPlugins (코어)를 입력하여 확인 가능.
  • Web Viewer 뷰 타입: 본문의 코드는 type: "webviewer"를 사용함. 만약 Surfing 플러그인을 사용한다면 surfing-view로 타입을 변경해야 할 수도 있음.

참조한 내용

옵시디언 API 및 웹뷰어 기본 정보

- [Workspace - Developer Documentation](https://docs.obsidian.md/Plugins/User+interface/Workspace)
- [Views - Developer Documentation](https://docs.obsidian.md/Plugins/User+interface/Views)
- [setViewState - Developer Documentation](https://docs.obsidian.md/Reference/TypeScript+API/WorkspaceLeaf/setViewState)
- [WorkspaceLeaf - Developer Documentation](https://docs.obsidian.md/Reference/TypeScript+API/WorkspaceLeaf)

- [https://github.com/obsidianmd/obsidian-api](https://github.com/obsidianmd/obsidian-api)
- **내용:** `obsidian.d.ts` 파일을 보면 `app`, `workspace`, `vault` 등 핵심 객체들이 사용할 수 있는 메서드와 속성이 정의되어 있습니다.

 

플러그인의 정확한 ID는 확인방법  

플러그인의 정확한 ID는 아래 방법으로 확인할수 있다. 

 

`Ctrl Shift I`를 눌러 개발자 도구를 열고 콘솔탭에

"app.plugins.plugins"을 치면 커뮤니티 플러그인 리스트가 나오고 

" app.internalPlugins"을 치면 코어 플러그인 리스트가 나온다 

 

웹뷰어 코어플러그인의 ID 가 webviewer 인것을 확인 할수 있다. 

 

작동하는 JS 코드 예시

코드가 작동하는지 개발자모드 `Ctrl Shift I` 콘솔창에서도 확인할수 있다. 

이 코드는 옵시디언에 새 탭(Leaf)을 만들고, 거기에 웹뷰어 뷰를 강제로 할당하여 URL을 로드하는 방식이다. 

Surfing (커뮤니티 플러그인) 으로 naver. com 열기 

// 열고 싶은 URL 설정
const myUrl = "https://www.naver.com";

// 1. 새 탭(Leaf) 생성 (true는 새 탭, false는 현재 탭)
const leaf = app.workspace.getLeaf(true);

// 2. 해당 탭의 뷰 상태를 웹뷰어('surfing-view')로 변경
await leaf.setViewState({
    type: "surfing-view", // 사용 중인 플러그인에 따라 view type 이름이 다를 수 있음 (아래 참고)
    active: true,
    state: { 
        url: myUrl 
    }
});

// 3. (선택사항) 해당 탭으로 포커스 이동
app.workspace.setActiveLeaf(leaf, { focus: true });




Web viewer (코어플러그인) 에서 naver.com 열기 

// 1. 이동할 주소
const targetUrl = "https://www.naver.com";

// 2. 새 탭 생성
const leaf = app.workspace.getLeaf('tab');

// 3. 뷰 타입을 'webviewer' (코어 플러그인)로 설정
await leaf.setViewState({
    type: "webviewer", 
    active: true,
    state: { 
        url: targetUrl 
    }
});

// 4. 포커스 이동
app.workspace.setActiveLeaf(leaf, { focus: true });

 

Web viewer (코어플러그인) 에서 naver. com 열기 - split right 

// 열고 싶은 URL 설정
const targetUrl = "https://www.naver.com";

// 1. 새 Leaf를 오른쪽으로 분할하여 생성
// getLeaf(createLeaf: boolean, direction?: "vertical" | "horizontal"): WorkspaceLeaf;
// 'split' 인수는 'createLeaf'가 true일 때 분할 방향을 지정함.
const leaf = app.workspace.getLeaf('split', 'vertical'); 

// 2. 해당 Leaf를 뷰 상태로 설정 (webviewer 로드)
await leaf.setViewState({
    type: "webviewer",
    active: true,
    state: {
        url: targetUrl
    }
});

// 3. 포커스 이동 (선택 사항)
app.workspace.setActiveLeaf(leaf, { focus: true });

 

https://docs.obsidian.md/Reference/TypeScript+API/Workspace/getLeaf_1
- If newLeaf is `tab` or true then a new leaf will be created in the preferred location within the root split and returned.
- If newLeaf is `split` then a new leaf will be created adjacent to the currently active leaf.
- If newLeaf is `window` then a popout window will be created with a new leaf inside.

'Obsidian' 카테고리의 다른 글

옵시디언 초기세팅3 : 꼭 알아야할 단축키, 커스텀 단축키 세팅 가이드  (0) 2025.11.25
옵시디언 내컴퓨터 파일/폴더를 링크로 1초만에 넣는법 (Ctrl + 드래그)  (0) 2025.11.24
옵시디언 ㅁ+한자 대신 화살표, 원숫자,특수문자 빠르게 쓰기 (Typing Transformer 플러그인)  (0) 2025.11.23
Obsidian 관련 글
더 보기

티스토리툴바