ThorVG Viewer In VS Code

ThorVG Viewer를 VS Code Webview 확장으로 포팅한 사례를 소개합니다.

Transcript

1. In VS Code ThorVG Viewer nors.nsg@gmail.com SoonGeon Noh 2025.12.23 @Nor-s
2. 2. ThorVG Viewer 확장 개발 3. 마치며 1. ThorVG Viewer 확장 개발 배경
3. 1. ThorVG Viewer 확장 개발 배경
4. ThorVG Viewer 확장 개발 배경 Lottie 의 Expressions 스펙 출처: adobe.com 출처: lottiefiles
5. ThorVG Viewer 확장 개발 배경 동작 표현 자동화 복잡한 애니메이션 단순화 재사용 가능 그래프,차트 등 동적 표현 출처: adobe.com
6. ThorVG Viewer 확장 개발 배경 “모션을 풍부하게 해주는 표현식” 출처: lottiefiles
7. ThorVG Viewer 확장 개발 배경 표현식이 ThorVG 엔진에서 돌아가는 방식을 알고 싶다 -> 관련 이슈를 분석하면서 이해해보자
8. ThorVG Viewer 확장 개발 배경 하지만, 쉽지 않았다
9. ThorVG Viewer 확장 개발 배경 표현식을 수정하면서, 결과를 즉각적으로 볼 수 있으면 엔진 분석을 더 재미있고, 편하게 할 수 있지 않을까?
10. ThorVG Viewer 확장 개발 배경 ThorVG 엔진을 사용하는 뷰어 표현식 수정이 가능해야 함 엔진 교체가 쉬워야 함 실행이 간편해야함
11. ThorVG Viewer 확장 개발 배경 “thorvg.viewer를 VS Code 확장으로 만들어보자” Preview extension
12. ThorVG Viewer 확장 개발 배경 • ThorVG 엔진을 사용하는 뷰어 • 표현식 수정이 가능해야 함 • 엔진 교체가 쉬워야 함 • 실행이 간편해야 함 • thorvg.viewer • VS Code Editor • WebAssembly • VS Code Extension
13. 2. ThorVG Viewer 확장 개발 2.1 VS Code 확장 개발 환경 설정 2.2 기능 추가하기 2.3 웹뷰 API 2.4 웹뷰 패널 생성 2.5 웹뷰 <-> 확장 통신
14. AI 와 함께하는 VS Code 확장 개발 기획 (Plan) 요청 검증 반영 1) 기획 및 요청 • VS Code 확장 개발에 대한 Plan • 기존 웹앱을 VS Code 확장으로 포팅, 파일 업데이트시 자 동 업데이트 등 기능 요청 2) 프롬프트 결과 검증 • 리뷰, 실행 -> 동작 여부 확인 • 디버깅 또는 재요청 3) 반영 • 변경 사항 커밋
15. 2.1 VS Code 확장 개발 환경 설정
16. VS Code 확장 개발 환경 설정 npx --package yo --package generator-code -- yo code 출처: vscode
17. 확장 이름, Typescript/Javascript, Bundler, Package Manager 설정 VS Code 확장 개발 환경 설정
18. 자동으로 구성된 프로젝트 - .vscode, package.json, src/extension.ts VS Code 확장 개발 환경 설정
19. 2.2 기능 추가하기
20. 기능 추가하기: Command Command - Contribution Point: Command 선언 - VS Code API: Command 에 함수 바인딩 출처: vscode
21. 기능 추가하기: package.json package.json 에 Command 선언
22. 기능 추가하기: extension.ts Entrypoint 인 extension.ts 의 activate 에서 VS Code API registerCommand 사용 package.json 에 선언한 Command 실행시 호출될 함수 정의
23. 기능 추가 결과 디버깅시, Ctrl + Shift + P 명령어 팔레트에서 Command 추가된 것을 확인 가능
24. VS Code API? VS Code API 는 vscode.d.ts에 정의되어 있음 출처: vscode
25. VS Code API? vscode.d.ts 에 정의된 VS Code API를 사용하여 확장 기능 구현 출처: youtube
26. 2.3 웹뷰 API
27. Webview API Iframe 태그로 구성되는 Webview 대부분의 HTML 를 렌더할 수 있음 출처: vscode
28. Webview API: 일렉트론 출처: wikipedia
29. Webview API: iframe 태그
30. Webview API: iframe 태그
31. 2.4 웹뷰 패널 생성
32. VSCode API: vscode.window.createWebviewPanel createWebviewPanel: WebviewPanel 을 반환 출처: vscode
33. WebviewPanel 중요한 것은, WebviewPanel 의 webview.html
34. webview.html 웹뷰 html 을 렌더링 하기 위해서는 Resource 경로 asWebviewUri 사용 Resource 경로 WebviewOptions 에 지정 다른 프로세스로부터 격리된 샌드박스화된 환경에서 실행되기 때문 출처: vscode
35. asWebviewUri Webview 는 로컬 파일 시스템에 직접 접근이 불가 변환: local file system -> vscode uri 출처: vscode
36. extension.ts 에 Command 에 등록된 createOrShow Command에 의해 호출되어지는 ThorVGViewerPanel.createOrShow
37. 웹뷰 패널 생성 ID Title Option localResourceRoots
38. 웹뷰 HTML thorvg.viewer 를 webview.html 에 어떻게 전달하면 좋을까?
39. 웹뷰 HTML 설정 Draw.io 를 VS Code 웹뷰로 실행하는 Draw.io Integration 확장
40. 웹뷰 HTML 설정 <base> 태그를 사용하여, 한번의 asWebviewUri 으로 기존의 index.html 사용 출처: github
41. 웹뷰 HTML 설정 Html 을 string으로 가져온 후 <base> 태그를 삽입 Content-Security-Policy(CSP) 웹뷰가 로드할 수 있는 콘텐츠 출처 제한
42. 결과 Viewer UPLOAD 기능을 통해 Lottie 파일을 가져오고, 렌더링 가능
43. 추가하고 싶은 기능 Markdown preview 처럼 VS Code 에서 현재 열린 Lottie 파일 오픈, 렌더링
44. 2.4 웹뷰<-> 확장 통신
45. VS Code 내부 구조 확장 프로그램과 웹뷰는 서로 직접적인 함수 호출이나 변수 공유 불가 오직, 비동기 메시지 교환을 통해서만 가능 출처: vscode
46. postMessage, onDidReceiveMessage VS Code -> Extension: • vscode.window.onDidChangeActiveTextEditor • vscode.workspace.onDidChangeTextDocument • 리스너를 통해, 파일 관련 변경 처리 Extension -> Webview: • 확장에서 webview.postMessage 사용, 데이터를 JSON 직렬화 형태로 보냄 • 웹뷰에서 window.addEventListener 를 통해 메시지 처리 Webview -> Extension: • 웹뷰에서 acquireVsCodeApi 함수 호출하여, API 객체 얻은 뒤, postMessage 로 데이터 보냄 • 확장에서 panel.webview.onDidReceiveMessage 를 통해 메시지 처리
47. 전체 통신 흐름
48. Webview 생명 주기, 상태 관리 생명 주기 • 웹뷰 패널이 사용자에 의해 닫히거나, dispose() 가 호출되면, 웹뷰는 파괴 • 백그라운드 탭 -> iframe 은 파괴, 포커스 -> webview.html 다시 생성 상태 저장 • setState(), getState(), WebviewPanelSerializer 구현 -> 재시작시 상태 복원, • retainContextWhenHidden -> 다른 패널에 가린 경우에도, 메모리 유지
49. 통신 작업 결과1 현재 포커싱된 Lottie 파일을 뷰어에서 바로 렌더링
50. 통신 작업 결과2 Lottie 파일 수정시 뷰어 업데이트
51. 3. 마치며
52. 마치며 생산성 도구로서의 AI • 새로운 개발 환경을 접할 때 빠른 이해와 구현에 큰 도움을 줌 • 아직까지는 AI가 생성한 코드가 유지보수에 최적이라고 보기는 어려움 AI × VS Code 확장 • AI를 활용해 개발을 직접 돕는 생산성 툴을 만드는 접근이 효과적 • 특히 기존 웹 기반 툴을 VS Code 확장으로 만드는 것은 실용적 • 개발 중 별도의 툴을 실행할 필요 없이, 익숙한 개발 환경 안에서 바로 사용 가능 Webview 확장의 장점 • 기존 웹앱 또는 WASM 코드만 업데이트해도 확장 기능에 바로 반영 가능 • 유지보수 부담은 낮추고, 개발 효율은 높일 수 있음 AI 가 작성한, 유지보수 하기 어려운 코드 예시 : thorvg.viewer 의 html 을 복사/붙여넣기
53. 마치며 많은 설치 부탁드립니다! 이슈 & 피드백 환영
54. 감사합니다! Soon Geon Noh nors.nsg@gmail.com ThorVG Viewer In Vscode @Nor-s