Action View의 진화와 한계
2004년 Rails 0.5와 함께 도입된 Action View는 ERB(Embedded Ruby)를 기반으로 발전해왔습니다. 레이아웃, 파셜, HTML 자동 이스케이프, form_with 헬퍼 등 다양한 기능이 추가되었으나, 근본적인 구조는 안정적으로 유지되었습니다. 그러나 뷰 컴포넌트의 캡슐화, 뷰 경계, 재사용성, 성능, 그리고 특히 도구 지원 및 테스트 용이성 측면에서 여러 문제점이 지속적으로 제기되어 왔습니다. JavaScript 생태계의 뛰어난 개발 도구 경험(예: Vite의 에러 메시지, LSP의 즉각적인 피드백)과 비교하며, Rails 뷰 레이어에서도 이와 같은 수준의 도구 지원이 절실함을 강조합니다.
Herb 프로젝트 소개
Herb는 HTML ERB 파일을 위한 통합 도구 생태계로, C로 작성된 HTML 인식 ERB 파서를 기반으로 합니다. 이는 Ruby의 새로운 파서인 Prism을 활용하여 ERB 스니펫을 분석하며, Action View 헬퍼를 완벽하게 지원하도록 설계되었습니다. Herb는 HTML과 ERB를 하나의 구문 트리로 통합하여 파일 구조와 노드 간의 계층 관계를 파악함으로써, 기존 파서들이 놓치던 HTML 컨텍스트를 유지합니다. 이는 복잡한 ERB 구조 내에서도 특정 블록의 시작과 끝을 정확히 인지하여 분석의 정확도를 높입니다.
주요 기능
- 파서: HTML과 ERB를 하나의 통합된 구문 트리로 분석하여 정확한 구조 인식을 제공합니다.
- 포매터: 어떠한 구조의 HTML ERB 파일이든 일관되고 가독성 높은 형식으로 자동 정렬하며, CI/CD 워크플로우에 통합하여 코드 품질을 유지할 수 있습니다.
- 린터: Ruby 스타일 가이드와 유사하게, HTML ERB 파일의 베스트 프랙티스, 일반적인 오류, 접근성 규칙 등을 검사하고 진단합니다. 진단 메시지에는 관련 문서 링크가 포함되어 문제 해결을 돕습니다.
- 리팩토링 도구 (Rewriter): 스팬 태그를 div 태그로 변경하거나 데이터 속성 및 값을 일괄적으로 교체하는 등, 뷰를 안정적으로 리팩토링할 수 있는 기능을 제공합니다.
- 하이라이터 (Highlighter): 터미널 환경에서 ERB 코드의 구문 강조를 지원하여 가독성을 높입니다.
- 프린터 (Printer): 파싱된 구문 트리를 다시 소스 코드로 변환하는 기능을 제공하며, 이는 린터의 자동 수정 기능 구현에 핵심적인 역할을 합니다.
- 언어 서버 (Herb Language Server): VS Code 등 에디터에서 실시간 파싱 오류, 태그 오류, Ruby 오류 등을 진단하고 표시하여 즉각적인 피드백을 제공합니다. 애플리케이션의 린트 오류 및 파싱 실패 파일을 한눈에 확인할 수 있는 대시보드와 GitHub 이슈를 쉽게 생성할 수 있는 기능도 포함되어 있습니다.
Reaction View 비전
Herb를 통해 얻은 깊이 있는 뷰 인트로스펙션(introspection)을 바탕으로, 발표자는 새로운 ERB 엔진인 ‘Reaction View’의 비전을 제시합니다. 이는 유효하지 않은 HTML 생성을 원천적으로 방지하고 컴파일 시 오류를 진단하는 HTML 템플릿 엔진을 목표로 합니다. Phoenix LiveView에서 영감을 받아, 데이터 변경 시 해당 뷰 블록만 효율적으로 업데이트하는 반응형 렌더링 도입 가능성을 모색합니다.
Reaction View의 단계별 목표
- 향상된 오류 피드백: 기존 Rails의 오류 페이지를 개선하여 ERB 템플릿 내의 HTML 및 Ruby 구문 오류를 명확하게 시각화합니다.
- 유효 HTML만 생성하는 엔진: 기존
.erb파일을.herb파일로 변경하여 새로운 엔진을 선택적으로 도입하고, 유효하지 않은 HTML은 컴파일 단계에서 오류를 발생시킵니다. HTML5 및 접근성 검사를 내장하고, XSS 방지 등 정적 분석 기능을 강화합니다. - 반응형 뷰 레이어: 데이터 변경에 따라 뷰의 특정 부분만 업데이트하는 반응형 템플릿 기능을 도입하여, Turbo Frames와 같은 추가적인 추상화 없이도 선언적인 UI 업데이트를 가능하게 합니다.
- 클라이언트 측 템플릿: 제한된 ERB 구문을 클라이언트 측(React, 웹 컴포넌트 등)으로 트랜스파일하여, 낙관적 UI 업데이트 및 오프라인 기능 개선에 활용합니다.
- 외부 컴포넌트 통합: 특정 페이지에서 React 등 외부 생태계의 컴포넌트를 ERB 뷰 내에서 직접 사용할 수 있도록 하여, 점진적인 하이브리드 아키텍처를 지원합니다.