1. TutorialKit.rb의 개요 및 탄생 배경
TutorialKit.rb는 Stackblitz에서 개발한 JavaScript용 TutorialKit을 포크하여 루비 환경에 최적화한 프레임워크입니다. 이 프로젝트의 핵심은 WebContainers 기술을 활용하여 브라우저 내부에서 가벼운 Node.js 환경과 Unix 지원 기능을 실행하고, 그 위에서 ruby.wasm을 구동하는 것입니다. 이를 통해 사용자는 복잡한 로컬 설정 없이도 레일즈 애플리케이션, 터미널, 데이터베이스가 통합된 환경을 웹에서 즉시 경험할 수 있습니다.
2. 주요 기술적 개선 사항
기존 JavaScript 기반 도구를 루비 생태계에 이식하기 위해 다음과 같은 고도화 작업이 수행되었습니다.
- 가상 파일 시스템(Virtual FS) 강화: 루비 프로젝트의 복잡한 디렉토리 구조를 지원하기 위해 중첩된 디렉토리 레이아웃 기능을 도입했습니다.
- 런타임 준비 상태 동기화: 대용량 Wasm 모듈 로딩 및 데이터베이스 초기화가 완료될 때까지 터미널 상호작용을 제어하여 사용자 경험을 최적화했습니다.
- Wasm 모듈 캐싱: 약 80MB에 달하는 Ruby Wasm 모듈을 브라우저의 File System API를 통해 로컬에 저장함으로써, 재방문 시 로딩 속도를 획기적으로 개선했습니다.
- UI/UX 최적화: 루비 및 YAML 파일에 대한 구문 강조(Syntax Highlighting)와 전용 아이콘을 추가하여 개발 환경의 시각적 완성도를 높였습니다.
3. 효율적인 젬(Gem) 배포 아키텍처 연구
루비 애플리케이션 실행에 필요한 의존성(Gems)을 브라우저로 전달하기 위해 세 가지 전략이 검토되고 있습니다.
- 빌드 타임 임베딩(Build-time Embedding): 현재 기본 방식으로,
wasmify-rails를 사용하여 루비 인터프리터와 모든 젬을 하나의 Wasm 바이너리로 묶습니다. 부팅 속도는 빠르나 초기 빌드 시간이 최대 20분까지 소요될 수 있다는 단점이 있습니다. - 타르볼(Tarball) 배포: 루비 런타임과 애플리케이션 코드/젬을 분리하여 관리합니다. 루비 인터프리터를 매번 재컴파일할 필요가 없어 개발 중 재빌드 속도가 매우 빠릅니다.
- 런타임 번들(Runtime Bundle): 브라우저 내에서 직접
bundle install을 수행하는 방식으로, 유연성은 높으나 튜토리얼 환경에서는 다소 과한 측면이 있어 실험적 단계에 있습니다.
4. HTTP 통신 지원 및 CORS 해결
ruby.wasm은 현재 소켓 통신을 지원하지 않아 HTTP 요청에 제약이 있습니다. 이를 해결하기 위해 TutorialKit.rb는 JavaScript 브릿지를 활용합니다. Ruby에서 JavaScript의 fetch API를 호출할 수 있도록 Faraday 어댑터를 구현하거나 RubyGems 내부를 패치하는 방식을 사용합니다. 또한, 브라우저의 CORS 제한을 우회하기 위해 Cloudflare Worker 등을 활용한 프록시 서버 구축 가이드를 함께 제공할 예정입니다.