피드로 돌아가기
Show GN: Marksmith - VS Code/Windsurf용 마크다운 생산성 확장
GeekNewsGeekNews
Frontend

Show GN: Marksmith - VS Code/Windsurf용 마크다운 생산성 확장

Webview 샌드박스 제약을 극복한 마크다운 생산성 최적화 도구 설계

woojinim642026년 5월 23일2intermediate

Context

HTML 콘텐츠 복사 시 발생하는 포맷 깨짐과 외부 변환 도구 의존성으로 인한 워크플로우 단절 발생. 특히 Webview 기반 프리뷰의 전체 리렌더링으로 인한 KaTeX 깜빡임 및 스크롤 튐 현상이 주요 병목 지점으로 작용.

Technical Solution

  • Turndown 엔진에 GFM 표 및 코드블록 룰 오버라이드를 적용하여 HTML to Markdown 변환 정밀도 향상
  • 정규식 기반 파이프라인을 통한 TSV 데이터의 마크다운 테이블 자동 치환 로직 구현
  • 전체 리렌더링 대신 Incremental DOM Patch 방식을 도입하여 렌더링 성능 최적화 및 시각적 노이즈 제거
  • 컴파일 단계에서 HTML 노드에 data-line 속성을 주입하여 에디터-프리뷰 간 양방향 라인 매핑 구조 설계
  • postMessage 기반의 비동기 통신 모델을 구축하여 Webview 샌드박스 환경의 커서 동기화 구현
  • 영문 200wpm 및 한글 500자/분 기준의 읽기 시간 추정 알고리즘을 통한 문서 분석 기능 제공

1. Webview 기반 UI 개발 시 전체 리렌더링 대신 증분 업데이트 방식을 검토했는가

2. 서로 다른 컨텍스트(에디터-프리뷰) 간 동기화를 위한 고유 식별자(data-line 등) 매핑 전략을 수립했는가

3. 외부 데이터 유입 시 정규식 파이프라인을 통해 도구 의존성을 제거하고 내부 로직으로 내재화했는가

원문 읽기