# [Claude Code] GitHub 주소 하나 줬더니 카드뉴스가 뚝딱 — 환경 설정부터 PRD 작성까지

- 작성자: [차분한 여행자](https://community.clauders.ai/member/imported-member-87ZCSCGl9M)
- 공간: [바이브 코딩](https://community.clauders.ai/claude-code)
- 게시: 2026-05-25
- 연재: [Claude Code 개발 체계 심화](https://community.clauders.ai/series/advanced-claude-code-harness) 2/5편
- 태그: #클코끝판왕
- 주소: https://community.clauders.ai/claude-code/post/claude-code-github-%EC%A3%BC%EC%86%8C-%ED%95%98%EB%82%98-%EC%A4%AC%EB%8D%94%EB%8B%88-%EC%B9%B4%EB%93%9C%EB%89%B4%EC%8A%A4%EA%B0%80-%EB%9A%9D%EB%94%B1-%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95%EB%B6%80%ED%84%B0-prd-%EC%9E%91%EC%84%B1%EA%B9%8C%EC%A7%80-55d536b5-44b1-8b32-bf2a-f8f0e993e7dd

---

### **1. 내가 일하는 방식을 Claude Code에게 알려주기 — 환경 세팅**

처음 해야 할 일은 "Claude Code가 내 의도대로 일하게 만드는 장치"를 설계하는 것이었습니다. 스터디에서 이걸 **하네스 엔지니어링**이라고 불렀는데, 처음 들으면 낯선 말이지만 실제로 해보면 간단합니다.

```
cc, ccd, ccr alias와 실행 모드를 전부 새로 설정해줘
```

Claude Code가 PowerShell 프로필 파일에 alias 3개를 만들어줬습니다.

- `cc` → 기본 실행
- `ccd` → 권한 확인 없이 빠른 실행 (실습용)
- `ccr` → 이전 대화 이어서 실행

그다음은 안전장치입니다. 실수로 파일을 몽땅 지우는 명령어를 치면 자동으로 막히도록 hook을 설정했습니다. `rm -rf`나 `git reset --hard` 같은 위험한 명령어를 입력하면 차단되고, 작업이 완료되면 비프음과 메시지로 알려줍니다.

도구를 쓰기 전에 도구가 제 방식으로 일하도록 설정한 셈입니다.

### **2. 도구 생태계 한 번에 갖추기 — 플러그인 12종 설치**

```
GPTaku Plugin 설치부터 하자
```

스터디에서 안내해 준 플러그인들을 순서대로 설치했습니다. PRD 작성 도우미, 팀 빌더, 리서치 도구, 디자인 분석기까지 12종이 한 번에 설치됐습니다. 나중에 이 플러그인들이 큰 역할을 하게 됩니다.

### **3. GitHub 주소 하나로 카드뉴스가 만들어지다**

이게 오늘의 하이라이트였습니다.

학교 수업에서 발표할 칼로리 계산 AI 앱을 만든 적이 있는데, 이 앱의 카드뉴스가 필요했습니다. 보통이라면 앱 기능을 정리하고, 어떤 내용을 어떤 카드에 넣을지 하나하나 설계해야 합니다.

그냥 GitHub 주소를 줬습니다.

```
50-my-work\cardnews-maker\에 이미지를 넣어줘.
카드뉴스에 Unsplash 실제 사진을 전체 카드 배경으로 넣어줘
```

Claude Code가 저장소를 분석하고, 앱의 기술 스택(HTML/JavaScript, Google Gemini API, Vercel)과 핵심 기능, 작동 방식을 스스로 파악했습니다. 그리고 10장짜리 카드뉴스 기획서를 먼저 만들고, 각 카드 주제에 맞는 Unsplash 사진까지 골라서 HTML로 완성했습니다.

카드

내용

배경 이미지

1 (훅)

음식 사진 한 장으로 칼로리 계산

신선한 샐러드 볼

2 (문제)

기존 방식의 불편함

버거

3 (솔루션)

Calorie AI 소개

컬러풀한 채소

4 (기술)

Gemini API 작동 원리

스마트폰 카메라

5 (요약)

한눈에 보기

식단 밀프렙

제가 한 건 GitHub 주소를 준 것뿐인데, 결과물이 나왔습니다.

### **4. "이거 만들어줘" 개발의 한계를 실감하다 — 인터뷰 기반 PRD**

카드뉴스를 자동으로 만들어주는 스킬을 만들고 싶었습니다. 예전 같으면 이렇게 했을 겁니다.

"키워드 입력하면 카드뉴스 HTML 만들어주는 스킬 만들어줘."

이번엔 달랐습니다. 스터디에서 제공한 `/show-me-the-prd` 플러그인을 썼습니다. 이 도구는 무작정 만들지 않고 먼저 질문합니다.

```
50-my-work\cardnews-maker\02-cardnews.html의 결과물처럼
키워드를 바탕으로 리서치를 진행해 카드뉴스까지 만드는 스킬을 만들고 싶어.
이거 만들기 위한 문서를 만들어줘
```

그러자 질문이 이어졌습니다.

- "이 스킬을 누가 쓸 건가요?" → 나만 쓸 개인 스킬
- "카드 수와 리서치 방식은?" → 카드 수 선택 + 웹 리서치 자동
- "MVP 첫 버전은 어느 범위로?" → 키워드 → HTML 직행 최소 버전
- "데이터는 어떻게 흐르나요?" → 확인

솔직히 처음엔 "왜 이렇게 많이 물어보지? 그냥 만들면 안 되나?" 싶었습니다.

그런데 결과물을 보고 생각이 바뀌었습니다.

인터뷰가 끝나자 5개 파일이 자동으로 생성됐습니다.

- 제품 요구사항 문서 (PRD) — 뭘 만들고 왜 만드는지
- 데이터 모델 — 입력이 어떻게 결과물이 되는지
- Phase 분리 계획 — MVP부터 고도화까지 단계
- 프로젝트 스펙 — 절대 하지 말아야 할 것, 디자인 시스템

이건 제가 "이거 만들어줘" 한 줄로는 절대 나오지 않을 문서들이었습니다. 무엇보다 **나중에 이 스킬을 개선하거나 비슷한 걸 만들 때** 다시 읽으면 됩니다. 맥락이 문서에 남아있으니까요.

### **Before vs After**

항목

Before

After

PRD 작성 방식

"이거 만들어줘" 한 줄

인터뷰 기반 5종 문서

카드뉴스 제작

수동으로 구조 설계 + 디자인

GitHub URL → HTML 자동 생성

환경 설정

매번 기억에 의존

alias + hook으로 고정

플러그인 생태계

없음

12종 즉시 사용 가능

### **결과물**

- `50-my-work/cardnews-maker/02-cardnews.html` — 10장 카드뉴스 (Unsplash 이미지 포함)
- `PRD/` 폴더 — cardnews-maker 스킬 PRD 5종 문서

### **효과적이었던 것**

1. **결과물을 먼저 만들고, 그걸 스킬로 정리하기** — 카드뉴스를 직접 만들어보고 난 뒤에 "이 과정을 자동화하는 스킬을 만들자"로 이어지니 요구사항이 명확해졌다
2. **GitHub 주소나 파일을 직접 주기** — 설명하는 것보다 실제 결과물을 주면 Claude가 맥락을 훨씬 잘 파악한다
3. **인터뷰 질문에 성실하게 답하기** — 귀찮더라도 하나씩 답변하면 나중에 "왜 이렇게 만들었지?" 할 때 문서를 보면 된다

### **이렇게 하면 안 돼요**

1. **"일단 만들어봐" 식으로 시작하기** — 처음에 범위를 안 정하면 만들다가 방향을 잃는다
2. **질문이 많다고 건너뛰기** — 인터뷰 단계가 길게 느껴져도 그게 나중의 수정 비용을 줄여준다

### **프롬프트 1: 결과물 기반 카드뉴스 생성**

> [GitHub 주소 또는 파일]을 분석해서 인스타그램 카드뉴스 HTML을 만들어줘. 카드는 10장, 540x540px 기준, 다크 그라디언트 배경으로. Hook → 문제제기 → 솔루션 → 핵심 기능 → 요약 → CTA 순서로 구성해줘.

### **프롬프트 2: 인터뷰 기반 PRD 시작**

> /show-me-the-prd [만들고 싶은 것을 한 문장으로]

### **프롬프트 3: Claude Code 환경 초기 세팅**

> PowerShell 프로필에 alias를 설정해줘. cc → claude (기본 실행) ccd → claude --dangerously-skip-permissions (실습용) ccr → claude --resume --dangerously-skip-permissions (이어서 실행)