lab/landing_page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
dev
landing_page/refer_landing_page/PROMPT.md
T

250 lines
12 KiB
Markdown
Raw Permalink Blame History

# PROMPT.md — Claude Code에 전달한 프롬프트 기록
> `refer_landing_page/` 디렉터리를 만들 때 Claude Code에 보낸 프롬프트의 **원문 + 의도 + 세션 메타** 기록. 공부/재사용용.
---
## 0. 작업 요약
- **대상**: `~/PuKi/lab/landing_page/refer_landing_page/`
- **프레임워크**: Next.js 14+ (App Router) + TypeScript + Tailwind CSS
- **5개 라우트**: `/intro`, `/members`, `/publications`, `/lectures`, `/standardization`
- **컨텍스트**: 경북대 IoT 표준 연구실 — MCM(메타버스 상호운용성) + QUIC 멀티에이전트 오케스트레이션
- **최종 산출물**: 18개 파일 (config 6 + app 7 + components 3 + README + .gitignore)
- **총 비용**: 약 $0.54 USD (claude-opus-4-8, 13 turns)
- **호출 모드**: `claude -p "..."` (print mode, 비대화형)
> ⚠️ `npm install`/`npm run dev`는 의도적으로 실행하지 않음. 사용자가 직접 실행.
---
## 1. 호출 명령 패턴 (Print Mode)
```bash
claude -p "$(cat /tmp/cc_prompt.md)" \
--dangerously-skip-permissions \
--max-turns 30 \
--max-budget-usd 5 \
--output-format json
```
| 플래그 | 값 | 이유 |
|--------|-----|------|
| `-p` | — | 비대화형 one-shot. 다중-턴 워크플로에는 부적합 |
| `--dangerously-skip-permissions` | — | 파일 쓰기/네트워크를 자동 승인 (워크스페이스 신뢰 다이얼로그 스킵) |
| `--max-turns` | 30 | 무한 루프 방지. 단일 작업엔 25~30이면 충분 |
| `--max-budget-usd` | 5 | 비용 상한. 시스템 프롬프트 캐시 생성에 최소 ~$0.05 필요 |
| `--output-format` | json | `session_id`, `total_cost_usd` 등 메타 회수 |
| `workdir` | `/home/godopu16/PuKi/lab/landing_page` | Claude가 작업할 루트 |
---
## 2. 1차 프롬프트 (전체 — `/tmp/cc_prompt.md`)
> claude가 부분적으로만 수행한 후 인터럽트됨. 다음 12개 파일만 생성:
> package.json, next.config.js, next-env.d.ts, tsconfig.json, postcss.config.js, tailwind.config.ts, .gitignore, app/layout.tsx, app/globals.css, components/Header.tsx, components/Footer.tsx, components/PageHeader.tsx
```text
Create a Next.js 14+ (App Router) landing-page reference prototype at
/home/godopu16/PuKi/lab/landing_page/refer_landing_page/ for a Korean
university research lab.
REQUIREMENTS (strict):
1. Use Next.js 14+ App Router with TypeScript and Tailwind CSS. Use
create-next-app style structure (package.json, next.config.js, app/
directory, tailwind.config.ts, tsconfig.json, postcss.config.js).
If create-next-app is not available offline, write all files
manually with correct contents. Do NOT run any interactive install.
2. Top app header with 5 navigation links routing to: /intro, /members,
/publications, /lectures, /standardization. Header must be sticky
and have a working mobile hamburger menu.
3. Implement ALL 5 pages with realistic placeholder content. Each page
must be a real Next.js route (app/<route>/page.tsx) — NOT a single-
page mock.
4. Lab context: 경북대학교 컴퓨터학부 사물인터넷 표준 연구실
(Internet of Things Standards Lab). The lab has two main research
thrusts: (a) MCM project — interoperability in metaverse
environments, (b) QUIC-based multi-agents orchestration architecture
and communication interface design. The intro page should introduce
both. The other pages should reflect this context.
5. Responsive: works on desktop (>=1024px), tablet (640-1023), and
mobile (<640). Test that the header collapses to a hamburger menu
on mobile. Use Tailwind responsive classes.
6. Korean-language UI. Lab name in Korean and English. Bilingual
section headers (Korean primary, English in parentheses) where
natural.
7. Include a Footer with lab address placeholder, contact email
placeholder, and copyright line.
8. README.md inside refer_landing_page/ explaining: project purpose
(reference prototype, not production), how to run (npm install,
npm run dev), route map, and a short list of customization hooks
(colors, fonts, content).
9. Do NOT install npm packages. Just generate the source files. Add a
package.json with the standard Next.js scripts (dev, build, start,
lint) and the deps listed but with a note in README that the user
must run npm install themselves.
10. Keep total file count reasonable — prefer fewer, well-structured
files over many fragments.
OUTPUT FORMAT:
- After generating files, list every file path you created with one-
line descriptions.
- Do NOT run npm install, npm run dev, or any network commands.
- Reply in English (final summary to me). The user is the lab PI; I am
Claude, the coding agent.
Begin.
```
### 1차 시도 결과
- 1차 호출은 30분 이상 흐른 뒤 인터럽트됨 (Hermes 세션 셧다운).
- 그 시점에 claude는 **설정 파일 + components 3개 + layout.tsx + globals.css** 까지만 생성.
- **5개 페이지(`app/<route>/page.tsx`) + README.md** 가 누락된 채 중단.
---
## 3. 2차 프롬프트 — 복구용 (누락 6개 파일만 생성) — `/tmp/cc_prompt2.md`
> 같은 디렉터리에 새 세션으로 재진입하되, 이미 만들어진 파일은 **덮어쓰지 말라**고 명시.
> claude-code skill의 Pitfall #13을 적용해 `-c` (continue) 대신 **새 세션 + 명시적 파일 목록** 패턴 사용.
```text
You are continuing a partially-completed task. The previous Claude
session was interrupted at
/home/godopu16/PuKi/lab/landing_page/refer_landing_page/.
ALREADY CREATED (do NOT recreate, do NOT overwrite, leave as-is):
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/package.json
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/next.config.js
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/next-env.d.ts
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/tsconfig.json
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/postcss.config.js
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/tailwind.config.ts
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/.gitignore
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/layout.tsx
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/globals.css
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/components/Header.tsx
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/components/Footer.tsx
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/components/PageHeader.tsx
YOU MUST CREATE (these are missing):
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/intro/page.tsx
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/members/page.tsx
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/publications/page.tsx
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/lectures/page.tsx
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/app/standardization/page.tsx
- /home/godopu16/PuKi/lab/landing_page/refer_landing_page/README.md
CONTEXT (same as original task):
- Next.js 14+ App Router, TypeScript, Tailwind CSS.
- Lab: 경북대학교 컴퓨터학부 사물인터넷 표준 연구실 (Internet of
Things Standards Lab).
- Two research thrusts:
(a) MCM project — interoperability in metaverse environments
(b) QUIC-based multi-agents orchestration architecture and
communication interface design
- Korean-language UI. Bilingual section headers (Korean primary,
English in parentheses) where natural.
- 5 pages must each have realistic placeholder content (not lorem
ipsum). Use the lab context.
- Responsive: use Tailwind responsive classes; works on desktop,
tablet, mobile.
- Each page should use the existing components/PageHeader.tsx and
components/Footer.tsx where appropriate.
README.md must include:
- Project purpose (reference prototype, not production)
- Lab context (1-2 sentences)
- Tech stack (Next.js 14 App Router, TypeScript, Tailwind CSS)
- Directory structure
- How to run: `cd refer_landing_page && npm install && npm run dev`
and the resulting URL
- Route map: /intro, /members, /publications, /lectures,
/standardization with one-line description of each
- Customization hooks: where to change colors (tailwind.config.ts),
fonts (app/layout.tsx), content (each page.tsx)
- A note that the user must run `npm install` themselves (do not run)
OUTPUT FORMAT:
- After generating files, list every file path you created with one-
line descriptions.
- Do NOT run npm install, npm run dev, or any network commands.
- Do NOT overwrite any of the ALREADY CREATED files listed above.
- Reply in English. Be concise.
Begin.
```
### 2차 시도 결과
- `subtype: success`, 13 turns, $0.54
- 누락된 6개 파일 모두 생성, 기존 12개 파일은 그대로 유지
- README에 경고 문구(사용자 직접 `npm install` 필요) 명시
---
## 4. 프롬프트 설계 패턴 — 학습 노트
### 4-1. Print 모드에서는 짧고 결정적인 프롬프트가 낫다
`claude -p`는 **짧고 구체적인 지시**에 최적화돼 있다. claude-code skill 공식 가이드도 같은 내용을 명시:
> "Brief, concrete prompts for print-mode code generation finish in seconds.
> A 3-sentence verbose prompt with background context can cause 120s+ timeouts.
> The file-write tool (not your prompt text) carries the implementation details."
→ 1차 프롬프트가 60줄(약 1.2KB) 정도가 적절. 더 길면 `thinking` 시간만 늘어나고 결과는 같다.
### 4-2. `REQUIREMENTS (strict):` 10개로 분해
체크리스트 형식의 번호 매기기 지시는 누락이 적다. 1번이 누락되면 1번 항목만 다시 요청할 수 있어 **복구 단위**가 명확해진다.
### 4-3. "Do NOT run X" — 네거티브 제약
`Do NOT run npm install, npm run dev, or any network commands` 같은 **명시적 금지 목록**이 print 모드에서 일탈을 줄이는 데 효과적이었다.
### 4-4. 작업 디렉터리 경로를 절대경로로
`workdir`만으로는 부족. 프롬프트 안의 모든 경로를 **절대경로**로 적어야 claude가 자기 판단으로 위치를 옮기지 않는다.
### 4-5. 복구 패턴: `-c` 대신 새 세션 + "ALREADY CREATED" 명세
claude-code skill Pitfall #13:
> "`-c` / `--continue` is dangerous in multi-workdir orchestration — `claude -c`
> resumes the most recent session for the current working directory, which is
> the wrong session whenever (a) you switched workdirs, (b) multiple workdirs
> are in play, or (c) the most recent session in that workdir is not the one
> you want to resume."
→ 이번 케이스도 같은 이유로 `-c`를 피하고 **새 세션 + 누락 파일 명세** 로 복구했다. 12개 파일 경로를 일일이 적은 덕에 claude는 안전하게 "기존 파일 보존 + 누락 6개 생성" 으로 작업을 분기했다.
### 4-6. `// CUSTOMIZATION HOOK` 주석 메타포
claude가 각 페이지에 `// CUSTOMIZATION HOOK` 주석을 달아 데이터 배열의 위치를 표시했다. README에서 이 주석을 가리키는 가이드를 작성하면 **사용자가 실제 콘텐츠로 교체**할 때 헤맬 일이 없다. (보너스 효과)
### 4-7. `--output-format json`의 활용
`session_id`, `total_cost_usd`, `num_turns`, `usage.modelUsage`를 받으면 비용 추적·재개에 유리하다. 본 작업의 비용 메타(13 turns, $0.54)도 이걸로 회수했다.
---
## 5. 다음에 비슷한 작업을 한다면
| 개선점 | 이유 |
|--------|------|
| 프롬프트를 1차에 한 번에 다 보내지 말고, **테스트 가능한 단위**(예: config + layout → 1차, pages → 2차)로 쪼갠다 | 인터럽트 시 손실이 적고 검증 단계 명확 |
| `--max-turns 20` + `--max-budget-usd 3` 같은 보수적 캡 | 평균 작업 단위에 맞춰 과다 사용 방지 |
| `--append-system-prompt-file`로 연구실 컨텍스트 미리 주입 | 매번 프롬프트에 컨텍스트 반복 안 해도 됨 |
| 인터랙티브 모드(tmux) 검토 | 5개 페이지가 서로 의존성이 낮아 print 모드가 적절했지만, 디자인 반복이 많으면 tmux가 유리 |
---
## 6. 관련 산출물
- `refer_landing_page/README.md` — 사용자용 실행 가이드
- `refer_landing_page/` — 실제 Next.js 프로토타입 (18개 파일)
- `refer_landing_page/RESEARCH.md`(상위) — 연구 분야 소개용 (홈페이지 카피 소스)
- `/tmp/cc_prompt.md`, `/tmp/cc_prompt2.md` — 원본 프롬프트 파일 (이 문서의 원천)
Reference in New Issue View Git Blame Copy Permalink