React Native Expo에서 서류 없이 5분 만에 SMS 인증 구현하기

모바일 앱을 개발하다 보면 회원가입이나 비밀번호 찾기 단계에서 **본인 인증(SMS OTP)**이 필수적입니다. 하지만 기능 구현을 위해 SMS API를 찾아보면 예상치 못한 큰 장벽에 부딪히게 됩니다. 바로 복잡한 서류 작업입니다.

사업자등록증, 통신서비스 이용증명원, 발신번호 사전 등록 등... 사이드 프로젝트나 MVP를 빠르게 출시해야 하는 1인 개발자, 스타트업에게는 2~3일이 소요되는 이 과정이 엄청난 스트레스죠.

이 글에서는 복잡한 서류 없이, 가입 후 5분 만에 React Native(Expo) 환경에서 SMS 인증을 구현하는 방법을 소개합니다.

💡 해결책: 2개의 엔드포인트로 끝내는 인증

EasyAuth(이지어스)와 같이 개발자 친화적인 API를 사용하면 POST /send와 POST /verify 단 두 번의 API 호출만으로 SMS 인증을 끝낼 수 있습니다.

• Send: 사용자가 입력한 번호로 6자리 인증번호를 발송합니다.
• Verify: 사용자가 입력한 인증번호가 맞는지 검증합니다.

🛠️ 단계별 구현 (Step-by-Step)

React Native 환경에서 UI 상태를 관리하고 API를 호출해 보겠습니다.

1. 상태 변수 선언하기

전화번호, 인증번호, UI 상태(발송 완료 여부)를 관리할 state를 만듭니다.

const [phoneNumber, setPhoneNumber] = useState('');
const [verificationCode, setVerificationCode] = useState('');
const [isSent, setIsSent] = useState(false);

2. 전체 코드 (App.tsx)

Expo 프로젝트에 바로 복사해서 붙여넣을 수 있는 완성된 코드입니다. UI 디자인은 심플하게 구성했습니다.

import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity, Alert } from 'react-native';

export default function App() {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [verificationCode, setVerificationCode] = useState('');
  const [isSent, setIsSent] = useState(false);

  // API 키는 백엔드에서 안전하게 관리하는 것을 권장합니다
  const API_KEY = 'YOUR_EASYAUTH_API_KEY';
  const BASE_URL = 'https://api.easyauth.kr';

  // 1. 인증번호 발송 함수
  const handleSendCode = async () => {
    if (phoneNumber.length < 10) {
      Alert.alert('오류', '올바른 전화번호를 입력해주세요.');
      return;
    }

    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) {
        setIsSent(true);
        Alert.alert('성공', '인증번호가 발송되었습니다.');
      } else {
        Alert.alert('오류', '발송에 실패했습니다.');
      }
    } catch (error) {
      console.error(error);
      Alert.alert('오류', '네트워크 에러가 발생했습니다.');
    }
  };

  // 2. 인증번호 검증 함수
  const handleVerifyCode = async () => {
    if (verificationCode.length !== 6) {
      Alert.alert('오류', '6자리 인증번호를 입력해주세요.');
      return;
    }

    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: verificationCode
        })
      });

      if (response.ok) {
        Alert.alert('성공', '인증이 완료되었습니다!');
        // 다음 화면으로 이동
      } else {
        Alert.alert('오류', '잘못된 인증번호입니다.');
      }
    } catch (error) {
      console.error(error);
      Alert.alert('오류', '검증 중 에러가 발생했습니다.');
    }
  };

  return (
    
      휴대폰 인증
      
      
      
      {!isSent ? (
        
          인증번호 받기
        
      ) : (
        <>
          
          
            인증하기
          
        </>
      )}
    
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, justifyContent: 'center', backgroundColor: '#fff' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 30, textAlign: 'center' },
  input: { borderWidth: 1, borderColor: '#ddd', padding: 15, borderRadius: 8, marginBottom: 15, fontSize: 16 },
  button: { backgroundColor: '#007AFF', padding: 15, borderRadius: 8, alignItems: 'center' },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: 'bold' }
});

🎯 실무 팁 (Tips & Best Practices)

1. UX 최적화: 모바일 환경이므로 keyboardType="numeric"을 반드시 설정하여 사용자가 즉시 숫자 키패드를 볼 수 있게 하세요.
2. 보안 고려사항: 위 예제는 이해를 돕기 위해 클라이언트(앱)에서 API를 직접 호출했습니다. 실제 서비스에서는 API 키 보호를 위해 여러분의 백엔드(Node.js, Spring 등)를 거쳐서 호출하는 프록시 패턴을 권장합니다.

🚀 결론

React Native 앱에 인증 기능을 넣는 것은 생각보다 매우 간단합니다. 복잡한 절차만 없다면요!

이 예제에서 사용한 **EasyAuth(이지어스)**는 토이 프로젝트, 사이드 프로젝트, 스타트업 MVP 개발자를 위한 초간단 SMS API입니다.

• 사업자등록증, 이용증명원 등 서류 제출 완전 면제
• 대표번호 사전등록 불필요 (자동 발신번호 제공)
• 기존(30~50원) 대비 합리적인 가격 (건당 15~25원)
• 가입 즉시 무료 10건으로 위 코드를 바로 테스트 가능!

서류 심사로 며칠씩 낭비하지 마세요. 지금 바로 가입하고 5분 만에 여러분의 Expo 앱에 인증 기능을 연동해 보세요!