사이드 프로젝트나 스타트업 MVP를 개발하다 보면 반드시 마주하는 벽이 있습니다. 바로 **'휴대폰 SMS 인증'**입니다.

기존 SMS API의 문제점

대부분의 기존 통신사 인증이나 대형 메세징 API를 도입하려면 다음과 같은 험난한 과정이 필요합니다.

• 사업자등록증 및 이용증명원 제출
• 발신번호 사전등록 심사 대기 (최소 수일 소요)
• 비싼 건당 발송 비용 (건당 30~50원)

"나는 그저 토이 프로젝트에 로그인 하나 붙이고 싶었을 뿐인데..."라는 생각이 절로 듭니다.

이 글에서는 복잡한 서류 제출 없이, 가입 후 5분 만에 Next.js 14 (App Router) 환경에서 SMS 인증(OTP)을 구현하는 방법을 알아봅니다.

---

1. 구현 개요 (API 구조)

우리가 구현할 SMS 본인인증의 흐름은 매우 단순합니다. 단 두 개의 API 엔드포인트만 있으면 됩니다.

1. POST /send : 사용자가 입력한 번호로 인증번호 6자리를 발송합니다.
2. POST /verify : 사용자가 입력한 인증번호가 맞는지 검증합니다.

Next.js의 Route Handler를 이용해 클라이언트가 안전하게 API를 호출하도록 서버 엔드포인트를 만들어 보겠습니다.

2. Next.js 서버 API 만들기

클라이언트에서 직접 외부 SMS API 키를 노출하는 것은 보안상 위험합니다. 따라서 app/api 폴더 아래에 자체 API를 구성합니다.

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

import { NextResponse } from 'next/server';

export async function POST(req: Request) {
  try {
    const { phone } = await req.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({ phone })
    });

    if (!response.ok) {
      return NextResponse.json({ error: '발송에 실패했습니다.' }, { status: 400 });
    }

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

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

import { NextResponse } from 'next/server';

export async function POST(req: Request) {
  try {
    const { phone, code } = await req.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 (!response.ok || !data.verified) {
      return NextResponse.json({ error: '인증번호가 일치하지 않습니다.' }, { status: 400 });
    }

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

3. 클라이언트 UI (React Component)

이제 사용자가 전화번호를 입력하고, SMS를 받아 인증번호를 입력할 수 있는 UI 컴포넌트를 작성합니다.

app/page.tsx

'use client';

import { useState } from 'react';

export default function PhoneAuth() {
  const [phone, setPhone] = useState('');
  const [code, setCode] = useState('');
  const [step, setStep] = useState(1); // 1: 번호 입력, 2: 인증번호 입력

  const handleSend = async () => {
    const res = await fetch('/api/auth/send', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ phone })
    });
    
    if (res.ok) {
      alert('인증번호가 발송되었습니다.');
      setStep(2);
    } else {
      alert('발송 실패. 다시 시도해주세요.');
    }
  };

  const handleVerify = async () => {
    const res = await fetch('/api/auth/verify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ phone, code })
    });

    if (res.ok) {
      alert('인증이 완료되었습니다!');
      // TODO: 로그인 처리 또는 다음 단계로 이동
    } else {
      alert('잘못된 인증번호입니다.');
    }
  };

  return (
    <div>
      <h2>휴대폰 본인인증</h2>
      
      {step === 1 ? (
        <div>
           setPhone(e.target.value)}
            className="border p-2 rounded"
          /&gt;
          
            인증번호 받기
          
        </div>
      ) : (
        <div>
           setCode(e.target.value)}
            className="border p-2 rounded"
          /&gt;
          
            인증하기
          
        </div>
      )}
    </div>
  );
}

4. 실무 적용 시 팁 (Best Practices)

1. 요청 횟수 제한 (Rate Limiting): 악의적인 사용자가 SMS 발송을 무한정 요청하는 것을 막기 위해 Upstash Redis 등을 활용해 IP 당 발송 횟수를 제한하세요.
2. 타이머 구현: 인증번호는 보통 3분(180초)의 유효기간을 갖습니다. 클라이언트 단에서 카운트다운 타이머를 보여주면 UX가 크게 향상됩니다.
3. 입력값 검증: 정규표현식을 사용하여 정해진 자릿수 및 올바른 번호 패턴일 때만 API로 전송되도록 막는 것이 좋습니다.

---

마무리하며: 서류 없는 가장 쉬운 SMS 인증, EasyAuth

지금까지 Next.js에서 SMS 기반 휴대폰 본인인증을 구현하는 방법을 알아보았습니다. 코드는 간단하지만, 막상 실제로 문자를 발송하려면 통신사 서류 심사에서 일주일이 훌쩍 지나가곤 합니다.

개발에만 집중하고 싶다면, 초간단 API [EasyAuth(이지어스)]를 사용해 보세요.

• 🚫 서류 불필요: 사업자등록증, 이용증명원 등 복잡한 제출 서류 제로
• 🚀 즉시 시작: 가입 후 5분 안에 자동 발신번호로 API 연동 완료
• 💰 합리적 가격: 건당 30~50원에 달하는 기존 서비스 대비 건당 15~25원 수준
• 🎁 무료 체험: 가입 시 테스트용 10건 무료 제공

스타트업 MVP나 토이/사이드 프로젝트를 진행 중인 개발자분들, 이지어스로 인증 스트레스를 날려버리고 핵심 서비스 로직 구현에만 시간을 쏟으세요!