기능 목록으로 웹앱 만들고 테스트하기 (Antigravity)

예시 프로젝트: 동네 모임 예약 앱

이 레슨에서는 “동네 독서 모임의 자리를 예약하는 앱”을 예로 들어요. 할 일 관리, 미니 커뮤니티 등 다른 주제여도 순서는 같아요.

1단계: 기능 목록 만들기

꼭 필요한 기능 (MVP)	나중에 할 기능
회원가입·로그인 (5-4 레슨)	카카오 로그인
모임 목록 보기	지도에서 모임 찾기
모임 자리 예약·예약 취소	예약 알림 메일
관리자: 모임 만들기·고치기 (6-1 레슨)	참가비 결제
내 예약 목록 보기	후기와 별점

기획을 함께 다듬기

동네 독서 모임 자리를 예약하는 웹앱을 만들고 싶어. 아직 코드는 쓰지 말고,
1) 이 앱을 한 문장으로 정의하고
2) 기능을 "꼭 필요한 것(MVP)"과 "나중에 할 것"으로 나누고
3) 필요한 화면 목록과 데이터 표(테이블) 목록을 정리해서
plan.md로 저장해 줘. 내가 확인하고 고칠게.

2단계: 하나씩 만들기

기능 목록이 정해지면 한 번에 하나씩 요청해요.

1. 계획 받기 이 기능만 어떻게?

2. 만들기 Antigravity가 작업

3. 테스트 시나리오대로 써 보기

4. 커밋 저장 포인트

AI 코딩 도구에게 이렇게 말해 보세요

plan.md의 MVP 기능 중 "모임 자리 예약·예약 취소"만 만들어 줘. 다른 기능은 건드리지 말아 줘.
- 로그인한 회원만 예약할 수 있어.
- 한 모임에는 정해진 인원까지만 예약할 수 있고, 꽉 차면 "마감"으로 보여 줘.
- 같은 사람이 같은 모임을 두 번 예약할 수 없어.
- 다른 사람의 예약은 취소할 수 없어. (데이터베이스 규칙으로도 막아 줘)
먼저 계획을 보여 주고, 다 만들면 내가 확인할 테스트 시나리오도 적어 줘.

👉 마지막 줄이 중요해요. AI에게 '내가 무엇을 확인하면 되는지'까지 받아 두면 검수가 쉬워져요.

3단계: 테스트 시나리오로 직접 써 보기

테스트 시나리오는 “이렇게 해 보면 이렇게 되어야 한다”는 확인 목록이에요. 다섯 가지 관점으로 만들어 보세요.

관점	예약 기능의 예시
✅ 정상 흐름	로그인 → 모임 선택 → 예약 → “내 예약”에 보인다
🤔 이상한 입력	예약 버튼을 아주 빠르게 두 번 누르면? → 예약은 하나만 생겨야 한다
🔐 권한	로그아웃 상태, 다른 회원 계정으로 남의 예약 취소 시도 → 막혀야 한다
📱 다른 화면	휴대폰 크기에서 예약 버튼이 잘 보이고 눌린다
🧮 경계값	정원 10명 중 10번째는 예약되고, 11번째는 “마감”이어야 한다

4단계: 버그를 정확하게 알려 주기

3-3 레슨의 수정 요청 공식을 버그 보고에 맞게 바꾸면 이렇게 돼요.

버그 보고 양식

[무엇을 했나요] 정원 10명인 모임에 계정 11개로 차례로 예약했어.
[무엇이 일어났나요] 11번째 계정도 예약이 됐어. (화면 캡처 첨부)
[원래 어때야 하나요] 10명이 차면 "마감"이 되고 더 이상 예약이 안 돼야 해.
원인을 먼저 설명하고, 화면뿐 아니라 데이터베이스에서도 막히도록 고쳐 줘. 다른 기능은 건드리지 말아 줘.

같은 버그가 계속 안 고쳐지면 3-5 레슨의 탈출법(멈추기 → 되돌리기 → 새 대화 → 더 작게)을 써요.

5단계: 공개하기

MVP 기능이 모두 테스트를 통과하면 4장에서 배운 대로 배포해요. 프레임워크 프로젝트라면 7-1 레슨의 빌드 설정과 환경 변수를 꼭 넣어요.

퀴즈

웹앱을 만들 때 가장 좋은 진행 방법은?

퀴즈

다음 중 '권한' 관점의 테스트 시나리오는?

기능 목록으로 웹앱 만들고 테스트하기