SMS 인증, 왜 이렇게 연동하기 힘들까?

사이드 프로젝트나 스타트업의 MVP(Minimum Viable Product)를 개발할 때, 악성 유저를 막고 진짜 고객을 모으기 위해 SMS 휴대폰 본인인증(OTP) 도입을 고민하게 됩니다. 하지만 기존 통신사나 대형 결제대행사(PG)의 SMS API를 연동하려고 하면 곧바로 큰 장벽에 부딪힙니다.

• 복잡한 서류 제출: 사업자등록증, 통신서비스 이용증명원 등 법인 서류 필수 요구
• 발신번호 사전등록: 스팸 방지를 위해 까다로운 심사 과정 통과 필요
• 비싼 단가: SMS 1건당 평균 30~50원의 높은 비용

주말을 활용해 빠르게 서비스를 런칭하려는 1인 개발자나 사이드 프로젝트 팀에게 이러한 과정은 개발 흐름을 완전히 끊어버리는 요소입니다.

이 글에서는 복잡한 서류나 심사 없이, 단 5분 만에 Next.js 14(App Router) 환경에서 SMS 인증을 구현하는 방법을 상세히 알아봅니다.

---

🛠 솔루션 개요: 어떻게 5분 만에 가능할까?

우리는 복잡한 인증 절차를 추상화한 Send & Verify 구조의 API를 사용할 것입니다. Next.js의 Route Handlers(app/api/)를 사용하여 백엔드 브릿지를 구축하고, 프론트엔드에서는 간단한 React 상태 관리로 인증번호를 요청하고 검증합니다.

아키텍처 흐름 (Flow)

1. 클라이언트: 사용자가 전화번호를 입력하고 '인증번호 발송' 버튼을 클릭합니다.
2. Next.js API: /api/auth/send 라우트에서 SMS 발송 API를 호출합니다.
3. 클라이언트: SMS로 수신한 6자리 인증번호를 입력합니다.
4. Next.js API: /api/auth/verify 라우트에서 인증번호의 유효성을 검증합니다.

---

💻 단계별 구현 가이드 (Step-by-Step)

Step 1. 환경 변수 설정

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

# .env.local
SMS_API_KEY=your_api_key_here
SMS_API_URL=https://api.easyauth.io

Step 2. Next.js API Routes (백엔드 로직)

Next.js 14의 App Router를 기반으로 두 개의 엔드포인트를 생성합니다.

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

import { NextResponse } from 'next/server';

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

    if (!phoneNumber) {
      return NextResponse.json({ error: '전화번호가 필요합니다.' }, { status: 400 });
    }

    // SMS API 발송 요청
    const response = await fetch(`${process.env.SMS_API_URL}/send`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.SMS_API_KEY}`
      },
      body: JSON.stringify({ to: phoneNumber }),
    });

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

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

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

import { NextResponse } from 'next/server';

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

    const response = await fetch(`${process.env.SMS_API_URL}/verify`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.SMS_API_KEY}`
      },
      body: JSON.stringify({ to: phoneNumber, code }),
    });

    const data = await response.json();

    if (data.isValid) {
      return NextResponse.json({ success: true, message: '인증이 완료되었습니다.' });
    } else {
      return NextResponse.json({ error: '잘못된 인증번호입니다.' }, { status: 400 });
    }
  } catch (error) {
    return NextResponse.json({ error: '검증 중 오류가 발생했습니다.' }, { status: 500 });
  }
}

Step 3. 클라이언트 UI 컴포넌트 구현

사용자가 상호작용할 프론트엔드 코드입니다. Tailwind CSS를 사용하여 깔끔하게 구성합니다.

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

import { useState } from 'react';

export default function SmsAuth() {
  const [phone, setPhone] = useState('');
  const [code, setCode] = useState('');
  const [isSent, setIsSent] = useState(false);
  const [isVerified, setIsVerified] = useState(false);

  const handleSend = async () => {
    const res = await fetch('/api/auth/send', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ phoneNumber: phone })
    });
    
    if (res.ok) {
      alert('인증번호가 발송되었습니다.');
      setIsSent(true);
    } else {
      alert('발송에 실패했습니다.');
    }
  };

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

    if (res.ok) {
      alert('인증 성공!');
      setIsVerified(true);
    } else {
      alert('인증번호가 일치하지 않습니다.');
    }
  };

  return (
    <div>
      <h2>휴대폰 본인인증</h2>
      
      {!isVerified ? (
        <div>
          <div>
            전화번호
            <div>
               setPhone(e.target.value)} 
                placeholder="01012345678"
                className="flex-1 border p-2 rounded"
                disabled={isSent}
              /&gt;
              
                {isSent ? '재발송' : '인증요청'}
              
            </div>
          </div>

          {isSent &amp;&amp; (
            <div>
              인증번호
              <div>
                 setCode(e.target.value)} 
                  placeholder="6자리 숫자"
                  className="flex-1 border p-2 rounded"
                  maxLength={6}
                /&gt;
                
                  확인
                
              </div>
            </div>
          )}
        </div>
      ) : (
        <div>
          ✅ 휴대폰 인증이 완료되었습니다.
        </div>
      )}
    </div>
  );
}

---

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

1. 전화번호 포맷팅 (Validation) 사용자가 -를 입력하든 안 하든 백엔드로 보낼 때는 숫자만 남기도록 정규식을 사용하는 것이 좋습니다. const cleanPhone = phone.replace(/[^0-9]/g, '');

2. 어뷰징 방지 (Rate Limiting) 누군가 악의적으로 SMS 발송 버튼을 연타하여 요금 폭탄을 유발할 수 있습니다. 클라이언트 사이드에서는 발송 버튼에 30초~1분의 쿨타임을 적용하고, 서버 측에서는 Redis 등을 활용해 동일 IP나 번호의 일일 요청 횟수를 제한하세요.

3. 보안 고려사항 클라이언트에서 직접 SMS API 키를 노출해서는 절대 안 됩니다. 위 예제처럼 반드시 Next.js API Routes(혹은 Server Actions)를 프록시로 거쳐서 호출해야 합니다.

---

🚀 결론: 서류 없이 5분 만에 시작하는 EasyAuth

지금까지 Next.js를 사용하여 SMS 휴대폰 인증을 구현하는 과정을 살펴보았습니다. 코드 자체는 매우 직관적이고 간단합니다.

하지만 여전히 API를 제공할 업체를 찾는 것이 문제라면?

스타트업, 1인 개발자, 토이 프로젝트를 진행 중이시라면 개발자 친화적인 초간단 SMS 인증 API, **EasyAuth(이지어스)**를 추천합니다.

• 📄 서류 완전 면제: 사업자등록증이나 통신서비스 이용증명원이 필요 없습니다.
• ⚡ 즉시 시작: 가입 즉시 발급되는 API 키로 5분 만에 연동할 수 있습니다.
• 📞 자동 발신번호: 번거로운 대표번호 사전 등록 과정이 필요 없습니다.
• 💰 합리적인 가격: 기존(30~50원) 대비 절반 수준인 건당 15~25원으로 매우 저렴합니다.
• 🎁 무료 체험 제공: 가입 시 즉시 테스트해 볼 수 있도록 10건을 무료로 제공합니다.

사이드 프로젝트에 회원가입 기능을 당장 붙여야 한다면, EasyAuth를 통해 불필요한 행정 절차를 건너뛰고 오직 개발과 비즈니스 로직에만 집중해 보세요!