본 튜토리얼은 Ruby on Rails 8, Solid Queue, Solid Cable, StimulusJS, ruby_llm, ruby_llm-schema, TailwindCSS 및 DaisyUI를 사용하여 다음과 같은 단계로 진행됩니다.
1. Rails 애플리케이션 초기 설정
rails new 명령어를 사용하여 phrase_cycler 애플리케이션을 생성하고, sqlite3 데이터베이스, tailwind CSS, importmap JavaScript, stimulus를 활성화합니다. 이후 resources 컨트롤러를 생성하고 라우트를 resources :resources, only: [ :index, :create ] 및 root "resources#index"로 설정하여 기본적인 웹 페이지와 폼 제출 경로를 정의합니다.
2. 사용자 인터페이스 구축
TailwindCSS와 DaisyUI를 통합하여 깔끔한 UI를 구현합니다. app/views/resources/index.html.erb에 메시지 입력 필드와 제출 버튼을 포함하는 폼을 생성하고, 로딩 상태를 표시할 div 요소(id="resource-status-container")를 추가합니다.
3. 하드코딩된 로딩 문구 및 Stimulus 연동
ResourcesController#create 액션에서 초기 로딩 메시지(예: “Concocting”, “Prepping”)를 담은 _loader.html.erb 부분 템플릿을 Turbo Stream으로 즉시 렌더링합니다. StimulusJS 컨트롤러(PhraseCycler)를 생성하여 이 문구들을 2초마다 순환하도록 구현하고, _loader.html.erb에 data-controller 및 data-phrase-cycler-phrases-value 속성을 추가하여 Stimulus와 연동합니다.
4. 느린 프로세스 백그라운드 작업 시뮬레이션
SlowProcessJob을 생성하여 sleep 20으로 20초간의 지연을 시뮬레이션합니다. 작업 완료 후 Turbo::StreamsChannel.broadcast_update_to를 통해 resource_channel로 _success.html.erb 또는 _failure.html.erb 부분 템플릿을 스트리밍하여 resource-status-container를 업데이트합니다. app/views/resources/index.html.erb에 turbo_stream_from "resource_channel"을 추가하여 뷰가 스트림을 구독하도록 설정합니다.
5. AI 기반 로딩 문구 생성 (RubyLLM 활용)
GenerateLoadingPhrasesJob을 생성하고 ruby_llm gem을 설치하여 OpenAI 등 LLM과 연동합니다. ruby_llm-schema gem을 사용하여 PhraseSchema를 정의함으로써 AI 응답이 문자열 배열 형태의 구조화된 출력을 보장하도록 합니다. fetch_phrases 메서드에서 메시지를 LLM에 전달하고, stream_to_target 메서드를 통해 AI가 생성한 문구들을 _loader.html.erb 부분 템플릿으로 resource_channel에 스트리밍합니다. GenerateLoadingPhrasesJob은 SlowProcessJob보다 높은 우선순위로 실행되도록 설정하여 AI 문구가 먼저 로딩 화면에 반영될 수 있도록 합니다.