9회 · 기능 완성하기: 참석 신청, 사진, 검색
테이블 사이의 관계를 이해하고 참석 신청, 사진 올리기, 검색·필터를 붙여 실제로 쓸 만한 서비스로 완성합니다.
“쓸 만한 서비스는 큰 기능 하나보다 작은 기능 여럿이 매끄럽게 이어진 것이다.”
학습 목표
- 테이블 사이의 관계(모임 ↔ 참석)를 이해한다
- 참석 신청, 사진 올리기, 검색·필터 기능을 붙인다
- 테스트 체크리스트로 직접 확인하고 버그를 고친다
오늘 만드는 것: 참석 신청·사진·검색이 되는 완성된 웹 서비스
실습 진도
—
실습 단계를 체크하면 표시돼요
오늘의 흐름
| 시간 | 내용 | 방식 |
|---|---|---|
| 0:00–0:10 | 지난 시간 복습: 두 계정 시험 결과 나누기 | 함께 |
| 0:10–0:30 | 표와 표를 잇는 관계: 모임과 참석 | 설명 |
| 0:30–0:45 | 쓸 만한 서비스의 조건, 요즘 업계에서는 | 설명 |
| 0:45–0:55 | 시연: 정원이 차면 막히는 참석 신청 | 시연 |
| 0:55–1:05 | 쉬는 시간 | — |
| 1:05–1:30 | 실습 9-1: 참석 신청 (정원 포함) | 실습 |
| 1:30–1:45 | 실습 9-2: 사진 올리기, 검색·필터 (하나 골라서) | 실습 |
| 1:45–2:00 | 실습 9-3: 테스트 체크리스트와 버그 잡기, 정리 | 실습·정리 |
오늘 붙일 기능
8회까지 "우리 모임" 웹앱에는 모임 목록, 모임 만들기, 로그인, 보안 규칙이 있습니다. 뼈대는 다 갖춘 셈입니다. 오늘은 회원들이 실제로 쓰고 싶어지게 만드는 기능을 붙입니다.
| 기능 | 회원 입장에서 | 새로 배우는 것 |
|---|---|---|
| 참석 신청·취소 | "저 갈게요"를 버튼 하나로 | 표와 표의 관계 |
| 정원 제한 | 자리가 차면 신청이 막힘 | 규칙을 데이터베이스에서 지키기 |
| 사진 올리기 | 모임 사진을 함께 보기 | 파일 저장소() |
| 검색·필터 | "이번 주 모임만" 보기 | 조건으로 고르기 |
| 내 모임 | 내가 신청한 모임만 모아 보기 | 로그인 정보 활용 |
다 할 필요는 없어요
참석 신청(실습 9-1)은 모두 함께 합니다. 사진과 검색은 하나만 골라도 충분합니다. 나머지는 과제나 다음 시간 전에 해 보세요.
표와 표를 잇는 관계
참석 정보는 어디에 적을까
"하늘 님이 10월 정기 모임에 참석"이라는 정보를 저장하고 싶습니다. 어디에 적어야 할까요?
방법 1: 모임 표에 칸을 추가한다?
| 모임 | 참석자1 | 참석자2 | 참석자3 | … |
|---|---|---|---|---|
| 10월 정기 모임 | 하늘 | 바다 | 구름 | … |
정원이 30명이면 칸이 30개 필요하고, 정원이 바뀌면 표를 고쳐야 합니다. 누가 어느 모임에 갔는지 찾기도 어렵습니다.
방법 2: 참석 표를 따로 만든다
| 참석 번호 | 모임 번호 | 회원 번호 | 신청 시각 |
|---|---|---|---|
| 1 | 3 (10월 정기 모임) | 하늘 | 10/02 20:14 |
| 2 | 3 (10월 정기 모임) | 바다 | 10/03 09:30 |
| 3 | 4 (11월 번개 모임) | 하늘 | 10/05 18:02 |
참석 한 번이 한 줄입니다. 몇 명이든 줄만 늘어나고, "하늘 님이 신청한 모임"도 "3번 모임의 참석자"도 쉽게 찾습니다. 이렇게 표와 표를 번호로 잇는 것을 라고 합니다.
도서관 대출 장부
도서관은 책 목록과 회원 목록을 따로 두고, 대출할 때마다 "책 번호, 회원 번호, 날짜"를 장부에 한 줄 적습니다. 책 카드에 빌린 사람 이름을 계속 덧붙이지 않지요. 참석 표가 바로 그 대출 장부입니다.
[meetups 모임] [rsvps 참석] [회원]
id ◀─────────────────── meetup_id
title user_id ──────────────▶ id
capacity created_at email규칙은 데이터베이스가 지킨다
정원 제한, "한 사람이 같은 모임에 두 번 신청 못 함" 같은 규칙은 화면 버튼이 아니라 데이터베이스에서 지키는 것이 안전합니다.
| 규칙 | 화면에서만 막으면 | 데이터베이스에서 막으면 |
|---|---|---|
| 중복 신청 금지 | 버튼을 빠르게 두 번 누르면 두 줄이 생김 | 두 번째 줄을 거절 |
| 정원 제한 | 두 사람이 동시에 마지막 자리를 누르면 둘 다 성공 | 한 명만 성공 |
| 남의 신청 취소 금지 | 버튼을 숨겨도 직접 요청하면 뚫림 | RLS가 거절 (8회) |
Claude에게 기능을 요청할 때 "규칙은 데이터베이스에서도 지켜줘"라는 한마디를 붙이는 습관을 들이세요.
사진은 어디에 저장할까
사진 같은 파일은 표에 직접 넣지 않고 파일 저장소(Storage) 에 따로 둡니다. 표에는 "사진이 어디 있는지(경로)"만 적습니다.
사진첩과 목차
사진은 사진첩(Storage)에, 목차(표)에는 "몇 쪽에 무슨 사진"만 적어 두는 것과 같습니다. 목차가 가벼우니 빨리 넘겨 볼 수 있습니다.
Storage에도 RLS처럼 규칙이 있습니다. "로그인한 사람만 올리기", "5MB 이하만", "사진 파일만" 같은 규칙을 정해 두지 않으면 남의 파일 저장소가 될 수 있습니다.
쓸 만한 서비스의 조건
기능이 많다고 좋은 서비스가 아닙니다. 처음 쓰는 사람이 헤매지 않는 것이 더 중요합니다.
| 상황 | 아쉬운 화면 | 좋은 화면 |
|---|---|---|
| 모임이 하나도 없을 때 | 빈 하얀 화면 | "아직 모임이 없어요. 첫 모임을 만들어 보세요" + 버튼 |
| 불러오는 중일 때 | 아무 변화 없음 | 회색 자리 표시나 "불러오는 중" |
| 정원이 찼을 때 | 버튼을 눌러야 에러 | 버튼이 "마감"으로 바뀜 |
| 인터넷이 끊겼을 때 | 영어 에러 | "연결이 불안정해요. 다시 시도해 주세요" |
모임이 하나도 없을 때, 불러오는 중일 때, 인터넷이 끊겨 불러오지 못했을 때 각각 어떤 화면이 보이는지 점검하고, 처음 쓰는 사람도 다음에 무엇을 하면 되는지 알 수 있게 안내 문구를 넣어줘.
요즘 업계에서는
AI는 점점 더 잘 만든다
AI가 실제 소프트웨어 문제를 얼마나 잘 고치는지 재는 시험(SWE-bench Verified)에서, 2026년 9월 기준 최고 점수는 Claude Opus 5의 97.0%입니다. (Vals.ai · SWE-bench) 불과 몇 년 전에는 상상하기 어려운 수준입니다.
그래도 "확인"은 사람의 몫
하지만 현장의 개발자들은 여전히 조심스럽습니다. 2025년 Stack Overflow 설문에서 66%가 "거의 맞지만 조금 틀린 결과"를 가장 큰 불만으로, 45%가 "AI가 만든 코드를 고치는 데 시간이 더 든다"를 꼽았습니다. (Stack Overflow 2025 설문 · AI)
시험 점수가 아무리 높아도, 내 서비스에서 내가 원한 대로 동작하는지는 시험지에 없습니다. "정원 12명"이 정말 13번째를 막는지, 할머니가 버튼을 찾을 수 있는지는 직접 눌러 봐야 압니다.
자동차 성능 시험과 내 출근길
자동차가 시험장에서 최고 점수를 받아도, 내 출근길 골목에서 주차가 잘 되는지는 직접 몰아 봐야 압니다.
그래서 요즘 일하는 방식은 이렇습니다.
- AI에게 만들게 한다.
- AI에게 확인할 목록도 만들게 한다. (테스트 체크리스트)
- 사람이 그 목록대로 직접 확인한다.
- 틀린 곳은 "한 일·기대·실제"로 정확히 알려 주고 다시 고치게 한다.
시연
강사가 다음을 보여 줍니다.
- Claude Code에게 참석 신청 기능을 플랜 모드로 요청하고, 계획에 "참석 표"와 "정원 규칙"이 들어 있는지 함께 읽습니다.
- 정원을 2명으로 둔 시험 모임에 계정 A, B로 신청하고, 계정 C로 신청하면 "마감"이 뜨는 것을 보여 줍니다.
- 일부러 버그를 찾아(예: 취소해도 인원 숫자가 안 줄어듦) "한 일·기대·실제" 형식으로 알려 주고 고치는 장면을 보여 줍니다.
실습
오늘의 주제: "책 읽는 저녁" 웹앱에 참석 신청을 붙이고, 사진 또는 검색 중 하나를 더합니다. 마지막에는 체크리스트로 직접 확인합니다. 사진은 저작권 걱정 없는 직접 찍은 풍경 사진이나 무료 이미지를 씁니다. 사람 얼굴이 나온 사진은 피하세요.
실습 9-1 · 참석 신청과 정원
약 25분- PROMPT참석 신청 기능 플랜 모드 권장
모임마다 참석 신청·취소 버튼을 만들어줘. 정원이 다 차면 신청을 막고, 내가 신청한 모임은 표시해줘. 필요한 테이블과 보안 규칙부터 계획으로 보여줘.
이렇게 되면 성공계획1. rsvps 표 만들기: meetup_id, user_id, created_at- 같은 사람이 같은 모임에 두 번 신청 못 하게 (unique)2. RLS: 참석자 수는 누구나 보기, 신청은 로그인한 본인만,취소는 본인 것만3. 정원 확인: 신청할 때 데이터베이스에서 현재 인원 확인4. 화면: "참석할게요" / "신청 취소" / "마감" 버튼, 8/12명 표시SQL은 실행 전에 보여 드릴게요.계획에 중복 금지와 정원 확인이 데이터베이스에서도 일어나는지 확인하세요. 없으면 "규칙은 데이터베이스에서도 지켜줘"라고 덧붙입니다.
- PROMPTSQL 한 줄씩 설명 듣기
이 SQL을 한 줄씩 엑셀에 빗대어 설명해줘. 데이터를 지우거나 바꾸는 줄이 있으면 따로 표시해줘.
SQL을 읽고 Supabase SQL Editor에서 실행합니다.
localhost:3000에서 모임 하나에 참석 신청을 하고, Table Editor의rsvps표에 줄이 생겼는지 확인합니다.막혔을 때 시험용 모임의 정원을 2명으로 바꾸고, 일반 창(계정 A), 시크릿 창(계정 B)으로 신청한 뒤 계정을 하나 더 만들어 세 번째로 신청해 봅니다. "마감"이 뜨고 신청이 막혀야 합니다.
이렇게 되면 성공[A] 참석할게요 → 1/2명[B] 참석할게요 → 2/2명, 버튼이 "마감"으로[C] 버튼 "마감", 눌러도 신청 안 됨[A] 신청 취소 → 1/2명, C에게 다시 "참석할게요"- PROMPT"내가 신청한 모임" 화면
로그인한 사람이 자기가 참석 신청한 모임만 모아 보는 "내 모임" 화면을 만들어줘. 지난 모임과 다가오는 모임을 나눠서 보여주고, 다가오는 모임은 여기서 바로 취소할 수 있게.
실습 9-2 · 사진 또는 검색 더하기
약 15분둘 중 하나만 골라도 됩니다.
Claude Code가 Supabase에 Storage 버킷(사진 폴더) 만드는 SQL이나 방법을 알려 줍니다. 사진을 올린 뒤 Supabase Storage 메뉴에서 파일이 보이는지 확인합니다.
막혔을 때"독서"로 검색하거나 "이번 주" 필터를 눌러 목록이 바뀌는지 확인합니다. 화면 배치가 마음에 안 들면 말로 고칩니다.
PROMPT화면 말로 고치기모임 목록을 날짜 순으로 정렬하고, 오늘 이후 모임만 보여줘.
실습 9-3 · 체크리스트로 확인하고 버그 잡기
약 15분AI가 만들고, AI가 목록을 만들고, 사람이 확인합니다.
- PROMPT테스트 체크리스트 받기
지금까지 만든 기능을 사람이 직접 확인할 수 있는 테스트 체크리스트를 만들어줘. 로그인 안 한 사람, 로그인한 사람, 다른 사람 입장에서 각각 해 볼 것을 나눠서.
목록을 받아 위에서부터 직접 해 봅니다. 된 것은 체크, 안 된 것은 메모합니다.
아쉬운 요청
참석 신청이 이상해요. 고쳐줘.
무엇이 어떻게 이상한지 AI가 짐작해야 합니다. 엉뚱한 곳을 고치기 쉽습니다.
좋은 요청
버그가 있어. - 한 일: 정원 10명인 모임에 11번째로 참석 신청을 눌렀다 - 기대한 결과: 마감 안내가 나오고 신청이 안 된다 - 실제 결과: 신청이 되고 11/10명으로 보인다 원인을 설명하고, 고친 뒤 같은 순서로 다시 해 봐서 확인해줘.
한 일·기대·실제 세 줄이면 누구든 같은 버그를 다시 만들어 볼 수 있습니다.
PROMPT버그 제대로 알려 주기버그가 있어. - 한 일: 정원 10명인 모임에 11번째로 참석 신청 버튼을 눌렀다 - 기대한 결과: "정원이 찼어요" 안내가 나오고 신청이 안 된다 - 실제 결과: 신청이 되고 참석 인원이 11/10으로 보인다 원인을 찾아 설명하고, 고친 뒤 같은 순서로 다시 해 봐서 확인해줘.
- PROMPT배포 전에 내 컴퓨터에서 빌드해 보기
배포하기 전에 내 컴퓨터에서 실제 배포용 빌드(npm run build)를 해 보고, 에러나 경고가 있으면 쉬운 말로 설명한 뒤 고쳐줘. 다 되면 "빌드 성공"이라고 알려줘.
빌드가 성공하면 커밋·푸시합니다. 배포가 실패하면 6회처럼 에러 로그를 붙여 넣습니다.
PROMPT배포 에러 고치기Vercel 배포가 실패했어. 에러는 이거야: (Vercel 화면의 빨간 에러 부분을 복사해 붙여 넣기) 원인을 쉽게 설명하고, 고친 뒤 내 컴퓨터에서 먼저 빌드가 되는지 확인하고 푸시해줘.
정리
핵심 정리
- 1참석처럼 "누가 무엇에"를 저장할 때는 표를 따로 만들고 번호로 잇는다. 이것이 관계다.
- 2중복 금지, 정원 같은 규칙은 화면이 아니라 데이터베이스에서도 지킨다.
- 3사진은 Storage에, 표에는 경로만. Storage에도 올리기 규칙을 정한다.
- 4쓸 만한 서비스는 빈 화면, 로딩, 마감, 에러 상황에서도 안내가 친절하다.
- 5AI가 만들고 체크리스트도 만들게 하되, 확인은 사람이 직접 한다. 버그는 한 일·기대·실제로 알린다.
다음 시간 예고: 이제 웹 서비스가 완성됐습니다. 10회에는 이 서비스 안에서 일하는 AI를 붙입니다. 후기를 요약하고, 안내문 초안을 써 주는 기능입니다.
복습
Q1."누가 어느 모임에 참석하는지"를 저장하는 가장 좋은 방법은?
Q2.정원 제한은 화면에서 버튼을 "마감"으로 바꾸기만 하면 충분하다.
Q3.모임 사진은 어떻게 저장하는 것이 좋을까요?
Q4.AI와 함께 기능을 완성하는 요즘 방식을 순서대로 맞춰 보세요.(순서대로 정렬)
- 1AI에게 테스트 체크리스트를 만들게 한다
- 2틀린 곳을 한 일·기대·실제로 알려 고치게 한다
- 3사람이 목록대로 직접 확인한다
- 4AI에게 기능을 만들게 한다
Q5.버그를 알릴 때 가장 좋은 방법은?
Q6.모임이 하나도 없을 때나 인터넷이 끊겼을 때의 안내 화면은 서비스 완성도와 관계없다.
과제
과제 · 실제 사용자 시험
가족이나 친구 한 명에게 배포 주소를 주고, 아무 설명 없이 "모임에 참석 신청해 보세요"라고만 부탁하세요. 옆에서 지켜보며 헤맨 곳을 적고, 그중 하나를 Claude Code로 고쳐 오세요.