이 아티클에서 제안하는 다단계 온보딩 폼은 작업 공간 이름, 사용 사례, 동료 초대, 테마 선호도와 같은 핵심 정보를 각 화면당 하나의 입력 필드(일부 건너뛰기 가능)로 구성하여 간결하고 명확하게 데이터를 수집합니다. 구현을 위해 먼저 config/routes.rb
에서 단일 리소스 패턴(resource :onboardings
)과 사용자 친화적인 URL(get-started
)을 설정하고, app/controllers/onboardings_controller.rb
에서 기본적인 show
및 create
액션을 정의합니다.
가장 중요한 부분 중 하나는 폼 객체의 활용입니다. 데이터베이스 테이블에 직접 매핑되지 않는 복잡한 폼을 처리하기 위해 ActiveModel::Model
을 포함하는 일반 Ruby 객체(PORO)를 폼 객체로 사용합니다. 이 Onboarding
폼 객체는 ActiveModel::Attributes
를 통해 속성을 정의하고, save
메서드 내에서 각 속성별 데이터 처리를 담당하는 프라이빗 메서드(예: create_workspace
, add_usecase_to
)를 호출하여 코드의 응집도를 높입니다.
온보딩 프로세스의 각 단계를 정의하기 위해 Onboarding::Steps
모듈을 Onboarding
클래스에 포함(concern)시킵니다. 이 모듈은 각 단계의 ID, 제목, 설명, 필드 정보를 포함하는 배열을 반환하며, 이를 통해 뷰 코드의 변경 없이도 단계를 쉽게 수정하거나 추가할 수 있는 유연성을 확보합니다. 각 입력 필드 유형(예: text_field
, select
)은 전용 부분 템플릿으로 분리되어 뷰 코드를 깔끔하게 유지합니다.
메인 뷰 템플릿(app/views/onboardings/show.html.erb
)에서는 form_with
헬퍼를 사용하여 폼을 구성하고, @onboarding.steps.each_with_index
를 통해 각 단계를 순회하며 해당 내용을 렌더링합니다. class_names
와 같은 Rails 헬퍼를 활용하여 동적으로 CSS 클래스를 적용하여 시각적 효과를 높입니다.
마지막으로, 단계 탐색 및 진행률 표시기를 관리하기 위해 간단한 Stimulus 컨트롤러를 사용합니다. 이 컨트롤러는 static targets
와 static values
를 정의하고, stepValueChanged
콜백을 통해 step
값의 변경에 따라 UI를 자동으로 업데이트합니다. 이를 통해 수동적인 이벤트 처리 없이도 효율적인 사용자 인터페이스를 구현할 수 있습니다.
이러한 구조를 통해 개발자는 유효성 검사/오류 피드백 개선이나 온보딩 완료 여부 추적(예: Rails Vault 젬 사용)과 같은 추가 기능을 쉽게 통합할 수 있습니다.