00:00:00Y Combinator의 CEO가 Claude의 코드를 위해 직접 'GStack'이라는 툴킷을 만들었습니다. 그의 비결은
00:00:067일 만에 거의 100개의 PR을 처리하는 것인데, 여기에는 9개의 특화된 워크플로우와
00:00:13Playwright를 이용한 헤드리스 브라우징 모드, Greptile 통합, diff를 인식하는 QA 등
00:00:18정말 많은 기능이 포함되어 있습니다.
00:00:19하지만 최근 코드의 미래에 관한 Gary의 트윗이 많은 개발자들을 정말
00:00:24짜증 나게 만들었는데요.
00:00:25그게 GStack의 미래에는 어떤 의미가 있을까요?
00:00:28구독하고 함께 알아보시죠.
00:00:33Gary Tan은 2023년부터 Y Combinator의 CEO를 맡고 있으며, 그전에는 2011년에
00:00:39벤처 캐피털 회사를 공동 창업했습니다.
00:00:42그래서 그는 수많은 피칭을 검토하며 새로운 기술을
00:00:46특별하게 만드는 요소가 무엇인지 찾아내는 풍부한 경험을 가지고 있죠.
00:00:49그는 그 모든 지식을 자신의 Claude 코드 툴킷에 쏟아부었는데,
00:00:53워크플로우에 붙인 이름들만 봐도 그 사실을 알 수 있습니다.
00:00:57그럼 실제로 GStack을 한번 사용해 봅시다.
00:00:59GStack을 실행하려면 Claude Code와 Bun이 설치되어 있어야 합니다. 하지만 일단
00:01:03이 정확한 텍스트로 프롬프트를 입력하거나 스킬을 다운로드해서 제대로 설치하고 나면,
00:01:08이 정보가 여러분의 Claude.md 파일에 추가된 것을 볼 수 있을 겁니다.
00:01:12제 파일은 비어 있었기 때문에
00:01:13이게 내용의 전부지만, 이미 텍스트가 있다면
00:01:17그 뒤에 이 내용이 덧붙여질 겁니다.
00:01:18또한 팀원들과 공유할 수 있도록 모든 관련 스킬을 skills 디렉토리에 넣고,
00:01:21적절한 브라우저와 함께 Playwright를 설치합니다.
00:01:25이제 GStack을 사용해 이 React Vite 앱에 기능을 하나 추가해 볼 건데,
00:01:30사용자가 특정 URL을 입력하면 트윗 이미지를 다운로드할 수 있는 기능입니다.
00:01:34이 기능을 추가하는 모습을 이전 영상에서 보셨을 수도 있는데요.
00:01:37결과가 어땠는지 궁금하시다면 설명란의 링크를 확인해 보세요.
00:01:41과연 GStack이 그때보다 더 잘해낼 수 있을지 지켜보죠.
00:01:44우선 'plan' 모드에서 시작한 다음 'plan ceo review' 스킬을 사용하고,
00:01:49GStack에게 추가할 기능에 대한 정보를 줍니다.
00:01:51저는 "사용자가 제공한 URL의 트윗을 스크린샷으로 찍는 기능을 추가해 줘"라고 말할 겁니다.
00:01:57또한 사용자가 이미지를 커스텀하고 다운로드할 수 있게 하고, Claude가 기존의
00:02:02레이아웃과 스타일을 유지하도록 요청하겠습니다.
00:02:03엔터를 치면 GStack은 먼저 해당 스킬에 업데이트가 있는지 확인한 다음,
00:02:08진행하기 전에 git log를 확인합니다.
00:02:10이 모드는 창업자나 CEO의 관점에서 문제를 재고하며,
00:02:16우리가 만들고자 하는 것의 최상의 버전을 고민하고,
00:02:20범위와 가치에 대한 가설에 도전합니다.
00:02:21그 작업이 끝나면 원래의 개발 범위를
00:02:26얼마나 확장할지 선택할 수 있게 해줍니다.
00:02:27여기서는 기능이 가장 많은 '범위 확장(scope expansion)'을 선택하겠습니다.
00:02:30그다음 중요한 아키텍처 결정을 내리게 하는데요.
00:02:33가장 쉬운 '권장 사항'으로 가겠습니다.
00:02:36그리고 몇 가지 질문을 더 던지는데, 이 역시
00:02:39권장되는 방식으로 진행하겠습니다.
00:02:40이제 작업이 끝나면, 선택된 범위 모드와 그 범위 내에서
00:02:44수행할 모든 작업을 보여주는 거대한 계획안이 나옵니다.
00:02:47또한 이 기능에서 제외되는 사항들도 함께 작성되어 있습니다.
00:02:50그리고 아래쪽을 보면 아키텍처 다이어그램, 주요 결정 사항,
00:02:55단계별 절차가 포함된 구현 계획이 있습니다.
00:02:57이건 제가 동일한 경로로 'Superpowers'를 썼을 때 받을 법한
00:03:01엄청나게 상세한 계획입니다.
00:03:02참고로 GStack에는 'plan engineering review' 스킬도 있는데, 이건 Claude를
00:03:07엔지니어링 매니저나 테크 리드로 변신시켜 아키텍처 다이어그램을 그리고, 기술
00:03:12스택을 확정하며, 에지 케이스를 정의하는 등의 작업을 수행합니다.
00:03:15하지만 'plan ceo review' 스킬이 이미 그중 일부를 미리 처리한 것 같네요.
00:03:20그러니 바로 구현 단계로 넘어가겠습니다.
00:03:22구현이 완료되면 '/review' 명령어를 실행해 누락된 에지 케이스를 검토하고,
00:03:27CI를 통과했을 법한 버그를 찾아내 프로덕션 배포 전 이슈를 잡아낼 수 있습니다.
00:03:32다시 한번 스크립트 내부 업데이트와 diff를 확인합니다.
00:03:36이제 작업의 완결성을 체크한 뒤, 아무런 문제도
00:03:40발견되지 않았다는 요약을 보여줍니다.
00:03:41이제 '/ship' 명령어를 실행하면 메인 브랜치와 동기화하고, 테스트를
00:03:46수행하며 Greptile 리뷰가 있다면 이를 해결합니다.
00:03:49보시다시피 제가 시키지도 않았는데 알아서 Pull Request까지 생성했네요.
00:03:54이 단계에서 '/qa' 명령어를 실행하면 우리가 수정한
00:03:58diff에 기반하여 변경된 부분만 테스트합니다.
00:03:59로컬 서버를 시작하고, 스크린샷 등을 활용해
00:04:05방금 구현된 기능들을 웹사이트를 돌아다니며 테스트하고 있습니다.
00:04:09스크린샷을 통해 500 에러를 발견했고, JSON 파싱 버그도 찾아냈는데
00:04:15이미 수정한 것 같군요.
00:04:16자, 보시죠.
00:04:17수정 사항을 확인하고 푸시했습니다.
00:04:20그리고 해결된 이슈들을 담은 최종 보고서를 작성했습니다.
00:04:24정말 멋지네요.
00:04:25좋습니다.
00:04:26이제 다 끝났으니
00:04:27기능을 직접 써봅시다.
00:04:28스크린샷 페이지가 생겼네요.
00:04:30Tana의 트윗을 하나 가져와 보죠.
00:04:32이걸 복사해서 여기에 붙여넣겠습니다.
00:04:34그다지 흥미로운 트윗은 아니지만, 작동 여부를 테스트하기엔 충분합니다.
00:04:37와, 세상에, 정말 인상적이네요.
00:04:40트윗이 여기 잘 나옵니다.
00:04:42라이트 모드를 선택하니 다시 캡처를 하네요.
00:04:44오, 대단합니다.
00:04:45좋아요.
00:04:46라이트 모드와 다크 모드가 다 있군요.
00:04:47캐시가 됐는지 확인해 볼까요?
00:04:49됐네요, 아주 좋습니다.
00:04:51액션 버튼을 숨길 수도 있고, 자 보시죠.
00:04:53이미지를 보이게 하거나 숨길 수 있고 배경도 바꿀 수 있습니다.
00:04:58진짜 멋진데요.
00:04:59링크드인 스타일, 트위터, 블로그, 보라색 그라데이션이 있고 커스텀하거나
00:05:03그라데이션의 각도까지 조절할 수 있습니다.
00:05:07와우.
00:05:08완전히 제대로 된 기능들이네요. 화면 비율도 바꿀 수 있고요.
00:05:119:16, 16:9, 1:1 등등이 가능합니다.
00:05:16이제 실제로 이미지를 다운로드해 봅시다.
00:05:18나왔네요.
00:05:19이걸 클릭하면 제 탭이 다 보이겠지만,
00:05:22이미지가 여기 있습니다.
00:05:23미리보기로 열어볼게요.
00:05:24이겁니다.
00:05:25방금 GStack으로 만든 기능으로 찍은 이미지입니다. 정말
00:05:29놀라운 수준이지만, 여기서 끝이 아닙니다. PR로 돌아가 보면
00:05:34Greptile의 요약이 있는데, 서버의 리소스 고갈 위험, 레이스 컨디션,
00:05:40캐시 만료 부재 등을 찾아냈습니다.
00:05:42제가 일일이 Claude에게 이슈를 보고 해결하라고 시키는 대신,
00:05:47그냥 '/review' 명령어를 실행하겠습니다.
00:05:49모든 코멘트를 찾아냈네요.
00:05:50아래쪽에 어떻게 수정할지 옵션을 줬고, 검토해 보겠습니다.
00:05:53이제 모든 이슈가 해결되었습니다.
00:05:55오탐(false positive) 하나를 제외하고는 코드가 푸시되었고, Greptile도 만족하는 것 같네요.
00:06:00평소 Superpowers를 자주 사용하는 입장에서, GStack의 어떤 부분은
00:06:05다소 복잡해 보이긴 해도 그 이점은 충분히 알 것 같습니다.
00:06:08그런데 마크다운이 새로운 코드라는 Gary의 트위터 코멘트는 어떻게 생각하시나요?
00:06:13음, 어느 정도는 그 말의 의미를 이해할 수 있습니다.
00:06:15마크다운만 써도 코드가 작성되니까 컴퓨터 공학 전공자가
00:06:20시간 낭비를 했다는 그런 뜻은 아닐 겁니다.
00:06:22그보다는 지시 사항에 대한 이야기라고 생각합니다. 최신 모델들이
00:06:27마크다운 지시 사항을 따르는 능력이 점점 좋아지고 있거든요. 예전에는
00:06:32NPM 대신 Bun을 써서 설치하도록 Claude Code 훅을 따로 만들어야 했죠.
00:06:36하지만 이제는 Claude.md에 넣어두기만 하면 Opus 같은 좋은 모델은
00:06:4290~95%의 확률로 그 내용을 따릅니다.
00:06:44결국 그가 말하고자 하는 건, 충분히 상세하고 잘 구조화된
00:06:49마크다운 파일만 있다면 모델이 그 지침에 따라 훌륭한 소프트웨어를 만들 수 있다는 거겠죠.
00:06:55그렇다고 GStack이 그냥 마크다운 지침 덩어리인 건 아닙니다.
00:06:59각 스킬은 별도의 디렉토리를 가지고 있고, GStack 자체를 업그레이드하는 기능도 있죠.
00:07:03'browse' 스킬을 집중해서 보면 템플릿 파일과
00:07:08실제 스킬 파일이 있는 것을 볼 수 있습니다.
00:07:09깃허브 페이지에 뭐라고 되어 있든, 이건 Go 템플릿과는 관련이 없습니다.
00:07:14작동 방식을 보면, scripts 안의 genskill로 이동했을 때 TypeScript 파일이
00:07:20템플릿 파일을 읽고 그 안의 플레이스홀더를 실제 마크다운으로 대체하는 식입니다.
00:07:26각 스킬이 상당히 디테일해서 일일이 다루지는 않겠습니다만,
00:07:30browse 스킬에 'skill.md' 파일만 있는 게 아니라는 점은 짚고 싶네요.
00:07:35여기 테스트 디렉토리도 있고, 브라우저 관리 등의 실제
00:07:40구현 코드가 담긴 source 디렉토리도 있습니다.
00:07:42따라서 여기에 있는 명령어들이 꽤 정교하다는 것을 알 수 있습니다.
00:07:46변경 이력(changelog)을 보면 흥미로운 기능들이 많은데, 예를 들어
00:07:49앱 개발에 사용되는 E2E 관측성(observability), 증분 평가 저장 등이 있고,
00:07:55앱 개발에 사용됩니다.
00:07:56리뷰 내용을 할 일 목록(To-do) 형식으로 공유하기도 하고,
00:07:58스크린샷 요소 및 영역 클리핑을 지원하며, Greptile과의 통합은 물론
00:08:03Conductor를 염두에 두고 제작되었다는 사실도 빼놓을 수 없죠.
00:08:07그럼 가장 중요한 질문, 저 개인이 GStack을 계속 사용할까요?
00:08:11제 대답은 "일단 30일 동안 써보겠다"입니다.
00:08:15Superpowers 플러그인을 지우고 GStack을 메인 도구로 삼아
00:08:21기능 개발과 버그 수정을 해보면서 어떻게 돌아가는지 보려고 합니다.
00:08:23누가 알겠어요?
00:08:24제2의 Vercel 오픈소스 도구를 클론해서 트위터에서 또 한바탕 논쟁을 일으킬지도 모르죠.