[Next.js] 서류 없이 5분 만에 SMS 휴대폰 본인인증 구현하기

A professional, clean, and modern image depicting developer authentication concepts, suitable for a blog post thumbnail with text overlay.

SMS 인증, 꼭 이렇게 복잡해야 할까요?

토이 프로젝트나 MVP(최소 기능 제품)를 개발할 때 회원가입 단계에서 가장 큰 허들이 되는 것이 바로 **'휴대폰 본인인증(SMS OTP)'**입니다.

"API 하나 연동하는 게 뭐 어렵겠어?" 하고 기존 문자 발송 서비스들을 찾아보면 숨이 턱 막힙니다.

사업자등록증 제출 필수 (사이드 프로젝트인데 사업자가 어디 있나요?)
통신사 가입증명원 요구
발신번호 사전등록 후 심사 대기 (최대 며칠 소요)

오늘은 서류 제출, 심사, 복잡한 설정 없이 단 5분 만에 Next.js 환경에서 SMS 인증을 구현하는 방법을 소개합니다.

개발자를 위한 초간단 SMS API: EasyAuth (이지어스)

복잡한 절차를 생략하고 바로 코드부터 작성할 수 있는 **EasyAuth(이지어스)**를 사용하겠습니다. EasyAuth는 개발자 친화적인 인증 서비스로 다음과 같은 장점이 있습니다:

서류 제로: 가입 즉시 API Key 발급
자동 발신번호: 사전등록 없이 공용 번호로 즉시 발송
합리적인 가격: 건당 15~~25원 (기존 30~~50원 대비 절반 수준, 가입 시 10건 무료)
단순한 구조: POST /send와 POST /verify 두 개의 엔드포인트면 끝!

🚀 Next.js App Router 환경에서 SMS 인증 구현하기

이제 본격적으로 Next.js 14/15 (App Router) 환경에서 EasyAuth를 연동해 보겠습니다.

Step 1. API 키 발급하기

EasyAuth에 회원가입합니다.
대시보드에서 API Key를 복사합니다.
프로젝트 루트의 .env.local 파일에 키를 추가합니다.

EASYAUTH_API_KEY=ea_live_xxxxxxxxxxxxxxxxx

Step 2. 인증번호 발송 API (Backend)

클라이언트에서 직접 EasyAuth API를 호출하면 API Key가 노출될 수 있으므로, Next.js의 Route Handler를 사용해 프록시 API를 만듭니다.

app/api/auth/send/route.ts 파일을 생성하고 아래 코드를 작성합니다.

import { NextResponse } from 'next/server';

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

    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({ phone }),
    });

    const data = await response.json();
    
    if (!response.ok) {
      return NextResponse.json({ error: data.message }, { status: response.status });
    }

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

Step 3. 인증번호 검증 API (Backend)

이어서 사용자가 입력한 코드를 검증하는 엔드포인트를 만듭니다.

app/api/auth/verify/route.ts 파일을 생성합니다.

import { NextResponse } from 'next/server';

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

    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({ phone, code }),
    });

    const data = await response.json();

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

    // 성공 시 세션 생성 등의 로직 추가 가능
    return NextResponse.json({ success: true, message: '인증이 완료되었습니다.' });
  } catch (error) {
    return NextResponse.json({ error: '서버 오류가 발생했습니다.' }, { status: 500 });
  }
}

Step 4. 프론트엔드 UI 컴포넌트 작성

이제 사용자가 전화번호를 입력하고 인증번호를 받을 수 있는 UI를 만듭니다.

app/components/SmsAuth.tsx

'use client';

import { useState } from 'react';

export default function SmsAuth() {
  const [phone, setPhone] = useState('');
  const [code, setCode] = useState('');
  const [step, setStep] = useState&lt;'INPUT_PHONE' | 'INPUT_CODE'&gt;('INPUT_PHONE');
  const [loading, setLoading] = useState(false);

  // 인증번호 발송 요청
  const handleSend = async () =&gt; {
    setLoading(true);
    try {
      const res = await fetch('/api/auth/send', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ phone }),
      });
      
      if (res.ok) {
        alert('인증번호가 발송되었습니다.');
        setStep('INPUT_CODE');
      } else {
        const error = await res.json();
        alert(error.error || '발송 실패');
      }
    } finally {
      setLoading(false);
    }
  };

  // 인증번호 검증 요청
  const handleVerify = async () =&gt; {
    setLoading(true);
    try {
      const res = await fetch('/api/auth/verify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ phone, code }),
      });
      
      if (res.ok) {
        alert('✅ 인증이 완료되었습니다!');
        // 이후 회원가입 로직으로 이동
      } else {
        alert('❌ 잘못된 인증번호입니다.');
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <h2>휴대폰 본인인증</h2>
      
      {step === 'INPUT_PHONE' ? (
        <div>
           setPhone(e.target.value)}
            className="p-2 border rounded"
          /&gt;
          
            {loading ? '발송 중...' : '인증번호 받기'}
          
        </div>
      ) : (
        <div>
          <p>{phone}로 번호가 발송되었습니다.</p>
           setCode(e.target.value)}
            className="p-2 border rounded"
          /&gt;
          
            {loading ? '확인 중...' : '인증 완료'}
          
        </div>
      )}
    </div>
  );
}

💡 실무 적용 팁 (Best Practices)

성공적으로 연동을 마쳤다면, 프로덕션 환경을 위해 다음 사항들을 고려해 보세요.

어뷰징 방지 (Rate Limiting): 악의적인 사용자가 SMS 발송 API를 무단으로 연속 호출하여 비용 폭탄을 맞지 않도록 조심해야 합니다. Upstash Redis 등을 사용해 IP당 발송 횟수 제한(Rate Limit)을 거는 것을 추천합니다.
입력값 검증 (Validation): 백엔드 API에서 zod 등을 활용해 전화번호 정규식(ex. ^010\d{8}$)을 한 번 더 검증해 주세요.

마무리

과거에는 통신사 연동, 서류 제출, 발신번호 사전등록 등 며칠이 걸리던 작업이 이제는 단 5분과 몇 줄의 코드만으로 해결되었습니다.

빠르게 아이디어를 검증해야 하는 스타트업이나, 비즈니스 서류가 없는 1인 개발자/프리랜서에게 **서류 없이 즉시 도입 가능한 EasyAuth(이지어스)**는 최고의 선택지가 될 것입니다. 가입 시 무료 테스트 10건이 제공되니, 지금 바로 사이드 프로젝트에 SMS 인증을 붙여보세요!