다단계 폼 모델링
다단계 폼 구현을 위해 별도의 ‘마법사’ 관련 Gem을 사용하지 않고, Rails의 기본 개념에 충실했습니다. 핵심은 단일 폼 객체를 사용하여 전체 UI 마법사 로직을 캡슐화하고, 상태 머신과 유사한 추상화를 통해 흐름을 정의하는 것입니다. 컨트롤러 액션은 Active Record 모델에 대한 일반적인 작업과 유사하게 설계되어, 향후 폼 구조가 변경되더라도 백엔드 코드의 유연성을 확보할 수 있도록 했습니다. 이는 서버와 클라이언트 간의 인터페이스를 단순화하고 유지보수성을 높이는 데 기여했습니다.
DOM 모핑을 통한 부드러운 UI 업데이트
사용자 인터랙션 시 실시간 미리보기를 제공하기 위해 Turbo Streams의 method: "morph"를 활용한 DOM 모핑을 도입했습니다. 이는 전체 HTML을 교체하는 대신 변경된 부분만 효율적으로 업데이트하여 UI 지연을 줄이고 부드러운 사용자 경험을 제공합니다. 특히, data-turbo-morph-permanent-attrs와 같은 커스텀 속성을 도입하여 모핑 과정에서 특정 HTML 속성(예: data-accordion-open-value)의 상태가 유지되도록 처리했으며, 많은 서드파티 Stimulus 컨트롤러가 모핑에 최적화되어 있지 않다는 점을 인지하고 필요한 경우 수정 및 기여(PR 제출)를 통해 개선했습니다. AG Grid와 같은 JavaScript 기반 컴포넌트는 Stimulus values와 변경 콜백을 활용하여 그리드 인스턴스를 재사용하면서 서버로부터 전달된 데이터로 업데이트함으로써 성능을 최적화했습니다.
중첩 폼 처리 전략
웹 표준상 중첩된 <form> 태그가 허용되지 않는 문제를 해결하기 위해, 단일 폼 내에서 여러 ‘미니 폼’의 제출을 처리하는 독창적인 방법을 사용했습니다. Rails의 폼 객체에 new_interval_type과 같은 ‘활성화’ 속성을 두어, 특정 버튼이 클릭될 때만 해당 필드가 서버로 제출되도록 했습니다. 이는 버튼의 name 및 value 속성을 활용하는 HTML의 기본 동작을 영리하게 이용한 것입니다. 이 접근 방식은 fetch()를 통한 프로그래밍 방식의 제출이나 별도의 컨트롤러 액션을 만드는 복잡성을 피하고, Rails의 폼 객체 유연성을 극대화하여 코드를 간결하게 유지할 수 있었습니다.
View Transitions를 활용한 시각적 개선
사용자 경험을 더욱 향상시키기 위해 turbo-view-transitions 라이브러리와 브라우저의 View Transition API를 사용하여 마법사 단계 간의 부드러운 슬라이딩 애니메이션을 구현했습니다. 특히, ‘다음’ 또는 ‘이전’ 버튼 클릭에 따라 다른 전환 이름(wizard-back, wizard)을 동적으로 적용하여 방향성 있는 애니메이션을 구현했습니다. 이는 폼 제출 이벤트(handleSubmit)에서 event.submitter 속성을 활용하여 어떤 버튼이 폼을 제출했는지 감지하고, 이에 따라 HTML 요소의 data-turbo-stream-transition 속성을 업데이트하는 방식으로 이루어졌습니다. 이로써 사용자에게 시각적으로 명확하고 매끄러운 전환 경험을 제공할 수 있었습니다.