모던 웹 기술로 C++ 렌더링 엔진 테스트 자동화하기

https://2024.feconf.kr/

Transcript

1. 모던 웹 기술로 C++ 렌더링 엔진 테스트 자동화하기 유진의 from
2. 발표자 소개 유진의 (Jinny You) • LottieFiles , SW 엔지니어 (lottiefiles.com) · Lottie 애니메이션을 위한 차세대 Player 개발 • ThorVG Project 메인테이너 (thorvg.org) · 초경량 벡터 그래픽스 엔진 개발 - https://github.com/tinyjin - https://speakerdeck.com/tinyjin - https://www.linkedin.com/in/jinui
3. 세션에서 다루는 내용 1. Frontend 기술로 어떻게 완벽한 테스트 오토메이션을 만들 수 있을까요? - FE 기술과 테스트 오토메이션, 뭔가 어색한 조합이죠? - 실제 사례를 통해 FE 기술이 테스트 자동화 시스템을 구축하는 전 과정을 살펴보아요 2. React가 네이티브 소프트웨어를 확장한다고? - C++로 개발된 네이티브 소프트웨어를 React로 확장해보아요 - 웹 페이지 개발을 넘어 React를 극한으로 활용하는 사례를 보여드릴게요 3. 결국은 Web 개발의 미래에 대한 이야기 (feat. WASM) - 웹 기술은 이미 브라우저를 벗어나 다양한 곳에서 활약하고 있어요 - 웹 어셈블리를 등에 업고 이제 Web은 네이티브 소프트웨어를 확장하고 있죠
4. 업무 그래픽스 엔진 개발 애니메이션 런타임 개발 웹 포팅 작업
5. 업무 그래픽스 엔진 개발 애니메이션 런타임 개발 웹 포팅 작업
6. 애니메이션 런타임을 만든다는 것 파싱 컴포짓 (합성) 드로잉
7. 벡터 애니메이션 레이어 구성 요소 - Shape - Fills - Strokes - Transforms - Effects - Text - Image …
8. 구성요소가 방대하기 때문에 미지원 스펙 또는 버그로 인한 렌더링 오류가 종종 발생 벡터 애니메이션 구성 요소
9. 주요 피쳐들에 대한 테스팅을 통해 결함을 사전에 발견해보자 애니메이션 렌더링 적합성 테스트의 필요성 벡터 애니메이션 구성 요소
10. 실제 렌더링 결과와 기대하는 출력간의 비교를 통해 이슈를 파악 렌더링 적합성 테스트
11. 기존의 프로세스 다수의 애니메이션을 한 화면에 불러와 “수동 테스트”를 진행
12. 수십만개의 애니메이션을 일일이 눈으로 체크할 수 있을까? 렌더링 적합성 테스트
13. 각 애니메이션 파일을 전체적으로 확인 문제가 있어보이는 파일은 상세보기로 한번 더 체크 렌더링 적합성 테스트
14. 파일을 오픈하여 깨지는 결과가 있는지 렌더링 결과를 일일이 확인 렌더링 적합성 테스트
15. 움직이는 애니메이션은 사람이 정확하게 식별하기가 불가능 렌더링 적합성 테스트
16. 10만개의 애니메이션 10만건의 테스트 셋
17. 사람이 수동으로 테스트하니 1. 매번 테스트 셋을 교체할 때 마다 새롭게 빌드해야하고 2. 프레임 단위로 일일이 체크하기가 어려움 3. 무엇보다 눈이 피로하기에 하루에 확인할 수 있는 양의 제약이 따른다
18. 특정 프레임의 픽셀 검사를 통해 자동으로 렌더링 이슈를 감지할 수 없을까? 렌더링 적합성 테스트
19. 수동 테스트에서 자동화 테스트로
20. “테스트 자동화”시스템을 설계하여 파이프라인을 간소화해보자
21. 테스트 자동화란?
22. 테스트 자동화란? 자동화된 도구나 스크립트를 통해 반복적이고 시간이 많이 소요되는 테스트 작업의 효율성을 높이는 것
23. 효율성 반복 가능 비용절감 일관성 테스트 자동화란?
24. 테스트 자동화란? 효율성 테스트 수행 시간을 감소시키며, 자동화된 테스트는 수동 테스트 대비 더 나은 효율성을 가짐
25. 테스트 자동화란? 반복 가능 반복 가능하므로 여러번 테스트 가능 → 반복적이며 많은 건수를 빠르게 처리
26. 테스트 자동화란? 일관성 같은 테스트 케이스는 동일한 결과를 가짐 → 테스트 결과에 대한 신뢰성이 향상됨
27. 테스트 자동화란? 비용절감 궁극적으로 테스트 자동화는 워크플로우를 단순화하여 시간과 비용을 절약
28. 소프트웨어 개발 라이프 사이클(SDLC)에서 테스팅 작업에 대한 효율성, 정확성 및 속도를 개선하기 위함 테스트 자동화란?
29. 파이프라인 개선
30. 신규 애니메이션 런타임 크로스 플랫폼을 지원하는 C++ 기반 애니메이션 런타임 thorvg.org
31. 애니메이션 입력이 주어질 때 런타임에서 렌더링 → 특정 프레임간의 픽셀 검사를 통해 적합성 판별 파이프라인 개선 98%
32. 문제는 기술선정 파이프라인 개선
33. - 빠른 검증(PoC)이 필요하고 - C++ 보다는 생산성이 좋은 언어가 필요… - 다양한 생태계의 활용이 필요했음 파이프라인 개선
34. - 빠른 검증(PoC)이 필요하고 - C++ 보다는 생산성이 좋은 언어가 필요… - 다양한 생태계의 활용이 필요했음 파이프라인 개선
35. - 빠른 검증(PoC)이 필요하고 - C++ 보다는 생산성이 좋은 언어가 필요… - 다양한 생태계의 활용이 필요했음 파이프라인 개선
36. 웹 개발에 익숙한 엔지니어가 빠르게 테스트 자동화를 구현하기 위해서 웹 기술을 선정 파이프라인 개선
37. 그런데 이를 위해 ‘C++ 기반의 소프트웨어를 웹에서 구동할 수 있어야 한다’라는 전제조건이 필요 파이프라인 개선
38. 다행히 C++ 기반의 소프트웨어를 웹에서 실행할 수 있는 웹어셈블리(WASM)가 존재 파이프라인 개선
39. 크로스 플랫폼을 지원하는 C++ 런타임을 웹에서 테스트하여 전 플랫폼의 적합성을 한큐에 검증하자 파이프라인 개선
40. 이를 위해 C++ 프로젝트를 웹어셈블리(WASM)로 전환하는 과정이 필요 파이프라인 개선
41. 웹어셈블리로 전환하기
42. 네이티브(C++) API를 Web으로 전환? → “웹어셈블리”로 컴파일 웹어셈블리로 전환하기
43. 다양한 프로그래밍 언어를 웹에서 가동할 수 있도록 지원하는 “바이너리 포맷” 웹어셈블리의 개요
44. 스택 기반 가상머신에서 구동 - 메모리 관리의 간소화 - 실행 효율 증가 - 호환성 증가 웹어셈블리의 개요
45. 웹의 유일한 저수준 언어 - 🎨 그래픽 처리 - 🎮 게임 프로세스 - ⏳ 실시간 처리 웹어셈블리의 개요
46. ❤ 대부분의 모던 브라우저에서 지원 웹어셈블리의 개요
47. - C/C++ 프로그램을 웹에서 실행하도록 지원 - JavaScript의 느린 속도를 보완하기 위해 개발 - HTML, CSS, JS를 잇는 웹의 4번째 공식 언어 웹어셈블리의 개요
48. 웹어셈블리를 활용하여 C++로 개발된 기존의 프로그램을 웹에서 구동 가능 웹어셈블리로 전환하기
49. 웹어셈블리로 전환하기
50. 놀랍게도 이러한 전환 과정을 통해 네이티브 기술과 웹 환경을 결합한 사례가 적지 않음 웹어셈블리로 전환하기
51. WASM 전환 사례 1: AutoCAD C++ 개발된 오토캐드를 WASM 컴파일하여 웹 버전 제공
52. WASM 전환 사례 2: 굿노트 iOS 전용 앱이었던 Swift 기반 굿노트 앱을 WASM 전환을 통해 웹, 안드로이드, 윈도우 플랫폼을 지원
53. WASM 전환 사례 3: 피그마 Figma의 코어 로직을 JS에서 WASM으로 교체하여 로딩시간을 3배 이상 단축
54. 다양한 사례로 증명된 웹어셈블리 운용의 안정성 웹어셈블리로 전환하기
55. C++에서 WASM으로의 변환은 어떻게? 웹어셈블리로 전환하기
56. Emscripten 프로젝트 LLVM 기반의 다양한 프로그래밍 언어를 WASM으로 변환해주는 컴파일러 툴체인
57. C/C++로 이미 작성된 프로그램을 WASM으로 변환할 때는 Emscripten 컴파일러를 이용 Emscripten 프로젝트
58. Emscripten으로 WASM 컴파일 기본적으로 두 가지의 파일이 생성 - WASM 바이너리 파일 : C++을 컴파일한 바이너리 파일 - JS 글루 코드 - WASM을 좀 더 쉽게 사용할 수 있도록 제공 - 바이너리를 직접 로드하지 않고, 본 JS 파일을 import 하는 것으로 WASM 호출이 가능 *글루 코드(Glue Code) : 서로 다른 언어를 접착시키는 언어, 호환성을 위해 제공된다.
59. 글루코드와 WASM 바이너리를 통해 JS 상에서 C++ 네이티브 API의 호출이 가능 글루 코드는 WASM을 가리킴 Emscripten으로 WASM 컴파일
60. 이상적인 테스트 오토메이션
61. 과연 무엇이 이상적인 테스트 오토메이션일까요?
62. 테스터의 노력이 적어야함 최소한의 Input으로 필요한 테스팅이 이루어져야 함 (시작 인터페이스가 간결할 것)
63. GUI와 CLI가 지원되는 인터페이스 - 일부 테스트 셋에 대해서 꼼꼼한 확인이 필요 → GUI - 대량의 테스트 케이스에 대한 배치처리도 필요 → CLI
64. 무엇보다 인력이 적은 조직에서 최소한의 공수로 구현할 수 있어야 함 오토메이션 개발이 주업무는 아니므로 다양한 라이브러리 생태계의 도움이 필요
65. React가 그 모든 요구사항을 충족한다면 믿으시겠습니까? React로 만드는 자동화 시스템
66. 테스트 오토메이션 관점에서 바라본 React JS React로 만드는 자동화 시스템
67. - React 페이지로 손쉽게 GUI 툴 개발 - 헤드리스 브라우저로 CLI까지 구현 가능 - React와 Web이 가진 NPM 생태계로 네이티브 개발 대비 적은 공수로 빠른 구현 React로 만드는 자동화 시스템
68. Emscripten으로 WASM 컴파일 그럼 앞서 생성한 WASM을 React에서 활용해볼까요?
69. React에서 WASM 활용하기
70. WASM은 그 자체로 웹 표준 기술이기 때문에 React에서의 활용이 당연히 가능 React에서 WASM 활용하기
71. React에서 WASM 활용하기 하지만 WASM은 기본적으로 ES6 Module을 지원하지 않음
72. WASM을 fetch하기 위한 CDN 서버 또는 WASM 스트리밍용 서버의 구축이 필요 React에서 WASM 활용하기
73. Import가 안되니 모듈 번들러와의 사용이 어려움 React에서 WASM 활용하기
74. 번들러에서 WASM 타입을 이해하지 못하므로 프론트엔드 빌드시 오류가 발생 React에서 WASM 활용하기
75. 관련한 Plugin이 있지만 오류가 있으며 업데이트가 느림 (아직은 WASM 개발이 성숙해지고 있는 과정이므로…) React에서 WASM 활용하기
76. 로드시마다 useEffect 훅으로 별도로 로딩 - WASM을 import 하는 부분에서 지나친 코드가 발생 - 코드 사용성에 대한 일관성 저하 React에서 WASM 활용하기
77. Node 환경 아래에서 개발하는 경우 WASM 이용에 대한 불편함이 발생 React에서 WASM 활용하기
78. Emscripten에서 모던 프론트엔드 개발 환경을 위한 빌드옵션들을 제공 React에서 WASM 활용하기
79. “EXPORT_ES6=1” 글루코드를 ES 모듈로 익스포트하여 Node 환경에서 쉽게 임포트 가능 React에서 WASM 활용하기 EXPORT_ES6
80. 모듈 번들러를 거치므로 글루코드에 대한 Tree Shaking, Minification 등의 최적화가 가능 React에서 WASM 활용하기
81. “-sSINGLE_FILE=1” WASM 바이너리를 글루코드와 함께 JS 확장자로 컴파일 → CDN 및 스트리밍 서버 구현이 불필요 React에서 WASM 활용하기 SINGLE_FILE
82. JavaScript 파일(ES 모듈) 하나로 WASM을 운용하므로 번들링에 관련된 문제가 해결 React에서 WASM 활용하기
83. React로 만드는 자동화 시스템
84. 실제 구현 과정은 핵심 포인트가 아니므로 빠르게 넘어갈게요 React로 만드는 자동화 시스템
85. 간단한 페이지를 제작하여 Drag & Drop으로 애니메이션을 불러올 수 있도록 구현 React로 만드는 자동화 시스템
86. WASM 모듈로 네이티브 런타임을 Web 환경에 로드 → 픽셀 검사를 통해 오류 검출 React로 만드는 자동화 시스템
87. 픽셀 검사는 기존 NPM 저장소의 다양한 라이브러리 중 가장 사용이 간편한 라이브러리 사용 → 웹 생태계 레버리지 → 빠른 PoC 가능 React로 만드는 자동화 시스템
88. Resemble.JS는 단 몇줄의 코드로 래스터 데이터간의 차이를 비교하고 → 관련한 수치 및 시각화를 제공 React로 만드는 자동화 시스템
89. 사람의 눈으로는 확인하기 어려운 미세한 오류까지 자동으로 탐지 1. 눈으로 식별안되는 색감차이 2. 렌더링 시작위치 오류 3. 획 너비 사이즈 오류 React로 만드는 자동화 시스템
90. 다수 애니메이션에 대한 적합성을 손쉽게 검사할 수 있는 GUI기반의 테스트 오토메이션이 탄생 React로 만드는 자동화 시스템
91. 결과 분석 및 리포트
92. 좋은 테스트 오토메이션은 명확하고 유용한 정보를 제공할 수 있어야 합니다 결과 분석 및 리포트
93. 성공률 테스트 요약 에러 로그 결과 분석 및 리포트 이러한 정보들?
94. 한장의 PDF로 요약할 수 있으면 더욱 명확하지 않을까? 결과 분석 및 리포트
95. 대부분의 웹 페이지는 PDF 출력을 지원 웹 페이지는 그 자체로 문서의 양식을 갖춤. → 페이지를 PDF로 Export 결과 분석 및 리포트
96. html2canvas, jspdf 등 또 한 번 NPM 생태계의 패키지들을 적극 활용 단 몇줄의 코드로 HTML을 이미지화하여 PDF로 출력 결과 분석 및 리포트
97. 내/외부 공유가 가능하도록 기본 양식을 갖춘 PDF 레포트까지 React SPA에서 자동으로 제작 결과 분석 및 리포트
98. 헤드리스 브라우저로 CLI 지원하기
99. - 테스트 셋이 많아서 GUI 툴 쓰는 것 조차 피곤해요 - 어차피 자동으로 레포트가 생성된다면, 결과만 받으면 됨 - 특정한 이벤트에 트리거되어, 자동으로 테스트가 진행되면 좋겠어요 (GitHub Action, CI/CD 환경 등) CLI는 언제 필요할까요?
100. 테스트 오토메이션은 언젠가 CLI를 필요로 한다
101. Headless Browser를 활용하여 CLI 확장 헤드리스 브라우저
102. 그래픽 인터페이스가 없는 웹 브라우저 - GUI 없이 페이지를 조작하도록 지원 - CLI에서도 DOM 액세스를 통해 컨트롤 - 웹 페이지 테스팅에 주로 사용 헤드리스 브라우저
103. “Puppeteer” Node 환경의 대표적인 라이브러리 Puppeteer 라이브러리
104. - Headless Chrome - DevTools 접근 및 웹 드라이버를 제공 - Node.JS 기반으로 기존 웹 프로젝트에 쉽게 통합 가능 Puppeteer 라이브러리
105. 헤드리스 브라우저로 CLI 지원하기
106. 터미널 환경에서 순식간에 처리되는 애니메이션 적합성 검사 CLI 툴 헤드리스 브라우저로 CLI 지원하기
107. 브라우저 구동 대비 간소화된 프로세스 필요한 경우 GitHub Action이나 클라우드 서버에서 CI/CD 배포 툴과 응용 가능 헤드리스 브라우저로 CLI 지원하기
108. 테스트 오토메이션 배포하기
109. 무거운 바이너리 전달없이 최대한 간단한 인터페이스로서 제공하는 것이 목표 테스트 오토메이션 배포하기
110. CLI와 GUI, 두 가지 인터페이스를 동시에 배포하고 싶음 테스트 오토메이션 배포하기
111. 안정적인 환경에 배포하고 싶으면서도 가격과 공수를 줄이고 싶음 테스트 오토메이션 배포하기
112. GUI thorvg-test-automation.vercel.app 테스트 오토메이션 배포하기
113. React 기반의 페이지를 호스팅하기 위해 자연스레 Vercel 플랫폼을 선택 테스트 오토메이션 배포하기
114. GUI 배포하기 호스팅 공수 없이 페이지를 서빙 CI/CD 기능으로 자동 배포
115. CLI 툴 배포는 많은 상황을 고려하게 됨 설치방법, 환경변수, 배포 플랫폼(OS) 테스트 오토메이션 배포하기
116. CLI npm install -g ./cli CLI 배포하기
117. NPM 활용시 모든 플랫폼에서의 설치, 환경변수 등록이 간소화됨 테스트 오토메이션 배포하기
118. package.json에서 매니페스트를 정의하면, npm install 명령을 통해 전역에서 실행가능한 CLI 명령어를 만들 수 있음 CLI 배포하기
119. CLI 배포하기 $ npm install -g tvg-cli
120. CLI GUI npm install -g ./cli thorvg-test-automation.vercel.app 테스트 오토메이션 배포하기
121. 결과
122. - React의 간결함으로 빠른 페이지 기반 PoC - React 페이지 자체로 GUI 툴과 PDF까지 지원 - NPM 생태계를 레버리지하여 필요한 기능이 무엇이든 단 몇줄의 코드로 구현 결과
123. 웹어셈블리를 통해 C++ 소프트웨어의 검증이 웹에서 진행
124. 하나의 코드베이스로 GUI와 CLI 인터페이스를 동시지원
125. ‘수동 테스트’ 에서 ‘자동화 테스트’ 로의 파이프라인 개선
126. 페이지 기반으로 GUI부터 제작 웹 기술로 빠르게 프로토타입 제작 후 CLI까지 포팅 → 익숙하고 쉬운 방식으로 빠르게 결과 도출
127. 정리하기
128. React로 시작하는 쉽고 빠른 GUI Tooling - 웹 페이지는 자체로 문서의 양식을 갖춤 - 헤드리스 브라우저로 CLI까지 지원 정리하기
129. NPM과 웹 생태계로 빠르고 효율적인 PoC - 어떤 기능이든 NPM에 이미 구현이 되어있음 - JS/TS로 네이티브 언어보다 더 빠른 생산성 정리하기
130. C/C++ 개발시에도 웹 개발의 생태계를 적극 활용 - WASM은 네이티브와 웹을 이어주는 징검다리 - 웹 개발자의 참여, JS 및 Web 생태계로 확장 정리하기
131. 네이티브 SW가 가진 문제를 웹 개발자의 지식만으로 해결한 사례
132. 네이티브 SW 개발에도 웹 기술을 응용할 수 있는 시대가 도래
133. WASM과 FE 기술 이제 Web은 네이티브 개발을 확장합니다
134. 감사합니다 @tinyjin in/jinui