[개발] Airtable을 사용해서 앱 사전등록 CTA 버튼 빠르게 만들기

1. Airtable이란?

Airtable은 클라우드 기반의 협업 노코드 솔루션입니다. 많은 기능을 제공하고 있지만, 테이블 기능이 가장 대표적인 기능입니다. 테이블은 우리가 익히 알고있는 Google Spreadsheet와 유사합니다. 하지만 구글 스프레드시트에 비해서 훨씬 단순한 인터페이스와 특화된 기능을 제공합니다. 실제 기능상의 차이는 그렇게 크지 않지만, 객관적으로 Airtable이 더 다루기 쉽습니다.

2. Airtable 활용 사례

국내에서는 아직 Production 레벨에서 Airtable을 사용하는 사례는 찾아보기 어렵습니다. 하지만 구글에 검색해보면 Toy 프로젝트나 MVP 수준에서 활용하는 많은 문서들을 찾아보실 수 있습니다. 특히나, 올해 초에 ChatGPT와 같은 언어모델을 활용한 블로그 자동화 관련 글에 Airtable이 많이 언급되었는데요. 당시에 굉장히 많은 사용자들이 Airtable을 활용하여 블로그 CMS(Contents Management System)의 데이터베이스이자 대시보드를 손쉽게 구축하였습니다.

참고 - 챗GPT로 블로그 자동으로 만드는 방법

참고 - 에어테이블 활용해서 $20로 영업 관리 시스템 만들기

3. Airtable 기초 개념

Airtable은 큰 범주부터 작은 범주까지 다음과 같은 순서로 되어 있습니다.

workspace → base → table

계정 생성 후

‘Workspace’

를 먼저 생성하게 되며, Billing Plan은 Workspace 단위로 설정됩니다. 가입 초기에는

‘FREE PLAN’

의 Workspace를 생성할 수 있습니다. 이후에 Workspace 내부에서

‘Base’

를 작성하게 됩니다. Base는 우리가 흔히 알고있는 엑셀 또는 스프레트시트

‘파일’

과 대응됩니다.

하나의 Base는 일반적으로 우리들이

‘Tab’

으로 인식하고 있는 표 형태의 데이터를

‘Table’

이라는 형태으로 여러개 가지고 있습니다. ‘Table’은 일반적인 Grid style 이외에도 다양한 View 모드를 지원합니다.

4. Keys 사전작업

다음 진행에 앞서서 Base와 Table을 미리 만들어 두어야 합니다.

개발 프로젝트에서 Airtable에 접근하기 위해서는,

1) 접근 Key

그리고

2) Base ID

와

3) Table Name

이 필요합니다.

접근 Key(API key)

먼저 우측 상단의 설정 버튼을 누르고 ‘Developer hub’에 접근합니다.

Person access tokens에서 새로운 토큰을 생성합니다.
Scopes 에서 해당 API 키에 대한 권한을 설정합니다.
Access 에서는 앞서 만든 Base 를 선택해주면 됩니다.

Base ID

Base ID를 얻기 위해서는 여러가지 방법이 있습니다

1) 주소에서 찾기

먼저 베이스 페이지를 오픈합니다.

이때, 다음과 같이 되어 있는 주소의 URL에서 xxxxxxxx 란에 해당 하는 부분이 Base ID 입니다.

https://airtable.com/xxxxxxxxxx/yyyyyyyyyy/zzzzzzzzzz?blocks=hide

2) 공식 경로에서 찾기

베이스 페이지를 열고 우측 상단의 ‘물음표(Help)’ 버튼을 누릅니다.

이때 열려있는 사이드 바에서 가장 하단의

API documentation

을 누릅니다.

새롭게 열린 페이지에서

Base ID

를 바로 확인할 수 있습니다.

이곳 API 관련 페이지에서는 각종 정보를 확인하실 수 있습니다.

Table Name

Table Name은 우리가 만들었던 문자열 그대로입니다.

정확한 이름을 얻기 위해서, 테이블 탭의 우측 버튼을 누르고, ‘Rename table’을 누르면 확인 가능합니다.

5. React 프로젝트에 적용하기

이제 React 프로젝트에 airtable을 적용해봅시다. 먼저 패키지를 가볍게 설치해봅시다.

npm install airtable

이제 패키지를 불러와서 데이터에 접근하면 됩니다. Airtable은 매우 간단한 문법을 가지고 있습니다. 아래와 같은 코드만 추가하면, 내가 원하는 테이블의 접근이 완료됩니다!

간단히 Create 동작을 살펴보겠습니다. Table에서 적당한 데이터 필드(Column 값)만 설정해둔다면, 다음의 코드만으로 레코드가 테이블에 적재되는 것을 확인하실 수 있습니다.

Create 이외에도 CRUD(create, read, update, delete)에 필요한 모든 API가 공식 홈페이지에 문서로 작성되어 있습니다. 자세한 내용은 아래의 링크를 확인하세요.

https://airtable.com/developers/web/api/introduction

6. 코워크 적용 사례

아래처럼 Airtable를 활용해서 앱 사전예약 등록과 CTA 버튼을 구현해 보았습니다. 컴포넌트를 구현을 제외하고는 작업 시간이 거의 들지 않습니다. 앱 출시가 끝나면 table을 백업하고 삭제하기만 하면 됩니다. Google Speadsheet 또는 일반 DB(관계형)으로 동일한 기능을 구현하는 방법을 잠깐만 검색해보세요. Airtable을 통한 구현이 얼마나 간단한지 느끼실 수 있습니다.