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

🚨 SMS 인증 붙이려다 서류 더미에 묻힌 적 있으신가요?

토이 프로젝트나 스타트업 MVP를 개발하다 보면 **'휴대폰 본인인증'**이 필요한 순간이 반드시 옵니다. 하지만 기존 SMS API를 연동하려면 다음과 같은 벽에 부딪힙니다.

• 사업자등록증 및 통신서비스 이용증명원 제출
• 발신번호 사전등록 심사 (영업일 기준 2~3일 소요)
• 복잡한 API 구조와 비싼 발송 단가 (건당 30~50원)

빠르게 가설을 검증하고 배포해야 하는 1인 개발자나 스타트업에게 이런 복잡한 과정은 큰 허들입니다.

💡 해결책: 서류 없이 5분 만에 끝내는 EasyAuth

이 글에서는 **EasyAuth(이지어스)**를 활용하여 Next.js 14 (App Router) 환경에서 단 5분 만에 SMS 인증을 구현하는 방법을 알아봅니다.

EasyAuth는 개발자를 위해 만들어진 초간단 SMS API입니다. 서류 제출이나 발신번호 사전등록 없이 가입 즉시 사용할 수 있으며, Send와 Verify 단 두 개의 엔드포인트만으로 인증 로직을 완성할 수 있습니다. (가입 시 10건을 무료로 제공하므로 바로 테스트해 볼 수 있습니다!)

---

🛠️ 단계별 구현 가이드

Step 1: 환경 변수 설정

먼저 이지어스 대시보드에서 발급받은 API 키를 .env.local 파일에 추가합니다.

EASYAUTH_API_KEY=your_api_key_here

Step 2: Next.js API Routes 작성 (Backend)

Next.js의 Route Handlers를 사용하여 인증번호 발송(/api/auth/send)과 검증(/api/auth/verify) API를 만듭니다.

app/api/auth/send/route.ts (인증번호 발송):

import { NextResponse } from 'next/server';

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

    const response = await fetch('https://api.easyauth.co.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 });
  }
}

app/api/auth/verify/route.ts (인증번호 검증):

import { NextResponse } from 'next/server';

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

    const response = await fetch('https://api.easyauth.co.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 });
  }
}

Step 3: 클라이언트 폼 구현 (Frontend)

이제 사용자가 전화번호를 입력하고 인증번호를 확인할 수 있는 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 handleSendSms = async () => {
    const res = await fetch('/api/auth/send', {
      method: 'POST',
      body: JSON.stringify({ phone }),
    });
    
    if (res.ok) {
      alert('인증번호가 발송되었습니다.');
      setStep(2);
    }
  };

  const handleVerifyCode = async () => {
    const res = await fetch('/api/auth/verify', {
      method: 'POST',
      body: JSON.stringify({ phone, code }),
    });
    
    const data = await res.json();
    if (data.success) {
      alert('인증이 완료되었습니다! 🎉');
      // 다음 회원가입 프로세스로 이동
    } else {
      alert('잘못된 인증번호입니다.');
    }
  };

  return (
    <div>
      <h2>휴대폰 본인인증</h2>
      
      {step === 1 ? (
        <div>
           setPhone(e.target.value)}
            className="border p-2 rounded"
          /&gt;
          
            인증번호 받기
          
        </div>
      ) : (
        <div>
           setCode(e.target.value)}
            className="border p-2 rounded"
          /&gt;
          
            인증 완료하기
          
        </div>
      )}
    </div>
  );
}

---

🔒 실무 팁 및 보안 고려사항 (Best Practices)

SMS 인증을 실서비스에 적용할 때 다음 사항을 고려하면 더욱 안전한 서비스가 됩니다.

1. Rate Limiting (호출 제한): 악의적인 사용자가 무단으로 SMS를 대량 발송하지 못하도록 IP 또는 전화번호 당 발송 횟수를 제한하세요. (Upstash Redis 등을 활용하면 쉽게 구현할 수 있습니다.)
2. 인증번호 만료 시간: 보통 3분~5분의 유효시간을 두는 것이 좋습니다. (EasyAuth API는 자체적으로 만료 로직을 안전하게 처리해줍니다.)
3. 입력값 검증: 클라이언트와 서버 양쪽에서 전화번호 정규식 검증을 추가하여 불필요한 API 호출을 방지하세요.

---

🚀 결론

Next.js의 Route Handlers와 EasyAuth를 조합하면, 복잡한 통신사 연동 문서나 인증서를 읽을 필요 없이 단 5분 만에 안전한 SMS 인증 시스템을 구축할 수 있습니다.

사이드 프로젝트나 초기 MVP를 개발 중이신가요? 기존 30~50원의 비싼 단가 대신 건당 15~25원의 합리적인 가격과 서류 없는 즉시 가입을 지원하는 **EasyAuth(이지어스)**로 지금 바로 SMS 인증을 시작해보세요! 가입 시 즉시 사용 가능한 10건의 무료 테스트 크레딧이 제공됩니다.