혹시 여러분도 저처럼 옵시디안으로 노트를 관리하다가, 딱 원하는 기능이 없어서 아쉬웠던 경험 있으신가요? 검색해도 없고, 비슷한 플러그인은 뭔가 2% 부족하고... 그럴 때 '내가 직접 만들면 얼마나 좋을까?' 이런 생각 해보셨다면, 솔직히 이 글은 바로 여러분을 위한 글입니다! 😊 처음엔 코딩 지식이 필요할까 봐 막막하게 느껴질 수 있지만, 차근차근 따라오다 보면 생각보다 어렵지 않다는 걸 알게 되실 거예요. 나만의 워크플로우에 완벽하게 딱 맞는 플러그인을 직접 만드는 재미, 지금부터 함께 시작해봐요!
왜 나만의 옵시디안 플러그인을 만들어야 할까요? 🤔
커뮤니티 플러그인만 해도 엄청나게 많지만, 그럼에도 불구하고 직접 플러그인을 만드는 데는 분명한 이유가 있어요. 가장 큰 이유는 바로 '나만의 필요'를 충족시킬 수 있다는 거죠.
- 맞춤형 기능 구현: 다른 사람에게는 필요 없을 수 있지만, 나에게는 꼭 필요한 아주 세세한 기능까지 구현할 수 있어요.
- 워크플로우 개선: 반복적인 작업을 자동화하거나, 노트 작성 및 관리 방식을 혁신적으로 개선할 수 있습니다.
- 학습 및 성장: 자바스크립트(TypeScript)와 옵시디안 API를 다루면서 개발 실력을 키울 수 있는 좋은 기회가 됩니다.
- 커뮤니티 기여: 내가 만든 플러그인을 다른 사람들과 공유하며 옵시디안 생태계에 기여하는 보람도 느낄 수 있죠!
물론 처음부터 거창한 플러그인을 만들 필요는 없어요. 작은 아이디어부터 시작해서 기능을 하나씩 추가해나가면 됩니다. 중요한 건 '내 손으로 직접 만든다'는 즐거움과 가능성을 경험하는 거예요.
시작하기 전에, 이것부터 준비해요! 🛠️
옵시디안 플러그인 개발은 웹 기술(JavaScript, TypeScript)을 기반으로 해요. 기본적인 프로그래밍 지식이 있다면 훨씬 수월하겠지만, 처음이라도 겁먹을 필요는 없습니다! 필요한 도구들을 먼저 설치해볼게요.
옵시디안 플러그인은 TypeScript로 개발하는 것이 권장됩니다. 자바스크립트의 확장이라 문법이 아주 다르진 않으니 너무 걱정 마세요!
필수 준비물
- Node.js 및 npm (또는 Yarn): 자바스크립트 런타임이자 패키지 관리 도구입니다. Node.js 공식 홈페이지에서 설치할 수 있어요. 설치 시 npm도 함께 설치됩니다. (Yarn을 선호하면 별도 설치)
- 코드 에디터: 저는 VS Code를 추천드려요. TypeScript 개발에 아주 용이합니다.
- Git 및 GitHub 계정 (선택 사항): 소스 코드 관리에 필수적이며, 옵시디안 샘플 플러그인 템플릿을 가져올 때 유용해요.
- 옵시디안 볼트: 플러그인을 개발하고 테스트할 볼트가 필요합니다.
이 도구들이 준비되었다면, 개발 환경 설정의 절반은 끝난 거예요! 이제 본격적으로 플러그인 개발의 세계로 들어가 볼까요?
옵시디안 플러그인 구조 이해하기 🧩
플러그인을 만들기 전에 기본적인 구조를 알아두는 게 좋아요. 옵시디안 플러그인은 몇 가지 핵심 파일과 개념으로 이루어져 있거든요.
핵심 파일 및 개념
- `manifest.json`: 플러그인의 이름, ID, 버전, 최소 옵시디안 버전 등 기본적인 정보를 담고 있는 파일이에요. 옵시디안이 플러그인을 인식하는 데 사용됩니다.
- `main.ts` (또는 `main.js`): 플러그인의 메인 코드가 들어가는 파일입니다. `Plugin` 클래스를 확장하여 옵시디안 API와 상호작용하는 로직을 작성해요.
- `styles.css` (선택 사항): 플러그인이 사용할 커스텀 CSS 스타일을 정의하는 파일입니다.
- Obsidian API: 옵시디안이 플러그인 개발자에게 제공하는 기능들의 모음입니다. 노트 생성, 읽기, 쓰기, 명령 팔레트 등록 등 다양한 기능을 이 API를 통해 사용할 수 있어요.
가장 좋은 시작 방법은 옵시디안 팀에서 제공하는 샘플 플러그인 템플릿을 활용하는 거예요. 이걸 기반으로 나만의 코드를 추가하는 거죠.
'Hello World' 플러그인 만들어보기 👋
이제 직접 간단한 플러그인을 만들어볼까요? 목표는 옵시디안 명령 팔레트에 'Hello World' 명령을 추가하고 실행하면 간단한 메시지를 보여주는 거예요.
단계별 가이드
- 샘플 플러그인 템플릿 복제:GitHub에서 옵시디안 샘플 플러그인 저장소를 Fork 하거나 코드를 다운로드받아 옵시디안 볼트의 `.obsidian/plugins/` 폴더 안에 복사합니다. 폴더 이름은 플러그인 ID로 사용할 이름 (예: `my-hello-world-plugin`)으로 변경해주세요.
- 개발 환경 설정:명령 프롬프트나 터미널을 열고 해당 플러그인 폴더로 이동한 후, 필요한 라이브러리를 설치합니다.개발 중 코드 변경사항이 자동으로 컴파일되도록 개발 모드를 실행합니다.
npm run devnpm install- `manifest.json` 수정:플러그인 폴더의 `manifest.json` 파일을 열고 `id`, `name`, `description`, `author` 등을 원하는 대로 수정합니다. `id`는 폴더 이름과 일치해야 로컬 개발 시 문제가 없습니다.
{ "id": "my-hello-world-plugin", "name": "My Hello World Plugin", "version": "1.0.0", "minAppVersion": "0.12.0", "description": "제가 처음 만드는 Hello World 플러그인입니다!", "author": "루이스파파", "authorUrl": "여러분의 웹사이트 주소", "isDesktopOnly": false }- `main.ts` 코드 작성:`main.ts` 파일을 열고 `Plugin` 클래스 안에 명령 팔레트 등록 코드를 추가합니다.위 코드에서 `addCommand` 부분이 명령 팔레트에 새로운 명령을 추가하는 부분이에요. `id`는 플러그인 내에서 고유해야 하고, `name`은 명령 팔레트에 표시될 이름입니다. `callback` 함수 안에 명령 실행 시 수행할 동작을 작성하면 됩니다. 여기서는 간단하게 `Notice` 메시지를 띄우도록 했어요.
import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian'; // Plugin의 메인 클래스 export default class MyPlugin extends Plugin { // 옵시디안 로딩 시 실행 async onload() { console.log('Hello world 플러그인 로딩!'); // 명령 팔레트에 명령 추가 this.addCommand({ id: 'open-sample-modal-complex', // 명령 ID (고유해야 함) name: 'Show Hello World Notice (Complex)', // 명령 이름 callback: () => { // 명령 실행 시 동작할 코드 new Notice('Hello, World!'); // 화면 하단에 메시지 표시 } }); } // 옵시디안 언로딩 시 실행 onunload() { console.log('Hello world 플러그인 언로딩'); } }- 옵시디안에서 플러그인 활성화:옵시디안을 열고 '설정' → '서드파티 플러그인'으로 이동합니다. '제한 모드'가 켜져 있다면 꺼주세요. '설치된 플러그인' 목록에서 새로고침 버튼을 누르면 방금 만든 'My Hello World Plugin'이 보일 거예요. 오른쪽에 토글 버튼을 켜서 활성화합니다.
- 플러그인 테스트:Ctrl + P (또는 Cmd + P)를 눌러 명령 팔레트를 열고 'Hello World'라고 검색해보세요. 'Show Hello World Notice (Complex)' 명령이 나타나면 성공입니다! 해당 명령을 실행하면 화면 하단에 "Hello, World!" 메시지가 나타날 거예요.
어때요? 생각보다 간단하죠? 이제 이 기본적인 구조를 바탕으로 여러분이 만들고 싶은 기능을 하나씩 붙여나가면 됩니다. 옵시디안 API 문서를 참고하면서 어떤 기능들을 구현할 수 있는지 살펴보는 것도 좋아요.
다음 단계는 무엇일까요? 🚀
'Hello World' 플러그인 만들기에 성공하셨다면, 이제 더 나아가 볼 차례입니다! 몇 가지 아이디어를 드려볼게요.
- 간단한 텍스트 조작: 현재 노트의 선택된 텍스트를 특정 기호로 감싸거나, 대소문자를 변경하는 기능 등을 만들어보세요. `Editor` 객체를 활용하면 됩니다.
- 새로운 노트 생성: 특정 템플릿을 사용하거나, 현재 노트의 정보를 바탕으로 새로운 노트를 생성하는 플러그인도 유용하겠죠? `app.vault` 객체를 살펴보세요.
- 설정 탭 추가: 플러그인 설정을 변경할 수 있도록 설정 탭을 추가하는 방법을 익혀보세요. `PluginSettingTab` 클래스를 확장하여 구현합니다.
- 리본 아이콘 추가: 자주 사용하는 기능은 리본 메뉴에 아이콘으로 추가하면 편리하겠죠? `addRibbonIcon` 메서드를 사용해보세요.
플러그인 코드를 수정한 후에는 `npm run dev`가 실행 중인지 확인하고, 옵시디안에서 플러그인을 비활성화했다가 다시 활성화하거나, 옵시디안을 재시작해야 변경사항이 반영될 때가 있습니다.
옵시디안 API 문서는 여기서 확인할 수 있어요. 모든 기능을 다 이해하려 하기보다는, 만들고 싶은 기능과 관련된 부분부터 찾아보는 것을 추천합니다. 그리고 막히는 부분이 있다면 옵시디안 개발자 커뮤니티의 도움을 받는 것도 아주 좋은 방법이에요!
마무리: 나만의 옵시디안을 만들어요 📝
지금까지 옵시디안 나만의 플러그인 개발을 위한 기본적인 내용들을 살펴봤어요. 다시 한번 핵심 내용을 정리해볼까요?
- 플러그인은 옵시디안을 나에게 맞추는 최고의 방법이에요. 커뮤니티 플러그인으로 부족하다면 직접 만들어보세요!
- 개발을 위해 Node.js와 코드 에디터(VS Code 추천)를 준비해야 해요. TypeScript가 권장되지만 너무 어렵게 생각하지 마세요.
- `manifest.json`과 `main.ts`, 그리고 Obsidian API가 핵심 요소예요. 샘플 플러그인 템플릿부터 시작하는 게 좋습니다.
- 간단한 'Hello World' 명령 추가부터 시작해보세요. 명령 팔레트, Notice 메시지 등 기본적인 API 사용법을 익힙니다.
- 텍스트 조작, 노트 생성, 설정 탭 추가 등 다양한 기능을 상상하고 구현해보세요. 옵시디안 API 문서와 커뮤니티가 여러분의 친구입니다!
자주 묻는 질문 ❓
나만의 옵시디안 플러그인 만들기는 생각보다 훨씬 더 재미있고 유용한 경험이 될 거예요. 이 글이 여러분의 첫걸음에 도움이 되었으면 좋겠습니다! 😊
'개발 언어 > Etc.' 카테고리의 다른 글
| 웹 어셈블리를 사용하여 Elixir에서 Go 코드 실행 (3) | 2025.05.27 |
|---|---|
| 데이터 분석을 위한 새로운 기술: Pandas와 SQL을 사용하여 복잡한 데이터를 쉽게 처리 (4) | 2025.05.25 |
| Figma의 가장 큰 업데이트 - Figma Config 2025 (5) | 2025.05.13 |
| 딸기처럼 달콤한 AI 브라우저의 등장, 시간을 절약하고 당신의 생각을 확장하세요! (2) | 2025.05.11 |
| 네트워크 프로토콜 소개 (3) | 2025.05.05 |
