요즘 교사를 위한
웹앱 만들기 with 바이브 코딩

Product Requirements Document (PRD) 예시

1. 제품 이름 (Project Name)
스마트 출석 체크 (Smart Attendance Check)

2. 배경과 목적 (Why)
교실에서 출석 확인은 반복적이고 시간이 소요되는 업무임.
특히 빠르고 정확한 출석 기록과 누적 확인이 필요함.
- 간편한 입력
- 실시간 출석 현황 확인
- 자동 기록 저장
이를 통해 교사의 업무 부담을 줄이고 효율적인 학급 운영을 돕는 것을 목표로 함.

3. 핵심 기능 (User Stories)
- 기능 1: 학생 이름 입력 및 출석 처리
  사용자는 화면 중앙 입력창에 학생 이름을 입력함
  '출석 완료' 버튼 클릭 시 출석이 기록됨
- 기능 2: 출석 기록 리스트 생성
  버튼 클릭 시 아래와 같은 형식으로 기록 추가
  👉 OOO 학생 출석 완료! (시간: hh:mm:ss)
  기록은 시간 순으로 계속 누적됨
- 기능 3: 실시간 출석 인원 카운트
  화면 상단에 현재 출석 인원 표시 👉 예: 출석 인원: 12명
  출석 처리 시 즉시 업데이트됨
- 기능 4: 데이터 로컬 저장
  출석 데이터는 브라우저의 Local Storage에 자동 저장됨
  페이지 새로고침 후에도 데이터 유지됨
- 기능 5: 감성 UI 디자인
  전체 UI는 파스텔톤 색상 기반
  깔끔하고 따뜻한 느낌 유지
  가독성 높은 폰트 사용 (예: Pretendard, Noto Sans KR)

4. 사용자 환경 (Context)
사용자: 초등학교 교사
사용 장소: 교실, 교무실
사용 기기: 데스크톱, 태블릿
사용 시점: 등교 직후, 수업 시작 전

5. 성공의 정의 (Success Metrics)
출석 처리 시간 단축 (기존 대비 50% 이상)
클릭 1회로 출석 등록 가능
새로고침 후 데이터 유지 성공률 100%
사용자 만족도 (직관성, 편의성) 높음

안녕! 나는 중학교 선생님이야. 우리 반 학생들을 위한 '스마트 출석 체크 웹앱'을 만들고 싶어.
복잡한 설치 없이 HTML 파일 하나만으로 작동하게 해줘.

기능 요구사항
1. 화면 중앙에 학생 이름을 입력하는 칸과 '출석 완료' 버튼이 있어야 해.
2. 버튼을 누르면 아래에 'OOO 학생 출석 완료! (시간: hh:mm:ss)'라는 메시지가 리스트로 쌓여야 해.
3. 전체 출석 인원을 실시간으로 카운트 해서 위쪽에 보여줘.
4. 저장된 데이터는 브라우저의 저장소에 저장해줘.
5. 디자인은 파스텔톤으로 깔끔하고 따뜻하게 하고 폰트는 가독성이 좋아야 해.

우리 반 학생들이 본인이 쓴 글을 제출하고 SNS 형태로 보여지는 '글쓰기 타임라인 SNS' 앱을 만들고 싶어.
러버블의 클라우드 기능을 활성화하고 데이터베이스(Supabase)를 연동해서 실제 데이터가 저장되도록 해줘.

1. 데이터베이스 구조 (Supabase)도 앱의 구동 방식을 고려해서 정확히 설계하고 생성해줘.
2. 화면 구성 (UI)
   - 전체 화면이 트위터(현재 X) 형태의 모습으로 구현되며, 오른쪽 상단에 + 버튼으로 포스트 작성을 할 수 있는 작성 버튼을 추가해줘.
   - 포스트 작성 버튼을 누르면 이름, 내용, 비밀번호(숫자 4자리)를 입력하는 모달(Modal) 폼이 나타나고 '게시하기', '취소' 버튼이 있어야 해.
   - 게시된 포스트들은 타임라인 형태 SNS 레이아웃으로 최신 글이 가장 위에 예쁜 컬러로 배열되어야 해.
   - SNS 앱 왼쪽 상단에는 "글쓰기 타임라인 SNS"라는 이름을 표시해줘.
   - 오른쪽에는 새로 고침 버튼이 있어야 해.
   - 학생들이 업로드한 포스트 하단 왼쪽에는 좋아요 버튼도 있어야 해.
3. 기능 (Logic)
   - '게시하기'를 누르면 데이터베이스에 저장하고 즉시 SNS 피드에 반영해줘.
   - 각 글 카드에는 '수정', '삭제' 버튼이 있어야 해.
   - 수정/삭제 버튼을 누르면 비밀번호 입력 팝업을 띄우고, 작성 시 입력한 비밀번호와 일치할 때만 수정/삭제가 되도록 해줘.
   - 새로고침 버튼을 누르면 최신의 글을 모두 가져와 표시해야 해.
   - 글 목록은 10개씩 표시하고, 하단에 페이지별 바로가기 페이지네이션 버튼을 추가해줘.

전국 초중고등학교의 오늘 급식 메뉴를 보여주는 웹앱을 만들어줘.
화면 상단에 '나이스 API 키 입력칸'을 만들고, 그 아래에 '학교 이름 검색창'을 만들어 줘.

학교를 검색하면 나이스(NEIS) 학교기본정보 API와 급식식단정보 API를 연결해서
오늘 메뉴(중식)를 예쁜 카드 모양으로 띄워줘.

메뉴 이름 뒤에 알레르기 유발 식자재 번호를 함께 표시해줘. 그리고 화면 하단에는 번호별 의미를 보기 쉽게 정리한 안내 영역을 추가해줘. 메뉴 글자는 너무 복잡해 보이지 않게 유지하고, 전체 UI는 깔끔하게 정돈해줘.

오늘 날짜를 기준으로 이전 날과 다음 날 급식을 확인할 수 있도록 날짜 이동 슬라이더를 추가해줘. 슬라이더를 움직이면 해당 날짜의 급식 데이터가 자동으로 다시 불러와지게 하고, 데이터가 없는 날짜는 기존 예외 처리 문구가 나오도록 연결해줘. 모바일에서도 누르기 쉽고 보기 쉬운 형태로 만들어줘.

이 날짜 이동 바만 수정해줘. 좌우 화살표와 달력 아이콘이 지금보다 훨씬 더 눈에 띄게 보이도록 바꿔줘. 화살표 버튼은 채워진 원형 버튼으로 만들고, 달력 아이콘은 크기를 키워 날짜 앞에서 시각적 중심 역할을 하게 해줘. 날짜 텍스트는 굵기를 높이고, 전체 바는 현재보다 더 짧고 단단한 느낌으로 정리해줘. 버튼을 눌러 조작하는 UI라는 인상이 분명하게 보이도록 해줘.

다음 PRD를 참고하여 모든 요구사항을 반영한 서비스를 개발해줘.

1. 제품 이름 (Project Name)
찰칵! 영어 선생님 (Snap & Learn English)

2. 배경과 목적 (Why)
배경: 키보드 타자 입력이 어렵거나 영어를 처음 접하는 학생(저학년, 유아 등)은 검색을 통한 단어 학습에 한계가 있음.
목적: 텍스트 입력 없이 주변 사물을 카메라로 찍기만 하면, 즉각적으로 영어 단어와 발음을 알려주어 언어 학습의 장벽을 낮추고 학생들의 호기심을 충족시키기 위함.

3. 핵심 기능 (User Stories)
1) 앱 제목 (Header): 화면 최상단 중앙에 "찰칵! 영어 선생님 (Snap & Learn English)"이라는 앱 이름을 크고 귀여운 폰트로 표시할 것
2) 카메라 (Camera): 제목 아래 화면에 웹캠 화면을 실시간으로 꽉 차게 나타나야 함(초기 실행 시 카메라 권한 요청 필수).
3) 캡처 (Capture): 화면 하단 중앙에 학생들이 쉽게 누를 수 있는 '찰칵' 버튼을 표시.
4) AI 분석 (Vision): 초등학교 1학년 학생이 '찰칵' 버튼을 누르면 현재 화면을 캡처해서 Gemini API (gemini-2.5-flash)에게 보내야 함. 이미지를 분석해서 사진 속에 있는 가장 중요한 중심 사물의 이름을 영어 단어로 딱 하나만 알려달라고 요청해야 함. (예: 화면 중앙에 사과가 있다면 배경은 무시하고 'Apple'만 추출)
5) 음성 출력 (TTS): AI가 단어를 찾아내면, Gemini 모델의 TTS(Text-to-Speech) 기능을 사용해서 그 단어를 원어민 발음으로 즉시 읽어줄 것.
6) 화면 표시 (UI): 동시에 화면 중앙에 초등학교 1학년 학생이 잘 볼 수 있도록 단어를 크고 예쁜 폰트로 표시.

4. 사용자 환경 (Context)
누가: 키보드 입력이 서툴거나 영어 단어에 호기심이 많은 학생이
어디서: 교실이나 집에서 태블릿, 스마트폰 또는 웹캠이 달린 노트북을 활용하여
언제: 주변의 물건(시계, 책상, 지우개 등)의 영어 이름이 궁금해질 때마다 즉각적으로 사용함

5. 성공의 정의 (Success Metrics)
사용성: 학생들이 교사나 부모의 도움 없이 스스로 사물을 촬영하고 음성을 듣는 과정을 수행할 수 있는가?
응답 속도: 촬영(찰칵) 후 AI가 사물을 인식하여 음성을 출력하기까지의 지연 시간이 짧아(예: 3초 이내) 즉각적인 피드백이 이루어지는가?
정확도: 일상적인 교실/집 안 사물을 AI가 오작동 없이 정확한 영단어로 판별해 내는가?

실시간 발표자 선정 도우미 앱을 만들어줘.
1. 앱 제목: 화면 최상단에 '두근두근 우리 반 발표자 뽑기'라고 적어줘.
2. 카메라 & 캡처: 웹캠 화면을 보여주고 하단에 '누가 발표할까?' 버튼을 만들어줘.
3. AI 분석 (Vision): 버튼을 누르면 화면을 캡처해서 Gemini에게 보내. 사진 속에 있는 학생들 중에서 무작위로 딱 한 명을 선택해 줘. 그리고 그 학생의 인상착의(옷 색깔, 안경 유무 등)를 한국어로 묘사해 줘. (예: '파란색 티셔츠를 입고 안경을 쓴 친구가 당첨!')
4. 음성 출력 (TTS): AI가 선택한 학생의 묘사를 한국어 음성으로 신나게 읽어줘.
5. 화면 표시: 화면 중앙에 당첨된 학생의 특징을 큰 글씨로 보여줘.

실시간 감정 인식 영어 학습 앱을 만들어줘.
1. 앱 제목: 화면 최상단에 'How do you feel?'이라고 적어줘.
2. 카메라 & 캡처: 웹캠 화면을 보여주고 하단에 '표정 찰칵' 버튼을 만들어줘.
3. AI 분석 (Vision): 버튼을 누르면 화면 속 인물의 표정을 분석해 줘. 그 표정에 가장 잘 어울리는 영어 감정 단어(Happy, Sad, Angry, Surprised 등)를 딱 하나만 알려줘.
4. 음성 출력 (TTS): 찾아낸 감정 단어를 원어민 발음으로 읽어주되, 그 감정을 살려서 실감 나게 읽어줘. (예: Sad는 슬픈 목소리로, Happy는 경쾌한 목소리로)
5. 화면 표시: 화면 중앙에 감정 단어를 아주 크고 굵은 폰트로 보여주고, 배경색도 감정에 맞춰 바꿔줘 (예: Angry는 빨강, Sad는 파랑).

1. 설정: 화면 상단에 Google Gemini API Key를 입력하는 칸을 만들어줘. (입력 후 로컬 스토리지에 저장)
2. 입력: 학생들이 글을 입력할 수 있는 큰 텍스트 박스(Textarea)를 중앙에 배치해줘.
3. 기능: '피드백 받기' 버튼을 누르면 Gemini API를 호출해서 피드백을 생성해줘.
4. AI 페르소나: 너는 초등학교 4학년에게 글쓰기를 가르치는 선생님이야. 학생의 글을 읽고 '잘한 점 1가지', '고칠 점 1가지', 그리고 '수정된 문장 추천' 형식으로 다정하게 답변해야 해.

우와 정말 대단해! 여기에 기능 하나만 더 추가해줘. 텍스트 입력창 위에 '공책 사진 찍기' 버튼을 만들어줘. 버튼을 누르면 카메라가 켜지거나 파일을 업로드할 수 있게 해줘. 그리고 업로드된 이미지에서 Google Gemini의 Vision 기능을 이용해 글자를 추출(OCR)해서 텍스트 박스에 자동으로 채워지도록 코드를 수정해줘.

## 고도화된 개발 프롬프트

### [Role: 역할 정의]
너는 초등 교육용 웹 애플리케이션 개발에 특화된 시니어 풀스택 개발자이자 UX 디자이너야. 사용자가 입력한 요구사항을 바탕으로 깨끗하고 기능적인 코드를 작성하며, 특히 보안(API Key 관리)과 사용자 경험을 중요하게 생각해야 해.

### [Mission: 임무]
초등학교 4학년 학생들이 글쓰기 피드백을 받을 수 있는 'AI 글쓰기 도우미 웹앱'의 전체 코드(HTML/CSS/JS)를 작성하라.

### [Step-by-Step: 실행 절차]
1. 환경 설정 (Setup): 화면 최상단에 Google Gemini API Key 입력란을 배치하고, 브라우저의 localStorage를 활용해 한 번 입력하면 유지되도록 구현해.
2. UI 구성 (Layout): 중앙에는 학생들이 긴 글을 편하게 작성할 수 있는 넓은 Textarea와 하단에 눈에 잘 띄는 '피드백 받기' 버튼을 배치해. (초등학생 타겟에 맞는 깔끔한 디자인 적용)
3. API 연동 (Logic): 버튼 클릭 시 gemini-1.5-flash 모델을 호출하는 비동기 함수를 작성해.
4. 결과 출력 (Output): AI가 생성한 피드백을 텍스트 상자 아래의 별도 영역에 보기 좋게 출력해.

### [Constraints: 제약 조건 및 프롬프트 주입]
* 보안: API Key는 클라이언트 사이드 코드에서 직접 노출되지 않도록 입력 필드로 관리하며, 로컬 스토리지에 안전하게 저장/조회해야 함.
* AI 시스템 프롬프트: 앱 내부에서 Gemini API를 호출할 때 아래의 페르소나를 시스템 프롬프트로 반드시 설정해.
* 페르소나: "너는 초등학교 4학년 학생들을 가르치는 다정한 선생님이야. 학생이 작성한 글을 읽고 다음 세 가지 요소를 포함해 답변해줘.
  1. 칭찬할 점 1가지
  2. 개선할 점 1가지
  3. 더 나은 문장 추천
  (친절하고 격려하는 말투를 사용할 것)"
* 에러 핸들링: API Key가 입력되지 않았거나 호출에 실패했을 경우, 사용자에게 친절한 안내 메시지를 띄워야 함.

당신은 친절한 '풀스택 웹 개발자'입니다. 아래 사항을 확인하여 사용자가 "날짜별 투두(To-Do) 리스트"를 관리할 수 있는 일정 관리 웹앱"을 제작해주세요.

백엔드 데이터베이스는 'Supabase'를 사용합니다. 아래의 요구사항을 정확히 반영해 주세요.

1. Supabase 설정 정보
코드 내에서 Supabase를 연동할 때 아래 정보를 사용하세요.
- Project URL: https://xxxxx.supabase.co (여기에 본인 URL 입력)
- Publishable key: sb_publishable.. (여기에 본인 Key 입력)

2. 프론트엔드 요구사항 (화면 구성)
사용자가 할 일을 날짜별로 관리할 수 있는 직관적인 UI를 만들어주세요.
- 입력 폼:
  - 할 일 내용 (Text 입력)
  - 목표 날짜 (Date Picker, 달력 선택)
  - '추가하기' 버튼
- 리스트 영역:
  - 저장된 할 일들을 카드 형태로 보여주세요.
  - 중요: 할 일들은 '목표 날짜'별로 그룹화해서 보여주거나, 날짜순으로 정렬해서 보여주세요.
  - 각 할 일 옆에는 '완료' 체크박스와 '삭제' 버튼이 있어야 합니다.

3. 백엔드 기능 요구사항 (데이터 처리)
Supabase에 관련 데이터베이스 관련 테이블을 생성하고 연동할 예정이니, 데이터베이스 테이블 생성과 관련된 내용을 문서화하고, 별도의 실행 가능한 SQL 쿼리문으로 작성해주세요. 쿼리 명령어 이름은 setup.sql로 생성해주세요.

슈파베이스 데이터베이스에 접근 사용자 비밀번호를 저장하고, 앱 실행시 이 비밀번호를 입력하고 정확히 일치하여야 앱이 실행되도록 수정해줘.

1. 모달 창으로 비밀번호 입력 페이지를 구현하고, 비밀번호를 입력받도록 해줘.
2. 사용자 이메일은 admin@planner.vibe(변경 가능) 비밀번호는 VibeCoder2026! (변경 가능)으로 설정해줘.

프론트코드에서 비밀번호를 검증하는 것이 아니라 Supabase의 Auth 기능으로 사용자를 인증하도록 해줘. Supabase Auth 기능의 사용법도 함께 알려줘.

안녕! 나를 소개하는 HTML 프로필 페이지를 만들어줘. 이름은 [여기에 본인 이름 입력], 직업은 초등학교 교사야. 좋아하는 것은 독서와 여행이고, 간단한 자기소개 문장도 넣어줘. 배경색은 연한 파란색으로 해줘. 예쁘게 꾸며줘!

우리 반 실시간 칭찬 보드 앱의 PRD(제품 요구사항 문서)를 작성해줘.

앱 설명:
- 학생 이름과 칭찬 메시지를 입력할 수 있는 폼이 있다
- 입력하면 칭찬 카드가 보드에 추가된다
- Supabase를 사용해 데이터를 저장한다
- Supabase Realtime 기능으로 여러 브라우저 창에서 동시에 칭찬이 실시간 반영된다
- React + Vite로 개발한다
- 디자인은 깔끔하고 밝은 느낌으로 (교육 환경에 맞게)

문서는 PRD.md 파일로 프로젝트 루트에 저장해줘.

Supabase에 칭찬 보드 앱을 위한 테이블을 만들어줘.

테이블 이름: praises
필드:
- id: UUID, 기본 키, 자동 생성
- student_name: TEXT, 필수
- message: TEXT, 필수
- created_at: TIMESTAMP WITH TIME ZONE, 기본값 now()

그리고 이 테이블에 Supabase Realtime을 활성화해줘.
Row Level Security는 일단 비활성화해줘 (테스트 목적).

@PRD.md 를 참고해서 실시간 칭찬 보드 앱을 만들어줘.

기술 스택:
- React + Vite (현재 프로젝트)
- Supabase (이미 설정된 MCP로 연결된 상태)

구현 내용:
1. App.jsx 메인 화면 구성
   - 학생 이름 입력 필드
   - 칭찬 메시지 입력 필드
   - 칭찬 추가 버튼
   - 칭찬 목록 표시 영역 (카드 형태)

2. Supabase 연동 (src/supabaseClient.js 파일 생성)
   - supabase-js 패키지 사용
   - 환경 변수로 URL과 key 관리

3. 실시간 기능
   - Supabase Realtime 구독으로 새 칭찬 즉시 반영

4. 스타일
   - App.css에 깔끔하고 밝은 디자인 적용

환경 변수 파일(.env)도 만들어줘. 변수명은:
- VITE_SUPABASE_URL
- VITE_SUPABASE_ANON_KEY