00:00:00이것은 GitHub에서 5만 개 이상의 별을 받은 에이전트 기술 프레임워크인 Superpowers입니다.
00:00:05코딩 에이전트가 서두르다가 실수하는 것을 방지하기 위해 구조화된 워크플로우를 강제합니다.
00:00:10여기에는 브레인스토밍, 구현, 레드-그린 테스트 주도 개발(TDD)이 포함되며,
00:00:15심지어 서브 에이전트를 사용해 작업을 실행하고 병렬로 코드를 리뷰하기도 하죠.
00:00:19하지만 단순히 '플랜 모드'나 '사양 주도 개발'을 사용하는 것과 무엇이 다를까요?
00:00:24구독 버튼을 누르시고, 바로 알아보겠습니다.
00:00:27자, 이것은 트위터에서 동영상을 다운로드할 때 사용하는 CLI 도구인 XDL이라는 프로젝트입니다.
00:00:32저는 이 도구의 웹 UI를 만들고 싶습니다. URL을 통해 브라우저로 영상을 다운로드할 뿐만 아니라,
00:00:38그 영상을 이용해 기사까지 작성해 주는 기능이죠. 그래서 Claude Code의 플랜 모드와 Opus 4.6을 사용해
00:00:46그 UI를 제작해 보았습니다. 결과는 이렇습니다.
00:00:50안타깝게도 코드를 처음 실행했을 때 몇 가지 문제가 발생했습니다.
00:00:53그래서 코드를 하나씩 살펴보며 문제를 해결하려고 노력했고, 다행히 해결된 것 같네요.
00:00:58이제 모든 게 정상적으로 작동하는 것 같습니다.
00:01:00트위터로 가서 이 트윗의 링크를 복사하겠습니다.
00:01:03케빈에게는 미안하지만, 여기에 붙여넣고 영상이 다운로드되는지 확인해 보죠.
00:01:06영상을 추출 중이고, 다운로드에 성공했습니다.
00:01:09여기 클릭하면 새 탭에서 열리는데, 예상과는 다르지만 어쨌든 작동은 하네요.
00:01:15그리고 해당 트윗으로 기사를 생성해 보겠습니다. 여기에 붙여넣고 생성을 누르면,
00:01:20진행되는 단계들을 볼 수 있습니다. 먼저 영상을 추출한 다음
00:01:24오디오 작업을 수행하죠. 완료되면 완벽한 마크다운 형식의 기사가 나오는데 정말 인상적입니다.
00:01:29이번에는 똑같은 작업을 Opus 4.6에서 Superpowers를 사용해 진행해 보겠습니다.
00:01:35벌써 디자인부터 훨씬 낫네요. 다운로드와 기사 생성 옵션이 따로 있습니다.
00:01:39같은 트위터 URL을 붙여넣고 다운로드를 누르면, 이번에도
00:01:45영상을 추출하지만 이번엔 브라우저로 바로 다운로드됩니다. 클릭해서 바로 볼 수 있죠.
00:01:51이제 같은 트윗으로 기사를 생성해 보면, 진행 단계들을 확인할 수 있습니다.
00:01:56모든 단계가 끝나면 기사가 브라우저로 스트리밍됩니다.
00:02:01이제 이걸 복사해서 원하는 곳에 붙여넣을 수 있습니다. 보시다시피
00:02:06Superpowers 버전이 사용하지 않은 버전보다 훨씬 뛰어납니다. 코드는 영상 뒷부분에서
00:02:10자세히 살펴보고, 먼저 어떻게 만들었는지 설명해 드릴게요.
00:02:15Superpowers 플러그인을 설치하면 brainstorm, execute plan,
00:02:20그리고 brainstorm에서 계획을 세우는 write the plan 같은 새로운 슬래시 명령어가 생깁니다.
00:02:25사실 이 명령만 있으면 됩니다. 이전 단계가 끝나면 Superpowers가 다음 단계로 안내해 주거든요.
00:02:31그럼 실행해 보겠습니다. 프롬프트를 붙여넣고 엔터를 칩니다.
00:02:35이제 브레인스토밍 기술을 로드하고 현재 프로젝트를 파악하기 시작합니다.
00:02:39여기서 계획을 개선하기 위해 몇 가지 질문을 던지네요. 'React와 Vite'라고 답하고,
00:02:44기사 생성은 '단계별'로 해달라고 하겠습니다. 아키텍처 구조를 확인해 달라고 하는데, 좋아 보이네요.
00:02:49레이아웃에 대해 묻고, 이어서 엔드포인트와 서버 로직에 대해서도 질문합니다.
00:02:54질문에 모두 답하면 계획 생성을 시작하고,
00:02:58해당 디렉토리에 저장합니다. 계획서를 살펴보면 아주 상세합니다.
00:03:03개요, 스택, 구조는 물론 디자인, 레이아웃, API 엔드포인트 등을 모두 포함하고 있죠.
00:03:09사실 이건 Claude Code가 스스로 계획을 짤 때 보여주는 것과 매우 비슷합니다.
00:03:15하지만 다음 단계가 정말 흥미롭습니다. 계획을 승인하고 구현 준비가 되었다고 하면,
00:03:19또 다른 '구현 계획'을 작성합니다. 우선 우리가 처음에 만든
00:03:25원본 디자인 계획을 살펴본 뒤, 이를 병렬 서브 에이전트들이
00:03:31처리할 수 있도록 더 작고 관리하기 쉬운 작업 단위로 쪼갭니다.
00:03:36이제 또 다른 계획이 작성되어 다시 plans 디렉토리에 저장되었습니다.
00:03:41그걸 열어보면 프로젝트 개요 대신 작업(task)별로
00:03:46나뉘어 있는 것을 볼 수 있습니다. 프로젝트 구조를 잡는 작업이 있고 그 안에 세부 단계들이 있죠.
00:03:52또 다른 작업은 Vite와 React 클라이언트 골격을 만드는 것이고, 역시 세부 단계가 있습니다.
00:03:57프로젝트 완료에 필요한 모든 작업에 대해 이 과정이 반복됩니다. 그다음
00:04:03Superpowers는 방식을 선택하라고 합니다. 서브 에이전트 방식인가요, 병렬 세션 방식인가요?
00:04:08서브 에이전트 방식은 사람의 확인 없이 각 작업에 별도의 에이전트를 사용합니다.
00:04:14병렬 세션 방식은 메인 세션에서 다른 세션을 만들어 작업을 묶음 단위로 완료하고,
00:04:18사람에게 확인을 받습니다. 작업 결과가 만족스러운지 확인한 후에 다음으로 넘어가죠.
00:04:24속도를 위해 서브 에이전트 방식을 선택하겠습니다. 이제
00:04:28이 프로젝트를 완료하는 데 필요한 작업들이 생성되었습니다.
00:04:32안타깝게도 처음 할 때 화면 녹화를 깜빡해서 지금 보이는 작업들은 이전과 좀 다를 수 있습니다.
00:04:36그래서 다시 시작했지만, 프롬프트는 완전히 똑같은 걸 사용했습니다. 지금 일어나는 일은
00:04:41각 서브 에이전트가 먼저 테스트를 만드는 것입니다. 실패할 테스트를 먼저 작성한 뒤,
00:04:47그 테스트를 통과하기 위한 최소한의 코드를 작성합니다. 기능 구현이 끝나면
00:04:52해당 기능이 계획서의 요구 사항을 충족하는지 검증하고,
00:04:57코드가 깨끗하고 잘 짜였는지, 유지보수가 용이한지 등의 품질을 체크합니다.
00:05:02대부분의 작업이 끝났고, 이제 수행한 모든 내용을 테스트할 겁니다.
00:05:06보시다시피 모든 작업이 완료되었고, 과정 중에 버그도 하나 찾아내서 수정까지 마쳤습니다.
00:05:11코드를 보면 server와 source로 나뉘어 있네요. source가 프론트엔드인 것 같습니다.
00:05:16안에 컴포넌트들도 보이네요. article tab, download tab 등이 있습니다.
00:05:21pipeline progress를 보면 스테이지들이 객체와 TypeScript 인터페이스로 구현되어 있습니다.
00:05:27스타일링에는 CSS-in-JS 방식을 사용한 것 같네요. Tailwind를 쓰라고 지정했어야 했는데
00:05:32까먹었지만, 이 정도면 괜찮습니다. 그리고 이걸 보세요. 이건 Claude Code 플랜 모드가 기본으로 안 해주는 건데요.
00:05:37Superpowers는 프로젝트 구조 잡기부터 CLI 래퍼 추가, Hono 연동까지
00:05:43모든 단계마다 git 커밋을 남겼습니다.
00:05:48git status를 확인해 봐도 브랜치가 깔끔해서 제가 커밋할 게 없네요. 손이 훨씬 덜 갑니다.
00:05:53그런데 테스트 파일은 어디 있냐고요? 그건 좀 이따 말씀드릴게요.
00:05:57솔직히 말씀드리면, Superpowers는 정말 인상적인 프로젝트입니다.
00:06:02특히 '기술(skills)'에 집중했다는 점이 마음에 듭니다. 브레인스토밍부터 계획,
00:06:08구현, 코드 리뷰까지 수행하는 14가지 기술이 있죠. TDD에 집중한 것도 좋습니다.
00:06:12특히 테스트를 먼저 써서 실패(레드)하게 만든 뒤 코드를 짜서 통과(그린)시키는 방식 말이죠.
00:06:18하지만 가끔 에이전트가 이 방식을 따르지 않기로 선택해서 작동하지 않을 때도 있습니다.
00:06:24이걸 한번 보세요. 여기 계획 작성 기술에서 분명히 TDD라고 명시되어 있는데,
00:06:31어떤 이유에선지 Claude가 하지 않았습니다. 확인해 보니 '제 잘못입니다'라고 하더군요.
00:06:36기술 지침에 TDD가 있는데도 안 한 거죠. 이유를 물어봤더니,
00:06:42프로세스를 따르기보다 빨리 완성하는 데 집중했다고 답했습니다. 최신 모델이 왜 그랬는지
00:06:47정확히는 모르겠지만, 모델의 결과를 맹목적으로 믿어서는 안 된다는 걸 보여줍니다.
00:06:53계획을 꼼꼼히 읽고 예상대로 진행되는지 확인하는 것이 중요합니다.
00:06:57이런 이유로 저는 모든 프로젝트나 기능 구현에 Superpowers를 쓰지는 않을 것 같습니다.
00:07:03규모가 작은 경우에는 그냥 Claude와 대화하며 계획을 짜고,
00:07:08계획 문서를 만든 뒤 컨텍스트를 비우고 실행하는 편이 편하거든요.
00:07:13하지만 가끔 발생하는 경우처럼 여러 기능을 한꺼번에
00:07:19구현해야 하는 상황이라면, Superpowers는 훌륭한 도구가 됩니다.
00:07:24복잡한 요구 사항을 서브 에이전트가 처리할 수 있는 단위로 쪼개는 능력이 탁월하니까요.
00:07:31Claude Code의 작업 기능도 비슷하게 할 순 있지만, Superpowers가 바로 구현에
00:07:37들어가지 않고 별도의 계획을 먼저 세우는 방식이 저는 더 마음에 듭니다.
00:07:43그럼 Superpowers는 Beads나 SpecKit 같은 사양 주도 개발 방식과 어떻게 다를까요?
00:07:48제가 보기엔 실행 전 계획 수립의 좀 더 단순화된 버전 같습니다.
00:07:53물론 Ralph처럼 극도로 단순하진 않고, Ralph와 Beads 사이 그 어딘가에 있는 것 같네요.
00:07:58AI 에이전트로 더 나은 코드를 짤 수 있게 돕는 도구들이 점점 더 많이 나오고 있습니다.
00:08:02참 좋은 현상이지만 사람마다 스타일은 다 다르죠.
00:08:06여러 도구에서 장점만 취해서 자신에게 딱 맞는 워크플로우를
00:08:10직접 만들어보는 것도 좋다고 생각합니다. 저도 나중에 그렇게 해볼까 생각 중이에요.
00:08:16운이 좋다면 제가 어떻게 만들었는지 영상으로 찍어서 공유해 드릴게요.