로컬 Markdown 파일을 보다 효율적으로 다루기 위해
탐색 + 편집 + 미리보기 + 검색을 하나로 통합한 Windows 전용 뷰어를 개발했습니다.
## 1. 프로젝트 개요기존 Markdown 툴들은 다음과 같은 불편함이 있었습니다
– 파일 탐색 기능이 약함
– 로컬 기반 작업 흐름이 끊김
– 여러 파일을 동시에 관리하기 번거로움이를 해결하기 위해 다음 목표로 개발했습니다
– 로컬 파일 중심 워크플로우
– IDE 스타일 멀티 탭 구조
– 편집 + 미리보기 동시 작업
– 외부 변경 대응
## 2. 기술 스택
Framework : .NET 8
UI : WPF
Renderer : Markdig
Preview : WebView2
Output : WinExe
선택 이유
- WPF: Windows 네이티브 UX + 빠른 개발
- Markdig: 확장성 높은 Markdown 파서
- WebView2: HTML 렌더링 + JS 확장 가능
3. 전체 구조
[Explorer] ────────────────┐
│
▼
[Tab Manager]
│
┌───────────┬────────────┐
▼ ▼ ▼
[Editor] [Preview] [Search]
4. 파일 탐색기 (Explorer)
핵심 기능
- 드라이브 루트부터 탐색
- 폴더 트리 구조
.md파일만 필터링- 더블클릭 시 파일 오픈
특징
- 마지막 탐색 위치 자동 복원
- Markdown 전용 UX (노이즈 최소화)
5. 탭 시스템 (Multi-Tab)
구현 포인트
- 열린 파일을 Dictionary로 관리
- 이미 열린 파일은 재사용
Dictionary<string, TabItem> openTabs;
동작
- 중복 탭 생성 방지
- 탭 닫기 (
x) - 이전 탭 자동 포커스
- 탭 overflow 시 스크롤
6. Markdown 편집기
기본 기능
- 일반 텍스트 편집
Ctrl + S저장
충돌 처리
- 외부 변경 감지
- 저장 시 overwrite 경고
파일 열기 방식
FileShare.ReadWrite
다른 프로그램과 동시에 접근 가능하도록 설계
7. 미리보기 구조
파이프라인
Markdown → Markdig → HTML → WebView2
코드 흐름
var html = Markdown.ToHtml(markdownText);
webView.NavigateToString(html);
주요 기능
- 실시간 렌더링
- 상대 경로 링크 처리
.md링크 클릭 → 앱 내부 열기- 외부 링크 → 브라우저 실행
8. 검색 기능
단축키
Ctrl + F: 검색 패널 토글F3: 다음 검색Shift + F3: 이전 검색
특징
- 편집기 기준 위치 이동
- 미리보기 상태에서도 검색 유지
9. 상태 저장 (Persistence)
앱 종료 시 다음 상태 저장:
- 탐색기 표시 여부
- 탐색기 너비
- 편집/미리보기 비율
- 마지막 파일 경로
구현 포인트
AppSessionStateService
UX 유지에 핵심 역할
10. 외부 변경 감지
처리 흐름
- 파일 변경 이벤트 감지
- 사용자에게 재로드 여부 확인
- 선택에 따라 반영
예외 처리
- 저장 직후 이벤트는 무시
- unsaved 상태일 경우 경고 표시
11. 테마 처리
- Windows 시스템 테마 자동 반영
- 앱 UI + WebView2 HTML 동기화
Light / Dark Mode 자동 전환
12. 빌드
dotnet build .\MarkDownViewer\MarkDownViewer\MarkDownViewer.csproj -c Release
13. 런타임 요구사항
- WebView2 Runtime 필수
14. 주요 코드 구성
MainWindow.xaml
MainWindow.xaml.cs
MarkdownHtmlRenderer.cs
MarkdownDocumentItem.cs
ExplorerItem.cs
AppSessionStateService.cs
15. 설계 포인트 요약
✔ 실용성 중심 설계
- Markdown만 집중 처리
- 불필요한 기능 배제
✔ 충돌 안전성
- 외부 변경 대응
- 파일 공유 접근
✔ 확장 가능 구조
- WebView2 기반 → JS 확장 가능
- Renderer 분리 → 교체 가능
16. 개선 예정
- 스크롤 동기화 (Editor ↔ Preview)
- 코드 하이라이트 강화
- 이미지 Drag & Drop
- Git 연동
- 플러그인 구조
마무리
이 프로젝트는 단순 뷰어가 아니라
Markdown 기반 로컬 작업 환경을 최적화하기 위한 도구입니다.
WPF + WebView2 + Markdig 조합은
Windows 환경에서 Markdown 툴을 만들 때 꽤 강력한 선택지였습니다.