사이드 프로젝트에 SMS 인증, 포기하셨나요?

웹 서비스나 앱을 개발할 때 악성 유저를 막거나 본인 확인을 위해 SMS 인증(OTP)은 필수적입니다. 하지만 막상 도입하려고 하면 큰 장벽에 부딪힙니다. 기존 문자 발송 API 서비스들은 대부분 사업자등록증, 발신번호 사전등록, 통신서비스 이용증명원 등 복잡한 서류를 요구하기 때문입니다.

"아직 MVP 단계인 스타트업이나, 주말에 토이 프로젝트를 하는 1인 개발자는 어떻게 하라는 거지?"

이런 고민을 하셨다면 잘 찾아오셨습니다. 이번 포스팅에서는 **서류 없이 가입 후 5분 만에 연동 가능한 EasyAuth(이지어스)**를 활용하여, Next.js App Router 환경에서 휴대폰 인증을 완벽하게 구현하는 방법을 알아봅니다.

---

Next.js App Router SMS 인증 구현 가이드

Next.js 13부터 도입된 App Router는 Route Handlers를 통해 프론트엔드 프로젝트 내에서 안전하게 백엔드 API를 구축할 수 있습니다. 이를 통해 API Key가 클라이언트에 노출되는 것을 완벽히 막을 수 있습니다.

1. 환경 변수 설정

먼저 프로젝트 루트의 .env.local 파일에 EasyAuth API 키를 추가합니다.

EASYAUTH_API_KEY=your_api_key_here

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

클라이언트에서 전화번호를 받아 EasyAuth의 /send 엔드포인트로 전달하는 역할을 합니다.

import { NextResponse } from 'next/server';

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

    // EasyAuth API를 통한 인증번호 발송
    const response = await fetch('https://api.easyauth.io/send', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.EASYAUTH_API_KEY}`
      },
      body: JSON.stringify({ to: phone })
    });

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

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

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

사용자가 입력한 OTP 코드를 검증하는 Route Handler를 작성합니다.

import { NextResponse } from 'next/server';

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

    // EasyAuth API를 통한 인증번호 검증
    const response = await fetch('https://api.easyauth.io/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.isValid) {
      return NextResponse.json({ success: false, message: '잘못된 인증번호입니다.' }, { status: 400 });
    }

    return NextResponse.json({ success: true, message: '인증이 완료되었습니다.' });
  } catch (error) {
    return NextResponse.json({ success: false, error: '서버 에러가 발생했습니다.' }, { status: 500 });
  }
}

4. 클라이언트 UI 구현 (app/page.tsx)

이제 사용자가 전화번호와 인증번호를 입력할 수 있는 화면(Client Component)을 만듭니다.

'use client';

import { useState } from 'react';

export default function PhoneVerification() {
  const [phone, setPhone] = useState('');
  const [code, setCode] = useState('');
  const [step, setStep] = useState(1);
  const [loading, setLoading] = useState(false);

  const handleSendCode = async () => {
    setLoading(true);
    const res = await fetch('/api/auth/send', {
      method: 'POST',
      body: JSON.stringify({ phone }),
    });
    if (res.ok) setStep(2);
    else alert('발송에 실패했습니다.');
    setLoading(false);
  };

  const handleVerifyCode = async () => {
    setLoading(true);
    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(data.message);
    }
    setLoading(false);
  };

  return (
    <div>
      <h2>휴대폰 인증</h2>
      
      <div>
         setPhone(e.target.value)}
          disabled={step === 2}
          className="w-full p-2 border rounded"
        /&gt;
      </div>

      {step === 1 ? (
        
          {loading ? '발송 중...' : '인증번호 받기'}
        
      ) : (
        <div>
           setCode(e.target.value)}
            className="w-full p-2 border rounded"
          /&gt;
          
            {loading ? '확인 중...' : '인증하기'}
          
        </div>
      )}
    </div>
  );
}

---

실무 적용을 위한 보안 팁 (Best Practices)

1. 요청 횟수 제한 (Rate Limiting): 악의적인 봇이 무단으로 문자를 발송하여 요금 폭탄을 맞지 않도록 IP 단위 발송 횟수 제한을 추가하세요. Upstash Redis 등을 결합하면 쉽게 구현할 수 있습니다.
2. 입력값 검증 (Input Validation): Zod와 같은 라이브러리를 사용하여 전화번호가 올바른 형식인지 서버 단에서 한 번 더 꼼꼼히 검증하는 것이 좋습니다.

---

결론: 개발자 친화적인 SMS API, EasyAuth

기존의 복잡한 절차 없이 Next.js의 App Router와 결합하여 순식간에 SMS 인증을 구현해 보았습니다.

만약 지금 당장 사이드 프로젝트나 스타트업 MVP에 휴대폰 인증을 붙여야 한다면, **초간단 SMS 인증 API, EasyAuth(이지어스)**를 사용해 보세요.

• 📄 서류 완전 면제: 사업자등록증, 통신서비스 이용증명원 등 복잡한 서류 제출이 전혀 없습니다.
• 🚀 즉시 시작: 가입 후 5분이면 바로 API 연동이 끝납니다. (자동 발신번호 제공)
• 💰 합리적인 가격: 기존 서비스들이 건당 30~50원을 요구할 때, EasyAuth는 건당 15~25원으로 매우 합리적입니다.
• 🎁 무료 체험: 가입 즉시 연동 테스트용 10건이 무료로 제공됩니다.

이제 지루한 서류 작업은 건너뛰고, 오직 서비스 개발에만 집중하세요!