사이드 프로젝트 휴대폰 인증, 꼭 서류가 필요할까?

사이드 프로젝트나 스타트업 MVP를 개발할 때 개발자를 가장 지치게 하는 것은 기술적인 난관이 아니라 **'서류 작업'**입니다. 특히 SMS 본인인증을 도입하려고 API를 찾아보면 사업자등록증, 통신사 가입증명원, 발신번호 사전등록 등 복잡한 절차가 가로막고 있죠.

이런 문제를 해결하기 위해 등장한 것이 바로 **EasyAuth(이지어스)**입니다. EasyAuth는 서류 제출이나 발신번호 사전등록 없이 가입 후 5분 만에 API 연동을 끝낼 수 있는 개발자 친화적인 초간단 SMS 인증 서비스입니다.

이번 포스팅에서는 Vue 3의 Composition API와 상태 관리 라이브러리인 Pinia, 그리고 EasyAuth를 활용하여 실전에서 바로 쓸 수 있는 SMS 휴대폰 인증 폼을 구현해보겠습니다.

---

왜 이 스택을 선택했을까요?

1. Vue 3 Composition API: 로직의 재사용성을 높이고 컴포넌트를 깔끔하게 유지합니다.
2. Pinia: 인증 상태(발송 여부, 검증 완료 여부)를 전역으로 관리하여 여러 컴포넌트에서 손쉽게 접근할 수 있습니다.
3. EasyAuth: /send와 /verify 단 두 개의 엔드포인트로 백엔드/프론트엔드 통신 로직을 극도로 단순화합니다.

---

1. Pinia Store 세팅 (인증 상태 관리)

먼저 인증 상태와 API 호출 로직을 담당할 Pinia Store를 생성합니다. EasyAuth API는 직관적인 구조를 가지고 있어 로직 작성이 매우 간편합니다.

// src/stores/useAuthStore.js
import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useAuthStore = defineStore('auth', () => {
  const isSent = ref(false);
  const isVerified = ref(false);
  const errorMsg = ref('');

  // 1. 인증번호 발송 (EasyAuth POST /send)
  const sendVerification = async (phone) => {
    try {
      // 실제 실무에서는 보안을 위해 백엔드 프록시를 통하는 것을 권장합니다.
      const res = await fetch('https://api.easyauth.co.kr/send', {
        method: 'POST',
        headers: { 
          'Content-Type': 'application/json', 
          'Authorization': 'Bearer YOUR_EASYAUTH_API_KEY' 
        },
        body: JSON.stringify({ to: phone })
      });
      
      if (res.ok) {
        isSent.value = true;
        errorMsg.value = '';
      } else {
        errorMsg.value = '발송에 실패했습니다. 번호를 확인해주세요.';
      }
    } catch (e) {
      errorMsg.value = '네트워크 오류가 발생했습니다.';
    }
  };

  // 2. 인증번호 검증 (EasyAuth POST /verify)
  const verifyCode = async (phone, code) => {
    try {
      const res = await fetch('https://api.easyauth.co.kr/verify', {
        method: 'POST',
        headers: { 
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_EASYAUTH_API_KEY' 
        },
        body: JSON.stringify({ to: phone, code })
      });

      if (res.ok) {
        isVerified.value = true;
        errorMsg.value = '';
      } else {
        errorMsg.value = '인증번호가 일치하지 않거나 만료되었습니다.';
      }
    } catch (e) {
      errorMsg.value = '검증 중 오류가 발생했습니다.';
    }
  };

  return { isSent, isVerified, errorMsg, sendVerification, verifyCode };
});

---

2. Vue 3 컴포넌트 구현 (UI)

이제 작성한 Store를 바탕으로 사용자에게 보여질 뷰(View)를 구현합니다.

  <div>
    <h2>휴대폰 본인인증</h2>
    
    
    <div>
      
      <div>
        
        
          {{ authStore.isSent ? '발송 완료' : '인증번호 발송' }}
        
      </div>

      
      <div>
        
        
          확인
        
      </div>
    </div>

    
    <p>
      {{ authStore.errorMsg }}
    </p>

    
    <div>
      <p>✅ 본인인증이 완료되었습니다!</p>
    </div>
  </div>

---

💡 실무 구현 팁 (Best Practices)

1. 타이머 기능 추가: UX 향상을 위해 인증번호 발송 후 3분(180초) 타이머를 구현하는 것이 좋습니다.
2. 에러 핸들링 고도화: 재발송 버튼 구현 및 연속 클릭 방지(Debounce) 로직을 추가하세요.
3. 보안 고려사항 (중요): 위 예제는 이해를 돕기 위해 프론트엔드에서 직접 API를 호출했지만, 실제 프로덕션 환경에서는 API Key 노출을 막기 위해 Next.js API 라우트나 Express, Spring 등의 백엔드 서버를 거쳐서(Proxy) 호출해야 합니다.

---

결론: 1인 개발자와 스타트업을 위한 최고의 선택

과거에는 휴대폰 본인인증 하나를 붙이려 해도 2~3주의 시간이 걸리고 수많은 서류가 필요했습니다. 하지만 **EasyAuth(이지어스)**를 활용하면 서류 제출이나 발신번호 등록 없이, 회원가입 후 단 5분 만에 본인인증 기능을 연동할 수 있습니다.

• 서류 Zero: 사업자등록증 없이 바로 시작
• 비용 절감: 기존 건당 30~50원에서 건당 15~25원으로 합리적 제공
• 초기 혜택: 가입 시 테스트용 10건 무료 제공

지금 바로 토이 프로젝트나 MVP에 SMS 인증이 필요하다면, 더 이상 헤매지 말고 EasyAuth로 빠르게 연동해 보세요!