Studyfetch를 옵시디언에서 구현하기 - Realtime STT 플러그인 제작기

제작배경 :
https://www.gpters.org/research/post/ai-tools-learners-who-0B6YGEvOc33tSoE

Study Fetch가 무료이지만, 매번 들어가서 켜고 끄기가 귀찮아서(...)
.

옵시디언에 플러그인을 만들어야겠다 생각만하고 있다가
CTO&CEO 2월 8일 오프모임에서 댕댕이멍멍님(감사합니다!)의 강의와 대화로
인사이트와 아이디어를 얻고 집에 오자마자 바로 만들었습니다.
.

사용한도구 : Cursor AI (사용모델 : 클로드 소넷, 이미지 첨부), 옵시디언
1. STT 사용한모델 : OpenAI Whisper
2. 플러그인 사용모델 : OpenAI ChatGPT 4o

제작과정

사용목적과 사용방법에 따른 필요한 기능을 정의했습니다.
1. 사용목적 : 강의를 들으면서 동시에 스크립트를 작성하고 스크립트 기반으로, 나중에 모르는 부분의 영상을 찾아볼수 있도록 강의 타임스탬프 필요, 이 정리한 노트로 퀴즈도 만들어 풀고 모르는거 질문도 할 수 있게 활용
2. 사용방법 : 녹음버튼을 누르면 새로운 노트가 자동으로 생성되고 실시간으로 STT작성, STT를 기반으로 노트를 정리, 이때 STT는 녹음시간 기준으로 타임스탬프 함께 작성, 녹음중지 버튼을 누르면 정리된 내용을 기반으로 노트제목 생성, 모르는거 질문은 스마트 컴포져 있으니까 패스.
3. 기타 추가필요기능 구상 :
  1. 노트정리에 적용할 수 있는 템플릿 혹은 프롬프트를 입력할 수 있어야한다.
  2. API를 입력하고 원하는 모델을 선택할 수 있도록한다.
  3. 녹음중지버튼을 누르면 STT내용이 지워진다.

위에 정리한 내용을 o3한테가서 개발 의뢰서로 만들어달라고합니다.
~~(원래는 개발자 스럽게 바꿔줘였음)~~

개발의뢰서

## Obsidian 플러그인 개발 의뢰서

### 1. 프로젝트 개요
- **프로젝트명**: “실시간 STT & 강의 타임스탬프” 플러그인
- **개발목표**:
  1. Obsidian에서 녹음을 진행하면서 실시간 STT(음성 → 텍스트) 작성
  2. 텍스트와 함께 녹음 시점의 타임스탬프를 기록
  3. 녹음 종료 시, 자동으로 노트 제목을 생성
  4. 노트 정리에 활용할 템플릿(프롬프트) 입력 기능
  5. 사용자가 원하는 LLM 모델(OpenAI 등) 선택 가능, API Key 입력 가능
  6. 녹음 종료 시 STT 임시 데이터는 삭제

### 2. 기능 요구사항

1. **녹음 및 STT 처리**
   - **녹음 시작** 버튼 클릭 시:
     - 새로운 Obsidian 노트 자동 생성
     - 마이크 입력을 받아 실시간 STT 수행
     - STT 결과를 노트에 바로 기록
     - 각 문장별 혹은 일정 단위별(문장 단위 권장) 타임스탬프 자동 삽입
     - 이전 구간은 기록 후 확정하고, 새 구간은 별도로 관리 (구현 방식은 자유)
   - **녹음 중지** 버튼 클릭 시:
     - 최종 STT 데이터를 기반으로 노트 제목 자동 생성
     - 임시 STT 데이터(메모리 상)는 모두 삭제
     - 노트에는 최종 확정된 텍스트만 남도록 처리

2. **노트 제목 자동 생성**
   - 녹음 종료 시, STT 결과(키워드, 핵심 문장 등)를 추출하여 노트 제목 생성
   - 필요 시, 요약 알고리즘(LLM) 활용 가능 (사용자가 선택한 모델 사용)

3. **템플릿(프롬프트) 적용**
   - 플러그인 설정 화면에서 “노트 정리에 사용하는 템플릿 또는 프롬프트”를 입력받을 수 있도록 구현
   - 텍스트 요약, 주요 포인트 추출, 질문 리스트 생성 등 다양하게 활용 가능

4. **LLM 모델 및 API Key 설정**
   - 플러그인 설정 메뉴에서 다음을 입력/선택할 수 있도록 제공:
     - OpenAI API Key 등 외부 API Key
     - 사용할 모델(GPT-3.5, GPT-4 등) 선택 옵션
   - STT API 또한 Whisper API 등으로 교체 가능하도록 구조화(확장성)

5. **녹음 중지 시점의 처리**
   - “녹음 종료” 버튼을 누르면:
     - STT 텍스트 추가 중단
     - (필요하다면) 최종 요약 혹은 템플릿 자동 적용
     - 자동 생성된 노트 제목으로 노트 파일명 갱신
     - 임시 STT 데이터 삭제(민감 정보 보호, 메모리 해제)

### 3. 구현 상세

1. **개발 언어 & 환경**  
   - **TypeScript** (Obsidian 플러그인 개발 표준)  
   - Obsidian [Plugin API](https://docs.obsidian.md/) 활용  
   - 녹음 기능은 브라우저/OS 마이크 권한을 획득해 `MediaDevices.getUserMedia` 사용 (데스크톱 Obsidian 환경에서의 호환성 고려)  
   - STT 부분은 Whisper API 등 외부 서비스 연동 (HTTP 요청)

2. **UI/UX**
   - 좌측 혹은 우측 패널에 “STT 녹음” 섹션 제공
   - 버튼 2개: “녹음 시작” / “녹음 중지”
   - 플러그인 설정 페이지:
     - **API Key 입력**: OpenAI, Whisper 등
     - **모델 선택**: 예) GPT-3.5, GPT-4
     - **노트 템플릿/프롬프트**: 다중 줄 입력 가능
     - **기본 옵션**: 1분 단위 분할, 자동 요약 on/off 등(필요시)

3. **토큰/분할 처리 방식**
   - Obsidian 노트에는 실시간으로 append하되, 각 구간 단위로 문단 또는 구역(heading) 구분

4. **노트 제목 자동 생성 로직(예시)**
   1. STT 최종 결과에서 **중요 키워드** 3~5개 추출
   2. 필요한 경우 LLM에 `summarize in one sentence` 프롬프트를 전달하여 요약 문장 생성
   3. 요약 문장 or 키워드를 합쳐 노트 제목으로 지정
   4. 이미 노트가 생성된 상태이므로, Obsidian 파일 이름 변경 API 사용

5. **추가 고려사항**
   - 플랫폼별 오디오 권한 문제(Windows/Mac/Linux) 고려
   - STT 실패 혹은 응답 지연 시 예외 처리 로직
   - 플러그인 UI 다국어 지원(필요 시)
   - 녹음이 길어질 경우 성능(메모리, CPU) 고려

### 4. 개발 산출물

1. **플러그인 코드(주요 파일)**  
   - `main.ts` (entry point)  
   - `settings.ts` (플러그인 설정 UI)  
   - `recorder.ts` (녹음 및 STT 처리 로직)  
   - `titleGenerator.ts` (노트 제목 자동 생성 로직)  
   - 기타 필요한 모듈

2. **README / 문서화**  
   - 설치 및 빌드 방법
   - 사용 방법 (녹음 시작, 중지, 템플릿/모델 설정 등)
   - 주요 기능 소개

3. **테스트 & 예시 노트**  
   - 플러그인 사용 예시(데모 스크린샷, 예제 노트 파일)

이 내용을 md파일로 저장합니다.
커서에서 이 개발의뢰서를 +Add Context하고 "해줘"를 시전합니다.
그러면 만들어줍니다.(진짜임)

결과
1. 마이크 선택 및 녹음버튼
2. 녹음시작 버튼 누르면 나오는 임시문서
3. 실시간으로 작성되는 STT 텍스트 및 내용 정리
4. 녹음중지 시 플러그인 화면에서 텍스트 없어지고 문서에 정리된 내용
5. 플러그인 설정
6. 작성한 노트와 스마트컴포져를 활용해서 이해도 확인

발전사항
1. UI를 좀 더 이쁘게 만들고 싶다는 생각.(지금 스킨이 안이쁜건가..?)
2. 어떻게 하면 있어빌리티를 챙길 수 있을까
3. 다른 플러그인이랑 연계해서 사용할 수 있는 방안
  (Audio Recorder, PDF, 스마트 컴포져, 템플레이터 등등)
4. 강의 판서 캡쳐 & 강의자료 바로바로 넣을 수 있는 방안(백링크?)

끝! 당신도 4시간이면 플러그인 만들수있다.

⏰ AI스터디 15기 슈퍼얼리버드 15% 혜택받기 | ~3/3(월) 23:59

Studyfetch를 옵시디언에서 구현하기 - Realtime STT 플러그인 제작기

👉 이 게시글도 읽어보세요