서론

이전에 AI 에이전트의 빈번한 업데이트를 견딜 수 있는 Markdown 프리뷰 VSCode 확장 프로그램인 "AI Safe Markdown Preview"를 만들었다는 글을 쓴 적이 있습니다.

이번에 v0.4.0에서 프리뷰에 줌 인·줌 아웃 (Zoom In/Out) 기능을 추가하여 소개합니다.

추가된 기능: 프리뷰 줌

프리뷰의 글자 크기를 50%~300% 범위 내에서 확대·축소할 수 있게 되었습니다.

• 큰 모니터에서 작게 보이는 글자를 확대하여 읽기 쉽게 만든다.
• 전체 구성을 조감하고 싶을 때 축소한다.

와 같은 방식으로 사용할 수 있습니다.

조작 방법

줌은 세 가지 방법으로 조작할 수 있습니다.

조작	방법
줌 인 (Zoom In)	프리뷰 상단의 ＋ 버튼 / Ctrl (Mac은 Cmd) + 휠 위로
...

줌 레벨은 10% 단위로 변화하며, 현재 줌 비율은 상단 바에 항상 표시됩니다. 또한, 프리뷰 패널을 다시 열면 매번 100%로 리셋됩니다.

구현 포인트: font-size 스케일링 (scaling)

줌 구현 방법으로는 뷰포트 (Viewport) 전체를 확대·축소하는 방법도 생각할 수 있지만, 그렇게 하면 테이블(Table)이나 Mermaid 다이어그램의 레이아웃이 깨지기 쉽습니다.

그래서 이 확장 프로그램에서는 콘텐츠의 font-size를 CSS 커스텀 프로퍼티 (--zoom)로 스케일링하는 방식을 채택했습니다.

#content { font-size: var(--zoom, 100%); }

font-size를 기준으로 함으로써, 텍스트 줄 바꿈·테이블·Mermaid 다이어그램이 비율을 유지한 채 확대·축소되어 레이아웃이 깨지지 않습니다.

JavaScript 측 처리

줌 로직은 Webview 내의 JavaScript로 완결됩니다. VSCode의 커맨드나 키 바인딩 (Keybinding)은 사용하지 않고, Webview 내의 버튼 클릭과 휠 이벤트 (Wheel Event)만으로 동작합니다.

var ZOOM_MIN = 50;
var ZOOM_MAX = 300;
var ZOOM_STEP = 10;
...

changeZoom()에서 Math.min / Math.max를 사용하여, 줌 레벨이 50%~300% 범위를 벗어나지 않도록 제어하고 있습니다.

Ctrl / Cmd + 휠에 대해서는, wheel 이벤트에서 수식 키 (Modifier Key)가 눌려 있을 때만 기본 동작을 억제하고 줌에 할당하고 있습니다.

window.addEventListener('wheel', function(event) {
if (!event.ctrlKey && !event.metaKey) { return; }
event.preventDefault();
...

수식 키가 눌려 있지 않을 때는 조기 리턴 (Early Return) 하므로, 일반적인 스크롤에는 영향을 주지 않습니다.

요약

AI Safe Markdown Preview에 프리뷰 줌 인·줌 아웃 기능을 추가했습니다.

• 버튼 / Ctrl ・ Cmd + 휠로 조작.
• 50%~300%를 10% 단위로 조정, 퍼센트 표시 클릭 시 100%로 리셋.
• font-size 스케일링을 통해 테이블이나 Mermaid의 레이아웃을 깨뜨리지 않음.

VS Code Marketplace에서 설치할 수 있습니다.

Claude Code와 같은 AI 에이전트와 Markdown을 사용할 기회가 많은 분은 꼭 한번 사용해 보세요.

Discussion