AI Studio로 Frontend의 디자인을 만들고 나서, 입력한 정보를 데이타베이스나 스토리지에 저장하기 위한 Backend 기능을 위해서 Airtable을 이용하는 방법을 해보았습니다.
1. 전체 시스템 흐름
SocialDraftAI : AI Studio 화면과 기능 구현SNS 컨텐츠 제작을 위해 주제를 입력하고 채널(쓰레드, 트위터(X)를 입력하면 해당 채널에서 선호하는 글쓰기 양식으로 만들고, 대표이미지를 만드는 앱입니다.
프롬프트
SNS 컨텐츠 제작하는 앱을 만들어줘.
SNS 주제를 입력하고 채널(쓰레드, twitter)를 선택하면, 해당 채널에서 선호하는 글쓰기 양식으로 만들어줘.
Airtable 연결
테이블의 구조를 화면에 서 입력받는 정보를 넣을 수 있도록 구성
2-1. 테이블 구조 만들기
2-2 Personal Access Token 얻기계정 프로필 하단에 Builder hub로 가서, Personal Access Tokens 부분에서 새로 token을 만들어준다.
Name: SNS 컨텐츠 자동화
Scopes
- data.records:read
- data.records:write
- schema.bases:read
를 선택해 입력해준다.
Add a Base
에서 데이터를 넣을 데이타베이스 이름을 입력해준다.
2-3 Aitable과 연결
AI Studio에서 프롬프트
이렇게 작성된 것을 저장하기 버튼을 만들어서 airtable에 테이블에 입력하고 싶어. airtable api token을 알려주면 연결해서 해당 테이블에 내용을 입력해줘.
token : patD74t9c9lWD0hAV****
base_id:tblZeH3qHw****/viwGkBnJYc****
Table Name : Contents
컬럼: Title, 내용, 채널(Threads, Twitter)
base ID와 table id는 데이타베이스 화면URL에서 찾을 수 있다.
Image 업로드 - Cloudinary 연결
Cloudinary 연결을 하는 이유는 Airtable Image 컬럼에 이미지를 업로드 하기 위해서는 이미지 URL을 얻기 위해서 경유하는 것임
3-1 Cloudinary 회원가입 & Api key 얻기계정 Profile에서 API Keys 부분에서 찾을 수 있음
3-2 AI Studio에 Cloudinary 연결이미지는 cloudinary에 올려서 해당 이미지의 URL을 받아서 aitable에 넣어줘. CLOUDINARY_URL=cloudinary://<your_api_key>:<your_api_secret>@dkwgpkzj3여기에 자신의 api key와 secrect을 넣으며 됨.
주의! : Airtable과 Cloudinary연결정보를 넣으면 code에 그대로 하드코딩 되므로, App을 공유할 하면 유출의 우려가 있음.
ps. 게시하는 로직은 n8n이나 Make로 구현 가능함.
