[#756] Markdown 렌더러를 로컬 WKWebView 기반으로 교체한다

[opficdev]

🔗 연관된 이슈

• closed Markdown 렌더러를 로컬 WKWebView 기반으로 교체한다 #756

🎯 의도

• MarkdownUI의 확장성 한계를 해소하고 GFM, 각주, 코드 구문 강조, Todo 참조 문법을 지원하는 앱 내장 렌더러로 전환
• 원격 서버나 CDN 없이 앱 번들 내부 자원만 사용하는 렌더링 경로 구성
• 각주 이동과 문서 스크롤을 동일한 WKWebView 문맥에서 처리하는 일관된 스크롤 동작 확보
• Todo 참조 문법의 다양한 기존 표기를 파싱 전에 정규화하여 AST 변환 경로 단순화

📝 작업 내용

📌 요약

• TypeScript 기반 Markdown renderer와 앱 번들 자원 구성
• MarkdownRendererView와 Swift-JavaScript bridge 추가
• Todo 미리보기와 상세 화면의 Markdown 렌더링 경로를 WKWebView로 전환
• 각주 이동 및 강조와 코드 블록 구문 강조 지원
• 외부 링크와 Todo 참조 링크의 분리 처리
• Todo 참조 문법을 파싱 전에 표준 형태로 정규화하는 TodoReferenceNormalizer 추가
• MarkdownUI 의존성 제거
• renderer 산출물 일치 여부를 검증하는 CI 구성

🔍 상세

Markdown renderer 구성

• remark-gfm, rehype-sanitize, rehype-highlight, github-markdown-css 기반 렌더링 구성
• 앱 번들 내부의 index.html, renderer.css, renderer.js를 사용하는 오프라인 렌더링 구성
• 사용자 입력 HTML 정제와 CSP 적용
• 화면 모드와 Dynamic Type 크기를 반영하는 표시 정책 구성
• 들여쓰기, 목록 기호 뒤의 넓은 공백, 앞자리 0이 포함된 Todo 참조를 - refs #번호 형태로 정규화
• fenced code 내부의 Todo 참조 문법을 정규화 대상에서 제외
• todoReferencePlugin이 정규화된 목록 항목만 변환하도록 AST 예외 처리 제거
• 생성된 renderer.js를 저장소에서 추적하고 원본과 산출물의 일치 여부를 검증하도록 구성

WKWebView 통신과 사용자 동작

• MarkdownRendererView와 WKScriptMessageHandler 기반 통신 경로 추가
• 정규화된 - refs #번호 문법을 Todo 참조 링크로 변환하는 처리 추가
• Todo 참조 선택 시 해당 Todo 화면으로 이동하는 callback 연결
• http, https, mailto 외부 링크 처리와 허용하지 않은 URL 차단
• 각주 선택 시 대상 각주로 이동하고 선택 영역을 강조하는 처리 추가
• 각주 이동과 문서 스크롤의 일관성을 위해 WKWebView가 스크롤을 담당하도록 전환
• iOS 26 탭바 가림 영역을 반영하는 하단 여백 처리

의존성과 화면 구성 정리

• Todo 상세 및 편집 화면의 MarkdownUI 사용 경로를 MarkdownRendererView로 교체
• MarkdownUI 패키지와 관련 설정 제거
• 화면에서 공통으로 사용할 수 있도록 탭바 높이 계산 로직 분리

검증 구성

• Markdown 변환과 Todo 참조 문법을 확인하는 TypeScript 테스트 추가
• 들여쓰기, 넓은 공백, 앞자리 0, fenced code 경계를 확인하는 정규화 회귀 테스트 추가
• JavaScript 메시지와 URL 허용 정책을 확인하는 Swift 테스트 추가
• CI에서 Node.js 및 npm 버전 확인, renderer 테스트, 빌드, 산출물 차이 검증을 수행하도록 구성

메모리 사용량 비교

기존 MarkdownUI	WKWebView

📸 영상 / 이미지 (Optional)

ScreenRecording_07-25-2026.12-26-45_1.MP4

flowchart TB
    subgraph S1["1. 렌더링 입력"]
        direction LR
        A["RenderPayload"] --> B["window.renderMarkdown"]
        B --> C["문서 표시값<br/>lang · colorScheme · fontSize"]
        B --> D["Markdown · references"]
    end

    subgraph S2["2. Markdown 처리"]
        direction LR
        D --> E["fenced code 범위 분석"]
        E --> F["Todo 참조 문법 정규화"]
        F --> G["Markdown AST<br/>remark-parse + remark-gfm"]
        G --> H["Todo 참조 AST 변환"]
        H --> I["HTML AST<br/>remark-rehype"]
    end

    subgraph S3["3. HTML 렌더링"]
        direction LR
        I --> J["구문 강조"]
        J --> K["HTML 정제"]
        K --> L["HTML 문자열 생성"]
        L --> M["root.innerHTML 반영"]
        M --> N["WKWebView document"]
        C --> N
        O["renderer.css"] --> N
    end

Loading

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8ba8a5e73c

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 39aa8a8027

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 49e7daf1e7

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".