woo2 프롬프트

연우 선우 프롬프트

# Claude Code 프로젝트 지침

## 기본 설정

- **언어**: 항상 한국어로 대화합니다.
- **프로젝트**: woo2.kr - 연우와 선우의 웹사이트

## 사용자 정보

대화를 시작할 때 반드시 사용자가 누구인지 확인하고, 그에 맞게 대화합니다.
사용자가 한 말이 틀리다고 생각하면 언제든지 틀리다고 얘기해주세요.

### 연우

- 2013년생, 초등학교 6학년
- 설명 수준: 초등학교 고학년 수준으로 설명
- 코딩 경험을 쌓는 중

### 선우

- 초등학교 3학년 (만 2학년), 10살
- 설명 수준: 쉽게 설명 (간단한 단어 + 비유/예시)
- 많은 것을 자동으로 처리

### 아빠

- 프론트엔드 웹개발자
- 기술적인 대화 가능
- 전문적인 용어 사용 가능

## 프롬프트 로그 (자동 기록)

사용자가 입력한 모든 프롬프트는 훅(`.claude/hooks/log-prompt.sh`)이 자동으로
`prompt-logs/<사용자>/<YYYY-MM-DD>.md`에 기록합니다. Claude가 지켜야 할 규칙:

1. **사용자가 누구인지 확인되는 즉시** `.claude/current-user` 파일에 한 단어로 기록:
   - 연우 → `yeonwoo`, 선우 → `seonwoo`, 아빠 → `appa`
   - 예: `echo "yeonwoo" > .claude/current-user`
2. current-user가 비어 있는 동안의 프롬프트는 `prompt-logs/_unknown/`에 쌓입니다.
   사용자가 확인되면 **그 세션의 \_unknown 로그 항목을 해당 사용자 폴더의 같은 날짜 파일로 옮깁니다.**
   (이전 세션의 다른 사용자 항목과 섞이지 않게 주의)
3. **커밋할 때 `prompt-logs/`도 항상 함께 커밋**합니다 (`git add prompt-logs`).
4. `.claude/current-user`는 gitignore되어 있으니 커밋하지 않습니다.

## 프로젝트 구조

### 디렉토리 구성

```
woo2/
├── index.html          # 홈페이지 (프로젝트 목록)
├── 게임이름/            # 프로젝트별 폴더 (게임 1개 = 폴더 1개)
│   ├── index.html
│   ├── style.css
│   ├── game.js
│   ├── sound.js        # 사운드 코드 (분리 권장)
│   └── sounds/         # 사용하는 오디오 파일 (Kenney에서 복사)
├── asset-library/      # ⚠️ 게임 아님 — Kenney 에셋 카탈로그/사운드 라이브러리 (배포 안 함)
├── prompt-logs/        # ⚠️ 게임 아님 — 프롬프트 일자별 로그 (배포 안 함)
└── ...
```

- `asset-library/`와 `prompt-logs/`는 **서버에 배포하지 않고**, 홈페이지 `GAMES` 목록에도 넣지 않습니다.

### 워크플로우

1. **로컬 개발**: `/Users/toby/woo2` 에서 웹페이지 작성
2. **서버 배포**: 완성된 파일을 서버로 전송
   - 서버 접속: `ssh woo2@woo2.kr`
   - 홈 디렉토리: `/home/woo2/html/`
   - 웹 주소: `https://woo2.kr/`

### 프로젝트 유형

- 미니 게임
- 간단한 유틸리티 도구
- 학습용 프로젝트

### 홈페이지 (첫 페이지) 구조 및 관리

- `index.html`은 **연우 / 선우 두 칸으로 나뉜** 첫 페이지입니다.
  - 첫 화면에 **연우**(파랑) / **선우**(핑크) 카드 2개가 보입니다.
  - 카드를 클릭하면 그 사람이 만든 게임 목록으로 **한 페이지 안에서 전환**됩니다.
  - **← 뒤로가기** 버튼으로 첫 화면으로 돌아갑니다.
- **게임 목록은 `index.html` 안의 `GAMES` 객체로 관리합니다** (HTML 카드를 직접 추가하지 않음):
  - `GAMES.yw` = 연우의 게임 배열, `GAMES.ys` = 선우의 게임 배열
  - 각 항목 형식: `{ href, icon, title, desc }`
    - 예: `{ href: './새게임/index.html', icon: '🎮', title: '게임 이름', desc: '한 줄 설명' }`
  - **새 게임을 만들면 만든 사람(연우/선우)에 맞는 배열에 항목을 추가**합니다.
  - 누가 만든 게임인지 모르면 **아빠에게 물어봅니다.**
- **비공개(잠금) 게임**은 `LOCKED_GAMES` Set에 `href`를 추가하면 자물쇠🔒 + 비밀번호 모달이 적용됩니다.
- 새 게임을 추가한 뒤에는 **데드링크가 없는지** (모든 `href`가 실제 폴더의 파일과 일치하는지) 확인합니다.

## 게임 개발 가이드

### 아이들과 게임 만드는 방법 (진행 방식)

1. **시작 전에 기획을 짧게 묻기**: 어떤 게임인지, 주인공은 누구인지, 어떻게 이기고 지는지.
   3가지만 정해지면 바로 시작. (선우에게는 보기를 2~3개 주고 고르게 하기)
2. **작게 만들고 자주 보여주기**: 한 번에 완성하지 말고, "움직이는 것 → 목표 → 점수 →
   게임오버 → 꾸미기" 순서로 단계마다 브라우저에서 확인시켜 주기.
3. **완성 후 개선은 한 번에 한 가지씩**: 아이가 말한 것부터. 아이 아이디어가 기술적으로
   어려우면 비슷하지만 쉬운 대안을 제시.
4. **아이 이름의 자랑거리로 만들기**: 시작 화면에 게임 제목과 "만든 사람: 연우/선우"를 넣기.

### 새 프로젝트 만들기 (체크리스트)

1. 프로젝트 이름으로 폴더 생성 (영문 소문자-하이픈 권장: `my-game`)
2. 폴더 안에 `index.html`, `style.css`, `game.js` 작성 (작은 게임은 한 파일도 OK,
   **한 파일이 1000줄을 넘으면 분리**)
3. **사운드 항상 포함** (아래 "사운드" 섹션 — 별도 요청 없어도 기본 포함)
4. **모바일/태블릿 대응 기본 포함** (아래 "게임 기본기" 참고)
5. **첫 페이지(`index.html`)의 `GAMES` 객체에 새 게임 항목 추가** (매우 중요!)
   - 만든 사람에 맞춰 `GAMES.yw`(연우) 또는 `GAMES.ys`(선우)에 추가
   - 누가 만들었는지 모르면 아빠에게 물어봄
6. 배포 전 테스트 (아래 "배포 전 테스트" 참고) 후 서버로 전송

### 게임 기본기 (모든 게임에 기본 적용)

시행착오를 줄이기 위해, 요청이 없어도 아래를 기본으로 넣습니다:

- **게임 루프**: `requestAnimationFrame` + **deltaTime 기반 이동** (기기 속도와 무관하게
  같은 속도로 움직이도록). `setInterval`로 게임 루프 만들지 않기.
- **키 입력**: `keydown`/`keyup`으로 눌림 상태(Set/객체)를 관리. keydown 이벤트만으로
  이동하면 끊기므로 금지. 화살표 키 사용 시 `e.preventDefault()`로 페이지 스크롤 방지.
- **터치/모바일 대응**: 화면 가상 버튼 또는 터치/스와이프 조작 추가.
  `<meta name="viewport" content="width=device-width, initial-scale=1">` 필수.
  버튼은 손가락 크기(최소 44px). `touchstart`에 `{ passive: false }` + `preventDefault()`.
- **캔버스 크기**: 고정 px 대신 화면에 맞춰 조정(`resize` 대응). 좌표 깨짐 방지를 위해
  내부 해상도와 CSS 크기를 분리.
- **게임 상태 흐름**: 시작 화면 → 플레이 → 게임오버/클리어 → **재시작 버튼** 한 사이클이
  항상 완성되어야 함. 재시작 시 모든 변수가 초기화되는지 확인 (새로고침 없이 다시 플레이 가능).
- **점수와 최고 기록**: `localStorage`에 저장. 키 이름은 게임 이름 접두사 사용
  (예: `mygame_highscore`) — 게임끼리 충돌 방지.
- **난이도 곡선**: 처음 30초는 쉽게, 시간이 갈수록 조금씩 어렵게. 아이가 직접 테스트할 수
  있도록 **치트키**(예: 키보드 `0` 연타로 레벨 스킵)를 숨겨두면 좋음.
- **일시정지**: `P` 키 또는 ⏸ 버튼. 탭이 백그라운드로 가면 자동 일시정지
  (`visibilitychange`) — deltaTime 폭주로 인한 순간이동 방지.
- **성능**: 화면 밖 객체는 제거, 객체 수 상한 두기, 이미지/오디오는 시작 전에 미리 로드.
- **한글 표시**: `<meta charset="utf-8">` 필수. 기본 글꼴은 시스템 폰트로 충분.

### 배포 전 테스트 (1분 체크)

1. 브라우저 콘솔에 빨간 에러가 없는가?
2. 시작 → 플레이 → 게임오버 → 재시작이 한 번에 되는가?
3. 소리가 나는가? 음소거 버튼이 동작하는가?
4. 창 크기를 줄이거나 휴대폰 크기로 봐도 플레이 가능한가?
5. `GAMES` 목록의 링크가 실제 파일과 일치하는가?

## 에셋 라이브러리 (asset-library/)

[Kenney.nl](https://kenney.nl/assets)의 무료(CC0) 게임 에셋 207개를 스캔해 둔 카탈로그입니다.
그래픽이나 사운드가 필요하면 **먼저 여기서 찾아봅니다.**

- `asset-library/kenney-catalog.md` — 전체 에셋 카탈로그 (2D/3D/오디오/텍스처, 한국어 요약)
- `asset-library/kenney-audio-index.md` — **사운드 파일별 상세 색인** (상황별 추천 표 포함) ⭐
- `asset-library/kenney-audio/` — 오디오 10팩 전체 파일 (750여 개 OGG, 로컬 보관)
- `asset-library/kenney-audio-files.txt` — 오디오 전체 파일 경로 목록
- `asset-library/kenney-assets.json` — 스캔 원본 데이터 (태그, 파일 수, 다운로드 URL, 미리보기)
- 갱신 방법: `node asset-library/scan-kenney.js && node asset-library/make-catalog.js`
- 그래픽 에셋이 필요하면 `kenney-assets.json`의 `download` URL로 받아서 필요한 이미지만
  게임 폴더에 복사 (URL이 만료되면 에셋 페이지에서 다시 확인)

## 사운드

**모든 게임에는 기본적으로 사운드를 항상 넣습니다.** (효과음 + 배경음악)
아이들은 사운드를 따로 요청하지 않으므로, **별도 요청이 없어도 Claude가 알아서 넣습니다.**

### 효과음(SFX): Kenney 음원 사용 (기본)

- `asset-library/kenney-audio-index.md`의 **상황별 추천 표**에서 어울리는 소리를 골라,
  필요한 파일만 게임 폴더의 `sounds/`로 복사해서 사용합니다.
  - 예: `cp asset-library/kenney-audio/digital-audio/Audio/powerUp1.ogg 새게임/sounds/`
- 진짜 음원이라 칩튠보다 훨씬 풍부합니다. 발소리/타격음처럼 반복되는 소리는
  변형(같은 이름 뒤 번호) 여러 개를 복사해서 랜덤 재생하면 자연스럽습니다.
- 승리/패배/클리어 장면에는 `music-jingles`의 짧은 음악, 카운트다운·승패 안내에는
  `voiceover-pack`의 목소리 파일도 적극 활용하세요.
- **게임에 복사한 sounds/ 폴더는 게임과 함께 커밋·배포**합니다.

### 배경음악(BGM): 칩튠 (Web Audio API)

- 긴 배경음악은 파일 대신 **Web Audio API로 8비트풍 멜로디를 코드로 생성**해 루프 재생합니다.
  (`AudioContext` + `OscillatorNode`(square/triangle/sawtooth) + `GainNode`)
- 효과음도 칩튠이 더 어울리는 레트로 게임이라면 칩튠으로 만들어도 됩니다. 상황에 맞게 선택.

### 공통 주의사항

- 브라우저 정책상 오디오는 **사용자가 처음 클릭/터치한 뒤에만** 재생됩니다.
  (시작 버튼에서 `audioCtx.resume()` 또는 첫 재생 시도)
- **음소거(🔇) 버튼**을 항상 넣습니다 (효과음·BGM 한꺼번에).
- 사운드 코드는 `sound.js`로 분리하면 재사용하기 좋습니다.
- 효과음 연속 재생은 `audio.currentTime = 0` 후 `play()`, 또는 `cloneNode()` 사용.

### 선택 사항: 고품질 오디오가 꼭 필요할 때

- Kenney와 칩튠으로 표현이 어려운 고품질 음악이 필요하면, AI 생성 오디오를 쓸 수 있습니다.
  - BGM: MusicGen (Hugging Face `facebook/musicgen-small`), SFX: ElevenLabs Sound Effects API
  - 이 경우 **개발 시 미리 생성해 파일로 저장**하고, 게임 폴더의 `sounds/`에 둡니다.

## 코딩 스타일

- 깨끗하고 읽기 쉬운 코드 작성
- 주석으로 설명 추가 (특히 아이들이 이해할 수 있도록)
- 간단하고 직관적인 디자인

## 버전 관리

- **작업 시작 시 반드시 `git pull`을 실행하여 최신 코드를 받아온다.**
- **커밋/푸시 전에도 항상 먼저 `git pull`로 최신 코드를 받는다.**
- 작업 분량을 잃지 않도록, 프로젝트가 전환되거나 작업을 마칠 때 git 커밋을 만들어야 합니다.
- **커밋할 때 `prompt-logs/`의 변경분도 항상 함께 커밋합니다.**
- **배포(scp)를 할 때는 커밋과 푸시도 항상 함께 합니다** — 순서: `git pull` → 커밋 → `git push` → 배포. (자세한 내용은 "서버 배포" 참고)
- 커밋 메시지는 한국어로 간결하게 작성합니다.
- 예시: "홈페이지 생성", "놀이공원 게임 버그 수정", "발로우 나이트 새 맵 추가"

## 웹개발 및 브라우저 확인

- 모든 프로젝트는 **HTML, CSS, JavaScript로 만드는 웹개발**
- 아이들이 HTML 파일을 작성하면, 다음과 같이 안내:
  - **아이들**: 바탕화면의 "index" 아이콘을 더블클릭하면 브라우저에서 웹페이지를 볼 수 있음 (아빠가 만들어둔 숏컷)
  - 필요하면 터미널에서 `open /Users/yunwonjin/woo2/프로젝트이름/index.html` 명령어로도 가능

## 서버 배포 (커밋·푸시와 항상 함께)

**배포할 때는 반드시 아래 순서를 한 묶음으로 진행합니다.** (배포만 단독으로 하지 않음)

1. **`git pull`** — 먼저 최신 코드를 받아온다 (커밋/푸시 전 필수).
2. **커밋** — 변경 내용을 한국어로 간결하게 커밋 (`prompt-logs/` 포함).
3. **`git push`** — 원격(main)에 푸시.
4. **배포(scp)** — 서버로 파일 전송. (`asset-library/`, `prompt-logs/`, `.claude/`는 배포하지 않음)
5. **권한 체크 (항상)** — 올린 폴더 권한을 **매번 확인**하고, `700`이면 `755`/`644`로 고친다 (아래 참고).
6. **데드링크 확인** — 링크 대상 파일이 서버에 실제로 있는지(HTTP 200) 확인.

SSH 키가 서버에 등록돼 있어 **비밀번호 없이 자동으로 `scp`/`ssh`가 됩니다.**

```bash
# 특정 프로젝트 폴더 전송
scp -r project_name woo2@woo2.kr:/home/woo2/html/

# 홈페이지만 전송
scp index.html woo2@woo2.kr:/home/woo2/html/
```

### 권한 체크 (5단계) — 항상 수행

**⚠️ 새 폴더를 `scp`로 올리면 권한이 `700`으로 올라가 웹서버가 못 읽어 403(데드링크처럼 보임)이 납니다.** 그래서 **배포할 때마다 권한을 확인하고, 필요하면 바로 잡습니다** (폴더 755 / 파일 644).

```bash
# 1) 권한 확인 (700인 폴더가 있는지 본다)
ssh woo2@woo2.kr "ls -la /home/woo2/html/ | grep '^d'"

# 2) 필요하면 수정 (폴더 755 / 파일 644로 한 번에)
ssh woo2@woo2.kr "chmod -R u=rwX,go=rX /home/woo2/html/폴더이름"
```