배운 도구를 한 흐름으로 | AI 협업 워크플로우
앞에서 배운 도구를 AI 협업 워크플로우로 연결하고, 템플릿에서 Feedme 개발을 시작합니다
마지막 업데이트: 2026. 9. 12.
Overview
앞에서는 요구사항, 프로젝트 지침, Plan Mode, 테스트와 Skill을 각각 배웠습니다. 이제 이 도구들을 한 프로젝트에서 이어 사용합니다.
이번 Chapter에서는 URL을 Markdown으로 바꾸는 서비스 Feedme를 직접 클론합니다. 앞 단계의 결과를 다음 단계가 이어받아 요구사항을 구체화하고, 구현과 검토, 배포를 거쳐 다음 작업이 시작할 상태로 정리하는 과정을 경험합니다.
학습 목표
- 요구사항, 프로젝트 지침, 검증, Git이 Skill을 통해 하나의 개발 흐름으로 이어지는 방식을 설명합니다.
- 각 Skill이 맡는 작업과 다음 단계에 남기는 결과를 구분합니다.
- 강의 프로젝트 템플릿으로 새 저장소를 만들고 로컬에서 실행해 Feedme 개발을 시작할 준비를 마칩니다.
이번 Chapter에서 완성할 Feedme
feedme.wiki는 웹페이지 주소를 입력하면 본문을 Markdown으로 바꾸고, 그 결과를 다른 곳에서 사용할 수 있게 해주는 서비스입니다.
이번 Chapter에서는 Feedme의 핵심 사용자 흐름을 직접 구현합니다.
- 웹페이지 URL을 입력합니다.
- 본문을 Markdown으로 변환합니다.
- 변환된 제목, 저자와 본문을 확인합니다.
- 결과를 복사하거나 Markdown 파일로 내려받습니다.
- 필요한 프롬프트와 함께 ChatGPT 또는 Claude로 보냅니다.
여섯 Lesson에 걸쳐 요구사항을 구체화하고, 구현하고, 결과를 검토합니다. 마지막에는 Feedme를 배포하고 완료된 작업과 남은 문제를 다음 작업이 이어받을 상태로 정리합니다.
이번 Chapter에서 사용할 Skill
이번 Chapter에서 소개하는 Skill의 전체 원문은 toy-crane/skills GitHub 저장소에서 확인할 수 있습니다. 여기서는 각 Skill을 언제 사용하고 무엇을 다음 단계에 넘기는지만 살펴봅니다.
Feedme는 새 서비스이므로 define-product로 전체 방향을 PRODUCT.md에 남긴 뒤 shape-idea로 이번 작업의 동작과 완료 기준을 정합니다.
Feedme가 따라갈 경로
| 단계 | 맡는 일 | 다음 단계에 남기는 것 |
|---|---|---|
define-product | 실제 사용 상황을 확인해 서비스 전체 방향을 정합니다 | 루트 PRODUCT.md의 사용자, 문제와 반복되는 사용자 흐름 |
shape-idea | 요구사항에서 빠진 결정을 사람과 함께 정합니다 | docs/specs/<slug>/spec.md의 사용자 동작과 완료 기준 |
split-into-tasks | 따로 완성해 쓸 수 있는 결과를 사람의 승인을 받아 나눕니다 | docs/specs/<slug>/tasks/의 Task 문서 |
implement | Task를 순서대로 구현하고 실행한 서비스에서 실제 동작까지 확인합니다 | 코드와 검증 근거, 이번 결과와 분리해 다시 확인할 문제는 docs/follow-ups/<slug>.md |
human-review | 자동 검증으로 정할 수 없는 판단만 사람에게 묻습니다 | 승인 또는 수정 요청 |
| 배포 | 완성한 Feedme를 Vercel에 연결합니다 | 누구나 접속할 수 있는 주소 |
워크플로우는 정답이 아니라 출발점
이 워크플로우는 Matt Pocock이 제안한 Skill 철학에서 출발한 하나의 예시입니다. 이번 Chapter에서는 먼저 전체 흐름을 따라 Feedme를 완성합니다.
이 워크플로우는 따라야 할 정답이 아니라, 자신만의 AI 협업 워크플로우를 만들기 위한 출발점입니다.
전체 흐름을 마친 뒤에는 필요 없는 Skill을 빼고, 필요한 Skill을 추가하며, 질문 방식과 검토 기준을 자신의 작업에 맞게 바꾸면 됩니다.
[미션] 템플릿으로 Feedme 시작하기
Step 1: 새 GitHub 저장소 만들기
강의 프로젝트 템플릿에 접속합니다.
- Use this template을 클릭합니다. (스크린샷 ①)
- Create a new repository를 선택합니다. (스크린샷 ②)
- 다음 화면의 Repository name에
feedme-clone을 입력합니다. - 화면 아래의 저장소 생성 버튼을 클릭합니다.
feedme-clone 저장소 화면이 열리고 app, package.json, bun.lock 같은 템플릿 파일이 보이면 생성이 끝났습니다. 목록의 CLAUDE.md와 AGENTS.md에는 AI가 읽을 프로젝트 지침과 Next.js가 직접 넣은 공식 사용법이, .claude/에는 이번 Chapter에서 사용할 Skill이 들어 있습니다.
Step 2: 로컬에 클론하기
생성한 feedme-clone 저장소로 이동합니다.
-
Code를 클릭합니다. (스크린샷 ①)
-
HTTPS 탭을 선택합니다. (스크린샷 ②)
-
복사 버튼을 클릭해 저장소 주소를 복사합니다. (스크린샷 ③)
-
터미널을 열고 복사한 주소로 저장소를 클론합니다.
git clone <복사한 저장소 주소> -
생성된
feedme-clone폴더로 이동합니다.cd feedme-clone
터미널의 현재 위치가 feedme-clone 폴더이면 로컬에서 작업할 준비가 끝났습니다.
Step 3: 개발 서버 실행하기
-
bun install로 의존성을 설치합니다.bun install -
bun dev로 개발 서버를 실행합니다.bun dev -
터미널에 Local로 표시된 주소를 브라우저에서 엽니다. 기본 주소는
http://localhost:3000입니다. -
오류 화면 없이 템플릿의 시작 페이지가 열리는지 확인합니다.
템플릿의 초기 화면이 나타나면 Feedme를 만들 준비가 끝났습니다.
핵심 포인트 정리
- 도구에서 흐름으로: 요구사항, 프로젝트 지침, 검증과 Git을 각 단계의 Skill이 이어서 사용합니다.
- Skill 사이의 인계: 서비스 방향은
PRODUCT.md, 이번 작업은spec.md, 이번 결과와 분리해 다시 확인할 문제는docs/follow-ups/에 근거를 남기고, 배포된 작업의 재사용할 결정만 현재 맥락으로 남깁니다. - 워크플로우는 출발점: 먼저 전체 흐름을 경험한 뒤, 필요한 Skill과 검토 기준을 자신의 작업에 맞게 바꿉니다.
이어서 배울 내용
다음 Lesson에서는 Feedme의 전체 방향을 먼저 PRODUCT.md에 남깁니다. 이어서 요구사항 전체를 shape-idea에 입력해 구현 결과를 바꾸는 빈칸을 결정하고, 구현할 동작과 완료 기준이 담긴 Spec을 완성합니다.