그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지│인프콘2024
INFCON 2024 인프런 · YouTube
AI 핵심 요약
C++로 작성된 벡터 그래픽스 엔진을 웹에서 활용하고, 애니메이션을 쉽게 테스트·배포하기 위해 Emscripten으로 WebAssembly에 포팅했다. C++ API를 JavaScript에 바인딩하고 Lit 기반 웹 컴포넌트로 감싸, HTML 요소처럼 애니메이션을 렌더링하는 인터페이스를 만들었다. 포팅 과정에서는 메모리 해제와 언어 간 디버깅이 주요 과제였으며, DWARF 디버깅 정보와 sanitizer 도구로 런타임 오류와 메모리 문제를 추적했다. 그 결과 엔진을 웹 라이브러리로 배포하고 브라우저 기반 테스트와 자동화에도 활용했으며, WebAssembly가 네이티브 소프트웨어와 웹 생태계를 연결할 수 있음을 보여줬다.
- Emscripten은 기존 C/C++ 프로젝트를 WebAssembly로 컴파일하며, 바인딩 코드로 JavaScript와 네이티브 API를 연결한다.
- 포인터와 동적 할당을 다룰 때는 명시적으로 메모리를 해제하고, 스마트 포인터나 Typed Memory View로 안전성과 전달 효율을 높인다.
- 렌더링처럼 UI와 상호작용하는 기능은 WebAssembly 모듈을 웹 컴포넌트로 감싸 재사용하기 쉽게 제공할 수 있다.
- 디버그에는 DWARF 정보와 AddressSanitizer·UndefinedBehaviorSanitizer를 활용하고, 프로덕션 빌드의 심볼은 wasm-tools로 확인한다.
- 컴파일 최적화 옵션은 바이너리 크기와 실행 성능 사이의 트레이드오프를 고려해 프로젝트에 맞게 선택한다.
소개
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://inf.run/ifwWL 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지 - 유진의 "웹 어셈블리"(이하 WASM)는 2017년에 공개된 새로운 웹 표준 기술이며, C/C++ 등의 저수준 언어를 웹 환경에서 빠르고 안전하게 구동할 수 있습니다. 저희 조직에서는 C++ 오픈소스를 WASM으로 전환하는 과정을 통해 복잡한 그래픽스 엔진을 웹으로 포팅하여 성공적으로 운용하고 있으며, C++ 네이티브 API로 구동되는 웹 표준 컴포넌트를 개발하여 사용자들이 손쉽게 이용할 수 있는 가볍고 빠른 Lottie 애니메이션 플레이어를 제공하고 있습니다. WASM은 트렌디하며 굉장히 중요한 기술입니다. 본 세션에서는 WASM이 기존 웹 개발의 영역에서 어떠한 부분을 대체하고 개선할 수...
비슷한 학습 자료
컨퍼런스 NDC
NDC 2018 [인하우스 웹 프레임워크 Jul8 제작기 - 게임 운영툴에 정말 좋습니다] 세션 공유드립니다. 상세 내용은 NDC Replay 홈페이지를 참고 부탁드려요. 😊 1. 발표자 성함 : 윤석주 2. 발표자 소개 : 현재 데브캣 스튜디오 낫 게임팀에서 프로그래머로 프론트엔드, 백엔드를 모두 담당하고 있습니다. 이전에는 스튜디오내에 서버엔진팀에서 서버 프로그래머로 서버 엔진을 제작하였습니다. 3. 세션 소개 : 서버엔진팀에서 개발해서 사용한 웹 프레임워크 Jul7/Jul8에 대해서 이야기 하려고 합니다. 저희가 운영툴과 NYPC 사이트를 개발하려고 할때 기존 모던 프레임워크는 많은 라이브러리를 가지고 있는 대신 환경 구축이 어렵고, 기술이 빠르게 변하고, 러닝커브가 긴 단점이 있다고 생각 했습니다. Jul7의 경우 위의 단점을 간단한 프레임워크를 만들어서 풀었습니다. - 파일 하나만 있어도 되고 - jQuery를 기반으로 하여 구조가 거의 변하지 않으며 - html...
웹 개발 프론트엔드 백엔드
컨퍼런스 우아콘 2024
통합테스트로 보다 안전한 웹프런트엔드 서비스 제공하기 #우아콘2024 #우아한형제들
컨퍼런스 INFCON 2024
멀티패러다임 프로그래밍 언어의 시대: 객체지향과 함수형을 섞어야할 때!│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 멀티패러다임 프로그래밍 언어의 시대: 객체지향과 함수형을 섞어야할 때! - 유인동 함수형, 객체지향 패러다임을 모두 제공하는 멀티패러다임 언어를 효율적으로 사용하는 법 - 타입스크립트로 Tagged Templates를 만들면서 멀티패러다임 개발 패턴을 소개합니다. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
프로그래밍 언어
컨퍼런스 INFCON 2024
달리는 기차의 바퀴 갈아끼우기: 인프런 프론트엔드 마이그레이션 여정│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 달리는 기차의 바퀴 갈아끼우기: 인프런 프론트엔드 마이그레이션 여정 - 조성륜 실제 운영되고 있는 서비스의 레거시 코드(Express.js 기반 Vanilla.js)를 모던 리액트 환경으로 마이그레이션을 하기위한 인프런 프론트파트의 여정을 공유합니다. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
웹 개발 프론트엔드
컨퍼런스 INFCON 2024
여기어때 세션: 주목받지 못한 서비스를 되살리기까지 │인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://inf.run/ifwWL 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 주목받지 못한 서비스를 되살리기까지! - 안도영 여기어때에서는 사용자에게 다양한 여행 관련 서비스를 제공하고 있습니다. 이 다양한 기능들은 앱으로 활용이 가능하며 수많은 기능이 추가되고 있습니다. 또한 유저 친화적인 서비스를 위해 많은 노력들을 하고 있습니다. 하지만 웹은 옛날 모습을 간직한 채 아무런 업데이트 없이 산소 호흡기만 달고 유지될 뿐 거의 버려진 서비스였습니다. UX 및 UI, 프로젝트조차 레거시가 돼버린 상태에서 작년 한 해 동안 리뉴얼 작업을 거쳐 새로운 서비스로 탈바꿈하였습니다. 웹 서비스를 재 탄생시키면서 어떠한 부분을 중점적으로 고려하였는지, 프로젝트를 진행함에 있어서 필요한 부분은 무엇인지 그 사이에 얻어진 경험들을 공유하려고 합니다. 여행 서비스에 관심이...
웹 개발 UI/UX