Next.js App Router로 서류 없이 10분 만에 SMS 인증 구현하기

사이드 프로젝트나 스타트업 MVP를 개발할 때 반드시 필요한 기능 중 하나가 바로 **휴대폰 본인인증(SMS 인증)**입니다. 하지만 막상 SMS API를 연동하려고 하면 큰 장벽에 부딪히게 됩니다.

“사업자등록증을 제출해주세요.” “통신서비스 이용증명원이 필요합니다.” “발신번호를 사전 등록해야 합니다.”

당장 주말에 MVP를 런칭해야 하는 1인 개발자나 예비 창업자에게 이런 복잡한 서류 작업은 엄청난 시간 낭비입니다.

이 글에서는 서류 제출 없이 가입 후 5분 만에 바로 사용할 수 있는 [EasyAuth(이지어스)] API와 Next.js App Router를 활용해 단 10분 만에 SMS 인증 시스템을 구현하는 방법을 단계별로 알아봅니다.

---

왜 EasyAuth + Next.js App Router인가요?

최신 Next.js App Router는 서버 사이드 로직(Route Handlers)과 클라이언트 컴포넌트를 매끄럽게 연결할 수 있어 API 키를 안전하게 보호하면서도 빠른 개발이 가능합니다.

여기에 EasyAuth를 결합하면 다음과 같은 장점을 누릴 수 있습니다:

• 서류 완전 면제: 사업자등록증, 이용증명원 없이 즉시 API 키 발급
• 자동 발신번호: 번거로운 대표번호 사전등록 절차 없음
• 극강의 가성비: 기존(30~50원) 대비 절반 수준인 건당 15~25원
• 심플한 구조: POST /send 와 POST /verify 단 두 개의 엔드포인트

이제 본격적으로 코드를 작성해 보겠습니다.

1단계: 환경 변수 설정

먼저 EasyAuth 대시보드에서 발급받은 API 키를 프로젝트의 .env.local 파일에 추가합니다.

EASYAUTH_API_KEY=your_easyauth_api_key_here

2단계: API Route Handlers 작성하기

클라이언트에서 직접 EasyAuth API를 호출하면 API 키가 노출될 위험이 있습니다. Next.js의 Route Handlers를 이용해 서버 사이드에서 안전하게 요청을 처리하도록 send와 verify 라우트를 만듭니다.

1. 인증번호 발송 API (app/api/send-sms/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.co.kr/send', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.EASYAUTH_API_KEY}`,
      },
      body: JSON.stringify({ phone }),
    });

    if (!response.ok) throw new Error('발송 실패');

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

2. 인증번호 검증 API (app/api/verify-sms/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.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();

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

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

3단계: 클라이언트 컴포넌트 구현 (전체 코드)

이제 사용자가 전화번호와 인증번호를 입력할 수 있는 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<'SEND' | 'VERIFY'>('SEND');
  const [isLoading, setIsLoading] = useState(false);
  const [message, setMessage] = useState('');

  const handleSendSms = async () => {
    setIsLoading(true);
    setMessage('');
    
    try {
      const res = await fetch('/api/send-sms', {
        method: 'POST',
        body: JSON.stringify({ phone }),
      });
      const data = await res.json();
      
      if (data.success) {
        setStep('VERIFY');
        setMessage('인증번호가 발송되었습니다. 3분 안에 입력해주세요.');
      } else {
        setMessage(data.error);
      }
    } catch (err) {
      setMessage('네트워크 오류가 발생했습니다.');
    } finally {
      setIsLoading(false);
    }
  };

  const handleVerifyCode = async () => {
    setIsLoading(true);
    setMessage('');
    
    try {
      const res = await fetch('/api/verify-sms', {
        method: 'POST',
        body: JSON.stringify({ phone, code }),
      });
      const data = await res.json();
      
      if (data.success) {
        setMessage('✅ 휴대폰 인증이 완료되었습니다!');
        // TODO: 회원가입 다음 단계로 이동하는 로직 추가
      } else {
        setMessage('❌ ' + data.error);
      }
    } catch (err) {
      setMessage('네트워크 오류가 발생했습니다.');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      <h2>휴대폰 본인인증</h2>
      
      <div>
        <div>
          휴대폰 번호
          <div>
             setPhone(e.target.value)}
              placeholder='01012345678'
              disabled={step === 'VERIFY'}
              className='flex-1 px-4 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 outline-none'
            /&gt;
            
              {step === 'VERIFY' ? '재발송' : '인증번호 발송'}
            
          </div>
        </div>

        {step === 'VERIFY' &amp;&amp; (
          <div>
            인증번호
            <div>
               setCode(e.target.value)}
                placeholder='인증번호 6자리 입력'
                className='flex-1 px-4 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 outline-none'
              /&gt;
              
                확인
              
            </div>
          </div>
        )}

        {message &amp;&amp; (
          <p>
            {message}
          </p>
        )}
      </div>
    </div>
  );
}

실무 적용을 위한 Tips & Best Practices

1. API 키 보안 (절대 규칙) 클라이언트 컴포넌트('use client')에서 EasyAuth API를 직접 호출하면 브라우저 네트워크 탭에 API 키가 그대로 노출됩니다. 위 예제처럼 반드시 Next.js Route Handlers(또는 Server Actions)를 거쳐서 통신해야 합니다.
2. Rate Limiting 적용 악의적인 사용자가 무단으로 SMS를 대량 발송하는 것을 막기 위해 서버 단에서 IP 기반 호출 횟수 제한(Rate Limiting)을 구현하는 것이 좋습니다. Upstash Redis 등을 활용하면 쉽게 구현 가능합니다.
3. UX: 남은 시간 표시 실제 서비스에서는 인증번호 입력 단계에서 setInterval을 활용해 3분(180초) 타이머를 화면에 보여주면 사용자 경험이 훨씬 좋아집니다.

마무리

지금까지 Next.js App Router 환경에서 서류 제출 없이 EasyAuth를 이용해 SMS 인증을 구현하는 방법을 알아보았습니다. 개발 환경 세팅부터 컴포넌트 작성까지 10분이면 충분합니다.

토이 프로젝트, 스타트업 MVP, 이커머스 등 빠른 런칭이 생명인 프로젝트를 진행 중이신가요? 지금 바로 [EasyAuth(이지어스)]에 가입하고 10건의 무료 체험 크레딧으로 이 코드를 직접 테스트해 보세요! 더 이상 인증 API 연동에 귀중한 주말을 낭비하지 마세요.