고급 UI/UX는 Hotwire로 구축하자: React와의 비교 및 Hotwire의 강점

高度なUI/UXこそHotwireで作ろう / Naofumi Kagami - Kaigi on Rails 2025

작성자
Kaigi on Rails
발행일
2025년 11월 25일
원문 보기
www.youtube.com

핵심 요약

  • 1 Hotwire는 Basecamp와 Cookpad 등 실제 서비스 사용자 화면에서 활용되며, React 없이도 복잡하고 고급스러운 UI/UX를 효과적으로 구현할 수 있습니다.
  • 2 Turbo Drive의 SWR 캐싱과 로딩 UI, Turbo Frames의 프리페치 기능은 React SSR의 느린 페이지 전환 문제를 해결하며, JavaScript를 적극 활용하여 최적의 사용자 경험을 제공합니다.
  • 3 Stimulus의 `valueState`와 Zustand 같은 전역 상태 관리 라이브러리를 통해 React의 단방향 데이터 흐름 및 상태 관리 패턴을 Hotwire 내에서 구현하여 복잡한 UI를 효율적으로 구축할 수 있습니다.

도입

발표자는 Ruby on Rails 개발자이자 기술 작가로서, '고급 UI/UX는 Hotwire로 구축하자'는 주제로 강연을 시작합니다. 일반적으로 복잡한 사용자 인터페이스(UI) 및 사용자 경험(UX)은 React와 같은 SPA(Single Page Application) 프레임워크로만 구현 가능하다고 인식되지만, 발표자는 이러한 통념에 의문을 제기하며 Hotwire의 잠재력과 실제 적용 사례를 소개합니다. 본 강연은 Hotwire가 관리자 화면뿐만 아니라 사용자 화면에서도 충분히 강력한 솔루션이 될 수 있음을 증명하는 데 초점을 맞춥니다.

Hotwire의 사용자 화면 적용 사례 및 UX 우위

  • 실제 서비스 활용: Ruby on Rails의 창시자인 DHH의 Basecamp와 일본의 유명 레시피 서비스 Cookpad는 Hotwire를 사용자 화면에 적극적으로 활용하고 있습니다. 이는 Hotwire가 복잡한 사용자 경험을 제공하는 데 충분히 효과적임을 입증합니다.

  • 페이지 전환 UX:
    • React의 SSR(Server-Side Rendering) 페이지는 종종 느린 로딩으로 인해 ‘답답함’을 유발할 수 있습니다.
    • Hotwire의 Turbo Drive는 기본적으로 로딩 UI를 표시하고 SWR(Stale-While-Revalidate) 방식의 캐싱을 제공하여, 페이지 전환 시 즉각적인 반응과 부드러운 경험을 선사합니다. 오래된 정보를 먼저 보여주고 백그라운드에서 새로운 데이터를 가져와 업데이트하는 방식으로 사용자 대기 시간을 최소화합니다.
  • 탭 메뉴 UX:
    • React에서 복잡한 탭 메뉴의 로딩 화면을 구현하려면 useEffect나 App Router의 Parallel Routes 등 복잡한 기법이 필요합니다.
    • Turbo Frames는 호버 시 다음 페이지를 미리 가져오는 프리페치(prefetch) 기능을 통해 순간적인 화면 전환을 가능하게 합니다. 이는 React에서 유사한 기능을 구현하는 것보다 훨씬 간단하고 효율적입니다.
  • JavaScript 활용: Hotwire는 JavaScript를 사용하지 않는 것이 아니라, 오히려 적극적으로 활용하여 사용자 경험을 최적화합니다. 예를 들어, 모달 콘텐츠는 Turbo로 서버에서 가져오되, 모달 틀과 로딩 화면은 Stimulus로 즉시 표시하여 ‘느린 느낌’ 없이 ‘부드러운 느낌’을 제공합니다.

Hotwire를 통한 복잡한 UI/UX 구현 전략

  • React 컴포넌트 임베딩: Hotwire만으로 구현하기 어려운 React 전용의 복잡한 UI가 있다면, Stimulus를 활용하여 React 컴포넌트를 Hotwire 페이지 내에 쉽게 임베딩할 수 있습니다. Turbo Mount와 같은 라이브러리도 Stimulus를 기반으로 합니다.

  • Stimulus의 valueState를 활용한 상태 관리:
    • React가 상태(State)와 단방향 데이터 흐름에 집중하는 것처럼, Stimulus의 valueState는 유사한 패턴을 구현할 수 있도록 돕습니다.
    • HTML 속성으로 상태를 선언하고, 값이 변경되면 자동으로 콜백 함수(ValueChanged)가 호출되어 UI를 업데이트하는 방식으로 선언적인 UI 갱신을 가능하게 합니다. 발표자는 Apple Store의 제품 선택 화면을 모사하여 이 방식을 시연했습니다.
  • 전역 상태 관리: Zustand와 같은 Vanilla JS 기반의 전역 상태 관리 라이브러리를 Stimulus와 함께 사용하면, 여러 Hotwire 컨트롤러 간의 복잡한 통신을 깔끔하게 처리할 수 있습니다. 이를 통해 클라이언트 측 임시 저장 기능이나 다단계 폼과 같은 고급 기능을 쉽게 구현할 수 있습니다.

UI/UX 복잡성에 대한 재고

  • 진정한 복잡성: 흔히 복잡하다고 여겨지는 UI(예: 오프라인 지원, 이력 관리)는 React 유무와 관계없이 JavaScript로 구현해야 하는 경우가 많습니다.

  • UI 라이브러리 대안: Tailwind CSS 기반의 Tailwind UI나 Tailwind UI Elements와 같은 도구들은 Vanilla JS 기반으로 React의 UI 컴포넌트 라이브러리가 제공하는 이점을 대체할 수 있는 강력한 대안으로 부상하고 있습니다.

  • React의 탄생 배경과 Hotwire의 유사성: React는 대시보드와 같이 여러 필터 조건에 따라 실시간으로 데이터가 업데이트되는 복잡한 화면을 위해 탄생했습니다. 이는 ‘메디에이터 패턴’으로 해석될 수 있으며, Hotwire(Stimulus)도 valueState와 단방향 데이터 흐름을 통해 유사한 방식으로 이러한 문제를 해결할 수 있습니다.

결론

결론적으로 발표자는 Hotwire가 관리자 화면에만 적합하다는 통념을 깨고, 사용자 화면에서도 복잡하고 고급스러운 UI/UX를 충분히 구현할 수 있는 강력한 프레임워크임을 강조합니다. React와 Hotwire의 본질적인 차이는 UI 구현 자체의 난이도보다 JSON API 관리의 복잡성에 있다고 역설하며, Hotwire가 JSON 규칙을 최소화하여 개발 복잡도를 낮출 수 있음을 시사합니다. Stimulus의 `valueState`와 전역 상태 관리 라이브러리 활용을 통해 React의 장점인 상태 기반 단방향 데이터 흐름을 Hotwire에서도 효과적으로 적용할 수 있음을 보여주며, 개발자들이 사용자 화면에도 Hotwire를 적극적으로 채택할 것을 강력히 권장합니다.

관련 글들

웹 컴포넌트를 활용한 Hotwire 및 프론트엔드 프레임워크 컴포넌트 통합 전략

Hotwire 기반 Rails 서비스에 웹 컴포넌트(Web Components)를 활용하여 기존 Angular UI 컴포넌트를 점진적으로 통합하는 방안을 제시합니다.

11/25 읽어보기 →

Hotwire와 Ruby on Rails 7을 활용한 스타트업 프론트엔드 개발 경험

Hotwire를 통해 Ruby on Rails 7 기반 애플리케이션의 프론트엔드 개발 효율성을 극대화한 경험을 공유합니다.

01/25 읽어보기 →

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

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

01/13 읽어보기 →

Action View의 진화: Herb를 통한 Rails 뷰 레이어 개선

Herb는 HTML ERB 파일을 위한 새로운 파서, 포매터, 린터, 언어 서버 등 통합 도구 생태계로, Rails 뷰 레이어의 개발 경험을 혁신합니다.

07/24 읽어보기 →

댓글 0

로그인이 필요합니다

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

로그인 하러 가기

아직 댓글이 없습니다

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