Next.js App Router에서 서류 없이 5분 만에 SMS 휴대폰 본인인증 구현하기
2026-05-24T01:01:40.147Z
Next.js App Router에서 서류 없이 5분 만에 SMS 휴대폰 본인인증 구현하기
1. 개발자가 겪는 SMS 인증의 높은 벽
새로운 토이 프로젝트를 시작하거나 스타트업의 MVP(Minimum Viable Product)를 빠르게 개발해야 할 때, 유저의 신원을 확인하고 스팸 가입을 막기 위해 가장 먼저 고려하는 기능이 바로 **'휴대폰 본인인증(SMS OTP)'**입니다.
하지만 막상 API를 연동하려고 국내외 SMS 서비스들을 찾아보면 숨이 턱 막힙니다.
- "사업자등록증명원을 제출해 주세요."
- "발신번호 사전등록을 위해 통신사 가입증명원이 필요합니다."
- "심사 기간은 영업일 기준 3~5일 소요됩니다."
"나는 그저 주말에 만드는 사이드 프로젝트에 가볍게 붙이고 싶을 뿐인데?" 1인 개발자, 프리랜서, 혹은 아직 법인을 설립하지 않은 예비 창업팀에게 이런 서류 요구는 개발 의지 자체를 꺾어버리는 거대한 장벽입니다. 게다가 건당 30~50원에 달하는 발송 비용도 트래픽이 없는 초기 서비스에는 은근히 부담스럽습니다.
2. 서류 불필요! EasyAuth(이지어스)로 5분 만에 해결하기
이런 개발자들의 고충을 완벽하게 해결해 주는 초간단 SMS 인증 API가 바로 **[EasyAuth(이지어스)]**입니다. 이 글에서는 Next.js App Router 환경에서 EasyAuth를 활용해 단 5분 만에 SMS 본인인증 기능을 구현하는 방법을 알아봅니다.
왜 EasyAuth인가요?
- 서류 완전 면제: 사업자등록증, 이용증명원 등 어떠한 서류도 요구하지 않습니다.
- 즉시 시작 가능: 번거로운 심사 없이 가입 직후 API Key를 발급받아 5분 안에 연동할 수 있습니다.
- 자동 발신번호: 발신번호 사전등록을 하느라 통신사 고객센터와 씨름할 필요가 없습니다. 자동으로 할당된 대표번호로 즉시 발송됩니다.
- 합리적인 가격: 기존 대비 절반 수준인 건당 15~25원으로 초기 비용 부담을 확 낮췄습니다.
- 무료 테스트: 가입 즉시 10건의 무료 체험 건수가 제공되어 결제 없이 바로 테스트해 볼 수 있습니다.
EasyAuth의 API 구조는 복잡한 설정 없이 /send (발송)와 /verify (검증) 단 두 개의 엔드포인트로 끝납니다. 이제 본격적으로 코드를 작성해 봅시다.
3. 단계별 구현 가이드 (Step-by-Step)
본 튜토리얼은 Next.js 14/15 App Router 환경을 기준으로 작성되었습니다. Server Actions를 사용하여 백엔드 API 라우트를 따로 만들 필요 없이 안전하고 간결하게 구현합니다.
Step 1: 환경 변수 설정
먼저 EasyAuth 대시보드에서 발급받은 API Key를 .env.local 파일에 저장합니다. (클라이언트에 노출되지 않도록 NEXT_PUBLIC_ 접두사는 붙이지 않습니다.)
# .env.local
EASYAUTH_API_KEY=your_easyauth_api_key_here
Step 2: Server Actions 작성 (app/actions.ts)
서버 측에서 EasyAuth API와 통신할 함수를 작성합니다. Next.js의 Server Actions를 활용하면 클라이언트 컴포넌트에서 이 함수들을 직접 호출할 수 있습니다.
// app/actions.ts
"use server";
const API_KEY = process.env.EASYAUTH_API_KEY;
const BASE_URL = "https://api.easyauth.kr";
// 1. 인증번호 발송 액션
export async function requestSmsVerification(phoneNumber: string) {
if (!API_KEY) throw new Error("API Key is missing");
try {
const response = await fetch(`${BASE_URL}/send`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${API_KEY}`,
},
body: JSON.stringify({ to: phoneNumber }),
});
if (!response.ok) {
const errorData = await response.json();
return { success: false, error: errorData.message || "발송에 실패했습니다." };
}
return { success: true };
} catch (error) {
return { success: false, error: "서버 통신 에러가 발생했습니다." };
}
}
// 2. 인증번호 검증 액션
export async function verifySmsCode(phoneNumber: string, code: string) {
try {
const response = await fetch(`${BASE_URL}/verify`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${API_KEY}`,
},
body: JSON.stringify({ to: phoneNumber, code }),
});
if (!response.ok) {
return { success: false, error: "인증번호가 일치하지 않거나 만료되었습니다." };
}
return { success: true };
} catch (error) {
return { success: false, error: "서버 통신 에러가 발생했습니다." };
}
}
Step 3: 클라이언트 UI 컴포넌트 작성 (app/page.tsx)
이제 사용자가 전화번호와 인증번호를 입력할 수 있는 화면을 만듭니다. 상태 관리를 위해 클라이언트 컴포넌트("use client")로 선언합니다.
// app/page.tsx
"use client";
import { useState } from "react";
import { requestSmsVerification, verifySmsCode } from "./actions";
export default function AuthPage() {
const [phoneNumber, setPhoneNumber] = useState("");
const [code, setCode] = useState("");
const [step, setStep] = useState<"INPUT_PHONE" | "INPUT_CODE" | "SUCCESS">("INPUT_PHONE");
const [loading, setLoading] = useState(false);
const [message, setMessage] = useState("");
// 인증번호 요청 핸들러
const handleSendCode = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setMessage("");
// 번호 형식 포맷팅 (하이픈 제거 등 필요시 추가)
const cleanPhone = phoneNumber.replace(/[^0-9]/g, "");
const res = await requestSmsVerification(cleanPhone);
if (res.success) {
setStep("INPUT_CODE");
setMessage("인증번호가 발송되었습니다. 3분 안에 입력해주세요.");
} else {
setMessage(res.error || "오류가 발생했습니다.");
}
setLoading(false);
};
// 인증번호 검증 핸들러
const handleVerifyCode = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setMessage("");
const cleanPhone = phoneNumber.replace(/[^0-9]/g, "");
const res = await verifySmsCode(cleanPhone, code);
if (res.success) {
setStep("SUCCESS");
setMessage("인증이 완료되었습니다!");
} else {
setMessage(res.error || "인증에 실패했습니다.");
}
setLoading(false);
};
return (
<div>
<h1>휴대폰 본인인증</h1>
{step === "SUCCESS" ? (
<div>
✅ 휴대폰 인증이 성공적으로 완료되었습니다.
</div>
) : (
{/* 전화번호 입력 폼 */}
<div>
휴대폰 번호
setPhoneNumber(e.target.value)}
disabled={step === "INPUT_CODE"}
placeholder="01012345678"
className="w-full p-2 border rounded-md"
required
/>
</div>
{/* 인증번호 입력 폼 (발송 후에만 표시) */}
{step === "INPUT_CODE" && (
<div>
인증번호
setCode(e.target.value)}
placeholder="6자리 숫자 입력"
maxLength={6}
className="w-full p-2 border rounded-md"
required
/>
</div>
)}
{/* 상태 메시지 */}
{message && (
<p>
{message}
</p>
)}
{/* 제출 버튼 */}
{loading
? "처리 중..."
: step === "INPUT_PHONE"
? "인증번호 받기"
: "인증하기"}
)}
</div>
);
}
4. 실무 적용 팁 & 보안 고려사항 (Best Practices)
위의 코드만으로도 훌륭하게 동작하지만, 프로덕션 레벨로 올리기 위해서는 몇 가지 방어 로직을 추가하는 것이 좋습니다.
-
요청 쿨다운(Rate Limiting) 적용 악의적인 사용자가 '인증번호 받기' 버튼을 무한 클릭하여 SMS 발송 비용을 폭탄 맞게 하는 것을 방지해야 합니다. 클라이언트 단에서는 버튼 클릭 후 1~2분 간 버튼을 비활성화(Disabled) 처리하고, 서버 단(Server Actions)에서는 Redis나 DB를 활용해 동일 IP/번호당 일일 발송 횟수를 5회 이하로 제한하는 것이 좋습니다.
-
입력값 검증(Validation) 서버로 데이터를 넘기기 전, 클라이언트 측에서 전화번호 정규식(
/^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/)을 통해 올바른 형식인지 1차로 검증해야 불필요한 API 호출을 줄일 수 있습니다. -
타이머 구현 인증번호 유효시간(보통 3분~5분)을 나타내는 타이머를 UI에 노출하여 사용자의 빠른 입력을 유도하세요.
5. 마무리
지금까지 Next.js App Router의 Server Actions와 EasyAuth를 결합하여 복잡한 서류나 심사 없이 5분 만에 SMS 본인인증을 구현하는 과정을 살펴보았습니다.
과거에는 "인증 기능 하나 붙이려고 사업자등록증까지 떼야 해?"라며 좌절했던 토이 프로젝트, 1인 개발자, 스타트업 MVP 팀들에게 EasyAuth는 가뭄의 단비 같은 솔루션입니다. 건당 15원이라는 파격적인 가격과 가입 즉시 주어지는 10건의 무료 테스트 크레딧으로, 여러분의 서비스에 지금 당장 안전하고 간편한 휴대폰 본인인증을 도입해 보세요!
> 🚀 가입 후 5분 만에 연동 끝! 서류 없는 개발자 친화적 SMS API, [EasyAuth(이지어스) 시작하기]
비트베이크에서 광고를 시작해보세요
광고 문의하기