클로드 플로우: 이건 진짜 미쳤다 (스웜 코딩)

Income stream surfers 구독자 130,000명

요약

이 영상에서는 서비스 기반 웹사이트를 구축하는 과제로 Claude Flow의 성능을 벤치마크하며 Claude Code 대비 디자인 완성도와 전체 프로젝트 자동 생성 능력을 비교합니다. 실제 대화 프롬프트를 활용해 멀티 에이전트 방식으로 코드를 생성한 뒤, 완성된 웹사이트 디자인과 SEO 페이지를 리뷰합니다. Next.js 프로젝트에 Claude Flow를 설치·실행하는 방법을 공유하며, Archon과 Claude Code 대비 최고의 빌딩 경험이라고 평가합니다. 마지막으로 커스텀 에이전트를 통해 확장 가능성을 강조하며 프로젝트 참여를 권장합니다.

주요 키워드

Claude Flow Swarm Coding Claude Code Agent Prompt Next.js SEO 404 Error Archon 멀티 에이전트

하이라이트

🔑 벤치마크 기준 설정: 디자인 퀄리티 vs. 프로젝트 완성도 두 가지 관점으로 평가합니다.
⚡️ SEO 전략 제안: 링크를 설명란에 두기보다 ‘Claude Flow’를 구글 검색 유도해 순위 상승을 노립니다.
🌟 스웜 코딩 방식: 멀티 에이전트가 병렬로 작업해 전체 프로젝트를 자동으로 빌드합니다.
🚀 최고의 디자인 완성도: 애니메이션과 SVG 활용으로 지금까지 본 중 가장 아름다운 사이트를 얻었습니다.
📌 소소한 문제점: 일부 색상 설정 오류, 404 에러 몇 건, 예기치 않은 프랑스어·이탈리아어 페이지가 발견됩니다.
✨ SEO 메타 페이지: ‘롤스로이스 Ghost Rent’ 같은 개별 서비스 페이지에서 긴 메타 타이틀도 자동 생성됩니다.
💡 설치 및 실행 커맨드: Next.js 프로젝트 생성 후 npx claw-flow alpha swarm으로 초기 프롬프트를 주입합니다.
🤖 커스텀 에이전트 활용: Claude Code의 시스템 프롬프트 대신 역할별 에이전트 프롬프트를 사용해 유연함을 확보합니다.
📈 Archon·Claude Code 비교: 전체 프로젝트 빌드에서는 Claude Flow가 우위, Archon은 기능 추가에 특화됩니다.

용어 설명

Claude Flow

다중 에이전트 방식으로 전체 프로젝트를 자동 생성하는 오픈AI 스타일 AI 툴입니다.

Swarm Coding(스웜 코딩)

여러 에이전트(코더, QA 등)가 병렬로 작업해 협업 방식으로 코드를 작성하는 기법입니다.

Agent Prompt(에이전트 프롬프트)

각 역할(코더, QA 등)에 특화된 초기 시스템 지시문을 말하며, 전통적인 시스템 프롬프트와 구분됩니다.

Next.js

React 기반의 서버 사이드 렌더링 프레임워크로, 프로젝트 생성과 라우팅 구조를 제공합니다.

SEO(검색엔진최적화)

검색엔진 결과 상위 노출을 위해 메타 타이틀, 키워드, 콘텐츠 구조를 최적화하는 기법입니다.

404 Error

존재하지 않는 페이지에 접근할 때 발생하는 HTTP 응답 코드입니다.

Claude Flow를 이용해 서비스 기반 웹사이트를 구축하면서 Claude Code 대비 디자인 퀄리티와 프로젝트 자동 생성 완성도를 평가할 두 가지 벤치마크를 설명합니다.

[00:00] Claude Flow 벤치마크 테스트 소개 - 서비스 기반 웹사이트 구축 작업에서 기존 Claude Code 대비 개선사항을 확인하는 두 가지 기준: 웹사이트 품질과 전체 프로젝트 구축 과정의 사용성을 평가

[00:15] Sonnet 3.7 출시 당일 만든 벤치마크 웹사이트 소개 - Climb을 사용해 만든 기준 웹사이트와 비교 평가 진행

[00:35] Claude Flow 검색 전략 설명 - 영상 설명란 링크 대신 구글 검색을 권하는 이유: 키워드 클릭으로 검색 순위 상위 유지 효과

설명란에 직접 링크를 넣는 대신 ‘Claude Flow’ 키워드로 구글 검색을 유도해 클릭수를 늘리고, SEO 순위 상승에 기여하는 새로운 전략을 소개합니다.

[01:04] 벤치마크 테스트 시작 - 설정 과정은 생략하고 바로 벤치마크 결과로 진행

[01:13] Claude Flow 구축 과정 리뷰 - 서비스 기반 틈새시장 프롬프트로 시작하여 여러 코더가 동시 작동, 시간이 소요됐지만 결국 앱 구축 성공

긴 초기 프롬프트를 입력해 여러 에이전트가 병렬로 작업을 시작합니다. 시간이 소요되지만 결국에는 전체 프로젝트를 성공적으로 빌드해 내는 과정을 요약합니다.

[01:33] 초기 웹사이트 디자인 평가 - 지금까지 본 것 중 최고의 디자인이라고 평가, 이미지는 없지만 전체적인 완성도가 뛰어남

이미지 없이도 스크롤 애니메이션과 SVG를 활용한 아름다운 디자인을 확인합니다. 색상 오류와 몇몇 404 에러, 예기치 않은 다국어 페이지 문제를 언급합니다.

[01:47] 스크롤 애니메이션과 SVG 품질 - 아름다운 스크롤 애니메이션과 고품질 SVG 요소들, 색상 문제는 있지만 수정 가능한 수준

[02:01] 404 오류와 문제점 발견 - 404 오류가 여러 개 발생하여 완전하지 않은 상태임을 확인

[02:15] 언어 혼란 문제 - 요청하지 않은 프랑스어와 이탈리아어가 일부 페이지에 나타나는 일관성 부족 문제 발견

[02:32] Contact Us 페이지의 디자인을 검토하며, 몇 가지 누락된 부분이 있지만 전반적으로 매우 훌륭한 사이트라고 평가합니다.

[02:49] 개별 페이지들을 분석하면서 서비스 페이지, 위치 페이지 등 일부 404 오류가 있는 페이지들은 나중에 추가할 수 있다고 설명합니다.

서비스 페이지, 지역 페이지, ‘Luxury catering in Seno’ 등 SEO 타이틀이 자동 생성된 개별 페이지들을 살펴보며 메타 타이틀 길이와 콘텐츠 구성을 평가합니다.

[03:03] 전체 빌드가 성공적이었음을 강조하며, SEO 페이지들의 품질을 확인합니다. 럭셔리 케이터링, 롤스로이스 렌트 등 개별 SEO 페이지들을 살펴봅니다.

Next.js 프로젝트 생성 후 Claude Flow 설치 커맨드와 npx claw-flow alpha swarm 실행 과정을 단계별로 설명합니다. 긴 프롬프트 파일(Init.md)을 ChatGPT로 포맷팅하는 팁도 공유합니다.

[03:31] 아름다운 웹사이트 디자인에 대해 찬사를 보내며, Claude Code만 사용할 때보다 차별화된 결과물을 얻을 수 있다고 평가합니다.

[03:46] 여전히 404 오류와 이탈리아어 누락 등의 문제가 있지만, 전반적으로 환상적인 작업이라고 결론짓습니다.

[04:03] Claude Flow 설정 과정을 설명합니다. Next.js 프로젝트 설정, Claude Code 설치, 그리고 npx 명령어 사용법을 상세히 안내합니다.

[04:22] npx Claude Flow alpha swarm 명령어와 프롬프트 구성에 대해 설명하며, 따옴표 사이의 텍스트가 빌드할 내용을 정의한다고 설명합니다.

[04:52] 지금까지의 빌딩 경험 중 최고라고 평가하며, Claude Code와 Archon과의 차이점을 비교 설명합니다.

Claude Code, Archon과 비교해 Claude Flow의 전체 프로젝트 빌드 경험이 가장 우수하다고 평가합니다. 커스텀 에이전트 프롬프트 구조와 향후 기여·실험의 필요성을 강조하며 마무리합니다.

[05:07] Claude Flow와 Archon의 차이점을 설명합니다. Claude Flow는 전체 프로젝트를 빌드하는 반면, Archon은 기존 프로젝트에 기능을 추가하는 것이라고 구분합니다.

[05:34] Claude Flow의 에이전트 시스템 작동 방식을 설명합니다. Claude Code의 시스템 프롬프트 대신 코더, QA 등을 위한 특정 에이전트 프롬프트를 사용한다고 설명합니다.

[00:00] 안녕하세요, 여러분! 오늘은 Claude Flow를

[00:02] 소개하는 영상을 가져왔습니다.

[00:04] 하지만 제가 항상 사용하는 벤치마크를

[00:05] 활용해서 이것이 기존 Claude Code보다

[00:08] 얼마나 개선되었는지 확인해볼 겁니다.

[00:10] 서비스 기반 웹사이트 구축 같은

[00:12] 간단한 작업에 대해서 말이죠.

[00:15] 이것이 Sonnet 3.7이 출시된 날

[00:17] Claude Sonnet이 만든 웹사이트입니다.

[00:20] 이건 Climb을 사용한 것이고, 이게

[00:22] 일종의 벤치마크죠. 그러니까

[00:24] 이것보다 나은지, 이만큼

[00:25] 좋아 보이는지 등등을 비교하는 거죠.

[00:28] 그리고 제가 테스트하고 싶은 또 다른 것은

[00:30] 저를 짜증나게 하지 않으면서 전체 프로젝트를

[00:32] 구축할 수 있는가 하는 겁니다.

[00:34] 맞죠? 이 두 가지가 우리가 보고 있는

[00:35] 벤치마크입니다. 자, Claude Flow에 대해

[00:37] 어제 누군가 댓글을 남겼는데

[00:39] "왜 Claude Flow 링크를 영상 설명에

[00:41] 안 넣어놨냐"고 하더라고요.

[00:42] 제가 실제로 한 것은 사람들에게

[00:44] Claude Flow를 구글에서 검색하라고 한 겁니다.

[00:46] 정말 웃기죠. 바로 저기 제 영상이 있네요.

[00:48] 모르신다면, 누군가 Claude Flow를 구글에서

[00:50] 검색해서 이걸 클릭하는 것이

[00:51] 실제로 제가 설명란에 넣는 것보다 낫습니다.

[00:53] 왜냐하면 이렇게 하면 끈끈하게 달라붙어서

[00:55] 구글 상위에 계속 머물게 되거든요.

[00:57] 사람들이 그 키워드로 클릭하기 때문에요.

[00:59] 그래서 저는 실제로 그들에게 도움을 주고 있는 거죠.

[01:01] 구글에 가서 검색하라고 말함으로써 말이에요.

[01:04] 자, 이제 이걸 설정했습니다. 제가 요전에

[01:05] Claude Flow에 대해 만든 영상을 보실 수 있어요.

[01:07] 오늘은 설정에 대해 이야기하지 않을 거고,

[01:08] 대신 바로 벤치마크로

[01:09] 들어가겠습니다. 벤치마크를 시작하기 전에

[01:11] 실제로 대화를 한번

[01:13] 살펴보죠. 맞습니다. 저는

[01:15] 정말 정말 긴 프롬프트로 시작했어요.

[01:18] 제 서비스 기반 틈새 시장 프롬프트였거든요.

[01:20] 그러자 여러 다른 프로세스들이 시작됐습니다.

[01:23] 동시에 몇 개의 다른 코더가 시작됐어요.

[01:25] 스파크 작업을 했고, 스파크 음...

[01:28] 뭐든지 간에. 그리고 모든 걸 만들어냈죠.

[01:28] 시간이 좀 걸리긴 했어요. 그건 괜찮았고

[01:31] 뭔가 잘못되고 있었어요. 하지만 결국

[01:33] 앱을 구축하는 데 성공했고 이게 중요한

[01:35] 프로세스의 일부입니다. 실제로

[01:37] 구축됐거든요. 그래서 우리는 실제로

[01:39] 웹사이트 리뷰로 바로

[01:40] 뛰어들 수 있습니다.

[01:42] 이미지가 여기에는 없지만

[01:44] 이것은 단연코 제가 본 것 중에서

[01:47] 가장 멋져 보이는 것입니다. 이것은

[01:49] 아름다운 작은 스크롤 애니메이션이 있고

[01:50] 정말 멋진 SVG들이 있어요. 색상 면에서

[01:54] 좀 엉망이긴 하지만, 색상들을

[01:56] 바꿀 수 있죠. 여기도 마찬가지고요.

[01:59] 색상들이 좀 엉망이긴 하지만,

[02:01] 전체적으로 이것이

[02:03] 정말 잘 만들어진 웹사이트라는 걸 알 수 있어요.

[02:05] 거기에 404 오류가 있네요.

[02:06] 404 오류가 없기를 바랐는데.

[02:08] 사실 404 오류가 몇 개 있어요.

[02:10] 정말 짜증나게도. 음, 또한 저는

[02:12] 프랑스어를 해달라고 요청하지 않았는데

[02:15] 왜 거기에 프랑스어가 있는지 모르겠어요.

[02:17] 이건 좀 궤도를 벗어났다고

[02:19] 말할 수 있겠네요. 이건 제가

[02:21] 영어와 이탈리아어를 해달라고

[02:23] 요청하지 않았거든요. 여기에 이탈리아어가 있긴 하지만,

[02:27] 여기에는 이탈리아어가 없다는 게

[02:28] 좀 혼란스럽네요. 좀 바보 같지만

[02:32] 한번 살펴보죠. 문의하기

[02:34] 페이지도 정말 멋져 보입니다. 몇 가지

[02:36] 빠진 부분들이 있어요. 말씀드렸듯이

[02:39] 완벽하지는 않습니다. 하지만 전반적으로

[02:43] 정말 괜찮은 사이트예요. 이걸 보세요.

[02:45] 맙소사, 이건 정말

[02:47] 아름답네요. 정말 아름다워요. 그리고

[02:49] 개별 페이지들은 여기가

[02:51] 중요한 부분이죠? 서비스 페이지나

[02:53] 위치 페이지 같은 것들이나

[02:56] 만들 수 있는 것들이나 문의 페이지나

[02:58] 잠깐, 어느 게 404였죠? About

[03:00] 페이지나 뭐든지요. 언제든지 다시

[03:01] 돌아와서 나중에 만들 수 있죠?

[03:03] 중요한 건 전체

[03:05] 빌드가 성공적이었다는 것이고

[03:08] 품질을 확인할 수 있고 또한

[03:11] 개별 SEO 페이지들도 볼 수 있어요

[03:13] 여기에 있죠. 예를 들어, 세노에서의

[03:15] 럭셔리 케이터링은 위치들이에요. 롤스로이스

[03:19] 고스트 렌트, 정말 긴 메타

[03:20] 타이틀이네요, 하지만 그래도. 정말

[03:23] 멋져 보입니다. 저 아름다운 걸 보세요

[03:26] 아름다운 버팔로 모차렐라. 정말

[03:28] 캄파니아 어디서나

[03:29] 일반적으로 맞는 말이죠.

[03:31] 발음을 어떻게 하는지 모르겠어요.

[03:33] 아름다운, 아름다운, 아름다운 웹사이트

[03:35] 입니다. 전반적으로, Claude Code만

[03:37] 사용하는 것보다는 조금 다른 걸

[03:38] 얻을 수 있다고 말하고 싶고

[03:40] Claude Code가 찍어내는

[03:42] 표준적인 웹사이트들과는 다를 거예요.

[03:44] 확실히 그것보다는 개선된

[03:46] 거라고 봅니다. 하지만 여전히

[03:48] 몇 가지 404 문제들이 있어요. 여전히

[03:50] 이탈리아어가 위에

[03:53] 없는 문제들이 있고요. 네, 제가

[03:56] 고치고 싶은 몇 가지

[03:58] 문제들이 있습니다. 하지만 전반적으로

[04:01] 정말 환상적인 작업을 했다고

[04:03] 솔직히 말씀드릴게요. Claude Flow를

[04:05] 실제로 어떻게 설정했는지 간략히 설명하겠습니다.

[04:09] 제가 하는 일은 Next.js 프로젝트를 설정하고

[04:11] 그 다음에 실행해야 하는 거죠

[04:13] 기본적으로 이런 명령어들을

[04:15] 위에서 실행해야 해요, 맞죠? 그러니까

[04:17] Claude Code가 설치되어 있는지 확인하고, alpha

[04:20] init force가 실행되고 있는지 확인하고

[04:22] 여기서 중요한 건 npx

[04:24] Claude Flow alpha swarm입니다. 이

[04:26] 두 따옴표 사이에 쓰는 것은

[04:30] init.md나 컨텍스트 엔지니어링에서

[04:34] initial.md와 같은 것입니다,

[04:36] 맞죠? 빌드해야 할 것을

[04:38] 의미합니다. 그래서 ChatGPT에게 여기에

[04:41] 정말 긴 설명을 넣어달라고

[04:43] 요청할 수 있는데, 저도 그렇게 했어요. 제

[04:45] 실제 프롬프트는 정말정말 길었거든요.

[04:48] 그리고 실제로 ChatGPT에게

[04:50] 포맷을 맞춰달라고 해야 했어요. 이걸 다 한 후에, 또는

[04:52] 더 복잡한 것 중 하나를 실행하고 싶다면

[04:54] hive mine spawn처럼, 다른 영상에서

[04:56] 테스트해 볼 거예요. 지금은

[04:58] alpha swarm을 테스트했습니다. 그리고

[05:00] 네, 이게 거의 전체

[05:03] 과정입니다. 이건 제가 지금까지 가진

[05:05] 빌딩 경험 중 최고라고 말하고 싶어요.

[05:07] Claude Code보다 낫고, Archon보다도

[05:09] 낫다고 생각해요. Archon에 대해

[05:11] 예전에 영상을 만들었지만

[05:13] Archon은 조금 달라요,

[05:14] 맞죠? 이건 특정한 일을

[05:17] 한다고 볼 수 있어요. 전체

[05:19] 프로젝트를 빌드하는 거죠. 반면 Archon은

[05:21] 이미 있는 프로젝트에

[05:23] 기능을 추가하는 것뿐이에요. 하지만 전체 프로젝트를

[05:25] 빌드하는 게 제게는 이미 있는 프로젝트에

[05:28] 새로운 프로젝트를 추가하는 것보다

[05:30] 더 흥미로워요. 개인적으로 Claude

[05:31] Code는 이미 꽤 잘 처리할 수 있다고 생각해요.

[05:34] 여기서 영상을 마무리하겠습니다.

[05:35] 평소처럼 모든 링크는

[05:36] 영상 설명란에 있을 거예요. 그리고 네,

[05:38] Claude Flow를 확인해보세요. 이건

[05:40] 정말 흥미로운 프로젝트고

[05:42] 조금 더 기여와

[05:44] 조금 더 많은 사람들이 프로젝트를

[05:47] 도와주고 조금 더

[05:49] 실험이 있다면 이게

[05:51] 미래의 방향이라고 생각해요. Claude Flow의

[05:54] 정말 멋진 점은

[05:56] 기본적으로 이런 커스텀 에이전트들을 생성한다는 거예요

[05:59] Claude Code의 시스템 프롬프트를

[06:01] 사용하는 대신 실제로

[06:04] 코더나 QA 등을 위한 특정 에이전트 프롬프트를

[06:07] 사용합니다. 여기서 영상을

[06:09] 마무리하겠습니다. 시청해주셔서

[06:11] 정말 감사합니다. 영상 끝까지

[06:12] 보시는 분들은

[06:13] 진짜 최고예요. 곧

[06:13] 더 많은 콘텐츠로 다시 뵙겠습니다.

[06:15] 안녕히 계세요.