회원가입 이탈률의 주범, SMS 인증 폼

회원가입 과정에서 유저가 가장 많이 이탈하는 구간이 어디일까요? 바로 '휴대폰 본인인증' 단계입니다. 개발자 입장에서도 SMS 인증 폼은 까다로운 과제입니다. 전화번호 유효성 검사, 인증번호 발송 상태 관리, 3분 타이머 구현, 그리고 시간 초과 시의 예외 처리까지... 기본 React 상태(useState)만으로 구현하다 보면 순식간에 코드가 스파게티처럼 꼬이게 됩니다.

이 글에서는 **React Hook Form(RHF)**과 Zod, 그리고 간단한 Custom Hook을 활용하여 상태 관리 지옥에서 벗어나 완벽한 SMS 인증 폼을 구현하는 방법을 알아봅니다.

---

해결 방안 요약

이 튜토리얼을 통해 다음 세 가지를 결합한 코드를 완성하게 됩니다.

1. Zod: 전화번호(010 정규식) 및 인증번호(6자리) 유효성 검사
2. Custom Timer Hook: setInterval을 활용한 3분(180초) 타이머 캡슐화
3. React Hook Form: 불필요한 리렌더링 없는 깔끔한 폼 상태 관리

---

단계별 구현 가이드

1. Zod 스키마 정의하기

먼저 폼 데이터의 형태와 검증 규칙을 정의합니다. Zod를 사용하면 복잡한 정규식 검증도 직관적으로 처리할 수 있습니다.

import * as z from 'zod';

export const smsSchema = z.object({
  phone: z.string().regex(/^010\d{8}$/, "'-' 없이 010으로 시작하는 11자리 번호를 입력해주세요."),
  code: z.string().length(6, "6자리 인증번호를 입력해주세요.").optional(),
});

export type SmsFormValues = z.infer;

2. 타이머 Custom Hook (useTimer) 만들기

타이머 로직을 컴포넌트 내부에 두면 코드가 지저분해집니다. useTimer라는 커스텀 훅으로 분리하여 재사용성을 높여봅시다.

import { useState, useEffect, useCallback } from 'react';

export const useTimer = (initialSeconds: number) => {
  const [timeLeft, setTimeLeft] = useState(initialSeconds);
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    let interval: NodeJS.Timeout;
    if (isActive && timeLeft > 0) {
      interval = setInterval(() => {
        setTimeLeft((prev) => prev - 1);
      }, 1000);
    } else if (timeLeft === 0) {
      setIsActive(false);
    }
    return () => clearInterval(interval);
  }, [isActive, timeLeft]);

  const start = useCallback(() => {
    setTimeLeft(initialSeconds);
    setIsActive(true);
  }, [initialSeconds]);

  const stop = useCallback(() => {
    setIsActive(false);
  }, []);

  const formatTime = () => {
    const minutes = Math.floor(timeLeft / 60);
    const seconds = timeLeft % 60;
    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
  };

  return { timeLeft, isActive, start, stop, formatTime };
};

3. 전체 폼 완성하기

이제 RHF와 만들어둔 훅을 조합하여 UI를 구성합니다. trigger 메서드를 사용하면 전체 폼을 제출하지 않고도 '전화번호' 필드만 단독으로 검증할 수 있습니다.

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { smsSchema, SmsFormValues } from './schema';
import { useTimer } from './useTimer';

export const SmsVerificationForm = () => {
  const [isSent, setIsSent] = useState(false);
  const { timeLeft, isActive, start, formatTime, stop } = useTimer(180); // 3분 타이머

  const { register, handleSubmit, formState: { errors }, trigger, getValues } = useForm({
    resolver: zodResolver(smsSchema),
    mode: 'onChange',
  });

  // 인증번호 발송 핸들러
  const handleSendCode = async () => {
    const isPhoneValid = await trigger("phone");
    if (!isPhoneValid) return;

    const phone = getValues("phone");
    
    // TODO: 백엔드 API 호출 (POST /send)
    console.log(`Sending SMS to ${phone}`);
    
    setIsSent(true);
    start();
  };

  // 최종 인증 검증 핸들러
  const onSubmit = async (data: SmsFormValues) => {
    if (!isActive && timeLeft === 0) {
      alert("인증 시간이 만료되었습니다. 다시 요청해주세요.");
      return;
    }

    // TODO: 백엔드 API 호출 (POST /verify)
    console.log("Verifying code:", data.code);
    
    stop();
    alert("인증이 완료되었습니다!");
  };

  return (
    
      <div>
        휴대폰 번호
        <div>
          
          
            {isSent ? "재전송" : "인증 요청"}
          
        </div>
        {errors.phone &amp;&amp; <p>{errors.phone.message}</p>}
      </div>

      {isSent &amp;&amp; (
        <div>
          인증번호
          <div>
            
            <span>
              {formatTime()}
            </span>
          </div>
          {errors.code &amp;&amp; <p>{errors.code.message}</p>}
        </div>
      )}

      
        인증 확인
      
    
  );
};

---

💡 Tips & Best Practices

• 자동 포맷팅 주의: 유저가 -를 입력하는 경우를 대비해 z.string().transform(v => v.replace(/-/g, ''))를 사용하여 사전에 -를 제거해주는 로직을 스키마에 추가하면 UX를 더욱 개선할 수 있습니다.
• 타이머 만료 처리: 타이머가 만료되면 폼 제출 버튼(submit)을 disabled 처리하여 불필요한 API 호출을 막는 것이 좋습니다.

---

프론트엔드는 완벽합니다. 그럼 백엔드 API는요?

위 코드로 완벽한 UI와 상태 관리를 구현하셨습니다. 이제 실제 유저의 휴대폰으로 문자를 발송할 SMS API만 연동하면 됩니다.

하지만 기존 SMS 서비스들을 찾아보면 사업자등록증, 이용증명원 등 복잡한 서류 제출을 요구하는 경우가 많습니다. 토이 프로젝트, 1인 개발, 스타트업 MVP를 빠르게 런칭해야 하는 개발자에게는 너무 큰 진입장벽이죠.

이럴 때 **초간단 SMS 인증 API, EasyAuth(이지어스)**를 사용해 보세요!

• 🚫 서류 제출 완전 면제: 사업자등록증 없이 가입 즉시 시작
• ⚡ 5분 연동: 복잡한 설정 없이 POST /send, POST /verify 두 개의 엔드포인트로 끝!
• 🤖 자동 발신번호: 번호 사전 등록 과정이 생략되어 즉시 발송 가능
• 💰 파격적인 가격: 기존 30~50원 대비 저렴한 건당 15~25원
• 🎁 무료 체험: 가입 즉시 테스트용 10건 무료 제공

EasyAuth 연동 예시 (Next.js / Express 어디서든)

// POST /send - 인증번호 발송
await fetch('https://api.easyauth.co.kr/send', {
  method: 'POST',
  headers: { 'Authorization': 'Bearer YOUR_API_KEY' },
  body: JSON.stringify({ phone: data.phone })
});

프론트엔드 상태 관리 지옥은 React Hook Form으로, 백엔드 서류 제출 지옥은 EasyAuth로 해결하세요. 지금 바로 가입하고 무료 10건으로 여러분의 프로젝트에 SMS 인증을 빠르게 붙여보세요!