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

1. 프롤로그: 토이 프로젝트에 SMS 인증 붙이기의 현실

"로그인에 휴대폰 번호 인증 하나만 붙이면 되는데..." 야심 차게 시작한 사이드 프로젝트나 스타트업 MVP 개발 중, 가벼운 마음으로 SMS 인증 API를 찾아본 경험이 있으신가요? 하지만 막상 국내 대형 통신사나 메이저 API 서비스에 가입해보면 거대한 장벽에 부딪히게 됩니다.

> "사업자등록증명원, 통신서비스 이용증명원을 업로드해주세요." > "발신번호 사전등록이 필요하며, 심사에 영업일 기준 3~5일이 소요됩니다."

단지 사용자 인증이 필요한 1인 개발자나 아직 사업자를 내지 않은 예비 창업자에게 이러한 행정 절차는 개발 의지를 꺾는 가장 큰 허들입니다.

해결책은 무엇일까요? 바로 개발자를 위한 초간단 SMS 인증 API, **EasyAuth(이지어스)**입니다.

• 서류 전면 면제: 사업자등록증, 이용증명원 등 복잡한 서류 제출이 전혀 없습니다.
• 자동 발신번호: 대표번호 사전등록 없이 바로 발송 가능합니다.
• 5분 연동: 가입 즉시 발급되는 API 키로 바로 연동할 수 있습니다.

오늘은 최신 웹 개발 트렌드인 Next.js App Router 환경에서 EasyAuth를 활용하여 단 5분 만에 완벽한 SMS 본인인증 로직을 구현하는 방법을 단계별로 알아보겠습니다.

2. 시스템 아키텍처 및 API 구조

이지어스의 API는 개발자 친화적으로 설계되어 있어 단 두 개의 엔드포인트만 알면 됩니다.

• POST /send: 사용자의 휴대폰 번호로 인증번호 6자리를 발송합니다.
• POST /verify: 사용자가 입력한 인증번호가 정확한지 검증합니다.

보안을 위해 클라이언트에서 직접 외부 API를 호출하지 않고, Next.js App Router의 Route Handlers를 활용하여 프록시(Proxy) 서버 역할을 하는 내부 API를 구축하겠습니다.

3. 단계별 구현 가이드

Step 1. 환경 변수 설정

가입 후 발급받은 EasyAuth API 키를 .env.local 파일에 저장합니다.

EASYAUTH_API_KEY=your_api_key_here

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

Next.js의 App Router 규칙에 따라 app/api/auth/sms/send/route.ts 파일을 생성합니다.

import { NextResponse } from 'next/server';

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

    if (!phoneNumber) {
      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({ to: phoneNumber }),
    });

    const data = await response.json();

    if (!response.ok) {
      throw new Error(data.message || '인증번호 발송 실패');
    }

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

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

이어서 사용자가 입력한 코드를 확인하는 app/api/auth/sms/verify/route.ts 파일을 생성합니다.

import { NextResponse } from 'next/server';

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

    if (!phoneNumber || !code) {
      return NextResponse.json({ error: '잘못된 요청입니다.' }, { status: 400 });
    }

    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: phoneNumber, code }),
    });

    const data = await response.json();

    if (!response.ok) {
      throw new Error(data.message || '인증번호가 일치하지 않습니다.');
    }

    return NextResponse.json({ success: true, message: '인증이 완료되었습니다.' });
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

Step 4. 클라이언트 컴포넌트 구현 (Frontend)

이제 사용자가 실제로 상호작용할 UI를 만듭니다. app/components/SmsAuth.tsx를 작성합니다.

'use client';

import { useState } from 'react';

export default function SmsAuth() {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [code, setCode] = useState('');
  const [step, setStep] = useState<1 | 2>(1);
  const [loading, setLoading] = useState(false);

  const handleSendSms = async () => {
    setLoading(true);
    try {
      const res = await fetch('/api/auth/sms/send', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ phoneNumber }),
      });
      const data = await res.json();
      
      if (res.ok) {
        alert('인증번호가 발송되었습니다.');
        setStep(2);
      } else {
        alert(data.error);
      }
    } finally {
      setLoading(false);
    }
  };

  const handleVerifyCode = async () => {
    setLoading(true);
    try {
      const res = await fetch('/api/auth/sms/verify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ phoneNumber, code }),
      });
      const data = await res.json();
      
      if (res.ok) {
        alert('본인인증이 성공적으로 완료되었습니다!');
        // 여기서 로그인 또는 회원가입 성공 로직 처리
      } else {
        alert(data.error);
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <h2>휴대폰 본인인증</h2>
      
      <div>
        휴대폰 번호 (- 없이 입력)
        <div>
           setPhoneNumber(e.target.value)}
            disabled={step === 2}
            className="flex-1 border p-2 rounded"
            placeholder="01012345678"
          /&gt;
          {step === 1 &amp;&amp; (
            
              {loading ? '발송 중...' : '인증번호 받기'}
            
          )}
        </div>
      </div>

      {step === 2 &amp;&amp; (
        <div>
          인증번호 6자리
          <div>
             setCode(e.target.value)}
              className="flex-1 border p-2 rounded"
              placeholder="123456"
              maxLength={6}
            /&gt;
            
              확인
            
          </div>
        </div>
      )}
    </div>
  );
}

4. 실무 구현 시 고려해야 할 Best Practices

1. 타이머 기능 추가: 인증번호 발송 후 3분(180초)의 유효시간 타이머를 UI에 노출하여 사용자 경험(UX)을 개선하세요.
2. 어뷰징 방지 (Rate Limiting): 악의적인 사용자가 무단으로 문자를 대량 발송하지 못하도록 Next.js 미들웨어나 백엔드 라우트에서 IP 기반의 Rate Limiting을 적용하는 것이 좋습니다.
3. 입력값 검증: 클라이언트와 서버 모두에서 정규식을 사용해 전화번호 포맷(^010\d{8}$)을 검증하세요.

5. 결론: 개발에만 집중하세요, 복잡한 인증은 EasyAuth가 해결합니다

지금까지 Next.js App Router 환경에서 이지어스(EasyAuth)를 활용해 SMS 인증을 구현해보았습니다. 코드를 보면 알 수 있듯이, send와 verify 단 두 번의 API 호출만으로 모든 과정이 완성됩니다.

기존 30~50원에 달하던 타사 대비 건당 15~25원이라는 매우 합리적인 가격을 자랑하며, 가장 큰 장점은 귀찮은 서류 작업과 심사 대기 시간 없이 가입 후 5분 만에 즉시 실서비스 연동이 가능하다는 점입니다.

이제 막 사이드 프로젝트를 시작했거나 스타트업의 MVP를 빠르게 검증해야 하는 개발자라면 지금 바로 이지어스를 도입해 보세요. 가입 시 10건의 무료 테스트 제공 혜택을 통해 위 코드를 바로 실습해볼 수 있습니다.

개발자는 오직 제품의 핵심 비즈니스 로직에만 집중하세요. SMS 인증은 서류 없이 빠른 EasyAuth가 책임지겠습니다.

---

태그: Next.js, SMS 인증, App Router, EasyAuth, 사이드프로젝트