소개
이번 주엔 Airtable과 커스텀 폼을 연결해서 동물병원 치료 케이스를 자동으로 수집하는 시스템을 구축했습니다. 🎉
원래는 원장님들께 PPT로 케이스를 받았는데, 참여가 저조하고 정리도 어려웠습니다.
그래서 원장님들이 부담 없이 참여할 수 있는 설문형 폼을 만들고, 입력된 데이터는 Airtable에 자동으로 정리되는 구조를 개발했보았습니다!
진행 방법
💡 구조 설계
Airtable 테이블 구성
치료케이스 (메인 테이블)
케이스 제목, 원장님명, 환자 정보, 치료 내용 등 텍스트 필드 중심
케이스이미지 (서브 테이블)
케이스와 연결 (Link to record)
이미지 카테고리, 이미지 파일, 이미지 설명 (각 사진 설명 필수!)
🔐 API 정보 수집
Personal Access Token 생성: https://airtable.com/create/tokens 에서
Base ID 확인: 베이스 주소에서
appXXXXXXXXXXXXXXX확인
🧩 커스텀 폼 개발
HTML, JavaScript로 만든 폼에서:
각 필드 입력값 → 치료케이스 테이블로 전송
이미지 + 설명 → 케이스이미지 테이블로 전송
const CONFIG = {
AIRTABLE_TOKEN: 'YOUR_TOKEN',
BASE_ID: 'YOUR_BASE_ID',
HOSPITAL_NAME: 'A동물병원',
TABLE_CASE: '치료케이스',
TABLE_IMAGE: '케이스이미지'
};
✅ 이 CONFIG 값만 바꾸면 병원마다 다른 폼 링크도 만들 수 있어요!
🖥 실행 방법
위 코드 저장 →
hospital-form.html더블 클릭하면 브라우저에서 실행 가능
3. 테스트를 제출했으나 레코드 생성 실패 확인
F12를 눌러 콘솔을 열어보니 위와 같은 오류가 확인 -> 422 오류는 필드 이름이나 데이터 형식이 맞지 않는다는 뜻이라고 함.
계속 오류나서 수정 중 입니다.
결과와 배운 점
✅ 성공한 점
원장님이 사진마다 설명을 입력하도록 설계할 수 있었음
병원마다 전용 링크 생성 → 병원명은 숨겨진 상태로 수집
Airtable DB 구조가 깔끔하게 정리될 것으로 예상.
⚠️ 오류 및 수정 예정
이미지 업로드 후 Airtable에 저장 시 오류 발생 (base64 방식 이슈 가능성)
이미지 크기 제한 문제 → 파일 누락 사례 발생
병원 연결 링크 자동 생성 중 일부 병원에서 Form 데이터 누락 현상 확인
각 사진마다 모두 설명을 입력해야하는 방식이라 다소 번거로워서 이부분을 수정할 예정
🔜 다음 계획
이미지 업로드 방식 개선 (Cloudinary/Firebase Storage 연동 고려)
오류 로그 수집 및 대응 기능 추가
병원별 링크 생성 자동화 스크립트 제작
