[SvelteKit 5] 서류 없이 5분 만에 Form Actions로 SMS 휴대폰 본인인증 구현하기

🚀 SMS 인증, 시작부터 막막하신가요?

사이드 프로젝트나 스타트업 MVP를 개발하며 SMS 휴대폰 본인인증을 붙이려고 할 때, 개발자들은 보통 큰 벽에 부딪힙니다. 기존 SMS 서비스들은 가입 단계부터 사업자등록증, 통신서비스 이용증명원 제출을 요구하고, 심지어 발신번호 사전등록까지 거쳐야 합니다.

사업자가 없는 1인 개발자나 빠르게 가설을 검증해야 하는 MVP 단계에서는 이런 복잡한 서류 작업이 엄청난 허들입니다.

이 글에서는 **복잡한 서류 제출 없이 가입 후 5분 만에 연동할 수 있는 [EasyAuth(이지어스)]**와 SvelteKit 5의 Form Actions를 활용하여 매우 빠르고 안전하게 SMS 본인인증 로직을 구현하는 방법을 알아봅니다.

💡 SvelteKit Form Actions와 EasyAuth의 조합

SvelteKit의 Form Actions는 클라이언트 사이드 자바스크립트 없이도 폼 제출을 서버에서 우아하게 처리할 수 있게 해줍니다. 여기에 use:enhance를 결합하면 페이지 새로고침 없이 매끄러운 UX를 제공할 수 있습니다.

EasyAuth의 API는 단 두 개의 엔드포인트로 구성되어 있어 Form Actions에 안성맞춤입니다.

POST /send : 인증번호 발송
POST /verify : 인증번호 검증

🛠️ 단계별 구현 가이드

1. 클라이언트 UI 구현 (`+page.svelte`)

먼저 전화번호를 입력받아 인증번호를 요청하는 폼과, 발송 성공 시 인증번호를 입력받는 폼을 구성합니다.



<h2>휴대폰 본인인증</h2>



  
  
    {form?.sent ? '인증번호 발송됨' : '인증번호 받기'}
  



{#if form?.sent &amp;&amp; !form?.success}

  
  
  
  인증하기

{/if}


{#if form?.success}
  <p>✅ 인증이 성공적으로 완료되었습니다!</p>
{/if}
{#if form?.error}
  <p>❌ {form.error}</p>
{/if}

2. 서버 사이드 로직 작성 (`+page.server.ts`)

이제 SvelteKit의 actions 객체를 정의하여 EasyAuth API와 통신합니다.

import { fail } from '@sveltejs/kit';
import type { Actions } from './$types';

// 발급받은 EasyAuth API 키를 환경변수에서 불러옵니다.
// 실제 프로덕션에서는 $env/dynamic/private 등을 사용하세요.
const EASYAUTH_API_KEY = 'YOUR_EASYAUTH_API_KEY';

export const actions = {
  send: async ({ request }) =&gt; {
    const data = await request.formData();
    const phone = data.get('phone')?.toString();

    if (!phone) {
      return fail(400, { error: '전화번호를 입력해주세요.' });
    }

    try {
      const response = await fetch('https://api.easyauth.kr/send', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${EASYAUTH_API_KEY}`
        },
        body: JSON.stringify({ phone })
      });

      if (!response.ok) throw new Error('발송 실패');
      
      return { sent: true, phone };
    } catch (err) {
      return fail(500, { error: '인증번호 발송에 실패했습니다.' });
    }
  },

  verify: async ({ request }) =&gt; {
    const data = await request.formData();
    const phone = data.get('phone')?.toString();
    const code = data.get('code')?.toString();

    if (!phone || !code) {
      return fail(400, { error: '전화번호와 인증번호가 필요합니다.' });
    }

    try {
      const response = await fetch('https://api.easyauth.kr/verify', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${EASYAUTH_API_KEY}`
        },
        body: JSON.stringify({ phone, code })
      });

      if (!response.ok) throw new Error('인증 실패');

      return { success: true };
    } catch (err) {
      return fail(400, { error: '인증번호가 일치하지 않거나 만료되었습니다.' });
    }
  }
} satisfies Actions;

💡 Tips & Best Practices

Progressive Enhancement: 위 코드는 use:enhance를 사용했기 때문에 자바스크립트가 활성화된 환경에서는 페이지 리로드 없이 부드럽게 작동하며, 자바스크립트가 실패하더라도 브라우저의 기본 Form 동작을 통해 기능이 정상적으로 수행됩니다.
보안 강화: 실제 운영 환경에서는 +page.server.ts 내에서 동일한 IP나 기기에서의 무분별한 발송 요청을 막기 위해 Rate Limiting(요청 제한) 로직을 추가하는 것이 좋습니다.

🎉 마치며: 개발자를 위한 진짜 API, EasyAuth

SvelteKit 5와 EasyAuth를 결합하면 정말 간단하게 SMS 인증 로직을 완성할 수 있습니다. 특히 사이드 프로젝트나 MVP 개발을 진행 중인 개발자에게 EasyAuth는 다음과 같은 엄청난 이점을 제공합니다.

서류 제출 완전 면제: 사업자등록증 없이 지금 바로 가입하고 5분 만에 연동 끝!
자동 발신번호 처리: 대표번호 사전등록이라는 귀찮은 과정이 없습니다.
합리적인 비용: 건당 30~50원 하는 기존 대비 15~25원으로 매우 저렴합니다.

지금 EasyAuth에 가입하시면 무료 체험 10건이 즉시 제공되니, 오늘 바로 여러분의 SvelteKit 프로젝트에 SMS 인증을 도입해 보세요!