Rails 7의 프론트엔드 스택은 Webpacker 대신 Import Maps/ESBuild, Rails UJS 대신 Turbo Drive, jQuery 대신 Stimulus JS를 기본으로 채택합니다. Rails 8로의 주요 변화는 자산 처리(Sprockets → Propshaft)에 불과하며, 핵심 워크플로우는 유지됩니다.
프론트엔드 개발은 반응형 레이아웃 설계에서 시작해야 합니다. 데스크톱(내비게이션 바, 사이드바, 메인 콘텐츠) 및 모바일(헤더, 메인 콘텐츠, 푸터) 표준 레이아웃 패턴을 참조하여 모바일 우선 디자인을 적용하는 것이 중요합니다.
재사용 가능한 UI 요소를 위해 View Components를 활용, Page Component(제목, 부제목, 액션) 및 자동 해제되는 Flash Message Component를 구현할 수 있습니다. 현재 페이지 링크를 강조하는 Active Link 헬퍼는 간단히 구현 가능하며, 헬퍼 테스트 작성은 필수입니다.
Tailwind CSS 버튼 스타일링 시, 공식 권장 사항과 달리 apply 지시어를 사용하여 Bootstrap과 유사한 유지보수성 높은 API를 구축하는 것이 효율적일 수 있습니다. 이는 인풋 필드나 내비게이션 링크 등 다른 공통 요소에도 적용 가능합니다.
Stimulus JS는 서버 측 렌더링 없이도 탭, 폼 미리보기 등 작은 클라이언트 측 상호작용 구현에 적합하며, 관련 외부 리소스 활용이 권장됩니다. 간단한 상호작용은 HTML <details>나 <progress> 같은 네이티브 요소만으로도 충분할 수 있습니다.
Hotwire 스택(Turbo Drive, Turbo Frames, Turbo Streams) 사용 시, Turbo Drive를 불필요하게 비활성화하지 않고(외부 리디렉션 제외), 먼저 전체 페이지 로딩 방식으로 기능을 구현 후 점진적으로 Turbo Frames/Streams를 적용하여 반응성을 추가하는 전략이 효율적입니다.
기타 팁으로는, 다크 모드 구현의 유지보수 부담을 고려한 브라우저 플러그인 대안 제시, 텍스트보다 아이콘을 활용한 시각적 디자인 강조, 잘 디자인된 404 에러 페이지 및 동적 제목/소셜 공유 메타 태그 설정의 중요성이 언급됩니다. Rails 스캐폴드 템플릿 커스터마이징이나 Polaris 같은 기존 뷰 컴포넌트 라이브러리 활용도 개발 효율을 높입니다.