[React] Single Step Form vs Multi Step Form 어떤 폼이 더 좋을까?

배경

우리는 많은 웹사이트에서 Multi Step Form을 본 적이 있다. 여러 UI에 걸쳐서 폼을 작성하기보다는 Single Step Form으로 한 번에 작성하도록 구현하는 것이 개발하기 쉬울텐데 왜 Multi Step Form으로 만드는 걸까? 하는 생각이 들었다. 그래서 Single Step Form과 Multi Step Form의 차이점 및 장단점을 살펴보고 나만의 기준을 정하고자 한다. 각 장단점은 나의 주관적인 생각으로 작성되었다.

Single Step Form

Single Step Form은 한 페이지에 모든 내용을 표시하는 일반적인 문서와 같은 Form이다.

아래 이미지와 같이 플랫폼이 요구하는 내용을 한 페이지에 모두 표시한 경우, 이는 Single Step Form에 해당된다.

Single Step Form 장단점

장점

1. Form의 구조가 단순하기 때문에 개발 및 유지보수하기 쉽다.
2. 필요한 모든 정보를 한 번에 작성할 수 있다.

단점

1. 한 번에 많은 질문이 쏟아지면 사용자가 부담을 느껴 이탈할 가능성이 높아진다.
2. 한 페이지에 많은 정보를 다루기 때문에 반응형 작업에 불리하다.
3. 사용자의 이전 답변에 따라 다른 질문을 보여주는 Form을 구현하기 어렵다.

Multi Step Form

Multi Step Form은 여러 단계에 걸쳐 Form을 작성하도록 하는 방식이다.

아래 이미지와 같이 하나의 세션에 일부 질문만 보여주고 여러 단계에 걸쳐 플랫폼이 요구하는 내용을 작성하는 것이다. 위 Single Step Form 이미지에 비해 확실히 크기가 작은 것을 볼 수 있다.(참고로 아래 Form이 작성하는 내용이 더 많다.)

Multi Step Form의 장단점

장점

1. 적은 공간으로 필요한 내용을 표시할 수 있어 반응형 작업에 유리하다.
2. 사용자가 한 번에 많은 내용을 인지하지 않기 때문에 사용자의 부담을 줄여 이탈률이 감소한다.
3. 이전 답변에 대해 다른 질문을 보여주는 작업이 가능하다.

단점

1. 구조가 복잡하여 개발 및 유지보수가 힘들다.
2. 이전 작성 내용을 참조할 수 없는 경우 사용자에게 혼란을 야기할 수 있다.

결론

개인적인 의견으로는 Single Step Form의 주요 장점은 "개발 및 유지보수가 용이하다"는 점이고, Multi Step Form의 주요 장점은 "사용자 경험을 개선한다"는 점이다. 각각 DX 중점, UX 중점으로 장점이 나뉘어져 있다. 그래서 나는 각 종류의 Form을 사용하는 기준을 아래와 같이 결정 하였다.

Single Step Form을 사용하는 경우

1. 작성해야 될 필드가 적은 경우
2. 한 번에 모든 질문을 보여주는 것이 좋은 경우

Multi Step Form을 사용하는 경우

1. 작성해야 될 필드가 많은 경우
2. 설문, 지원서와 같이 여러 정보를 입력받아야 하는 경우