자료

지금 열려 있는 이 프로젝트에 "프롬프트 로그" 자동 기록을 설정해줘. 이 프로젝트에서
내가 입력하는 모든 프롬프트가 프로젝트 안에 자동으로 쌓이게 하는 거야.
참고 글: https://game.dev-play.kr/articles/prompt-log/

요구사항:
1. 기록 위치: 프로젝트 루트의 log_prompt/도구이름/ 폴더에 날짜별 파일
   (예: log_prompt/claude/2026-07-18.md, Codex라면 log_prompt/codex/...)
2. 기록 형식: 항목마다 [HH:MM:SS] 프롬프트내용 한 줄 + 빈 줄.
3. 네가 Claude Code라면: 이 프로젝트의 .claude/settings.json에 UserPromptSubmit
   훅을 등록하고, 훅 스크립트는 log_prompt/log-prompt.sh 로 만들어줘.
   스크립트는 stdin으로 들어오는 JSON에서 프롬프트를 읽고, 실행 권한을 주고,
   어떤 경우에도 실패로 대화를 막지 않게 항상 정상 종료(exit 0)해야 해. timeout은 5초.
4. 네가 Codex 등 다른 도구라면: 프롬프트 입력 시점에 실행되는 훅/이벤트를 이 도구가
   지원하는지 공식 문서 기준으로 먼저 확인해. 지원하면 같은 사양으로 설정하고,
   지원하지 않으면 아무것도 만들지 말고 "이 도구는 자동 프롬프트 로그를 지원하지
   않는다"고 솔직하게 알려줘. 되는 척하는 어설픈 대안은 금지.
5. 내 OS를 확인해서 거기에 맞는 스크립트로 만들어줘 (macOS/Linux는 bash,
   Windows는 PowerShell). jq 같은 별도 프로그램 설치가 필요 없어야 해.
6. 기존 설정 파일에 다른 내용이 있으면 절대 덮어쓰지 말고 훅만 추가해줘.
7. 이 프로젝트가 git 저장소라면, 로그를 git에 포함할지 나에게 한 번 물어봐줘.
   판단 기준도 같이 알려줘:
   - 개인 프로젝트나 비공개 저장소라면 포함 추천 (작업 의도가 코드와 함께 백업되고,
     나중에 AI가 옛 코드를 다룰 때 로그를 검색해 맥락을 복원할 수 있음)
   - 공개 저장소이거나 회사/팀 코드라면 제외 추천 (프롬프트에는 미정제 내용이
     그대로 담기므로) — 이 경우 .gitignore에 log_prompt/ 추가
   내가 "포함"을 선택하면: .gitignore에 넣지 말고, 어떤 커밋을 하든 log_prompt/가
   항상 최신 상태로 함께 스테이징되도록 git pre-commit 훅(.git/hooks/pre-commit에서
   git add -A log_prompt/ 실행)도 만들어줘. 로그만 단독으로 커밋할 필요가 없어지고,
   모든 커밋에 그 시점까지의 로그가 자연스럽게 따라 들어가.
8. 이 프로젝트의 CLAUDE.md에(네가 Codex라면 AGENTS.md에, 파일이 없으면 생성해서)
   다음 지침을 추가해줘:
   "log_prompt/ 폴더는 내가 AI에게 입력한 프롬프트의 자동 기록이다.
   오래된 코드의 의도가 불분명하거나 과거 작업 맥락이 필요할 때는
   git log와 함께 log_prompt/에서 관련 키워드를 검색해 참고하라.
   로그 파일 자체를 수정하거나 삭제하지는 마라."
9. 끝나면 ①만든 파일 목록 ②수정한 설정 파일 ③확인 방법을 정리해서 보여줘.
   그리고 다음 내 메시지가 첫 기록이 될 테니, 그때 로그 파일을 직접 읽어서
   정상 동작하는지 검증해줘.
10. 마지막으로 "이 로그에는 입력하는 모든 내용(비밀번호·API키 포함 가능)이 그대로
    기록되니 주의하라"는 안내를 꼭 해줘.

# CLAUDE.md — 바이브코딩 게임 스터디 기본 세팅

이 저장소는 내가 만드는 웹게임 모음집입니다. 아래 지침에 따라 게임 제작을 도와주세요.

## 기본 원칙

- **언어**: 항상 한국어로 대화합니다.
- 사용자는 프로그래밍이 처음일 수 있습니다. **쉬운 말로 설명**하고, 전문용어는 꼭 필요할 때만 한 줄로 풀어서 씁니다.
- 사용자가 한 말이 틀리다고 생각하면 언제든지 틀리다고 말해주세요.
- **작게 만들고 자주 보여주기**: 한 번에 완성하지 말고 "움직이는 것 → 목표 → 점수 → 게임오버 → 꾸미기" 순서로, 단계마다 브라우저에서 확인시켜 주세요.
- 완성 후 개선은 **한 번에 한 가지씩** 진행합니다.

## 프로젝트 구조

루트의 index.html이 게임 목록(포털) 페이지이고, **게임 1개 = 폴더 1개**입니다.

```
my-games/
├── index.html          # 게임 목록 페이지 (썸네일 카드형)
├── thumbs/             # 목록용 썸네일 이미지 (게임이름.png)
├── snake-run/          # 게임 폴더 (영문 소문자-하이픈)
│   ├── index.html
│   ├── style.css
│   ├── game.js
│   └── sound.js        # 사운드 코드 (분리 권장)
└── ...
```

**새 게임을 만들 때마다, 별도 요청이 없어도 아래를 항상 완료합니다:**

1. 게임 이름으로 폴더 생성 (영문 소문자-하이픈, 예: snake-run)
2. 게임 제작 (아래 "게임 기본기" 기본 적용)
3. 썸네일 제작 → thumbs/에 저장
4. **목록 페이지(index.html)에 카드 추가** — 게임 링크 + 썸네일 + 제목 + 한 줄 설명
5. 링크와 썸네일 경로가 실제 파일과 일치하는지(데드링크 없는지) 확인

## 게임 기본기 (요청 없어도 모든 게임에 기본 적용)

- **양쪽 화면 대응**: 모바일과 데스크탑 양쪽에서 적절한 크기로 잘 보이고 플레이할 수 있어야 합니다. viewport 메타태그 필수, 캔버스는 화면 크기에 맞춰 리사이즈(내부 해상도와 CSS 크기 분리).
- **조작**: 터치와 마우스 조작을 기본으로 하되, 데스크탑을 위한 **기본 키보드 매핑**(화살표/WASD/스페이스 등)도 함께 넣습니다. 터치 버튼은 최소 44px, touchstart에 preventDefault로 화면 스크롤/확대 방지, 화살표 키도 preventDefault로 페이지 스크롤 방지.
- **게임 루프**: requestAnimationFrame + deltaTime 기반 이동(기기 속도와 무관하게 같은 속도). setInterval로 게임 루프를 만들지 않습니다.
- **키 입력**: keydown/keyup으로 눌림 상태(Set/객체)를 관리합니다. keydown만으로 이동하면 끊깁니다.
- **상태 흐름**: 시작 화면 → 플레이 → 게임오버/클리어 → **재시작 버튼** 한 사이클이 항상 완성돼야 하고, 새로고침 없이 다시 플레이할 수 있어야 합니다(재시작 시 변수 초기화 확인).
- **점수 기록**: 점수가 있는 게임은 **개발놀이터 오락실 랭킹 API로 서버에 저장하는 것을 기본**으로 합니다(아래 "오락실 랭킹 연동" 참고). 점수 저장처를 localStorage와 서버 두 곳으로 나누지 않습니다 — 기록은 한 곳에만 있어야 관리가 쉽습니다.
- **일시정지**: P 키 또는 버튼. 탭이 백그라운드로 가면 자동 일시정지(visibilitychange) — deltaTime 폭주로 인한 순간이동 방지.
- **성능**: 화면 밖 객체는 제거, 객체 수 상한, 이미지/오디오는 시작 전에 미리 로드.
- **한글**: meta charset은 utf-8 필수.

## 사운드 (요청 없어도 기본 포함)

- **기본은 칩튠(chiptune)**: Web Audio API로 8비트풍 효과음과 배경음악을 **코드로 생성**해 넣습니다. (AudioContext + OscillatorNode(square/triangle) + GainNode — 오디오 파일 없이 코드만으로.)
- 브라우저 정책상 오디오는 **사용자가 처음 클릭/터치한 뒤에만** 재생됩니다. 시작 버튼에서 audioCtx.resume()을 호출하세요.
- **음소거 버튼을 항상** 넣습니다 (효과음 + BGM 한꺼번에).
- 사운드 코드는 sound.js로 분리하면 다음 게임에서 재사용하기 좋습니다.

## 이미지

- 처음에는 **이모지/도형/CSS만으로도 충분**합니다. 그래픽보다 게임을 먼저 완성하세요.
- 그래픽을 업그레이드할 때: **Codex를 사용 중이라면 imggen 스킬로 이미지를 생성**하는 것을 고려해 진행합니다.
- 생성한 이미지는 게임 폴더 안에 저장하고 함께 커밋합니다.
- 썸네일은 게임의 대표 장면 캡처 또는 생성 이미지를 정사각형으로 만들어 thumbs/에 둡니다.

## 개발놀이터 오락실 랭킹 연동 (점수 기록의 기본)

점수가 있는 게임은 스터디 오락실 랭킹으로 점수를 기록합니다. 스터디원들과 랭킹으로 경쟁할 수 있고, 점수 저장·로그인·랭킹 UI를 SDK가 대신 처리해 줍니다.

- https://game.dev-play.kr/api-guide.php 의 지침을 읽고 그대로 적용하세요.
- 핵심은 두 가지: rank.js SDK 스크립트 추가 + 게임오버 시 DevplayRank.submitScore(점수) 호출. selfRegister 옵션으로 게임이 오락실 목록에 자동 등록됩니다.
- 로그인하지 않고 플레이해도 SDK가 점수를 잠시 보관했다가 로그인 시 자동 제출하므로, 게임 쪽에서 따로 처리할 것이 없습니다.
- 점수 개념이 없는 게임(방탈출 일회성 등)만 연동을 생략합니다.

## Vercel 배포

- 이 저장소는 **정적 사이트**로 Vercel에 배포합니다. 빌드 설정이 필요 없습니다(Framework Preset: Other).
- **최초 1회 연결**: GitHub에 저장소를 만들어 push → vercel.com에서 Add New Project → 저장소 import. 이후에는 **main 브랜치에 push할 때마다 자동 배포**됩니다.
- CLI를 쓰는 경우: npx vercel --prod
- 경로는 **상대 경로**를 사용합니다(./thumbs/snake-run.png 처럼). 서브 폴더에서 절대 경로(/)를 쓰면 배포 루트 기준이라 어긋날 수 있습니다.
- 배포 후에는 배포 URL에서 목록 페이지 → 새 게임까지 실제로 열리는지 확인합니다.

## Git 관리 (알아서 진행)

- 저장소가 git이 아니면 git init부터. .gitignore에 .DS_Store, node_modules 등을 넣습니다.
- **작업 단위마다 커밋**하고, 게임 하나를 완성하거나 수정을 마무리하면 커밋 → push까지 합니다. (push가 곧 배포입니다.)
- 커밋 메시지는 한국어로 간결하게: "스네이크 게임 추가", "점프 판정 버그 수정"
- API 키, 비밀번호, .env 파일은 **절대 커밋하지 않습니다.**

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

1. 브라우저 콘솔에 빨간 에러가 없는가?
2. 시작 → 플레이 → 게임오버 → 재시작이 한 번에 되는가?
3. 소리가 나는가? 음소거 버튼이 동작하는가?
4. 휴대폰 크기로 줄여도 보이고 플레이 가능한가?
5. 목록 페이지의 링크·썸네일이 실제 파일과 일치하는가?
6. 점수 게임이라면: 게임오버 시 점수 제출이 호출되고 랭킹 버튼이 보이는가?

# 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/폴더이름"
```