사이드 프로젝트에 SMS 인증, 왜 이렇게 힘들까?

토이 프로젝트나 스타트업 MVP를 개발하면서 유저 본인인증을 위해 SMS 인증을 도입해보려 한 적 있으신가요? 막상 API를 연동하려고 하면 사업자등록증, 통신서비스 이용증명원, 발신번호 사전등록 등 챙겨야 할 서류가 산더미입니다. 아직 사업자도 없는 개인 개발자나 빠르게 가설을 검증해야 하는 MVP 단계에서는 시작조차 하기 힘든 것이 현실입니다.

게다가 프론트엔드 중심의 Astro 프로젝트에서 문자 발송 API 하나를 위해 별도의 백엔드 서버(Node.js, Spring 등)를 구축하는 것도 엄청난 오버헤드입니다.

오늘은 Astro Actions를 이용해 백엔드 구축 없이 프론트엔드 코드만으로 서버리스 SMS 인증을 구현하는 방법을 알아봅니다. 서류 제출 없이 가입 후 5분 만에 쓸 수 있는 EasyAuth(이지어스) API를 활용해 보겠습니다.

---

해결책: Astro Actions + EasyAuth

1. Astro Actions: Astro 4.15 버전에 도입된 기능으로, 클라이언트에서 백엔드 함수를 타입 세이프(Type-safe)하게 호출할 수 있는 RPC(Remote Procedure Call) 기능입니다. 별도의 API 라우트나 서버 프레임워크 없이 서버 사이드 로직을 쉽게 작성할 수 있습니다.
2. EasyAuth: 개발자를 위한 초간단 SMS API입니다.
   • ❌ 서류 불필요: 사업자등록증 없이 이메일 가입만으로 즉시 시작
   • ⚡ 즉시 시작: API 연동까지 5분 컷 (자동 발신번호 제공)
   • 💰 합리적 가격: 건당 15~25원 (타사 대비 50% 저렴)
   • 🎁 무료 체험: 가입 즉시 10건 무료 테스트 제공

---

1단계: 프로젝트 설정 및 API 키 발급

먼저 EasyAuth 홈페이지에 가입하여 API 키를 발급받습니다. 서류 심사나 발신번호 등록 절차가 없으므로 가입 즉시 대시보드에서 EASYAUTH_API_KEY를 확인할 수 있습니다.

Astro 프로젝트 최상단에 .env 파일을 생성하고 발급받은 키를 넣습니다.

EASYAUTH_API_KEY=your_api_key_here

2단계: Astro Action 정의하기 (서버 로직)

src/actions/index.ts 파일을 생성하고, 인증번호를 발송하는 sendSms와 검증하는 verifySms 액션을 정의합니다. EasyAuth는 단 두 개의 엔드포인트(POST /send, POST /verify)로 구성되어 있어 연동이 매우 직관적입니다.

// src/actions/index.ts
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';

export const server = {
  sendSms: defineAction({
    accept: 'json',
    input: z.object({
      phone: z.string().regex(/^010\d{8}$/, '올바른 휴대폰 번호를 입력해주세요.'),
    }),
    handler: async (input) => {
      const res = await fetch('https://api.easyauth.co.kr/send', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${import.meta.env.EASYAUTH_API_KEY}`
        },
        body: JSON.stringify({ to: input.phone })
      });
      
      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.message || '인증번호 발송에 실패했습니다.');
      }
      return { success: true };
    }
  }),

  verifySms: defineAction({
    accept: 'json',
    input: z.object({
      phone: z.string(),
      code: z.string().length(6, '인증번호는 6자리입니다.')
    }),
    handler: async (input) => {
      const res = await fetch('https://api.easyauth.co.kr/verify', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${import.meta.env.EASYAUTH_API_KEY}`
        },
        body: JSON.stringify({ to: input.phone, code: input.code })
      });
      
      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.message || '유효하지 않은 인증번호입니다.');
      }
      return { success: true };
    }
  })
};

팁: astro:schema의 zod를 사용하면 클라이언트에서 넘어오는 데이터(전화번호 형식, 인증번호 길이 등)를 서버단에서 안전하게 검증할 수 있습니다.

3단계: 클라이언트에서 Action 호출하기

이제 사용자에게 보여질 UI를 만들고, 바닐라 자바스크립트를 이용해 방금 만든 Actions를 호출해 보겠습니다.

---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
---


  <main>
    <h1>휴대폰 본인인증</h1>
    
    <div>
      
      <div>
        전화번호
        <div>
          
          발송
        </div>
      </div>

      
      <div>
        인증번호 6자리
        <div>
          
          확인
        </div>
      </div>
    </div>
  </main>

  

실무 구현 팁 & Best Practices

1. 보안 고려사항 (Rate Limiting) 프로덕션 환경에서는 악의적인 사용자가 인증번호를 대량으로 요청하여 과금이 발생하지 않도록 조심해야 합니다. Astro의 미들웨어나 Cloudflare Turnstile(캡챠) 같은 솔루션을 도입해 매크로성 요청을 차단하는 것을 권장합니다.

2. 환경 변수 노출 주의 EASYAUTH_API_KEY는 서버 사이드 로직인 src/actions/index.ts 내부에서만 사용됩니다. 절대 PUBLIC_ 접두사를 붙여 프론트엔드 클라이언트에 노출하지 않도록 주의하세요!

마치며

백엔드 서버 구축이나 복잡한 서류 심사 없이, Astro Actions와 EasyAuth의 조합만으로 단 5분 만에 깔끔한 휴대폰 본인인증을 구현해 보았습니다.

• 인프라 구축? ➡️ Astro Actions로 해결
• 복잡한 서류와 비싼 요금? ➡️ EasyAuth로 해결

지금 1인 개발자나 사이드 프로젝트를 진행 중이시라면, 서류 없이 바로 시작할 수 있는 EasyAuth에 가입하고 10건의 무료 테스트 크레딧을 받아보세요. 여러분의 서비스 MVP 런칭이 한결 가벼워집니다!