Airtable API 연동 가이드: 안전한 폼 구현과 데이터 저장

시도 배경과 이유

워크샵 신청 폼을 만들 때 Airtable Form을 임베드하면 디자인 커스터마이징이 어렵고, 클라이언트에서 직접 Airtable API를 호출하면 API 키가 노출되는 문제가 있었습니다.

목표: 사이트 디자인에 맞는 커스텀 폼 UI + API 키를 숨긴 안전한 백엔드 연동

해결책: Vercel Serverless Functions로 API 키를 서버에 숨기고, 프론트엔드는 /api/apply만 호출하도록 구현

진행 방법

사용한 도구와 활용법

Claude Code: 전체 구현 (계획 → 코드 작성 → 디버깅 → 배포)
Vercel: 정적 사이트 호스팅 + Serverless Functions
Airtable: 신청 데이터 저장
GitHub: 버전 관리 + Vercel 자동 배포 연동

1단계: 계획 수립

Vercel 배포 + 커스텀 신청폼 구현해줘. GitHub Pages에서 Vercel로 이전하고, Airtable 연동은 Serverless Function으로.

Claude Code가 Plan Mode로 진입해서 파일 구조, API 설계, 필드 매핑까지 계획을 잡아줬습니다.

2단계: Serverless Function 생성

api/apply.js - Airtable API 호출하는 서버리스 함수:

export default async function handler(req, res) {
  const { AIRTABLE_TOKEN, AIRTABLE_BASE_ID, AIRTABLE_TABLE_ID } = process.env;

  const { name, phone, email, job, macbook, paid, tool, message } = req.body;

  // Airtable API 호출
  const response = await fetch(
    `https://api.airtable.com/v0/${AIRTABLE_BASE_ID}/${AIRTABLE_TABLE_ID}`,
    {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${AIRTABLE_TOKEN}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        records: [{
          fields: {
            '이름': name,
            '연락처': phone,
            '이메일': email,
            '하시는 일': job,
            '맥북 확인': macbook === true,
            '참가비 입금': paid === true,
            '만들어보고 싶은 도구': tool || '',
            '하고 싶은 말': message || ''
          }
        }]
      })
    }
  );

  const data = await response.json();
  return res.status(200).json({ success: true, recordId: data.records[0].id });
}

3단계: 프론트엔드 폼 제출 로직

const response = await fetch('/api/apply', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
});

4단계: Vercel 배포 + 환경 변수 설정

npx vercel --prod

Vercel Dashboard → Settings → Environment Variables에서:

AIRTABLE_TOKEN
AIRTABLE_BASE_ID
AIRTABLE_TABLE_ID

결과와 배운 점

배운 점과 꿀팁

Vercel Serverless Functions는 /api 폴더만 만들면 끝 - 별도 서버 설정 없이 바로 사용 가능
환경 변수로 API 키 관리 - 클라이언트에 노출되지 않아 안전
Claude Code에게 저장소 URL을 알려주면 git clone부터 배포까지 한 번에 처리

시행착오

처음에 다른 프로젝트 폴더(클로드코드 워크샵)에서 작업하다가 실제 배포 저장소(above-coding-club)와 섞임 → "이게 최종본이야"라고 명확히 알려주니 Claude Code가 정리해줌
Vercel CLI 링크 오류 발생 → 로그아웃 후 재로그인으로 해결
Airtable 필드명 불일치 → 테이블 확인 후 api/apply.js 수정

앞으로의 계획

신청 완료 시 자동 확인 이메일 발송 (Resend 또는 SendGrid 연동)
신청 현황 대시보드 추가

마지막 가격할인 혜택! 얼리버드 기간을 놓치지마세요🕊️