[Obsidian] 플러그인을 개발해보자

토이 프로젝트로 옵시디언이라는 마크다운 편집기 프로그램 플러그인을 개발해 보았다. 자바스크립이나 타입스크립은 처음이라 해맸던 부분들이 많았어서 개발 방법 및 순서를 정리해 보려 한다.

사전 준비

시작 전, 아래의 내용들이 설치되어있어야 한다.

• Obsidian
  • 디버깅을 위해 필요
• Git
  • 배포를 위해 필요
• Node.js
  • 사용되는 언어
• VS Code
  • 편집기

Step 1 샘플 다운로드

우선 디버깅용 Vault를 만들어준다. 그리고 터미널을 열어 {Vault 경로}/.obsidian/plugins 으로 이동한다. 만약 plugins 디렉토리가 없다면, 만들어주면 된다.

cd {Valut 경로}/.obsidian/plugins

// plugins가 없을 경우
mkdir {Valut 경로}/.obsidian/plugins
cd {Valut 경로}/.obsidian/plugins

obsidian에서 제공하는 플러그인 샘플을 받아주어야 한다. 이 때, 원본 레포지토리를 clone해도 되지만, 형상관리 용이나 추후 배포를 위해서 자신의 레포지토리를 만들어서 로컬에 불러오는 것이 좋아보였다. 여기로 들어가 fork를 해도 좋고, Use this template을 통해 별도의 레포지토리를 만들어도 좋다.

Step 2 플러그인 빌드

샘플 코드가 설치되었으면, VS code로 해당 폴더를 열어준다. 설치된 파일들 중, main.ts, manifest.json 2개의 파일만 신경쓰면 된다.

main.ts

main.ts 파일을 보게되면, 아래의 이미지처럼 편집기 상에서 빨간 밑줄들이 그어져있다.

 

npm이 설치되지 않아서 생기는 것이므로, 당황하지말고 터미널을 열어 아래의 커멘드를 입력하도록 하자.

npm install

그리고 아래의 커멘드를 입력하여 실행시킬 수 있다.

npm run dev

실행하게 되면 main.js가 생기게 되는데, 실제 obsidian에서 읽는 것은 해당 파일인 것 같다. 즉, 실행시키지 않거나 다른 이유로 해당 파일이 없으면 obsidian에서 플러그인을 불러올 수 없다.

manifest.json

manifest.json의 구조는 위와 같은데, 각각 자신의 상황에 맞게 변경하면 된다. 아이디나 이름의 경우, 상위 폴더의 이름과 달라도 크게 상관은 없는 것 같았다.

Step 3 Plugin 활성화

실행 시킨 뒤, 샘플 코드가 저장된 vault의 설정을 열어, 커뮤니티 플러그인 활성화를 해준다. 하게되면 아래와 같이 샘플 플러그인이 뜨게되고, 토글버튼을 눌러 활성화 시켜주면 된다. 만약 타입스크립트를 실행시킨적이 없다면 샘플 플러그인이 활성화되지 않게된다.

• 만약 플러그인이 보이지 않는다면, 해당 vault를 재시작 시켜주면 된다.
  

  

  
  샘플 코드가 정상적으로 실행된다면, 왼쪽에 주사위 모양의 메뉴가 생긴다. 클릭해보면, 오른쪽 상단에 "This is a notice!"라는 팝업 문구가 생긴다면 여기까진 성공이다.

Step 4 본격적인 개발

이후에는 main.ts의 모든 코드를 지우고 원하는 기능을 구현하면 된다. Obsidian에서 제공하는 주요 기능은 여기에서 참고하면 될듯 하다. 타입스크립트는 잘 모르지만, 기본적인 뼈대는 아래와 같았다.

import {Editor} from 'obsidian';

export default class MyPlugin extends Plugin {

    onload() { // 오버라이딩 할 메서드
        // 주요 기능 구현
    }

    //...
}

자체적인 API가 잘 개발되어있어서 간단한 기능이라면 구현하기 수월했었던 것 같다.

그리고 필수는 아니지만, Hot-Reload라는 커뮤니티 플러그인을 설치하면 좋다. 원래는 소스코드가 수정될 때 마다 옵시디언을 재시작해주어야 하는데, 해당 플러그인을 설치하게 되면 코드의 변화를 인식하고 알아서 옵시디언이 재시작 되고 변화된 코드 내용을 바로 확인할 수 있다.

Step 5 배포 방법

커뮤니티 플러그인에 배포하는 방법은 아직 시도하지 않아서 잘 모르겠고, 위의 Hot-Reload 플러그인이 그러하듯이 사용자가 직접 설치하게끔 하여 배포하는 방법도 있다. 사용자가 필요한 것은 main.js, manifest.json 두 개 뿐이기 때문에, 설치도 간단한 것 같다.

참고

https://docs.obsidian.md/Reference/TypeScript+API/Editor

Editor - Developer Documentation

https://www.youtube.com/watch?v=AgXa03ZxJ88

도움이 많이 되었던 영상