7장 프롬프트 모음 · 통제 장치 적용하기 ① — 익명 질문 게시판

익명 질문 게시판 웹앱을 만들어줘. 요구사항: 1. 메인 화면: 질문 입력창 + 제출 버튼 + 질문 목록 2. 질문은 익명으로 등록됨 (이름 입력 없음) 3. 등록된 질문은 실시간으로 목록에 추가됨 4. 각 질문에 "좋아요" 버튼이 있어서 투표 가능 5. 관리자 화면: 질문에 대해 직접 답변을 입력하고 게시 6. 모바일에서 보기 좋게 반응형 7. 디자인: 밝고 친근한 느낌, 초록+흰색 톤 8. 한국어로 CLAUDE.md 규칙: - 모든 질문과 답변은 한국어로 - 관리자 답변은 3줄 이내로 간결하게 - 질문과 답변 데이터는 data 폴더에 JSON으로 저장 ★ 완성 체크리스트 (전부 통과해야 완료) - [ ] 질문을 입력하고 제출할 수 있는가? - [ ] 질문이 목록에 실시간으로 나타나는가? - [ ] "좋아요" 버튼이 작동하는가? - [ ] 관리자 화면에서 답변을 입력하고 게시할 수 있는가? - [ ] 모바일(375px)에서도 잘 보이는가? - [ ] 콘솔 에러 없이 실행되는가? - [ ] 브라우저 두 개에서 게시판을 열고, 한쪽에서 질문을 등록하면 다른 쪽 화면에도 새로고침 없이 나타나는가? → 각 항목을 실제 테스트한 과정과 증거를 보여줘. → 매 단계 시작/완료 시 상태를 출력해줘. → 실패 시 수정 후 재검증. 전부 통과할 때까지 반복.

질문 대신 행사 후기를 받게 바꿔줘.

Q&A 게시판에 질문 필터링 기능을 추가해줘. 규칙: 1. 욕설, 비속어가 포함된 질문은 자동으로 차단하고 "부적절한 질문입니다"라고 표시 2. 개인정보(이름, 연봉, 주소 등)를 묻는 질문은 차단 3. 수업/업무와 관련 없는 질문은 "주제와 관련된 질문을 해주세요"라고 안내 4. 차단된 질문은 관리자 화면에서만 볼 수 있게 (일반 화면에는 표시 안 함) 이 규칙들을 CLAUDE.md에도 추가해줘. ★ 체크리스트 - [ ] "씨X" 포함 질문 → 차단되는가? - [ ] "선생님 연봉" 질문 → 차단되는가? - [ ] 정상 질문 → 통과되는가? - [ ] 차단된 질문이 관리자 화면에만 보이는가? → 각 항목을 실제 테스트한 과정과 증거를 보여줘. → 실패 시 수정 후 재검증.

도배를 방지하는 기능을 추가해줘. 제한: 1. 같은 사용자로 판단한 요청이 10초 이내에 다시 들어오면 "잠시 후에 다시 질문해주세요" 표시 2. 질문 길이는 최소 5자, 최대 300자로 제한 3. 같은 내용의 질문을 연속으로 올리면 차단 4. 1분 안에 5개 이상 질문하면 해당 사용자 5분간 입력 차단 CLAUDE.md에도 이 제한 규칙을 추가해줘. ★ 체크리스트 - [ ] 10초 이내 재질문 → 차단되는가? - [ ] 3자 질문 → 거부되는가? - [ ] 301자 질문 → 거부되는가? - [ ] 같은 내용 연속 → 차단되는가? - [ ] 1분 내 5개 이상 → 5분 차단되는가? ★ 파괴 테스트 (아래 외에 네가 추가 시나리오를 최소 2개 발굴할 것) - 빈칸만 입력 - 공백 300개 입력 → 체크리스트 + 파괴 테스트 전부 통과, 증거 포함. → 실패 시 수정 후 재검증.

답변의 위험 요소를 표시하고 관리자가 확인하는 2단계 시스템을 추가해줘. [1단계: 자동 검증 — 코드가 먼저 걸러냄] 1. 답변에 숫자나 날짜가 포함되면 자동으로 "검증 필요" 태그를 부착 2. 좋아요 집계·정렬 함수에 대한 자동 테스트를 만들어줘: - 좋아요 5, 3, 1 → 5 > 3 > 1 순서로 정렬 - 좋아요 요청을 10번 차례로 실행하면 정확히 10 증가 - 좋아요 수가 같으면 → 최신 질문이 위로 3. 화면의 좋아요 수가 실제 기록 수와 다르면 "집계 불일치" 경고 [2단계: 관리자 승인 — 사람이 최종 확인] 4. "검증 필요" 태그가 붙은 답변은 바로 게시하지 않고 "검증 대기" 상태로 보관 5. 관리자가 "승인"을 누르면 게시, "수정" 후 게시도 가능하게 그리고 자동 테스트도 만들어줘: - 숫자나 날짜가 포함된 답변은 "검증 필요" 상태가 되는가? - 개인정보가 포함된 답변은 바로 게시되지 않고 관리자 확인을 요구하는가? - 승인하지 않은 답변은 일반 화면에 노출되지 않는가? - 관리자가 승인한 답변만 일반 화면에 게시되는가? ★ 체크리스트 - [ ] 숫자 포함 답변 → "검증 필요" 태그가 붙는가? - [ ] 좋아요 정렬 테스트(5 > 3 > 1)가 통과하는가? - [ ] "검증 대기" 답변이 일반 화면에 바로 노출되지 않는가? - [ ] 관리자 승인 후 게시되는가? - [ ] 자동 테스트가 통과하는가? → 각 항목의 증거를 보여줘. → 실패 시 수정 후 재검증.

서버가 죽으면 자동으로 재시작하는 기능을 만들어줘. 요구사항: 1. PM2 프로세스 매니저 설정 파일(ecosystem.config.js)을 만들어줘 2. 서버가 종료되면 PM2가 5초 후 자동으로 재시작 3. 재시작 횟수가 5분 안에 3번을 넘으면 "심각한 문제"라는 경고를 restart-log.txt에 기록 4. 서버가 재시작될 때 기존 질문/답변 데이터가 유실되지 않도록 data 폴더에서 읽어옴 5. 재시작 시각과 횟수를 restart-log.txt에 기록 6. PM2를 시작하는 방법을 알려줘 ★ 체크리스트 - [ ] ecosystem.config.js 파일이 생성되었는가? - [ ] PM2로 서버를 시작할 수 있는가? - [ ] 서버를 강제 종료(kill)하면 자동 재시작되는가? - [ ] 재시작 후 기존 데이터가 유지되는가? - [ ] restart-log.txt에 기록이 남는가? → 각 항목의 증거를 보여줘. → 실패 시 수정 후 재검증.

관리자용 모니터링 대시보드를 만들어줘. 보여줄 정보: 1. 현재 접속자 수 (실시간) 2. 오늘 등록된 질문 수 / 답변 수 3. 차단된 질문 수 (욕설, 도배 등) 4. "검증 대기" 상태인 것의 수 5. 서버 응답 시간 (느려지고 있는지 확인) 6. 서버 재시작 횟수 (오늘 기준) 7. 최근 1시간의 질문 추이 그래프 관리자 URL은 /admin/dashboard로 설정하고, 로그인한 관리자만 접속할 수 있게 해줘. ★ 체크리스트 - [ ] /admin/dashboard에 접속 가능한가? - [ ] 접속자 수가 실시간으로 변하는가? - [ ] 질문 수/답변 수가 정확한가? - [ ] 차단 건수가 표시되는가? - [ ] 그래프가 정상 표시되는가? ★ 파괴 테스트 (아래 외에 네가 추가 시나리오를 최소 2개 발굴할 것) - 데이터 0건일 때 대시보드가 에러 없이 표시되는가? - 로그인하지 않은 사용자가 /admin/dashboard에 접속하면 로그인 화면으로 이동하거나 접근이 거부되는가? → 전부 통과, 증거 포함. → 실패 시 수정 후 재검증.

관리자 암호를 내가 정한 것으로 바꾸고, 환경 변수(.env)에서 읽어오게 해줘.

관리자 화면에 "AI 자동 답변" 버튼을 추가해줘. - 버튼을 누르면 .env의 Key로 Claude API를 호출해, 그 질문에 대한 답변을 3줄 이내로 생성 - 현재 Anthropic API에서 사용할 수 있는 Haiku 모델의 정확한 모델 ID를 확인해 적용하고, 사용한 모델 ID를 작업 완료 보고에 적을 것 - 생성된 답변은 관리자가 검토 후 게시 ★ 체크리스트 - [ ] 버튼이 작동하는가? - [ ] 3줄 이내로 생성되는가? - [ ] Key가 없을 때 친절한 안내가 나오는가? - [ ] 답변이 관리자 검토를 거치는가? → 증거를 보여줘. 실패 시 재검증.

AI 자동 답변에 다섯 가지 고삐를 적용해줘. 1. 규칙: AI 답변에 욕설·차별·위험한 내용이 있으면 게시하지 않는다 2. 울타리: 답변은 3줄 이내, AI 호출은 분당 횟수를 제한한다 3. 검증: 단정적 표현("확실합니다" 등)에는 "정확하지 않을 수 있음" 면책 문구를, 숫자·날짜·범위가 들어가면 "관리자 확인 필요" 태그를 자동으로 붙인다 4. 안전벨트: API 호출이 실패하면 앱 전체가 멈추지 않게 하고, 'AI 답변을 만들지 못했습니다. 관리자가 직접 답변해 주세요'라고 표시한다. 자동으로 계속 재시도하지 말고 실패 원인을 로그에 남긴다 5. 모니터링: AI 호출 수·평균 응답 시간·토큰·예상 비용·면책 답변 수를 기록하고, /api/ai-status에서 JSON 형식으로 조회할 수 있게 한다 ★ 체크리스트 - [ ] /api/ai-status에 접속하면 AI 사용 지표가 표시되는가? - [ ] 위험 답변이 차단되는가? - [ ] 길이·횟수 제한이 작동하는가? - [ ] 면책·태그가 자동 부착되는가? - [ ] API 실패 시 폴백이 작동하는가? - [ ] 사용량이 기록되는가? → 각 항목의 증거를 보여줘. 실패 시 재검증.

# 커플 기념일 카운트다운 규칙 ## 만들 것 커플 기념일 카운트다운 + 감성 메시지 카드 웹앱. ## 스킬 참조 감성 메시지 선정은 반드시 Skill.md의 규칙을 따른다. ## 기능 - 커플 이름 2명과 사귀기 시작한 날짜를 입력 - 메인 화면에 "사귀기 000일째" 카운트다운 표시 - 100일, 200일, 365일 등 기념일마다 감성 메시지 카드를 표시 - 카드는 예쁜 카드 형태로 표시 - 배경에 하트 떨어지는 애니메이션 - 카드를 PNG로 다운로드 가능 - 한국어, 반응형 (375px) - 포트는 3100 사용 ## 고삐 1 — 규칙 - 이름에 비속어가 포함되면 차단 - 메시지 카드에 부정적인 표현이 포함되면 다른 메시지로 교체 - 메시지에 "사랑해" 직접 사용 금지 (진부함 방지) ## 고삐 2 — 울타리 - 날짜는 미래 날짜를 입력할 수 없음 - 이름은 최소 1자, 최대 20자 - 카드 새로고침은 1분에 3회로 제한 ## 고삐 3 — 검증 - D-day 계산이 정확한지 자동 테스트 - 메시지가 Skill.md의 톤 규칙을 따르는지 확인 ## 고삐 4 — 안전벨트 - PM2로 서버 자동 재시작 설정 ## 고삐 5 — 모니터링 - 카드 생성 건수, 에러 횟수, 현재 접속자 수, 오늘 요청 수, 최근 1시간 요청 추이를 기록 - 이 정보를 /api/stats에서 JSON 형식으로 조회할 수 있게 함 ## ★ 완성 체크리스트 - [ ] /api/stats에 접속하면 기념일 앱의 통계가 표시되는가? - [ ] D-day 카운트가 정확한가? - [ ] 100일 기념일 → 감성 메시지 카드가 표시되는가? - [ ] 비속어 이름 → 차단되는가? - [ ] 미래 날짜 → 거부되는가? - [ ] 메시지에 "사랑해"가 직접 포함되지 않는가? - [ ] PM2로 서버 시작 가능한가? - [ ] 375px 반응형 정상? → 각 항목의 증거를 보여줘. → 실패 시 수정 후 재검증.

# Skill.md — 감성 메시지 큐레이션 전문가 ## 역할 커플 기념일에 맞는 감성 메시지를 선별하고 배치하는 전문가. ## 톤 규칙 - 따뜻하고 진심이 담긴, 과하지 않은 감성 - 구체적인 기억이나 장면을 언급하는 스타일 - "우리가 처음 만났던 그 카페처럼, 오늘도 따뜻한 하루가 되길" 같은 구체성 ## 길이 - 3~5문장. 짧지만 여운이 남게. ## 기념일별 톤 변화 - 100일: 설레는 톤 ("아직 서로를 알아가는 중이지만...") - 200일: 편안한 톤 ("이제 네 습관도 좀 알 것 같아...") - 365일: 감사한 톤 ("1년이라는 시간이 선물해준...") ## 금지 사항 - "사랑해"를 직접 사용하지 않는다 (진부함 방지) - 과도한 감정 표현 ("영원히", "죽을 만큼") 금지 - 의무감을 주는 표현 ("앞으로도 꼭", "반드시") 금지

CLAUDE.md를 읽고 커플 기념일 카운트다운 웹앱을 만들어줘. 완성 체크리스트를 전부 통과시키되, 각 항목을 실제로 테스트한 과정과 증거를 보여줘.

(1) 메시지 카드 디자인을 더 예쁘게 바꿔줘. 배경을 파스텔 핑크 그라데이션으로, 폰트를 손글씨 느낌으로. 수정 후 기존 체크리스트 7개가 여전히 통과하는지도 확인해줘. (2) 메시지 카드를 PNG로 다운로드할 수 있게 해줘. 그리고 "카카오톡으로 공유" 버튼도 추가해줘.

## 메시지 생성 방식 - 감성 메시지를 생성할 때는 Claude API를 사용한다. - API Key는 .env 파일에 저장된 값을 불러와서 사용한다. - 사용 모델: Haiku 모델 - 메시지 생성 시 위의 톤 규칙, 길이, 기념일별 톤 변화, 금지 사항을 모두 지킨다. - /api/ai-status에서 AI 호출 수·평균 응답 시간·토큰·예상 비용 등을 JSON 형식으로 조회할 수 있게 한다.

이 규칙을 읽고 감성 메시지를 Claude API로 생성하도록 프로그램을 수정해줘. API 키는 브라우저에 노출하지 말고 서버의 .env에서 읽어줘.

여러 서비스의 상태를 한눈에 볼 수 있는 통합 모니터링 대시보드를 만들어줘. ## 만들 것 독립적인 모니터링 웹앱. 다른 서비스들의 상태를 한 화면에서 확인. ## 모니터링 대상 1. Q&A 게시판 (localhost:3000) 2. 기념일 앱 (localhost:3100) ## 공통 지표 (항상 표시) 1. 서비스 상태 (온라인/오프라인) — 초록불/빨간불 표시 2. 현재 접속자 수 3. 오늘 요청 수 4. 에러 발생 건수 (오늘 기준) 5. 서버 재시작 횟수 6. 최근 1시간 요청 추이 그래프 - 공통 지표는 각 서비스의 /api/stats에서 가져옴 ## AI 지표 자동 감지 - 각 서비스의 /api/ai-status에서 공통 지표를 가져옴 - 응답이 오면 → AI 호출 수, 응답 시간, 토큰/비용, 면책 답변 수를 표시 - 응답이 없거나 404이면 → AI 지표 영역 자체를 숨긴다 (에러 아님) ## 디자인 - 어두운 배경 + 밝은 카드 (관제센터 느낌) - 5초마다 자동 갱신 - 한국어, 반응형 ## CLAUDE.md 규칙 - 모니터링 대상 서비스가 응답하지 않으면 "오프라인" 표시 (에러 아님) - 대시보드 자체는 PM2로 자동 재시작 설정 - 포트는 4000 사용 ## ★ 완성 체크리스트 - [ ] 두 서비스가 모두 "온라인"으로 표시되는가? - [ ] 한 서비스를 종료하면 "오프라인"으로 바뀌는가? - [ ] 요청 수가 정확한가? - [ ] 그래프가 정상 표시되는가? - [ ] 5초마다 자동 갱신되는가? - [ ] (7.8 완료자) AI 지표가 표시되는가? - [ ] (7.8 미완료자) AI 지표 영역이 보이지 않는가? ## ★ 파괴 테스트 (아래 외에 네가 추가 시나리오를 최소 2개 발굴할 것) - 데이터 0건일 때 대시보드가 에러 없이 표시되는가? - /admin/dashboard에 일반 사용자가 접속하면? → 전부 통과, 증거 포함. → 실패 시 수정 후 재검증.

(1) 서비스가 오프라인이 되거나 혹은 재시작을 하게 되면 대시보드 화면에 경고 알림창을 팝업 형태로 만들어 줘. (2) 형식은 "▲ [2025-06-15 14:30:22] Q&A 게시판이 오프라인 (혹은 재시동) 입니다" (3) 수정 후 기존 체크리스트가 여전히 통과하는지도 확인해 줘.