Turbo를 활용한 사용자 인터페이스 구축 시, 폼 제출 후 서버 응답을 기다리는 동안 시각적 변화가 없어 사용자 경험(UX)이 저하될 수 있습니다. 특히 모달 내에서나 네트워크 연결이 느린 환경에서 이러한 대기 상태는 더욱 두드러집니다. 본문은 이러한 문제를 해결하기 위해 폼 제출 버튼에 작은 로딩 스피너를 추가하여, 대기 중에도 시스템이 작동하고 있음을 사용자에게 알리는 방법을 제안합니다. 이는 Stimulus 컨트롤러를 사용하여 구현하며, 폼 제출 과정에 방해 없이 시각적 피드백만을 제공하는 데 초점을 맞춥니다.
제안된 해결책은 간단한 Stimulus 컨트롤러를 활용하는 것입니다. 이 컨트롤러는 폼 제출 이벤트를 감지하여 연결된 버튼의 상태를 업데이트합니다. submit 메서드 내에서 버튼 요소를 타겟으로 지정하고, 현재 버튼의 너비와 높이를 측정하여 저장합니다. 이후 이 저장된 크기를 버튼 스타일에 적용하여, 내용 변경 시 버튼의 크기가 변하는 것을 방지합니다. 버튼의 innerHTML을 로딩 스피너를 나타내는 HTML 구조로 변경하고, 동시에 버튼을 disabled 상태로 만듭니다. 이 과정은 폼 제출 자체를 중단시키지 않고, 순수하게 버튼의 시각적 상태만을 변경합니다. 비활성화된 버튼에 cursor: wait;와 같은 스타일을 추가하여 사용자에게 대기 중임을 더욱 명확히 알릴 수 있습니다. 이 컨트롤러는 Rails의 form_tag 헬퍼와 함께 data-controller, data-action, data-lazy-form-target 속성을 사용하여 쉽게 통합할 수 있습니다. 간단한 경우에는 Stimulus 컨트롤러 없이 data-turbo-submits-with 속성을 사용하는 대안도 고려할 수 있습니다.
결론적으로, Turbo Forms에 Stimulus 기반의 로딩 스피너를 추가하는 것은 사용자에게 즉각적인 시각적 피드백을 제공하여 대기 시간을 보다 인지 가능하게 만들고, 전반적인 사용자 경험을 크게 향상시키는 효과적인 방법입니다. 이 기법은 구현이 비교적 간단하며, 기존 폼 제출 로직에 최소한의 영향만을 미치면서도 사용자 친화적인 인터페이스를 구축하는 데 기여합니다. 이를 통해 사용자는 폼 제출 후 시스템이 응답 중임을 명확히 인지하고 불필요한 혼란이나 답답함을 줄일 수 있습니다.