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

SMS 인증, 꼭 이렇게 복잡해야 할까요?

사이드 프로젝트나 스타트업의 MVP(최소 기능 제품)를 개발하다 보면, 유저의 실제 신원을 확인하거나 어뷰징을 막기 위해 휴대폰 본인인증(SMS OTP) 도입이 필수적인 순간이 옵니다. 특히 이커머스나 플랫폼 서비스를 기획하고 있다면 더더욱 피할 수 없는 기능입니다.

하지만 막상 기존 SMS API를 연동하려고 찾아보면 다음과 같은 험난한 과정이 우리를 기다립니다:

• 사업자등록증 및 이용증명원 제출
• 발신번호 사전등록 (대표번호 필요)
• 통신사 심사 대기 (수일 소요)

"당장 주말 동안 토이 프로젝트를 런칭해야 하는데, 서류 심사라뇨? 사업자등록증도 아직 없는데요?"

이 글에서는 **사업자등록증 없이, 복잡한 심사 없이 가입 후 5분 만에 API 연동을 끝낼 수 있는 [EasyAuth(이지어스)]**를 활용해, 최신 Next.js App Router 환경에서 SMS 인증을 완벽하게 구현하는 방법을 소개합니다.

---

개발자를 위한 SMS 인증, EasyAuth(이지어스)

EasyAuth는 개발자의 귀찮은 행정 작업을 없애고 오직 '개발'에만 집중할 수 있도록 설계된 초간단 SMS 인증 API입니다.

• 서류 불필요: 사업자등록증, 이용증명원 등 복잡한 행정 서류 없이 가입 즉시 개발이 가능합니다.
• 자동 발신번호: 발신번호를 미리 등록할 필요 없이 시스템에서 자동으로 배정됩니다.
• 합리적 가격: 건당 15~25원으로 기존 API(30~50원) 대비 절반 수준의 가격을 자랑합니다.
• 무료 테스트: 가입 시 10건의 무료 크레딧이 제공되어 비용 부담 없이 연동 테스트를 마칠 수 있습니다.

EasyAuth의 API는 매우 직관적입니다. 인증번호를 보내는 POST /send와 검증하는 POST /verify 단 두 개의 엔드포인트면 모든 과정이 끝납니다.

---

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

지금부터 Next.js 14 (App Router) 환경에서 EasyAuth를 이용해 SMS 인증 기능을 구현해보겠습니다. 백엔드는 Route Handlers를 사용하고, 프론트엔드는 Client Component로 구성합니다.

1. 환경 변수 설정

먼저 EasyAuth 회원가입 후 발급받은 API Key를 프로젝트에 설정합니다. .env.local 파일을 프로젝트 루트에 생성하고 아래와 같이 입력합니다.

# .env.local
EASYAUTH_API_KEY=your_easyauth_api_key_here

2. 백엔드: 인증번호 발송 API (Route Handler)

Next.js의 Route Handlers를 이용해 서버 사이드에서 EasyAuth API와 통신하는 엔드포인트를 만듭니다. app/api/auth/send/route.ts 파일을 생성합니다.

// app/api/auth/send/route.ts
import { NextResponse } from 'next/server';

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

    // 1. 번호 유효성 검사
    if (!phone || phone.length < 10) {
      return NextResponse.json(
        { error: '유효하지 않은 전화번호입니다.' },
        { status: 400 }
      );
    }

    // 2. EasyAuth /send API 호출
    const response = await fetch('https://api.easyauth.co/v1/send', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.EASYAUTH_API_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ phone }),
    });

    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 }
    );
  }
}

3. 백엔드: 인증번호 검증 API (Route Handler)

이번에는 사용자가 입력한 인증번호(OTP)가 맞는지 확인하는 엔드포인트입니다. app/api/auth/verify/route.ts 파일을 생성합니다.

// 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 /verify API 호출
    const response = await fetch('https://api.easyauth.co/v1/verify', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.EASYAUTH_API_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ phone, 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 }
    );
  }
}

4. 프론트엔드: UI 및 상태 관리 (Client Component)

이제 사용자가 전화번호를 입력하고 인증번호를 받을 수 있는 UI를 구현합니다. Tailwind CSS를 사용하여 깔끔하게 구성해보았습니다. app/components/SmsVerification.tsx에 작성합니다.

// app/components/SmsVerification.tsx
'use client';

import { useState } from 'react';

export default function SmsVerification() {
  const [phone, setPhone] = useState('');
  const [code, setCode] = useState('');
  const [isSent, setIsSent] = useState(false);
  const [isVerified, setIsVerified] = useState(false);
  const [message, setMessage] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const handleSend = async () => {
    setIsLoading(true);
    setMessage('');
    try {
      const res = await fetch('/api/auth/send', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ phone: phone.replace(/[^0-9]/g, '') }),
      });
      const data = await res.json();
      
      if (res.ok) {
        setIsSent(true);
        setMessage('인증번호가 발송되었습니다. 3분 안에 입력해주세요.');
      } else {
        setMessage(data.error);
      }
    } catch (err) {
      setMessage('발송 중 오류가 발생했습니다.');
    } finally {
      setIsLoading(false);
    }
  };

  const handleVerify = async () => {
    setIsLoading(true);
    setMessage('');
    try {
      const res = await fetch('/api/auth/verify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ phone: phone.replace(/[^0-9]/g, ''), code }),
      });
      const data = await res.json();
      
      if (res.ok) {
        setIsVerified(true);
        setMessage('✅ 본인인증이 성공적으로 완료되었습니다.');
      } else {
        setMessage(`❌ ${data.error}`);
      }
    } catch (err) {
      setMessage('인증 중 오류가 발생했습니다.');
    } finally {
      setIsLoading(false);
    }
  };

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

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

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

---

💡 실무 적용을 위한 Tips & Best Practices

성공적인 MVP 구현을 위해 다음 사항들을 추가로 고려하면 더욱 완벽한 서비스가 됩니다.

1. 요청 속도 제한 (Rate Limiting) 악의적인 사용자가 반복해서 SMS를 요청하여 요금 폭탄을 발생시키는 것을 막아야 합니다. Next.js의 Middleware나 Redis(Upstash 등)를 활용해 IP당 또는 번호당 1분 내 요청 횟수를 제한하는 것이 좋습니다.

2. 타이머 기능 추가 일반적으로 SMS 인증번호는 3분(180초)의 유효시간을 가집니다. React의 useEffect와 setInterval을 활용하여 UI에 남은 시간을 표시해주면 사용자 경험(UX)이 크게 향상됩니다.

3. 클라이언트 & 서버 이중 검증 프론트엔드에서 phone.replace(/[^0-9]/g, '') 처럼 정규식을 통해 숫자만 추출하더라도, 서버(Route Handler)에서 반드시 한 번 더 유효성 검사를 수행해야 합니다. 보안의 기본은 클라이언트를 신뢰하지 않는 것입니다.

---

마무리

지금까지 서류 작업이나 긴 심사 과정 없이, Next.js App Router 환경에서 단 5분 만에 휴대폰 본인인증을 연동하는 방법을 알아보았습니다.

1인 개발자, 프리랜서, 스타트업 MVP 팀에게 행정 처리에 쏟는 시간은 큰 기회비용입니다. **사업자등록증 제출 없이, 자동 발신번호 설정으로 즉시 시작할 수 있는 EasyAuth(이지어스)**를 도입하여 불필요한 마찰을 줄여보세요.

게다가 건당 15~25원의 합리적인 비용으로 트래픽이 커져도 유지비 부담을 크게 덜 수 있습니다. 지금 가입하면 10건의 무료 체험이 가능하니, 이번 주말 사이드 프로젝트에 바로 적용해보시는 건 어떨까요?

👉 EasyAuth 가입하고 10건 무료 테스트하기