[00:04]
안녕하세요, 또 다른 영상에 오신 것을 환영합니다. 새로운
[00:08]
코딩 에이전트 프레임워크라기보다는
[00:12]
대규모 설정이 화제가 되고 있어서
[00:14]
이것도 다뤄야겠다고 생각했습니다.
[00:16]
이것의 이름은 Oh My Open Code입니다.
[00:19]
터미널에서 살고 있다면, 이름에서 당연히
[00:22]
Oh my Zsh가 떠오를 것입니다.
[00:25]
그리고 컨셉도 기본적으로 동일합니다.
[00:28]
바닐라 오픈 코드 CLI를 가져와서
[00:31]
엄청난 양의 스테로이드와
[00:34]
플러그인, 설정을 주입합니다.
[00:36]
지금 AI 코딩 도구들이 가진 문제는
[00:40]
커서든 윈드서프든
[00:42]
표준 CLI 에이전트든
[00:45]
보통 단일 모델 워크플로우에 갇혀있다는 것입니다.
[00:49]
하나의 뇌를 선택하는 겁니다.
[00:51]
클로드 오퍼스로 드라이브하거나
[00:55]
GPT 4o로 드라이브하거나요.
[00:58]
하지만 제가 그 모델들에 대해 리뷰한 것을 보셨다면
[01:01]
그들이 매우 구체적인
[01:03]
장점과 단점을 가지고 있다는 걸 아실 겁니다.
[01:06]
제미니 2.0 플래시는 프론트엔드에서는
[01:08]
절대적인 괴물이지만, 복잡한
[01:11]
백엔드에서는 로직을 환각하는 경향이 있습니다.
[01:14]
오퍼스 3.5는 전반적인 코딩과
[01:17]
추론, 디버깅의 왕이지만
[01:22]
간단한 문서 검색에 사용하면
[01:24]
지갑을 태워버립니다.
[01:26]
그리고 GPT 4o는 아키텍처에는 훌륭하지만
[01:30]
포맷팅에 대해서는 이상하게 고집을 부립니다.
[01:34]
보통은 최고의 결과를 얻기 위해
[01:37]
수동으로 코드를 복사 붙여넣기해야 합니다.
[01:40]
각 모델 사이에서요.
[01:42]
Oh My Open Code는 오케스트레이터 역할을
[01:43]
함으로써 이를 해결하려고 합니다.
[01:46]
메인 에이전트를 코더가 아닌
[01:49]
엔지니어링 매니저로 취급합니다.
[01:52]
이 메인 에이전트를 시지프스라고 부르는데
[01:55]
일반적으로 오퍼스 3.5에서 실행됩니다.
[01:58]
모든 것을 스스로 하는 대신
[02:02]
시지프스는 다른 모델에서
[02:04]
실행되는 특화된 서브 에이전트들에게
[02:07]
작업을 위임합니다.
[02:11]
UI 컴포넌트를 만들어야 한다면
[02:13]
제미니 2.0 플래시를 사용하는
[02:17]
프론트엔드 엔지니어 에이전트를 가동시킵니다.
[02:20]
문서를 읽거나 구현 세부사항을 위해
[02:23]
깃허브를 검색해야 한다면
[02:26]
소네트 3.5에서 실행되는 라이브러리언 에이전트를 호출합니다.
[02:31]
아키텍처에 대한 검증이 필요하다면
[02:32]
GPT 4o에서 실행되는 오라클 에이전트에게
[02:36]
핑을 보냅니다.
[02:38]
이것들을 백그라운드에서
[02:41]
비동기적으로 실행합니다.
[02:42]
그래서 한 에이전트가 React 컴포넌트를
[02:45]
작성하는 동안 다른 에이전트는
[02:47]
데이터베이스 스키마를 알아내고 있습니다.
[02:50]
또한 제가 현재 에이전트들과 겪는
[02:52]
큰 고충을 해결합니다. 그들은 게으릅니다.
[02:56]
나머지 코드에 대한 주석을 작성하고
[02:58]
그만두는 걸 좋아하죠.
[03:01]
이 도구에는 todo 연속성 강제 기능이 있어서
[03:04]
모델이 정지하기 전에 파일을
[03:06]
완성하도록 강제합니다.
[03:10]
게다가 에이전트들에게 LSP인
[03:14]
언어 서버 프로토콜에 대한 액세스를 제공해서
[03:17]
실제로 자체 진단을 실행하고
[03:20]
코드를 보여주기 전에
[03:22]
구문 오류를 수정할 수 있습니다.
[03:25]
이제 현실을 체크해보면, 이것은
[03:28]
마법적인 무료 도구가 아닙니다.
[03:30]
여러 모델을 오케스트레이트하므로
[03:33]
이러한 제공업체들의 API나
[03:35]
구독에 액세스해야 합니다.
[03:38]
오픈라우터나 requesty 같은 것도
[03:41]
사용할 수 있을 것 같습니다.
[03:44]
전체 드림팀 설정을 원한다면
[03:46]
Anthropic, Google, OpenAI에서
[03:49]
동시에 토큰을 태우고 있는 것입니다.
[03:52]
간단한 작업을 Haiku나 Flash 같은 저렴한 모델에 맡겨서
[03:55]
비용을 절약한다고 주장하고 있습니다.
[03:57]
하지만 설정 복잡도는 단순히
[04:01]
VS Code를 설치하는 것보다 확실히 높습니다.
[04:03]
설정 파일을 두려워하지 않는
[04:06]
파워 유저를 위한 도구인 것은 분명합니다.
[04:09]
하지만 생산성 향상 잠재력은 엄청납니다.
[04:12]
그래서 AI 에이전트 팀을 갖는 것이
[04:16]
정말 똑똑한 하나를 갖는 것보다
[04:19]
더 나은지 확인해보기 위해 설정해보았습니다.
[04:21]
이제 실제 작동하는 모습을 보여드리겠습니다.
[04:24]
먼저 설치하려면
[04:26]
bunx oh my open code install 명령을 실행해야 하고
[04:28]
Claude, Gemini, GPT 등의
[04:30]
구독 서비스가 있는지에 대한
[04:33]
질문들을 받게 됩니다.
[04:35]
그러면 모든 것을 설정해 줄 것입니다.
[04:39]
구독 서비스를 사용한다면
[04:41]
Open Code로 인증을 해야 합니다.
[04:42]
그렇지 않으면 API를 사용할 수도 있습니다.
[04:44]
Google Gemini의 경우
[04:47]
anti-gravity 속도 제한을 사용하기 때문에
[04:51]
꽤 괜찮은데, 종종 더 관대할 수 있습니다.
[04:54]
어쨌든, MCP나 모델
[04:56]
컨텍스트 프로토콜과 함께
[04:59]
context 7 웹 검색과 GP MCP가 설정되고
[05:03]
구성될 것입니다.
[05:07]
이것들은 항상 추가적인
[05:10]
API를 필요로 하지는 않습니다.
[05:12]
그래서 좋네요.
[05:14]
이제 Open Code를 시작하시면
[05:18]
Sisyphus 에이전트를 볼 수 있습니다.
[05:21]
여기서 프롬프트를 입력하면
[05:24]
작업을 수행할 수 있습니다.
[05:26]
일반적으로 특정한
[05:29]
서브 에이전트를 사용하라고 말할 필요는 없습니다.
[05:31]
자동으로 감지하고
[05:33]
가능한 서브 에이전트를 사용할 것입니다.
[05:35]
원한다면 메인 Copilot 모델을
[05:38]
Opus가 아닌 다른 것으로 변경할 수도 있습니다.
[05:41]
좋습니다, 뭔가 해보도록 요청하고
[05:44]
모든 것이 어떻게 작동하는지 살펴보겠습니다.
[05:47]
여기 Open Code 터미널에서 시작하고 있고
[05:50]
현재 Sisyphus Claude Sonnet 4로 설정되어 있지만
[05:52]
Opus의 완전한 성능을 원합니다.
[05:55]
그래서 /models를 누르고
[05:58]
Opus를 검색해서
[06:01]
Claude Opus 4.5 latest anthropic을
[06:04]
Sisyphus용으로 선택하겠습니다.
[06:09]
이것이 우리가 원하는
[06:10]
쇼를 운영할 두뇌입니다.
[06:12]
이제 벤치마크 프롬프트를 입력하겠습니다.
[06:15]
TMDB API를 사용하는 영화 추적 앱을 만들어주세요.
[06:18]
미니멀한 미적 감각을 사용하는지 확인해주세요.
[06:22]
또한 1년에 본 영화 수를 보여주는
[06:24]
Git 추적기와 같은 뷰도 있어야 합니다.
[06:27]
저 작은 oh my open code 배너가
[06:29]
번쩍 지나가는 것을 보셨나요?
[06:32]
그것은 Sisyphus가 스테로이드를 맞았다는 뜻입니다.
[06:35]
즉시 Sisyphus가 생각을 시작합니다.
[06:38]
요청을 분석합니다. TMDB API 통합,
[06:41]
미니멀한 UI, 그리고 추적을 위한
[06:45]
Git 스타일 기여 그래프.
[06:48]
이것이 프론트엔드 UI/UX,
[06:50]
외부 API, 그리고 여러 컴포넌트를 포함하는
[06:53]
복잡한 다단계 작업임을 깨닫습니다.
[06:57]
계획은 꽤 상세합니다.
[07:00]
package.json,
[07:01]
app/page.tsx 같은 파일들을 읽는 것으로 시작합니다.
[07:04]
app/layout.tsx,
[07:07]
tsx와 app/globals.css까지 말이죠.
[07:09]
이것은 기존 프로젝트 컨텍스트를 이해하는 데
[07:11]
중요합니다.
[07:15]
그리고 서브 에이전트 타입
[07:17]
librarian으로 OMO 에이전트를 호출하는 것을 볼 수 있습니다.
[07:20]
프롬프트는 librarian에게 인증을 위한
[07:23]
TMDB API를 연구하라고
[07:24]
명시적으로 요청합니다.
[07:27]
인증 방법을 알아보라고 하네요.
[07:31]
키 엔드포인트 속도 제한 및 응답
[07:34]
구조들이에요.
[07:36]
백그라운드에서 실행이 true로 설정된 걸 보세요.
[07:38]
이건 사서 에이전트가 지금 숙제를 하러 가고
[07:42]
Cisphus는 기다리지 않고 계속 계획을 세울 수 있다는 뜻입니다.
[07:44]
이 병렬 처리는 엄청난 장점이에요.
[07:47]
사서가 바쁘게 일하는 동안
[07:50]
Cisphus는 할 일 목록을 계속 다듬고 있어요.
[07:53]
프론트엔드 UIX 엔지니어에게 UI/UX 스타일링을 위임합니다.
[07:56]
[08:00]
이제 뭐가 일어나는지 보세요.
[08:02]
watched movie나 TMDB 응답 같은
[08:04]
초기 TypeScript 타입들을 작성하기 시작해요.
[08:06]
[08:09]
그런데 갑자기 백그라운드 작업
[08:13]
완료 알림이 TMDB API 연구를 위해 팝업됩니다.
[08:15]
이건 사서가 작업을 마치고
[08:19]
필요한 컨텍스트를 제공한 거예요.
[08:21]
[08:23]
Cisphus가 즉시 이걸 반영합니다.
[08:26]
또한 불필요한 주석과 린트 문제도 감지하는데
[08:28]
이건 설정된 후크와 LSP 통합 덕분이에요.
[08:31]
types/mov.ts를 살펴보고
[08:34]
[08:36]
[08:38]
li/tmdb.ts
[08:41]
그리고 lib/usewatchmov.ts를
[08:44]
주석을 정리하고 작은 오류들을 수정하며
[08:47]
훑어가요. 이건 단순히 코드를 쏟아내는 게 아니라
[08:50]
적극적으로 리팩토링하고
[08:52]
모범 사례를 적용하고 있다는 걸 보여줘요.
[08:55]
그 다음엔 간단한 mkdir 명령을 사용해서
[08:57]
핵심 디렉토리 구조를 만들어가요.
[09:00]
[09:02]
그 후엔 실제 컴포넌트 작업에 들어갑니다.
[09:05]
[09:06]
영화 검색, 영화 카드
[09:09]
시청한 영화 목록과 기여도
[09:12]
그래프 컴포넌트들을 만들어요.
[09:14]
하지만 작은 에러가 나타납니다. 영화 카드 모듈을 찾을 수 없다고 하네요.
[09:17]
이때 LSP가 진짜 빛을 발해요.
[09:20]
[09:23]
Cisphus가 에러를 즉시 감지합니다
[09:26]
TypeScript 언어 서버가
[09:27]
실행되고 있거든요. 그리고 자가 수정을 하며
[09:31]
components/index.ts로 돌아가서
[09:34]
import 경로를 수정합니다.
[09:37]
또한 contribution graph.tsx에서
[09:40]
사용되지 않은 변수 에러가 있었는데
[09:43]
이건 동시 파일 쓰기 중에
[09:46]
레이스 컨디션 때문일 가능성이 높다고 식별하고
[09:48]
그것도 수정해요. 이건 놀라운 복원력과
[09:52]
오류 복구 능력을 보여줍니다.
[09:54]
컴포넌트들이 제자리에 있으면
[09:56]
메인 app/layout.tsx
[09:59]
파일을 업데이트하죠.
[10:01]
메타데이터 제목을 영화 추적기로 바꾸고
[10:04]
더 자세한 설명을 추가해요.
[10:07]
[10:09]
그리고 app/page.tsx를 작성하며
[10:13]
새로 만든 모든 컴포넌트들을
[10:15]
메인 레이아웃에 통합합니다.
[10:18]
마지막으로 TMDB 이미지가 작동하려면
[10:21]
Next.js에 특정 설정이 필요하다는 걸
[10:24]
깨닫게 됩니다.
[10:26]
next.config.ts를 읽고
[10:29]
환경 변수 예시 파일을
[10:31]
플레이스홀더 API 키와 함께 만들고
[10:34]
그 다음 next.config.ts를 수정해서
[10:37]
image.tmdb.org를 위한
[10:39]
이미지 도메인 설정을 포함시켜요.
[10:44]
그리고 위임이 일어납니다.
[10:47]
Sisphus가 명시적으로 '미니멀한 미학을 위한
[10:50]
UI/UX 다듬기를 지금
[10:54]
프론트엔드 UI 엔지니어에게 위임한다'고 말하는 걸 보세요.
[10:57]
이게 바로 백그라운드에서 비주얼 스타일링을 맡아줄
[10:59]
Gemini 3 Pro 에이전트예요.
[11:01]
[11:02]
Gemini가 작업하는 동안
[11:06]
Cisphus는 npm run build 명령을 실행해서
[11:08]
핵심 애플리케이션이
[11:10]
성공적으로 컴파일되는지 확인해요.
[11:12]
그리고 딱 그렇게 빌드가 완료됩니다.
[11:16]
생성된 영화 추적기도
[11:18]
정말 독특하고 잘 만들어진 것 같습니다.
[11:21]
제 생각은 어떨까요? 먼저 좋은 점부터 말씀드리겠습니다.
[11:24]
전문화된 에이전트로의 동적 위임 기능은
[11:27]
정말 훌륭합니다.
[11:31]
마치 소규모 개발팀을 보유한 것과 같습니다.
[11:33]
Opus는 고수준 계획과
[11:36]
백엔드를 담당하고, Gemini는 프론트엔드를 다룹니다.
[11:40]
Sonnet은 리서치를 담당하죠. 작업을
[11:42]
가장 적합한 모델에 매칭시키는데,
[11:45]
이론적으로는 더 나은 결과와
[11:47]
더 효율적인 토큰 사용을 제공해야 합니다.
[11:49]
사용량 말이죠.
[11:51]
백그라운드 작업 실행은
[11:54]
게임체인저로, 실제 병렬 작업을 가능하게 하고
[11:58]
실시간 오류 검사를 위한 LSP 통합과
[12:01]
지속적인 실행 보장 기능은
[12:03]
이러한 AI 에이전트를 진정으로 신뢰할 수 있게 만드는
[12:06]
핵심 요소입니다. 이는 관리 부담을 줄이고
[12:10]
결과물에 대한 신뢰도를 높여줍니다.
[12:12]
결과물 말이죠.
[12:14]
스스로 모듈 import 오류를
[12:16]
감지하고 수정했고, 심지어
[12:18]
잠재적인 레이스 컨디션까지 해결한 것은 인상적입니다.
[12:21]
하지만 완벽한 만능 해결책은 아닙니다.
[12:23]
위임 기능이 있지만, 비용은 여전히
[12:27]
확장됩니다. 여러 최신 모델을 실행하기 때문에
[12:29]
API 비용이 단일 저가 모델보다
[12:32]
더 빠르게 누적될 수 있습니다.
[12:35]
하지만 Claude와
[12:38]
OpenAI, Gemini의 모든 구독 서비스를
[12:41]
감당할 수 있다면, 좋은 결과를
[12:44]
얻어낼 수 있습니다.
[12:46]
토큰 사용량 측면에서 신중한 고려가
[12:49]
이루어졌다고 생각하며, 구독 서비스와 함께
[12:51]
실행하는 것을 권장합니다.
[12:54]
구독 서비스 말이죠.
[12:56]
GLM 같은 것들도 연결할 수 있을 것 같습니다.
[12:58]
모델 설정을 편집하는 방법에 대한
[13:01]
튜토리얼을 원하시는지 알려주세요.
[13:04]
그런 것들도 다룰 수 있습니다.
[13:08]
전반적으로 꽤 괜찮습니다. 어쨌든,
[13:11]
아래에 생각을 공유해주시고 채널을 구독해주세요.
[13:13]
Super Thanks 옵션으로 후원하거나
[13:15]
채널에 가입해서 특전을 받으실 수도 있습니다.
[13:17]
다음 영상에서 만나겠습니다.
[13:19]
안녕히 가세요.