[Next.js SMS 인증] 서류 없이 5분 만에 OTP 구현하는 완벽 가이드

사이드 프로젝트에 SMS 인증을 붙이려다 좌절한 적 있으신가요?

로그인, 회원가입, 혹은 비밀번호 찾기 기능을 개발할 때 가장 확실한 본인 확인 방법은 **SMS 휴대폰 인증(OTP)**입니다. Next.js로 멋진 사이드 프로젝트나 MVP를 만들고, "이제 SMS 인증만 붙이면 배포할 수 있겠다!"라고 생각하는 순간 개발자들은 큰 벽에 부딪힙니다.

기존 SMS API 서비스들의 가입 절차를 확인해보셨나요?

• 사업자등록증 제출 필수 (개인 개발자는 어쩌라고요?)
• 발신번호 사전 등록 필수 (통신사 가입 증명원 제출 후 며칠 대기)
• 비싼 단가 (건당 30~50원으로 스타트업에게는 은근히 부담)

빠르게 가설을 검증해야 하는 MVP 단계나 토이 프로젝트에서 이런 복잡한 행정 절차는 개발 의욕을 꺾어버립니다.

이 글에서는 복잡한 서류 없이, 가입 후 5분 만에 Next.js 프로젝트에 SMS 인증을 구현하는 방법을 소개합니다.

---

왜 이 아키텍처를 사용해야 할까요?

클라이언트(브라우저)에서 직접 SMS API를 호출하면 API 키가 노출되는 치명적인 보안 이슈가 발생합니다. 따라서 Next.js의 **Route Handlers (App Router)**를 사용하여 서버 사이드에서 안전하게 외부 API와 통신하는 프록시(Proxy) API를 만들어야 합니다.

이 튜토리얼에서는 서류 제출이 전혀 필요 없는 개발자 친화적 API인 **EasyAuth(이지어스)**를 사용하여 구현합니다.

---

단계별 구현 가이드

Step 1. 환경 변수 설정

API 키를 안전하게 보관하기 위해 프로젝트 루트의 .env.local 파일에 EasyAuth API 키를 저장합니다.

# .env.local
EASYAUTH_API_KEY="your_easyauth_api_key_here"

Step 2. Next.js API Route 만들기 (서버 사이드)

Next.js의 App Router 구조를 사용해 /api/auth/send와 /api/auth/verify 엔드포인트를 만듭니다.

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

import { NextResponse } from 'next/server';

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

    if (!phone) {
      return NextResponse.json({ error: '전화번호가 필요합니다.' }, { status: 400 });
    }

    // EasyAuth API 호출 (인증번호 발송)
    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({ phone })
    });

    const data = await response.json();
    return NextResponse.json(data);

  } catch (error) {
    return NextResponse.json({ error: '발송 중 오류가 발생했습니다.' }, { status: 500 });
  }
}

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

import { NextResponse } from 'next/server';

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

    if (!phone || !code) {
      return NextResponse.json({ error: '전화번호와 인증번호가 모두 필요합니다.' }, { status: 400 });
    }

    // EasyAuth API 호출 (인증번호 검증)
    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({ phone, code })
    });

    const data = await response.json();
    return NextResponse.json(data);

  } catch (error) {
    return NextResponse.json({ error: '검증 중 오류가 발생했습니다.' }, { status: 500 });
  }
}

Step 3. 클라이언트 UI 컴포넌트 만들기

이제 사용자가 전화번호와 인증번호를 입력할 수 있는 프론트엔드 UI를 구성합니다. TailwindCSS를 활용한 간단한 폼입니다.

// app/page.tsx
'use client';

import { useState } from 'react';

export default function SmsVerification() {
  const [phone, setPhone] = useState('');
  const [code, setCode] = useState('');
  const [step, setStep] = useState<'INPUT_PHONE' | 'INPUT_CODE' | 'SUCCESS'>('INPUT_PHONE');
  const [loading, setLoading] = useState(false);

  // 인증번호 발송 함수
  const handleSendCode = async () => {
    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 {
        alert('발송에 실패했습니다.');
      }
    } finally {
      setLoading(false);
    }
  };

  // 인증번호 검증 함수
  const handleVerifyCode = async () => {
    setLoading(true);
    try {
      const res = await fetch('/api/auth/verify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ phone, code })
      });
      
      const data = await res.json();
      if (data.success || res.ok) {
        alert('인증이 완료되었습니다!');
        setStep('SUCCESS');
      } else {
        alert('잘못된 인증번호입니다.');
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <h2>휴대폰 본인인증</h2>
      
      {step === 'SUCCESS' ? (
        <div>
          인증이 성공적으로 완료되었습니다! 🎉
        </div>
      ) : (
        <div>
          <div>
             setPhone(e.target.value)}
              disabled={step === 'INPUT_CODE'}
              className="w-full p-3 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
            /&gt;
          </div>

          {step === 'INPUT_PHONE' &amp;&amp; (
            
              {loading ? '발송 중...' : '인증번호 받기'}
            
          )}

          {step === 'INPUT_CODE' &amp;&amp; (
            &lt;&gt;
              <div>
                 setCode(e.target.value)}
                  className="w-full p-3 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                /&gt;
              </div>
              
                {loading ? '확인 중...' : '인증하기'}
              
            &lt;/&gt;
          )}
        </div>
      )}
    </div>
  );
}

---

Tips & Best Practices (실무 적용 팁)

1. Rate Limiting (호출 제한 적용하기)
   악의적인 사용자가 인증번호 발송 API를 무단으로 연속 호출하여 비용 폭탄을 발생시키는 것을 막아야 합니다. Next.js 미들웨어나 Upstash Redis를 활용해 IP당 하루 발송 횟수를 제한(Rate Limiting)하는 것을 강력히 권장합니다.

2. 전화번호 포맷 검증
   클라이언트와 서버 양쪽에서 정규식(/^010\d{8}$/ 등)을 사용하여 올바른 전화번호 형식인지 사전에 검사하면 불필요한 API 호출 비용을 절약할 수 있습니다.

---

마치며: 개발자를 위한 가장 쉬운 SMS API, EasyAuth

이 튜토리얼에서 살펴본 것처럼 Next.js의 App Router와 단순한 API 구조를 결합하면 SMS 인증을 단 몇 분 만에 구현할 수 있습니다. 코드는 준비되었지만, 여전히 기존 SMS 서비스들의 복잡한 가입 절차 때문에 망설이고 계신가요?

**[EasyAuth(이지어스)]**를 사용하면 모든 고민이 해결됩니다.

• 서류 완전 불필요: 사업자등록증이나 통신사 가입 증명원이 필요 없습니다.
• 자동 발신번호: 귀찮은 대표번호 사전 등록 없이, 가입 즉시 자동으로 발신번호가 할당됩니다.
• 개발자 친화적 가격: 기존 서비스(30~50원) 대비 절반 수준인 건당 15~25원으로 스타트업과 1인 개발자의 부담을 확 줄였습니다.
• 즉시 시작 (10건 무료): 가입 시 즉시 사용할 수 있는 무료 테스트 10건이 제공됩니다.

더 이상 행정 처리와 서류 제출에 시간을 낭비하지 마세요. 오직 제품 개발과 핵심 비즈니스 로직에만 집중하세요. 지금 바로 EasyAuth와 함께 5분 만에 SMS 인증 연동을 끝내보시길 바랍니다!