콤바이: 세계 최초 SOTA UI 개발 에이전트 출시! 2.5 Pro 및 Sonnet 4 MCPs를 능가

AICodeKing 구독자 71,200명

요약

이 영상에서는 Kombai라는 세계 최초 SOTA(최신 기술) 기반 프론트엔드 전용 AI 에이전트를 소개합니다. Kombai는 VS Code, Cursor 등 IDE에 통합되어 Figma 파일·이미지·텍스트 기반 프롬프트만으로 백엔드 비종속 UI 코드를 즉시 생성하며, React 19·Next.js 15·MUI·Tailwind V4 등 주요 스택을 폭넓게 지원합니다. 실제 전자상거래 관리 패널 제작과 복잡한 설정 페이지 기능 추가 과정을 통해 설치부터 코드 미리보기, 테마 일관성 유지까지 직관적인 워크플로우를 경험하게 해 줍니다. 마지막으로 경쟁 도구(2.5 Pro, Sonnet 4 w/ MCPs) 대비 우수한 벤치마크 성능을 제시하며, 전문 프론트엔드 개발에 혁신을 가져올 솔루션임을 강조합니다.

주요 키워드

Kombai SOTA AI 에이전트 백엔드 비종속(Backend Agnostic) 프론트엔드 벤치마크 IDE 플러그인 Figma React 19 Next.js 15 MCPs

하이라이트

🔑 IDE 통합: VS Code, Cursor, Windsurf 등 주요 코드 에디터에 바로 플러그인 설치만으로 간편하게 사용을 시작할 수 있습니다.
⚡️ 백엔드 비종속 코드 생성: Figma·이미지·텍스트 입력만으로 어떤 백엔드 로직도 건드리지 않는 깔끔한 UI 코드를 자동으로 생성합니다.
🌟 풍부한 라이브러리 지원: React 19, Next.js 15, MUI, Mantine, Tailwind V4, Antd, Shadcn 등 다양한 스택을 완벽히 호환합니다.
📌 실전 예시: 퍼블릭 Fake Store API 기반 전자상거래 관리 패널을 단 몇 분 만에 완성했고, 차트·검색·목록 기능을 문제없이 구현했습니다.
🚀 기능 확장: 기존 대시보드와 제품 페이지 컴포넌트를 재활용해 설정 페이지를 손쉽게 추가하고, 새로운 폼 요소를 즉시 반영하는 개발 속도를 보여 줍니다.
✨ 코드 미리보기: 생성된 코드를 저장 전에 샌드박스 환경에서 바로 실행해 UI와 스타일을 즉시 확인할 수 있습니다.
📈 경쟁 우위: 일반 프론티어 모델·MCPs 대비 벤치마크 점수가 월등히 높아 프로토타이핑과 실제 개발 모두에 적합합니다

용어 설명

SOTA(State of the Art)

해당 분야에서 최신 기술을 의미하며, 최고의 성능을 나타냅니다.

백엔드 비종속(Backend Agnostic)

특정 백엔드 로직과 무관하게 UI 코드만 생성해 프론트엔드 작업에 집중할 수 있는 특성입니다.

AI 에이전트

사용자 입력을 기반으로 자동으로 코드를 생성하거나 작업을 수행하는 소프트웨어 구성 요소입니다.

IDE(Integrated Development Environment)

코드 작성·디버깅·빌드를 지원하는 통합 개발 환경을 뜻합니다.

Figma

UI 디자인 협업 도구로, 디자이너와 개발자가 디자인 파일을 공유하고 토의할 수 있는 플랫폼입니다.

AI 모델과 코더들이 복잡한 프론트엔드 작업에서 어려움을 겪는 현황을 설명하며, 이에 대한 기존 시스템 프롬프트와 도구들의 한계를 소개합니다.

[00:05] 프론트엔드 개발을 위한 AI 도구들의 한계점을 소개하며, 복잡한 실제 프론트엔드 작업에서 기존 모델들이 겪는 어려움과 기존 솔루션들의 번거로운 설정 과정에 대해 설명합니다.

트위터에서 200만 뷰를 기록한 Kombai 출시 소식을 알리고, 프론트엔드 벤치마크 점수가 실사용 환경에서 우수함을 보여 줍니다.

[00:35] 콤바이(Kombai)라는 새로운 AI 에이전트를 소개하며, 트위터에서 200만 뷰를 기록한 화제작으로 프론트엔드 관련 벤치마크에서 뛰어난 성능을 보였다고 언급합니다.

IDE 플러그인 방식으로 동작하며, Figma·이미지·텍스트 기반 입력으로 백엔드 비종속 UI 코드를 생성합니다. React 19, Next.js 15, MUI, Mantine, Tailwind V4 등 다양한 라이브러리를 지원합니다.

[01:08] 콤바이의 핵심 기능을 설명합니다. VS Code, Cursor, Windsurf 등 주요 IDE에 플러그인으로 설치되어 IDE 내에서 직접 프론트엔드 코드를 생성하는 최초의 AI 에이전트라고 소개합니다.

[01:30] 콤바이가 작은 UI부터 다중 페이지 UI까지 모범 사례를 따라 구축할 수 있으며, 기존 최첨단 모델들보다 뛰어난 성능을 보인다고 강조합니다.

[01:50] 콤바이의 입력 방식을 설명합니다. Figma 파일, 이미지, 텍스트 프롬프트를 입력으로 받아 백엔드 로직을 건드리지 않고 UI에만 집중한 깔끔한 코드를 생성한다고 설명합니다.

[02:18] 지원 라이브러리와 가격 정책을 소개합니다. React 19, Next 15, MUI, Mantine, Tailwind V4 등 다양한 라이브러리를 지원하며, 월 200 크레딧 무료 제공, 런칭 특가로 월 500 크레딧, 유료 플랜은 월 20달러에 2,000 크레딧을 제공한다고 안내합니다.

공식 사이트 링크 접속 후 에디터 선택, VS Code 마켓플레이스에서 설치하는 과정을 보여 주며, 계정 생성·인증 후 바로 사용 가능한 과정을 안내합니다.

[03:07] 콤바이 사용법을 단계별로 안내합니다. 공식 사이트에서 설치 옵션을 선택하여 VS Code 마켓플레이스를 통해 설치하고, 계정 생성 및 활성화 과정을 거쳐 사용을 시작하는 방법을 설명합니다.

간단한 프롬프트 입력창과 Ask/Code 모드 설명, 스택(React·TypeScript·Next.js) 선택 방법을 시연하며, 사용자 환경에 맞춘 설정 과정을 다룹니다.

[03:40] Kombai의 인터페이스를 소개하며 프롬프트 입력창과 Ask/Code 두 가지 모드, 그리고 React 19, TypeScript, Next.js 15 등 다양한 기술 스택 선택 옵션을 설명합니다.

[04:25] Kombai로 구축한 복잡한 이커머스 관리 패널을 실제 사례로 소개하며, 가짜 스토어 API를 활용한 차트, 검색 기능 등이 포함된 완전한 앱임을 보여줍니다.

Mock 데이터 기반 전자상거래 대시보드 구축 과정을 보여 주며, 차트·제품 검색·리스트 뷰 등 실전 복잡도를 갖춘 UI 생성 능력을 검증합니다.

[05:05] Figma 디자인부터 시작해서 메인 대시보드와 제품 페이지를 순차적으로 개발한 과정을 설명하고, 실제 API 연동을 통해 검색 기능까지 구현한 전체 개발 히스토리를 보여줍니다.

[05:46] 도구의 실제 활용 능력을 증명하기 위해 기존 코드베이스에 새로운 설정 페이지를 추가하는 복잡한 작업을 시연하며, 기존 컴포넌트를 활용한 개발 방식을 제안합니다.

기존 코드베이스에서 설정 페이지가 빠진 부분을 복제된 컴포넌트로 메우고, 새 기능을 계획·생성·미리보기를 거쳐 즉시 확인하는 과정을 시연합니다.

[06:23] Kombai가 자동으로 계획을 수립하고 코드를 생성하는 과정을 보여주며, 샌드박스에서 미리보기를 제공하여 저장 전에 결과를 확인할 수 있는 기능을 설명합니다. 최종 결과물이 디자인 라이브러리를 올바르게 활용하여 전문적으로 제작되었음을 확인합니다.

[07:07] Kombai의 결과물이 전문적 품질을 보여주며, 스타일 충돌이나 어색함 없이 일관된 테마를 유지한다고 설명합니다.

프로필명 편집 기능 추가 예시를 통해 사용자 요청에 맞춘 폼 요소 생성, 백엔드 라우트·스키마 자동 생성으로 풀스택 프로토타이핑이 가능한 워크플로를 소개합니다.

[07:24] 프로필 이름과 실제 이름을 다르게 설정할 수 있는 기능을 추가하기 위해 사용자명 텍스트 박스를 요청하고, AI가 즉시 구현해주는 과정을 보여줍니다.

[07:44] AI가 백엔드 라우트와 스키마까지 자동으로 생성해주어, Cursor나 Cline 같은 AI 코더로 백엔드 기능을 쉽게 완성할 수 있다고 설명합니다.

[08:07] Kilo Code에서 Sonnet 모델을 사용해 백엔드를 구현하고 실행하는 데모를 진행하며, 완전히 기능하는 앱이 완성되는 과정을 보여줍니다.

[08:35] Figma 디자인 연동이 잘 되고 최적화되어 있어, 복잡한 실제 앱 개발에 최적인 프론트엔드 개발 에이전트라고 평가합니다.

[08:55] 시청자들에게 직접 사용해볼 것을 권하며, 구독과 후원을 요청하고 다음 영상에서 만날 것을 약속하며 마무리합니다.

Kombai의 전반적 활용 소감과 경쟁 도구 대비 장점을 정리하고, 의견 공유 요청 및 채널 구독·후원 안내로 마무리합니다.

타임라인 정보가 없습니다.

[00:00] [음악]

[00:03] [박수]

[00:05] 안녕하세요, 새로운 영상에 오신 것을 환영합니다.

[00:08] 요즘 대부분의 모델과 코더들은

[00:11] 복잡한 프론트엔드 작업을 제대로 처리하지 못합니다.

[00:13] 복잡하고 실제적인

[00:16] 프론트엔드 작업에 어려움을 겪죠.

[00:18] 그래서 저는

[00:22] 시스템 프롬프팅이나 도구를 활용해

[00:23] 최고의 UI를 만드는 방법들에 대해

[00:25] 이야기해왔지만, 설정이 꽤 번거롭고

[00:28] 거의 항상 완벽하게 작동하지 않았습니다.

[00:32] 하지만 최근에

[00:34] 이런 문제들을 해결하려는

[00:37] 도구가 많이 화제가 되고 있는 것을 봤습니다.

[00:40] 트위터에서 200만 뷰가 넘는 대규모 론칭을 했고

[00:43] 그 도구가 프론트엔드 관련

[00:46] 벤치마크에서 기록한 점수에

[00:48] 상당히 흥미를 느꼈습니다.

[00:50] 그들의 테스트는 프론트엔드 작업의

[00:53] 실제 사용 사례에 특화되어 있었고

[00:56] 그 성능이 직접 시도해볼 가치가 있었습니다.

[00:59] 그래서 실제로 테스트해서

[01:02] 주장하는 바와 일치하는지 확인해봤습니다.

[01:05] 이것은 콤바이(Kombai)라고 불립니다.

[01:08] 콤바이는 프론트엔드를 위한 첫 번째 AI 에이전트입니다.

[01:12] VS Code, Cursor, 또는

[01:15] Windsurf 등 여러분의 코드 에디터에 연결되어

[01:18] IDE 내에서 바로 프론트엔드

[01:20] 코드를 생성할 수 있습니다.

[01:24] 여러분의 스택과 저장소에 맞는

[01:27] 깔끔한 백엔드 독립적 결과물을 얻을 수 있습니다.

[01:30] 작은 UI부터 본격적인 다중 페이지 UI까지

[01:34] 하나의 일관된 디자인을 따라

[01:36] 모범 사례로 구축할 수 있습니다.

[01:38] 기본 상태의 최첨단 모델들과

[01:40] MCP들을 크게 능가하는 성능을 보여줍니다.

[01:43] Figma, 이미지 또는

[01:46] 텍스트 기반 프롬프트에서 UX를 구축하는 데 말이죠.

[01:50] 기본적으로 Figma 파일이나

[01:53] 이미지, 심지어 단순한 텍스트 프롬프트만 주면

[01:56] 콤바이가 백엔드 독립적인

[01:58] 깔끔한 프론트엔드 코드를 생성합니다.

[02:02] 즉, 백엔드 로직을

[02:03] 건드리지 않는다는 뜻입니다. UI에만 집중하고

[02:07] 생성되는 코드는 여러분의

[02:10] 스택과 저장소에 맞도록 설계되어

[02:12] 대규모 리팩토링을 할 필요가 없어

[02:15] 정말 훌륭합니다. 게다가

[02:18] React 19, Next 15, MUI,

[02:23] Mantine, Tailwind V4, Antd, Shadcn 등

[02:28] 다양한 라이브러리를 지원합니다.

[02:31] 이는 정말 중요한데, 다른 대부분의

[02:34] AI 도구들은 특정 프론트엔드

[02:37] 라이브러리로 작업하는 데 어려움을 겪거나

[02:39] 여전히 많은 수정이 필요한

[02:42] 일반적인 결과물만 제공하기 때문입니다.

[02:44] 월 200 크레딧으로

[02:46] 무료로 사용할 수 있지만

[02:50] 런칭 독점 혜택으로

[02:52] 매월 500 크레딧을 무료로 제공하는

[02:55] 관대한 제안도 있습니다.

[02:58] 그리고 월 20달러 요금제로

[03:00] 월 2,000 크레딧을 제공하며

[03:03] 더 많은 크레딧이 필요하면 추가 옵션도 있습니다.

[03:04] 정말 합리적인 가격입니다.

[03:07] 이제 어떻게 사용하는지 보여드리겠습니다.

[03:10] 우선 설명란의 링크를 통해

[03:12] 콤바이 사이트로 가세요.

[03:15] 그다음 설치 옵션을 클릭하고 에디터를 선택하면

[03:18] VS Code 마켓플레이스가 열립니다.

[03:21] 설치 버튼을 누르면

[03:23] 설치가 완료됩니다. 설치가 끝나면

[03:27] 플러그인을 열고 로그인하거나

[03:30] 계정을 생성한 다음, 계정을 활성화하면

[03:33] 시작할 수 있습니다.

[03:35] 이제 이런 모습입니다.

[03:38] 우선 간단한 프롬프트를 볼 수 있습니다.

[03:40] 여기 프롬프트 입력창이 있습니다. 여기에 원하는 것을

[03:44] 무엇이든 입력해서 생성할 수 있고, 또한

[03:46] 두 가지 모드 중에서 선택할 수 있습니다. Ask와 Code 모드입니다.

[03:50] Ask는 채팅, 질문, 그리고

[03:53] 계획을 위한 것이고, Code는 실제로

[03:56] 코드를 생성하고 기대하는 작업을 수행합니다.

[03:59] 그리고 사용하고 싶은 기술 스택도

[04:02] 편집할 수 있습니다.

[04:04] 현재 사용 중인 기술 스택을 확인할 수 있고

[04:06] 이 연필 아이콘을 클릭하면

[04:09] 설정 페이지가 열려서 원하는

[04:12] 기술 스택을 변경할 수

[04:14] 있습니다.

[04:16] React 19,

[04:19] TypeScript 또는 JavaScript뿐만 아니라

[04:22] Next.js 15까지 선택할 수 있습니다.

[04:25] 이 도구가 다른 프로토타이핑 도구나

[04:27] LLM들이 할 수 없는

[04:30] 복잡한 프론트엔드에서 어떻게 뛰어난 성능을 보이는지 보여드리기 위해

[04:33] Kombai로 제가 구축한 기존 이커머스 관리 패널을

[04:35] 사용해보겠습니다. 여기서 보실 수 있습니다.

[04:39] 그리고 이것은 원하는 모든 기능을 갖추고 있습니다.

[04:41] 공개 가짜 스토어 API를 통해 모의 데이터를 사용하고

[04:44] 꽤 멋져 보입니다. 차트를 보는 데 사용할 수 있고

[04:47] 제품 검색도 가능하며 여기의 모든

[04:50] 기능이 꽤 잘 작동합니다.

[04:52] 이 앱은 상당히 복잡하고

[04:55] React 19와 Material UI v7,

[04:58] 그리고 Emotion으로 구축되었습니다.

[05:02] 제가 어떻게 이것을 만들었는지 보여드리면,

[05:05] 먼저 여기 Figma 디자인을 제공했고

[05:08] 코딩해달라고 요청했는데 꽤 잘 해냈고

[05:10] 더 좋게 만들기 위해 몇 가지 후속 프롬프트를 사용했습니다.

[05:13] 그런 다음 그것을 수행했고 메인

[05:16] 대시보드가 여기에 만들어졌습니다. 하지만 그 다음

[05:18] 제품 페이지도 작업해달라고 요청했고

[05:22] 가짜 스토어 데모 API를 사용해서

[05:24] 잘 작동하도록 하고

[05:26] 검색 기능과 모든 것이

[05:28] 잘 작동하도록 해달라고 했습니다.

[05:31] 그래서 그렇게 했더니

[05:34] 작동합니다.

[05:35] 그래서 제품 페이지도 만들어줬습니다.

[05:38] 여기 제품 목록 뷰를 만들어달라고 요청했는데

[05:41] 여기 히스토리에서도 볼 수 있습니다.

[05:43] 이제 이 도구의 강력함을 보여드리기 위해

[05:46] 실제 코드베이스에서 어떻게

[05:49] 작동하는지 보여드리겠습니다.

[05:52] 앱에 복잡한 기능을 추가해서 말이죠.

[05:54] 앱 미리보기로 돌아가면

[05:58] 여기 설정 페이지가 있는 것을 볼 수 있습니다.

[06:00] 하지만 이것은

[06:02] 해당 페이지가 없어서 작동하지 않습니다.

[06:04] 그래서 어떻게 구축할 수 있는지 보여드리겠습니다.

[06:08] 대시보드와 제품 페이지에서

[06:10] 일부 컴포넌트를 가져와서

[06:13] 설정 페이지를 만들어달라고 요청해보겠습니다.

[06:15] 거기에 넣어야 한다고 생각하는 것들로

[06:18] 말이죠.

[06:21] 먼저 여기서 볼 수 있듯이 계획을 생성할 것입니다.

[06:23] 파일들과 모든 것을 생성하고

[06:26] 잠시 후에 완료될 것입니다.

[06:29] 완료될 것입니다.

[06:32] 모든 코드를 작성했고

[06:33] 코드베이스에 있는 라이브러리를 사용했습니다.

[06:35] 코드가 생성되면

[06:38] 검토하고 승인할 수 있습니다.

[06:40] 코드 생성 후 Kombai는

[06:42] 샌드박스에서 코드를 실행하고

[06:44] 저장소에 저장하기 전에도

[06:47] 출력 미리보기를 보여줍니다.

[06:49] 이를 통해 생성된 코드의

[06:51] 영향을 빠르게 시각화할 수 있습니다.

[06:53] Kombai가 우리를 위해 무엇을 만들었는지 보겠습니다.

[06:56] 지금 볼 수 있고 이것이

[06:59] 정말 멋져 보인다는 것을 알 수 있습니다.

[07:02] 디자인 라이브러리를 올바르게 사용했습니다.

[07:04] 재정의하는 스타일이나 어색한 스타일링이 없다는

[07:07] 즉, 스타일을 덮어쓰거나

[07:09] 어색한 스타일링이 전혀 없다는 뜻입니다.

[07:12] 모든 것이 전문적으로 제작되었고,

[07:15] 또한 전체적으로 일관된 테마를 따릅니다.

[07:18] 부자연스러워 보이는 요소가 없죠.

[07:20] 이는 일반 코더들에게는

[07:22] 꽤 어려운 일입니다.

[07:24] 몇 가지를 수정하고 싶습니다.

[07:26] 예를 들어, 프로필 이름을

[07:28] 실제 이름과 다르게 할 수 있는

[07:30] 옵션을 원합니다.

[07:32] 그래서 사용자명을 위한 텍스트 박스를

[07:35] 추가해달라고 요청했더니

[07:37] 바로 추가해줍니다.

[07:41] 다시 확인해보니 정말 좋고,

[07:44] 이미 백엔드 라우트와

[07:46] 스키마까지 만들어줬습니다.

[07:49] 이제 Cursor나 Cline 같은

[07:52] AI 코더에게 백엔드를 만들어서

[07:55] 연결하고 기능을 구현하도록 요청할 수 있습니다.

[07:59] 이것이 아마도

[08:01] 기능적이고 멋진 디자인을 만드는

[08:03] 최고의 방법일 것입니다. 복잡하거나 전문적인 앱에 적합하죠.

[08:07] 실제로 지금 Kilo Code로 가서

[08:09] Sonnet 모델을 선택하겠습니다.

[08:12] 이제 백엔드를 구현하고

[08:14] 완전히 기능적으로 만들어달라고

[08:17] 요청하겠습니다.

[08:19] 이제 백엔드를

[08:21] 구현하는 것을 볼 수 있고,

[08:24] 잠시 후 완료됩니다.

[08:27] 이제 실행해서 확인해볼 수 있습니다.

[08:29] 보시다시피 정말 놀랍도록

[08:32] 잘 작동하고 확실히 훌륭합니다.

[08:35] 이것이 실제 복잡한 앱을

[08:37] 구현하고 만드는 최고의 방법일지도 모릅니다.

[08:40] Figma 디자인과 연동되고

[08:43] 실제로 그에 최적화되어 있습니다.

[08:46] 그래서 그것도 사용할 수 있습니다.

[08:49] 이것이 아마도 제가 지금까지 본

[08:52] 프론트엔드 개발을 위한

[08:53] 최고의 에이전트인 것 같습니다.

[08:55] 직접 사용해보시면

[08:57] 분명 좋아하실 겁니다.

[09:00] 전반적으로 정말 멋집니다.

[09:03] 아래에 의견을 남기시고

[09:05] 채널을 구독해주세요.

[09:07] 슈퍼 땡스 옵션으로 후원하거나

[09:09] 채널 멤버십에 가입해서

[09:11] 혜택도 받으실 수 있습니다.

[09:14] 다음 영상에서 뵙겠습니다. 안녕히 계세요. [음악]