Windows Markdown Viewer 개발기 (WPF + .NET 8 + WebView2)
2026년 10월 24일 업데이트 — PDF 저장과 현재 기능 범위
현재 로컬 MarkDownViewer에는 탐색·편집·미리보기 외에 PDF 저장 기능도 있다. 선택한 문서의 미리보기를 상단 PDF 버튼으로 저장하며 WebView2가 준비된 뒤 출력하도록 처리한다. WPF·Markdig·WebView2를 사용하는 기본 구조는 기존 글과 같다.
외부에서 파일이 바뀌었을 때의 다시 읽기 안내와 저장 충돌 확인, 여러 문서를 여는 탭, 상대 경로를 해석하는 미리보기는 현재 문서에도 남아 있다. 따라서 기존 기능 설명을 모두 새 기능처럼 다시 쓰기보다 추가된 PDF 저장과 현재 범위를 덧붙였다.
아래의 ‘개선 예정’은 이 글을 처음 작성할 때 적은 구상이다. Git 연동이나 플러그인 구조 같은 항목을 현재 제공되는 기능으로 안내하지 않는다. 이번 확인은 로컬 README와 PDF 출력 코드를 대조한 것이며 실제 Windows에서 PDF 파일을 새로 저장해 본 검증은 아니다.
아래 이미지는 기존 글에 있던 이미지다. 새 Windows 화면은 아직 확보하지 못했으므로 현재 버전 캡처로 바꾸어 설명하지 않는다. 최신 이미지가 준비되면 교체할 수 있도록 현재 기능과 이전 개발 기록을 구분해 둔다.
이전 개발 기록
아래는 최초 작성 당시의 개발 기록이다. 현재 기능과 화면은 위 업데이트 내용을 우선한다.
로컬 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 툴을 만들 때 꽤 강력한 선택지였습니다.
댓글 0
댓글 남기기