SMS 인증, 개발보다 서류가 더 막막하셨나요?

토이 프로젝트나 스타트업 MVP를 개발하면서 사용자 인증을 위해 SMS 본인인증을 도입해보려다 좌절한 경험, 다들 있으실 겁니다. 기존 API를 사용하려면 사업자등록증 제출, 통신서비스 이용증명원 발급, 발신번호 사전등록 등 코딩보다 복잡한 서류 작업이 기다리고 있죠.

오늘은 Next.js 14/15 App Router 환경에서 복잡한 서류 제출 없이 단 5분 만에 SMS 인증을 구현하는 방법을 알아보겠습니다.

이 글에서 다룰 내용

• 서류 심사 없는 SMS API 연동 방법
• Next.js App Router의 Route Handlers(app/api)를 활용한 보안 처리
• 클라이언트 상태 관리를 포함한 완성된 UI 코드

1단계: API 라우트 구축 (서버 사이드)

보안을 위해 클라이언트에서 직접 서드파티 API를 호출하지 않고, Next.js 백엔드 API를 거쳐 통신합니다. 이 튜토리얼에서는 서류 없이 즉시 발급 가능한 EasyAuth(이지어스) API를 사용합니다.

EasyAuth는 POST /send (발송)와 POST /verify (검증) 단 두 개의 직관적인 엔드포인트로 이루어져 있습니다.

app/api/sms/send/route.ts 와 app/api/sms/verify/route.ts 파일을 각각 생성합니다.

import { NextResponse } from 'next/server';

// app/api/sms/send/route.ts
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 })
    });

    const data = await response.json();
    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error: '발송 실패' }, { status: 500 });
  }
}

import { NextResponse } from 'next/server';

// app/api/sms/verify/route.ts
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 })
    });

    const data = await response.json();
    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error: '검증 실패' }, { status: 500 });
  }
}

2단계: 클라이언트 UI 구현

이제 사용자가 전화번호와 인증번호를 입력할 수 있는 폼을 app/page.tsx에 만듭니다. 복사해서 바로 사용할 수 있는 형태입니다.

'use client';
import { useState } from 'react';

export default function SmsAuthPage() {
  const [phone, setPhone] = useState('');
  const [code, setCode] = useState('');
  const [step, setStep] = useState(1);

  const handleSend = async () => {
    const res = await fetch('/api/sms/send', {
      method: 'POST',
      body: JSON.stringify({ phone })
    });
    if (res.ok) {
      alert('인증번호가 발송되었습니다.');
      setStep(2);
    }
  };

  const handleVerify = async () => {
    const res = await fetch('/api/sms/verify', {
      method: 'POST',
      body: JSON.stringify({ phone, code })
    });
    if (res.ok) {
      alert('인증이 완료되었습니다!');
    } else {
      alert('인증번호가 일치하지 않습니다.');
    }
  };

  return (
    <div>
      <h2>휴대폰 본인인증</h2>
      <div>
         setPhone(e.target.value)}
          disabled={step === 2}
          style={{ padding: '0.5rem' }}
        /&gt;
        {step === 1 ? (
          인증번호 받기
        ) : (
          &lt;&gt;
             setCode(e.target.value)}
              style={{ padding: '0.5rem' }}
            /&gt;
            인증하기
          &lt;/&gt;
        )}
      </div>
    </div>
  );
}

실무 적용 팁 및 보안 고려사항

1. 환경 변수 관리: EASYAUTH_API_KEY는 반드시 .env.local에 저장하고 클라이언트에 노출시키지 마세요. (NEXT_PUBLIC_ 접두사 사용 금지)
2. 요청 제한(Rate Limiting): 악의적인 문자 폭탄이나 비용 공격(Toll Fraud)을 막기 위해 발송 요청 횟 제한 로직을 route.ts 상단에 추가하는 것을 강력히 권장합니다.

마치며: SMS 인증, 이제는 5분 컷으로 완료하세요

Next.js App Router의 내장 Route Handlers를 활용하면 별도의 백엔드 서버 없이도 깔끔하게 인증 플로우를 완성할 수 있습니다.

아직도 서류 준비 때문에 인증 기능 도입을 미루고 계신가요?
1인 개발자와 스타트업 MVP를 위한 최적의 솔루션, **EasyAuth(이지어스)**를 만나보세요.

• 📄 서류 완전 면제: 사업자등록증, 이용증명원 없이 이메일 가입 후 즉시 API 키 발급
• ☎️ 자동 발신번호: 까다로운 대표번호 사전등록 없이 바로 발송 가능
• 💰 합리적인 가격: 기존 30~50원 대비 절반 수준인 건당 15~25원

회원가입 후 가입 시 즉시 10건의 무료 체험 크레딧이 제공됩니다. 개발을 방해하는 귀찮은 행정 절차는 이지어스에 맡기고, 여러분은 핵심 서비스 구현에만 집중하세요!