사이드 프로젝트나 MVP를 개발할 때, 회원가입 단계에서 개발자들을 가장 지치게 하는 기능은 단연 **'SMS 본인인증'**입니다. 기존 API 서비스를 연동하려고 하면 시작부터 답답한 벽에 부딪힙니다.

"사업자등록증과 이용증명원을 제출해주세요." "발신번호 사전 등록 서류가 필요합니다." "심사에 3~5일이 소요됩니다."

서버 띄우고 코딩할 시간도 부족한데 복잡한 행정 절차에 발목이 잡히는 것이죠. 오늘 이 글에서는 복잡한 서류 제출 없이, 가입 후 5분 만에 바로 연동할 수 있는 초간단 SMS API **EasyAuth(이지어스)**를 활용하여 Next.js(App Router) 환경에서 SMS 인증을 구현하는 방법을 알아봅니다.

이 글에서 배울 내용

• Next.js 14/15 App Router 환경에서의 API Route(Route Handlers) 세팅
• EasyAuth API를 활용한 인증번호 발송 (/send) 및 검증 (/verify) 구현
• 복사해서 바로 쓸 수 있는 사용자 친화적인 클라이언트 회원가입 폼(Form)

---

Step 1: 환경 변수 설정

먼저 EasyAuth에 가입(10건 무료 제공)하고 발급받은 API 키를 Next.js 프로젝트의 .env.local 파일에 저장합니다.

EASYAUTH_API_KEY=your_api_key_here

Step 2: 서버사이드 API Route 구현

Next.js의 App Router를 사용하여 인증번호 발송과 검증을 담당할 두 개의 API 엔드포인트를 만듭니다. 클라이언트에서 외부 API를 직접 호출하면 API 키가 탈취될 위험이 있으므로, 반드시 서버 환경(Route Handler)을 거쳐야 합니다.

1. 인증번호 발송 API (app/api/send-sms/route.ts)

EasyAuth의 /send 엔드포인트를 호출하여 사용자에게 인증번호를 보냅니다.

import { NextResponse } from 'next/server';

export async function POST(req: Request) {
  try {
    const { phone } = await req.json();

    // EasyAuth API 발송 요청
    const response = await fetch('https://api.easyauth.kr/send', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.EASYAUTH_API_KEY}`
      },
      body: JSON.stringify({ to: phone })
    });

    if (!response.ok) {
      return NextResponse.json({ error: 'SMS 발송에 실패했습니다.' }, { status: 400 });
    }

    return NextResponse.json({ success: true, message: '인증번호가 발송되었습니다.' });
  } catch (error) {
    return NextResponse.json({ error: '서버 내부 오류가 발생했습니다.' }, { status: 500 });
  }
}

2. 인증번호 검증 API (app/api/verify-sms/route.ts)

사용자가 입력한 코드를 EasyAuth의 /verify 엔드포인트로 보내 올바른지 확인합니다.

import { NextResponse } from 'next/server';

export async function POST(req: Request) {
  try {
    const { phone, code } = await req.json();

    // EasyAuth API 검증 요청
    const response = await fetch('https://api.easyauth.kr/verify', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.EASYAUTH_API_KEY}`
      },
      body: JSON.stringify({ to: phone, code })
    });

    if (!response.ok) {
      return NextResponse.json({ error: '인증번호가 일치하지 않습니다.' }, { status: 400 });
    }

    return NextResponse.json({ success: true, message: '인증이 완료되었습니다.' });
  } catch (error) {
    return NextResponse.json({ error: '서버 내부 오류가 발생했습니다.' }, { status: 500 });
  }
}

Step 3: 클라이언트 회원가입 폼 구현

이제 사용자가 전화번호를 입력하고 인증번호를 확인할 수 있는 UI를 구성해 보겠습니다. (app/signup/page.tsx)

"use client";

import { useState } from 'react';

export default function SignupPage() {
  const [phone, setPhone] = useState("");
  const [code, setCode] = useState("");
  const [step, setStep] = useState(1);
  const [status, setStatus] = useState("");

  const handleSendSms = async () => {
    setStatus("발송 중...");
    const res = await fetch("/api/send-sms", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ phone }),
    });

    if (res.ok) {
      setStep(2);
      setStatus("인증번호가 발송되었습니다. (3분 이내 입력)");
    } else {
      setStatus("발송 실패. 번호를 다시 확인해주세요.");
    }
  };

  const handleVerifySms = async () => {
    setStatus("검증 중...");
    const res = await fetch("/api/verify-sms", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ phone, code }),
    });

    if (res.ok) {
      setStep(3);
      setStatus("✅ 휴대폰 인증이 완료되었습니다!");
    } else {
      setStatus("❌ 인증번호가 일치하지 않습니다.");
    }
  };

  return (
    <div>
      <h1>회원가입 본인인증</h1>
      <div>
        <div>
          휴대폰 번호
          <div>
             setPhone(e.target.value)}
              placeholder="'-' 없이 숫자만 입력"
              className="border border-gray-300 p-2 flex-1 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
              disabled={step === 3}
            /&gt;
            
              {step === 1 ? "발송" : "재발송"}
            
          </div>
        </div>

        {step &gt;= 2 &amp;&amp; (
          <div>
            인증번호 6자리
            <div>
               setCode(e.target.value)}
                placeholder="인증번호 입력"
                className="border border-gray-300 p-2 flex-1 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                disabled={step === 3}
              /&gt;
              
                확인
              
            </div>
          </div>
        )}
        {status &amp;&amp; (
          <p>
            {status}
          </p>
        )}
      </div>
    </div>
  );
}

💡 실무를 위한 추가 팁 (Best Practices)

1. Rate Limiting (호출 제한 적용): 악의적인 매크로가 SMS 발송 API를 무단 호출하여 요금 폭탄이 발생하는 것을 막기 위해, Next.js Middleware나 Upstash Redis를 활용하여 IP 기반의 Rate Limiting(예: 1시간에 5회 제한)을 반드시 적용하세요.
2. 서버사이드 최종 검증: 클라이언트에서 step === 3 상태가 되었다고 해서 완벽히 검증된 것은 아닙니다. 최종 회원가입(Submit) 요청 시, 인증된 번호인지 서버 DB나 세션을 통해 한 번 더 크로스 체크하는 로직을 추가하는 것이 안전합니다.

마무리

지금까지 Next.js App Router 환경에서 SMS 인증 기능을 구현하는 전체 흐름을 완성해 보았습니다.

스타트업 MVP, 이커머스 초기 모델, 1인 토이 프로젝트를 준비 중이신가요? 기존 API 연동 시 요구되는 복잡한 서류 심사나 발신번호 사전등록 때문에 귀중한 개발 시간을 낭비하지 마세요. **EasyAuth(이지어스)**는 오직 개발자의 생산성만 생각하는 최고의 대안입니다.

• 서류 완전 면제: 사업자등록증 없이 이메일 가입만으로 즉시 사용
• 자동 발신번호 세팅: 복잡한 통신사 발신번호 등록 절차 생략
• 업계 최저가 수준: 건당 30~50원에 달하는 기존 대비 절반 수준인 15~25원

지금 바로 EasyAuth에 가입하고 10건 무료 혜택으로 5분 만에 내 프로젝트에 SMS 인증을 붙여보세요!