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

차분한 여행자 · 바이브 코딩 · · 좋아요 0 · 답글 0

연재 Claude Code 개발 체계 심화 2/5편

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 (이어서 실행)

태그: #클코끝판왕