Rails 애셋 파이프라인의 진화와 Ruby Gem 개발에서의 활용 전략

Adrian Marin, Master the Rails asset pipeline. San Francisco Ruby Conference 2025.

작성자
Evil Martians
발행일
2025년 12월 27일
원문 보기
www.youtube.com

핵심 요약

  • 1 Rails 애셋 파이프라인은 Sprockets에서 Propshaft로 발전하며, Import Maps, ESBuild 등 현대적인 프론트엔드 도구와의 통합을 통해 유연하고 효율적인 애셋 관리를 제공합니다.
  • 2 Ruby Gem 개발 시 애셋을 효과적으로 배포하기 위해 Import Maps, 자체 번들링, NPM 패키지 생성 등 다양한 접근 방식을 활용하여 사용자 편의성과 개발 복잡성 사이의 균형을 맞출 수 있습니다.
  • 3 애셋 번들링, 캐싱, 트랜스파일링 등 애셋 파이프라인의 핵심 기능을 이해하고 Propshaft와 같은 최신 도구를 활용함으로써 강력한 Rails 애플리케이션 및 플러그인 개발이 가능합니다.

도입

본 강연은 Rails 애셋 파이프라인의 역사적 발전과 현대적인 애셋 관리 기법, 그리고 이를 Ruby Gem 개발에 효과적으로 적용하는 방법에 대해 다룹니다. 강연자는 2010년 이전부터 애셋 관리를 경험하며 겪었던 문제점과 해결책을 공유하며, Rails 환경에서 애셋을 다루는 다양한 '왜'와 '어떻게'를 심층적으로 탐구합니다. 특히, 복잡한 애셋 생태계 속에서 개발자들이 직면하는 어려움을 해소하고, 효율적인 개발 방안을 모색하는 데 중점을 둡니다.

Rails 애셋 파이프라인의 진화

과거의 애셋 관리 방식

  • 글로벌 스코프: 과거에는 jQuery 및 플러그인들이 전역 스코프에 로드되어 변수 충돌 및 관리의 어려움이 있었습니다.

  • HTTP/1.1 문제: 다수의 스크립트 파일은 브라우저의 수많은 요청과 핸드셰이크를 유발하여 성능 저하의 원인이 되었습니다.

애셋 파이프라인의 등장과 Sprockets

  • 번들링 (Concatenation): 여러 파일을 하나로 합쳐 요청 수를 줄이는 방식 (Grunt, Gulp, Broccoli).

  • 캐싱 및 핑거프린팅: 파일 내용 기반의 고유 해시를 생성하여 브라우저 캐싱을 활용하고, 내용 변경 시 캐시를 무효화(cache busting)합니다.

  • 트랜스파일링: SAS를 CSS로, CoffeeScript를 JavaScript로 변환하거나, 벤더 프리픽스 추가, 코드 압축(minify), 이미지 최적화 등을 수행했습니다. Sprockets가 이 모든 기능을 담당했습니다.

현대의 애셋 관리: Propshaft와 새로운 도구들

  • HTTP/2: 다중 연결 및 병렬 요청 처리 능력이 향상되어 과거의 요청 병목 현상을 해결했습니다.

  • Propshaft: 2021-2022년에 개발된 Sprockets의 경량 대체재로, 개발 서버 실행, 핑거프린팅, 최소한의 트랜스파일링, 설정 가능한 로드 패스 기능에 집중합니다.

  • 프론트엔드 기술 발전:
    • Import Maps: 빌드 과정 없이 브라우저가 직접 모듈을 가져오도록 하여 최신 JavaScript를 활용할 수 있게 합니다. Propshaft와 원활하게 연동됩니다.
    • JS/CSS 번들링: ESBuild, Vite 등 외부 도구를 활용하여 Ruby 환경에서보다 효율적이고 강력한 번들링을 수행합니다.
    • Vit Rails: 번들링과 개발 서버를 포함한 포괄적인 기능을 제공하는 솔루션입니다.
  • SVG 관리: inline_svg Gem을 사용하여 SVG를 인라인으로 삽입하고 스타일을 제어할 수 있습니다.

Ruby Gem 개발을 위한 애셋 파이프라인 활용 전략

1. Import Maps 활용

  • 가장 간단한 접근 방식으로, Gem 내 import_map.rb 파일을 생성하고 엔진에서 이를 메인 앱에 노출시킵니다.

  • Propshaft/Sprockets가 Gem의 app/javascript 디렉토리를 감시하도록 설정합니다.

2. NPM 패키지 통합

  • Gem 내 번들링: Gem 내부에 Import Maps를 설치하고 NPM 의존성을 고정하여 사용자에게 빌드 과정을 숨깁니다.

  • 사용자에게 위임: 사용자가 메인 앱에서 NPM 의존성을 직접 고정하도록 안내하여 버전 충돌을 피하고 Gem 개발자의 부담을 줄입니다.

3. ESBuild를 통한 고급 기능 활용

  • TypeScript, JSX 등 고급 JavaScript 기능을 사용해야 할 경우, Gem 내부에 ESBuild를 설치하여 빌드 단계를 가집니다.

  • 빌드된 애셋은 app/assets/builds 디렉토리에 저장되며, Propshaft가 이 디렉토리를 자동으로 감시합니다.

4. NPM 패키지 생성 (메인 앱이 JS 번들링을 사용하는 경우)

  • 메인 앱이 ESBuild와 같은 JS 번들링 도구를 사용하여 import comment와 같이 직접 모듈을 가져오고 싶을 때 유용합니다.

  • Gem의 JavaScript 코드를 NPM 패키지로 만들어 npmjs.org에 배포하고, 사용자가 yarn add를 통해 설치하도록 합니다.

5. 비정통적인 접근 방식 (참고용)

  • Rake 태스크를 통한 파일 복사: 사용자가 Rake 태스크를 실행하여 Gem의 JS 파일을 메인 앱으로 복사합니다. 간단하지만 수동 업데이트가 필요합니다.

  • 심볼릭 링크: JS 파일을 동기화 상태로 유지하지만, CI/배포 환경에서 심볼릭 링크 관리가 필요합니다.

  • JavaScript 태그 직접 삽입: javascript_include_tag를 사용하여 DOM에 직접 삽입합니다. Stimulus 컨트롤러와 같은 기능은 자동 연결이 어려울 수 있습니다.

  • 미들웨어 활용 (Avo의 방식): Webpacker 시대에 Node.js 설치 없이도 현대적인 JavaScript를 제공하기 위해, 빌드된 애셋을 미들웨어를 통해 노출시켰습니다. 핑거프린팅 등 애셋 파이프라인의 일부 기능은 활용할 수 없지만, 사용자에게 편리함을 제공합니다.

결론

Rails 애셋 파이프라인은 과거의 복잡한 문제들을 해결하고 현대 웹 개발의 요구사항에 맞춰 지속적으로 진화해왔습니다. Sprockets에서 Propshaft로의 전환, Import Maps, ESBuild, Vit Rails와 같은 다양한 도구의 등장은 개발자에게 더 많은 유연성과 강력한 기능을 제공합니다. 특히 Ruby Gem 개발자는 이러한 애셋 파이프라인의 특성을 이해하고 적절한 전략(Import Maps, NPM 패키지, ESBuild 통합 등)을 선택함으로써, 사용자에게 최적화된 애셋 배포 경험을 제공하고 라이브러리의 활용도를 극대화할 수 있습니다. 궁극적으로 애셋 파이프라인은 Rails 생태계에서 효과적인 플러그인 구축의 핵심 요소입니다.

관련 글들

Rails 애플리케이션 및 Gem에서 애셋 파이프라인 효과적으로 활용하기

Rails 애셋 파이프라인의 역사적 배경과 번들링, 핑거프린팅, 트랜스파일링 등 주요 문제 해결 과정을 설명합니다.

07/24 읽어보기 →

Rails 프런트엔드 자산 관리 전략의 진화

Rails의 프런트엔드 자산 관리 방식은 시간이 지남에 따라 크게 변화했으며, 이는 레거시 앱 유지보수 시 혼란을 야기합니다.

06/17 읽어보기 →

루비 온 레일즈 프론트엔드 개발: 레일즈 7의 르네상스

레일즈 7은 Input Maps, ESBuild, Turbo, Stimulus JS 등 현대적인 도구를 통해 레일즈 프론트엔드 개발의 르네상스를 가져왔습니다.

01/13 읽어보기 →

Persona의 Rails 아키텍처 진화: 유연성, 확장성, 다양성을 위한 여정

Persona는 Google App Engine에서 Kubernetes로 인프라를 전환하고, MySQL 데이터베이스를 샤딩하며 Rails 애플리케이션의 확장성과 유연성을 확보했습니다.

07/24 읽어보기 →

댓글 0

로그인이 필요합니다

댓글을 작성하거나 대화에 참여하려면 로그인이 필요합니다.

로그인 하러 가기

아직 댓글이 없습니다

첫 번째 댓글을 작성해보세요!