[비개발자 AX] Gemini로 91일 팀 습관 트래커 웹앱을 PRD부터 Airtable 연동까지 완성하기

한줄 요약

PRD 문서 하나로 Gemini와 대화하며 습관 추적, 게이미피케이션, 팀 리더보드, Airtable 연동까지 갖춘 풀스택 웹앱을 만들었습니다.

이런 분들께 도움돼요

• 코딩 없이 AI로 웹앱을 만들어보고 싶은 비개발자

• PRD(기획서)를 AI에게 전달해서 실제 작동하는 결과물을 얻고 싶은 분

• Airtable을 백엔드로 활용한 노코드/로우코드 프로젝트에 관심 있는 분

• 팀 단위 습관 형성 도구를 직접 만들어보고 싶은 분

소개: 시도하고자 했던 것과 그 이유

문제 상황

팀원들과 함께 91일 동안 습관을 형성하는 챌린지를 진행하고 싶었습니다. 기존 습관 앱들은 개인용이거나, 팀 기능이 있어도 우리가 원하는 "주간 빈도 설정", "사진 인증", "팀 리더보드" 같은 기능이 없었어요.

직접 만들면 되겠다 싶었지만, 개발 경험이 없어서 막막했습니다.

목표

1. 91일 습관 트래커: 뇌과학적으로 습관이 고착화되는 90~91일 여정 시각화

2. 유연한 목표 설정: "일주일에 3번만 해도 성공" 같은 현실적인 목표

3. 팀 시너지: 리더보드를 통한 건강한 경쟁과 동기부여

4. 실제 배포: Airtable 연동으로 데이터가 저장되는 실사용 가능한 앱

진행 방법: 어떤 도구를 사용했고, 어떻게 활용했나요?

사용한 도구

• AI 도구: Google AI Studio (Gemini 3 Pro Preview)

• 프론트엔드: React + TypeScript + Tailwind CSS

• 백엔드: Airtable (API 연동)

• 라이브러리: canvas-confetti (축하 애니메이션)

작업 과정

1단계: PRD 작성 및 기본 구현 요청

먼저 상세한 PRD(Product Requirements Document)를 작성했습니다:

• 프로젝트 개요 및 핵심 목표

• 사용자 기능 요구사항 (습관 관리, 주간 뷰, 게이미피케이션, 팀 기능)

• 데이터베이스 설계 (Users, Habits, HabitLogs 테이블)

• UI/UX 요구사항

• 색상 결정 알고리즘

Gemini가 PRD를 읽고 11개 파일을 한 번에 생성했습니다:

• types.ts, constants.ts - 타입 및 상수 정의

• services/airtableService.ts - Mock 백엔드 서비스

• components/ - WeeklyView, Leaderboard, Confetti 등 컴포넌트

• App.tsx, index.tsx - 메인 앱

2단계: 점진적 기능 추가 (대화형 개발)

PRD에 없던 기능들을 대화로 하나씩 추가했습니다:

3단계: Airtable 연동

Mock 서비스를 실제 Airtable API로 교체하는 과정:

나: "에어테이블에 연동하려면 어떻게 해야돼?"
Gemini: [테이블 구조 및 필드 설명 제공]

나: "token: patKnxxxxxx, base_id: appxxxxxxx"
Gemini: [airtableService.ts 전체 재작성]

발생한 문제와 해결:

1. 인증 실패: 토큰 앞부분만 복사함 → 전체 토큰(70자 이상) 입력으로 해결

2. 습관 추가 안됨: 검색 쿼리 문제 → 클라이언트 사이드 필터링으로 변경

3. 회원 삭제 안됨: Rate Limit(초당 5회) → Batch Delete(10개씩) + 딜레이 적용

4단계: 관리자 기능 및 배포

나: "관리자페이지에서 회원 삭제 기능, 특정 이메일만?"
Gemini: [ADMIN_EMAILS 상수 + AdminPanel 컴포넌트 생성]

배포 시 Unexpected token ':' 에러 → importmap 충돌 문제, index.html 정리로 해결

결과와 배운 점

결과

생성된 파일 (16개+):

• types.ts - 타입 정의

• constants.ts - 관리자 이메일, 색상 등 상수

• services/airtableService.ts - Airtable CRUD 전체 로직

• components/WeeklyView.tsx - 주간 7일 타일 뷰

• components/HabitCard.tsx - 습관 카드 (갤러리 포함)

• components/Leaderboard.tsx - 팀 리더보드

• components/AdminPanel.tsx - 관리자 패널

• components/Confetti.tsx - 축하 애니메이션

• App.tsx - 메인 앱 로직

구현된 기능:

• 습관 CRUD (생성/조회/수정/삭제)

• 주간 빈도 설정 (일주일에 N번)

• 듀얼 프로그레스 바 (주간 + 전체)

• 사진 인증 + 갤러리

• 팀 리더보드 (주간/전체 순위 토글)

• 회원 프로필 페이지

• 관리자 전용 회원 관리

• Airtable 실시간 연동

배운 점

1. PRD의 힘

상세한 PRD를 먼저 작성하니 AI가 전체 구조를 한 번에 이해하고 일관된 코드를 생성했습니다. "대충 습관 앱 만들어줘"보다 훨씬 효율적이었어요.

2. 점진적 요청의 중요성

한 번에 모든 기능을 요청하지 않고, 작동하는 기본 버전 → 기능 추가 → 문제 해결 순서로 진행하니 각 단계에서 결과를 확인하며 방향을 조정할 수 있었습니다.

3. 에러 메시지는 힌트다

"Base ID missing", "Authentication failed" 같은 에러가 나와도 당황하지 않고 AI에게 그대로 전달하면 원인과 해결책을 알려줬습니다.

4. 외부 서비스 연동의 함정

Airtable API Rate Limit, 토큰 형식, Batch 처리 등 문서를 직접 읽지 않아도 AI가 알아서 처리해줬지만, "안 된다"고만 하면 AI도 원인을 모릅니다. 에러 메시지를 정확히 전달하는 게 핵심이었어요.

재사용 가능한 프롬프트

프롬프트 1: PRD 기반 초기 구현 요청

[PRD 전문 첨부]

위 PRD를 기반으로 React + TypeScript로 구현해줘.
- Tailwind CSS 사용
- Mock 데이터로 먼저 작동하게
- 컴포넌트 분리해서 구조화

프롬프트 2: 기능 추가 요청

[현재 기능 설명] 에서
[원하는 변경사항]을 추가해줘.

예시:
- "습관을 추가할 때 일주일에 N번 완료로 설정하는 기능"
- "이번주 몇% 완료, 전체 몇% 진행을 위아래로 표시"

프롬프트 3: 외부 서비스 연동

이제 [서비스명]에 연동하려고 해.
token: [토큰]
base_id: [베이스ID]
Table Name: [테이블명]

사용자가 입력하거나 지우는 정보가 연동되도록 해줘.

프롬프트 4: 에러 해결 요청

Fix the following errors:
[에러 메시지 그대로 복사]

향후 계획

1. Vercel/Netlify 배포: 팀원들이 실제로 사용할 수 있도록 웹에 배포

2. 알림 기능: 매일 체크 리마인더 (이메일 또는 슬랙 연동)

3. 통계 대시보드: 주간/월간 완료율 차트

4. 모바일 최적화: PWA로 홈 화면 추가 가능하게

도움 받은 글

• Airtable API 공식 문서

• gpters 20기 Claude Code 입문 템플릿

• canvas-confetti 라이브러리 문서