Mendix 위젯 개발을 위한 최적의 선택, hyper-pwt를 소개합니다.
Mendix에서 기본적으로 제공하는 Widget들도 페이지를 구성하기에 아주 강력하지만, 현업에서는 여러 요구사항이 있다 보니 해당 요구사항들을 채우기 위해 Pluggable Widget을 별도로 개발하는 경우가 많습니다.
Mendix에서는 Pluggable Widget의 개발을 위한 툴체인인 PWT를 기본적으로 제공합니다.
하지만 기존 PWT는 빌드 속도가 느리거나[^1], Hot Reload가 실사용할 수 없을 정도로 느리거나[^2], 또는 사용하는 라이브러리가 무겁거나 라이브러리의 구현에 따라 빌드가 안되는 문제[^3]들이 있었습니다.
저희 팀에서는 그 문제를 해결하고, Mendix Pluggable Widget을 개발하는데 더 나은 개발자 경험을 제공하기 위해 hyper-pwt라는 툴체인을 개발했습니다.
이 글에서는 hyper-pwt를 어떻게 사용할 수 있는지, 어떤 기능들이 있는지 소개해 드리도록 하겠습니다.
Web Widget 빌드
hyper-pwt는 동일 위젯 기준 Mendix PWT보다 6.6배 빠르고, 1.8배 작은 크기의 mpk 파일을 제공합니다. [^4]
어떻게 위 결과와 같은 성능 향상을 취할 수 있었을까요?
기존 Mendix 위젯 빌드는 Rollup을 사용하여 위젯을 번들링하고 있습니다. 위젯을 번들링하면서 React 의존성을 제거하여 Mendix Web과 같은 React 인스턴스를 사용하도록 하는 구조입니다.[^5]
hyper-pwt는 위젯의 빌드와 Hot Reload 기능 구현 및 사용자 설정 파일의 일관성을 고려해 Vite를 사용했습니다. Vite는 esbuild와 Rollup을 이용해 빠른 속도의 개발 서버 및 번들링을 제공하는 빌드 툴입니다.
또한, 저희는 Rolldown Vite를 먼저 적용하여 빌드 속도를 끌어올렸습니다. Mendix PWT도 Rolldown으로 마이그레이션을 준비 중이나 아직 적용되지 않은 상황입니다.[^6]
Web Widget Hot Reload
기존 Mendix PWT도 위젯 Hot Reload 기능을 제공하나, 해당 기능의 동작 방식은 위젯 파일의 수정이 감지되면 번들링을 다시 진행하는 방식입니다.
위젯의 번들링 자체에 시간이 오래 걸리는 만큼, 에디터에서 코드를 수정한 뒤 그를 브라우저로 확인하기까지 오랜 시간이 걸립니다.
hyper-pwt는 번들링을 새로하지 않고 Hot Reload를 처리하기 위해 아래와 같은 구조로 기능을 설계했습니다.
WidgetProxy를 통해 Mendix 웹페이지와 Vite 개발 서버를 연결하며, Vite 개발 서버에서 지원하는 HMR 기능을 그대로 활용하기 때문에 빠른 속도로 수정된 코드를 확인할 수 있습니다.
Native 지원 계획
현재 hyper-pwt는 React Native 기반의 위젯을 지원하지 않습니다. 하지만 저희 팀에서도 기존 PWT를 통한 React Native 위젯 개발 시 제약 사항이 많다는 점을 인지하고 있습니다.
저희 팀 구성원들은 React Native 개발에 대한 경험이 풍부한 기술자들입니다. 저희가 현업에서 겪었던 경험과 노하우를 담아 hyper-pwt의 React Native 지원을 위한 개발을 진행하고 있습니다.
빠른 시일 내에 이 블로그에서 hyper-pwt의 RN 지원 소식을 전해드릴 수 있도록 노력하겠습니다.
마치며
hyper-pwt는 아직 개선해야 할 점들이 많습니다.
React Native 위젯 지원도 현재 개발 중에 있으며, PWT 구현과 다르게 동작하는 구현 개선 사항들이 많이 남아있습니다.
저희 팀에서는 이번 공개 이후에도 앞으로 지속적으로 기능을 추가하고 버그를 수정하여 오픈 소스 활동에 기여할 예정입니다.
이 글을 읽고 계신 현업자분들께서도 hyper-pwt를 이용하시면서 버그나, 수정해야 할 점들이 있다면 오픈 소스 활동에 참여하셔서 활발히 논의해주시길 바라겠습니다.
이런 활동들을 통해 hyper-pwt가 지속적으로 개선되길 바랍니다.
긴 글 읽어주셔서 감사합니다.
[^1]: 자체적으로 수행한 벤치마크 결과에 기반한 내용입니다.
[^2]: 자체적으로 수행한 벤치마크 결과에 기반한 내용입니다.
[^3]: 복잡도가 높은 npm 라이브러리들이 동작하지 않는 경우가 있습니다. (Mendix Community)
[^4]: 자체적으로 수행한 벤치마크 결과에 기반한 내용입니다.
[^5]: Mendix 웹페이지에서 사용하는 React와 다른 React 인스턴스를 위젯에서 사용하는 경우 정상적인 기능 동작이 불가한 문제가 있습니다. 이 문제를 해결하기 위해 기존 PWT와 hyper-pwt 모두 Mendix의 React 인스턴스를 사용합니다.
[^6]: 게시글 발행일자인 2025년 9월 8일 기준입니다.