다단계 폼 제작 가이드｜Multi-Step Form으로 UX 완성하기

글쓴이 /

한 번에 많은 정보를 입력해야 하는 폼은 사용자에게 큰 부담을 줄 수 있습니다. 이를 해결하기 위해 다단계(Multi-Step) 폼을 사용하면 입력 과정을 여러 단계로 나누어 사용자 피로도를 줄이고 완성도를 높일 수 있습니다. 이번 글에서는 HTML, CSS, JavaScript를 활용한 다단계 폼 제작 방법을 실무 예제 중심으로 소개하겠습니다.

다단계 폼의 필요성

다단계 폼은 사용자에게 작업 진행 흐름을 시각적으로 안내하고, 한 번에 입력해야 할 부담을 줄여줍니다.

활용 사례

  • 회원 가입 프로세스
  • 항공권/호텔 예약 시스템
  • 설문 조사 및 신청서
  • 쇼핑몰 결제 단계

장점

  1. 단계별로 정보를 나눠 입력 → 집중도 향상
  2. 진행 상황 표시로 이탈률 감소
  3. 오류 입력 시 빠른 수정 가능

💡 RAO TIP
단계 수는 최소화하고, 2~4단계가 적당합니다.
너무 많은 단계는 사용자 혼란을 야기할 수 있습니다.

기본 HTML 구조

간단한 3단계 폼을 위한 HTML 구조입니다.

<form id="multiStepForm">
  <!-- Step 1 -->
  <div class="form-step active">
    <h2>1단계: 기본 정보</h2>
    <input type="text" placeholder="이름" required>
    <input type="email" placeholder="이메일" required>
    <button type="button" class="next">다음</button>
  </div>

  <!-- Step 2 -->
  <div class="form-step">
    <h2>2단계: 주소 정보</h2>
    <input type="text" placeholder="주소" required>
    <input type="text" placeholder="우편번호" required>
    <button type="button" class="prev">이전</button>
    <button type="button" class="next">다음</button>
  </div>

  <!-- Step 3 -->
  <div class="form-step">
    <h2>3단계: 확인 및 제출</h2>
    <p>입력하신 정보를 확인 후 제출해 주세요.</p>
    <button type="button" class="prev">이전</button>
    <button type="submit">제출</button>
  </div>
</form>
HTML

기본 스타일 (CSS)

단계별 폼을 깔끔하게 보여주기 위한 간단한 스타일입니다.

.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

button {
  margin-top: 10px;
  padding: 8px 16px;
  border: none;
  background: #4caf50;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #45a049;
}
CSS

설명

  • .form-step.active 클래스로 현재 활성화된 단계를 표시
  • CSS 전환 효과를 추가하면 UX가 한층 더 좋아집니다.

JavaScript로 단계 전환 구현

Next와 Prev 버튼으로 단계 전환을 제어합니다.

const steps = document.querySelectorAll('.form-step');
const nextBtns = document.querySelectorAll('.next');
const prevBtns = document.querySelectorAll('.prev');
let currentStep = 0;

function showStep(step) {
  steps.forEach((el, index) => {
    el.classList.toggle('active', index === step);
  });
}

nextBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    if (currentStep < steps.length - 1) {
      currentStep++;
      showStep(currentStep);
    }
  });
});

prevBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    if (currentStep > 0) {
      currentStep--;
      showStep(currentStep);
    }
  });
});

showStep(currentStep);
JavaScript

설명

  • showStep() 함수로 현재 단계만 표시
  • 배열 인덱스를 기반으로 단계 이동 제어

진행 상태 표시바 추가

시각적으로 현재 단계를 보여주는 Progress Bar를 추가합니다.

<div id="progressBar">
  <div id="progress"></div>
</div>
HTML
#progressBar {
  width: 100%;
  background: #eee;
  border-radius: 8px;
  margin-bottom: 15px;
  height: 8px;
  overflow: hidden;
}

#progress {
  height: 8px;
  width: 0%;
  background: #4caf50;
  transition: width 0.3s ease;
}
CSS

JavaScript 업데이트 코드

function updateProgress() {
  const progress = document.getElementById('progress');
  const percent = ((currentStep + 1) / steps.length) * 100;
  progress.style.width = percent + '%';
}

nextBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    if (currentStep < steps.length - 1) {
      currentStep++;
      showStep(currentStep);
      updateProgress();
    }
  });
});

prevBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    if (currentStep > 0) {
      currentStep--;
      showStep(currentStep);
      updateProgress();
    }
  });
});

updateProgress();
JavaScript

💡 RAO TIP
진행률 바와 단계 숫자를 함께 표시하면
사용자가 현재 몇 %나 진행했는지 직관적으로 이해할 수 있습니다.

UX 향상을 위한 추가 팁

  1. 단계별 유효성 검사
    • 각 단계 이동 전 필수 입력 항목 확인
  2. 저장 기능 추가
    • 긴 폼에서는 중간 저장 기능을 제공하여 이탈 방지
  3. 모바일 최적화
    • 단계 전환 시 화면 전환 애니메이션 추가
  4. 동적 단계 제어
    • 사용자 선택에 따라 단계 수를 유동적으로 변경

💡 RAO TIP
각 단계 완료 시 SweetAlert2를 사용해
"1단계 완료! 다음 단계로 이동합니다." 같은 피드백을 주면
사용자 만족도가 더욱 높아집니다.

마무리

다단계 폼은 복잡한 정보를 효율적으로 입력할 수 있도록 돕는 핵심 UX 도구입니다.
이번 글에서는 기본 HTML, CSS, JavaScript로 다단계 폼을 구현했습니다.
다음 글에서는 이 폼과 결합할 수 있는 추가 기능들을 통해 더 완성도 높은 폼 UX를 구현해보겠습니다.

Summary in English

Build an AutoComplete input UI to enhance form UX. Learn how to implement basic functionality, connect it with Ajax for dynamic data, and combine it with SweetAlert2 for real-world, user-friendly interfaces.

“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”

대표 사진: Unsplash의Domenico Loia

위로 스크롤