피드로 돌아가기
Notekeeper: a Google Keep wall for your Obsidian vault
Dev.toDev.to
Frontend

External State Management를 통한 Obsidian 파일 무결성 유지 및 UI 최적화

Notekeeper: a Google Keep wall for your Obsidian vault

Philemon Chiro2026년 5월 16일4intermediate

Context

Obsidian의 기본 File Explorer 기반 탐색 구조가 제공하지 못하는 시각적 스캔 환경의 한계 분석. 특히 Note의 메타데이터 변경 시 파일 수정 시간이 갱신되어 Git History에 불필요한 Diff가 발생하는 문제 해결 필요.

Technical Solution

  • 파일 YAML 영역과 분리된 독립 data.json 파일을 통한 Pin, Color, Archive 상태 관리로 File System Write 최소화
  • 기존 Frontmatter 데이터와 외부 JSON 상태 간의 Fallback 메커니즘을 설계하여 하위 호환성 유지
  • Thousands of notes 규모의 Vault에서도 성능 저하를 방지하는 Lazy Infinite Scroll 구현
  • Markdown Rendering, Wikilinks, Embedded Notes를 포함한 고해상도 Preview Modal 시스템 구축
  • 복합 쿼리(Text + Tag + Color + Path) 처리를 위한 Smart Search 필터링 로직 적용
  • 3가지 밀도(Comfortable, Compact, List) 조절이 가능한 Masonry Grid 레이아웃 설계

1. UI 상태 변경이 원본 데이터의 Modified Time에 영향을 주는지 검토

2. 빈번한 상태 변경 데이터는 YAML 대신 별도의 Sidecar 파일이나 외부 State Store에 저장하여 Git Noise 방지

3. 대량의 리스트 렌더링 시 DOM 부하를 줄이기 위한 Lazy Loading 전략 적용

원문 읽기