Kombai AI: 실제 프론트엔드 과제에서 Gemini & Claude 4를 능가하다

채널 아이콘
Eric Tech 구독자 12,500명

요약

이 영상은 프론트엔드 개발에 특화된 AI 에이전트인 Combine을 소개합니다. Combine은 Gemini 2.5 Pro나 Claude 4 등 일반 목적 모델보다 코드 리뷰, 기능 구현, 컴파일 성공률 등 모든 벤치마크에서 앞서며, VS Code 확장으로 설치해 대화형 채팅으로 프레임워크, UI 라이브러리, 스타일링을 설정하고 Figma 디자인을 기반으로 프로젝트를 자동 생성하는 과정을 보여줍니다. 실제 디지털 마케팅 사이트와 개인 건강 관리 앱 예시를 통해 계획 수립부터 코드 생성, 반응형 디자인 구현까지 체계적으로 진행하며, 도메인 특화 지식, Figma 통합, 인텔리전스 모델 라우팅 등의 핵심 기능을 강조합니다. 마지막으로 요금제와 무료 플랜도 안내하며, 프론트엔드 개발 자동화에 관심 있는 이들에게 Combine 사용을 권장합니다.

주요 키워드

Combine 프론트엔드 AI 에이전트 Figma 통합 도메인 특화 지식 인텔리전스 모델 라우팅 자동 코드 생성 테크 스택 커스터마이징 반응형 디자인

하이라이트

  • 🔑 Combine은 Gemini 2.5 Pro와 Claude 4를 제치고 코드 리뷰와 기능 구현, 컴파일 평가에서 높은 성능을 보여줍니다.
  • 🚀 VS Code 확장으로 손쉽게 설치해 채팅창에서 프레임워크, 상태 관리, UI 라이브러리, 스타일링까지 대화식으로 설정하고 코드 생성이 가능합니다.
  • ⚡️ Figma 디자인 통합 기능을 활용해 이미지나 링크만 붙여넣으면 디지털 마케팅 사이트 같은 프로젝트를 처음부터 자동으로 완성할 수 있습니다.
  • 🌟 계획 수립 단계에서 페이지 섹션, 반응형 디자인, 색상·타이포그래피·애니메이션 설정을 미리 검토하고 승인한 후 실행할 수 있습니다.
  • 📂 자동으로 생성된 컴포넌트, 훅(hook), 스타일 파일 구조를 통해 프로젝트 구조를 일관되게 관리할 수 있습니다.
  • 📱 생성된 웹 앱이 데스크톱은 물론 모바일에서도 완벽한 반응형 레이아웃을 지원해 다양한 화면에서도 콘텐츠를 최적으로 표시합니다.
  • ⚙️ 도메인 특화 지식과 인텔리전스 모델 라우팅을 통해 최신 프론트엔드 라이브러리와 최적의 AI 모델을 자동으로 선택하고 오류를 자가 수정합니다.

용어 설명

Combine

프론트엔드 개발에 특화된 AI 에이전트로, 코드 생성·검토·자동 오류 수정 기능을 제공합니다.

Figma 통합

Figma 디자인 파일이나 이미지를 해석해 그대로 프론트엔드 코드로 변환하는 기능입니다.

도메인 특화 지식

프론트엔드 최신 라이브러리와 모범 사례를 사전 검증된 컨텍스트로 제공하는 지식 베이스입니다.

인텔리전스 모델 라우팅

작업 유형에 최적화된 AI 모델을 자동으로 선택해 효율적인 코드 생성을 돕는 전략입니다.

[00:00:00] 도입 및 성능 벤치마크

Combine을 프론트엔드 전문 AI 에이전트로 소개하고, Gemini 2.5 Pro와 Claude 4 같은 일반 모델 대비 코드 리뷰, 기능 구현, 컴파일 성공률 벤치마크에서 우수한 성능을 보이는 과정을 설명합니다.

프론트엔드 개발 전용 AI 에이전트 Kombai 소개. Gemini 2.5 Pro와 Claude Sonnet을 뛰어넘는 성능을 보여주며, 코드 리뷰 벤치마크에서 우수한 결과를 달성했습니다.
[00:00:35] Combine 설치하기

VS Code 확장으로 Combine 에이전트를 설치하고, 원하는 IDE(Visual Studio Code, Cursor, Windsurf 등)에 간편하게 추가하는 과정을 안내합니다.

Kombai 설치 방법 안내. Visual Studio Code 익스텐션으로 설치하며, Cursor나 Windsurf 등 다른 IDE에서도 사용 가능합니다.
[00:00:57] 인터페이스 및 모드 이해

채팅 입력창에서 Combine 에이전트와 상호작용하며, 코드 모드(Code Mode)와 질문 모드(Ask Mode)를 전환해 다양한 대화를 통해 요청사항을 전달하는 방법을 설명합니다.

Kombai 사용 인터페이스 설명. 채팅 입력창에서 @ 기호로 Figma 파일이나 프로젝트 파일을 참조하고, 코드 모드와 질문 모드 중 선택할 수 있습니다.
[00:01:24] 테크 스택 커스터마이징

프레임워크(Nest.js 등), 상태 관리, UI 라이브러리(Material UI, Chassen 등), 스타일링(Tailwind 등), 전역 설정과 고급 구성 등을 대화형으로 선택하는 방식을 소개합니다.

기술 스택 설정 옵션들. Next.js, Material UI, ShadCN, Tailwind 등 다양한 프레임워크와 UI 라이브러리를 선택할 수 있으며, 기존 프로젝트가 있다면 워크스페이스를 스캔해 자동으로 설정됩니다.
[00:01:55] 워크스페이스 스캔 및 신규 프로젝트 생성

기존 프로젝트가 있다면 자동으로 코드 스택을 인식해 양식을 채우고, 없을 경우 Figma 이미지나 링크를 붙여넣어 빈 워크스페이스에서 새 프로젝트를 처음부터 생성하는 과정을 설명합니다.

새 프로젝트 생성 시작. 빈 프로젝트에서 Figma 파일이나 이미지를 첨부해 디지털 마케팅 웹사이트 UI와 유사한 프로젝트를 처음부터 구축하는 과정을 시작합니다.
[00:02:12] Figma 디자인으로 프로젝트 설정

Figma 링크나 이미지를 붙여넣어 디지털 마케팅 웹사이트 UI 디자인을 불러오고, 원하는 프레임워크나 API 설정을 질문에 답해가며 구성하는 과정을 다룹니다.

디지털 마케팅 웹사이트 UI 디자인 이미지를 Kombai에 붙여넣어 프로젝트를 생성합니다. Kombai는 프레임워크, API, 라우터 등에 대한 질문을 하여 설정을 확인합니다.
설정을 완료하고 진행을 클릭하면 Kombai가 애플리케이션 처리를 시작하고, 실행 전 계획 단계에서 검토할 수 있는 상세한 계획을 제공합니다.
[00:02:55] 플래닝 및 승인

자동 생성된 페이지 섹션(히어로, 고객 로고, 브랜딩 등)과 반응형 설계, 색상·타이포그래피·애니메이션 설정을 미리 검토하고 승인한 후 코드 작성 단계를 진행합니다.

생성된 계획에는 히어로 섹션, 클라이언트 로고, 비즈니스 성장, 브랜딩 등 다양한 페이지 섹션과 반응형 디자인, 스타일링, 타이포그래피, 애니메이션 등의 기능이 포함되어 있습니다.
[00:03:33] 코드 생성 및 파일 구조

승인된 계획에 따라 컴포넌트, 훅(hook), 스타일링 파일 등 프로젝트 구조에 맞게 자동으로 코드를 생성하고 저장하는 방식을 보여줍니다.

계획을 승인하면 Kombai가 컴포넌트, 훅, 스타일링 파일을 포함한 완전한 코드를 생성합니다. use mobile 훅 등을 통해 모바일 뷰에서도 적절한 반응형 디자인을 제공합니다.
[00:04:07] 실행 및 결과 확인

생성된 프로젝트 폴더에서 npm install, npm run dev 과정을 통해 디지털 마케팅 사이트를 실행하고 데스크톱·모바일 반응형 결과를 실시간으로 확인합니다.

npm install과 npm run dev를 실행하여 생성된 디지털 마케팅 서비스 웹사이트를 확인할 수 있습니다. 히어로 섹션, 콜투액션, 회사 브랜딩, 정보 섹션, 최신 작업, 브랜드 인정 등이 포함되어 있습니다.
웹사이트는 완전히 모바일 반응형으로 제작되어 작은 화면에서도 콘텐츠가 한 열로 정리되어 모든 내용을 모바일 뷰에서 볼 수 있습니다.
YouTube 채널의 프론트엔드 관련 동영상들을 소개하며, 14가지 프론트엔드 시스템 디자인 개념과 마이크로 프론트엔드 아키텍처에 대한 학습 리소스를 안내합니다.
[00:05:09] 추가 학습 자료 안내

14가지 프론트엔드 시스템 디자인 개념과 마이크로 프론트엔드 아키텍처 등 관련 YouTube 강의를 소개해 심화 학습을 유도합니다.

Kombai를 사용해 완성된 프론트엔드 애플리케이션 데모를 시작합니다. Figma 디자인을 기반으로 구축된 피트니스 애플리케이션으로, 운동 계획, 다이어트 추적, 칼로리 및 매크로 관리 기능이 포함되어 있습니다.
[00:05:22] 개인 맞춤형 건강 관리 앱 예시

Figma 디자인을 바탕으로 운동, 식단, 목표·진척 상황, 차트 기능이 포함된 개인 건강 관리 앱을 완전 자동 생성해 사이드바, 내비게이션, 프로필 아이콘 등 UI 요소를 재현하는 과정을 보여줍니다.

현재 애플리케이션은 백엔드 없이 순수 프론트엔드로만 구성되어 있으며, Figma 디자인과 최종 결과물이 매우 유사함을 보여줍니다. 사이드바, 상단 네비게이션, 아이콘, 일정, 목표, 진행상황 등의 UI 요소들이 거의 동일하게 구현되었습니다.
개인 건강 관리 프로젝트를 예시로 Kombai의 작업 과정을 설명합니다. Figma 디자인을 제공하면 Kombai가 계획을 생성하고, 사용자가 확인한 후 전체 애플리케이션을 구축합니다. 이 과정에서 추가 요구사항을 명시하여 기능을 확장할 수 있습니다.
Kombai가 전문화된 프론트엔드 AI 에이전트로 선택되어야 하는 이유를 설명합니다. 프론트엔드 개발에 특화된 도메인 지식과 사전 검증된 라이브러리 컨텍스트를 보유하고 있으며, 최신 모범 사례와 업데이트된 라이브러리 버전을 제공하여 다른 범용 모델들보다 우수한 성능을 발휘합니다.
[00:06:31] Combine의 강점 요약

도메인 특화 지식, 사전 검증된 컨텍스트, 최신 라이브러리 버전 지원, 고급 Figma 통합, 자동 오류 수정, 인텔리전스 모델 라우팅 등 Combine만의 차별점을 정리합니다.

Kombai의 고급 기능들을 소개합니다. Figma 디자인 해석 능력, UI 복제 및 프론트엔드 적용, 도메인별 계획 분석, 컴포넌트 세분화, 자동 오류 수정, 미리보기 기능, 지능형 모델 라우팅 등이 포함되어 있습니다.
[00:07:07] 요금제 및 마무리

프로(Pro) 플랜 월 4200 크레딧, 무료 플랜 최대 500 크레딧 제공 정보를 안내하고, 영상 좋아요 및 구독을 요청하며 마무리합니다.

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

프론트엔드 개발에 특화된 코딩 AI 에이전트를 찾고 있다면
올바른 곳에 오셨습니다.
이 영상에서는 Kombai라는 도구를
보여드릴 예정입니다.
이 도구는 모든 종류의 프론트엔드
복잡한 코딩 문제를 해결할 수 있습니다.
또한 프론트엔드 개발을 위한
다양한 UI 프레임워크와
라이브러리들을 지원합니다.
프론트엔드 코드 리뷰 벤치마크를
보시면, 여기서 Kombai가
Gemini 2.5 Pro나
Claude Sonnet 에이전트 같은 모델들을
뛰어넘은 성능을 보여주고 있습니다.
Kombai는 또한 기능 구현과
컴파일 성공률에서도
모든 지표에서 뛰어난 성능을 보이는
매우 강력한 AI 에이전트입니다.
시작하기 위해 먼저
이것을 설치하려면
여기 Kombai를 클릭해서
코딩 IDE에 설치하면 됩니다.
저의 선택은 Visual Studio Code를 사용하는 것이지만
Cursor나 Windsurf 또는
다른 어떤 IDE든 자유롭게 사용하세요.
시작하기 위해 VS Code 안에서
Kombai 익스텐션이
설치되어 있는 것을 볼 수 있습니다.
Kombai 익스텐션을 검색해서
Visual Studio Code 에디터에
설치할 수 있습니다.
이것을 설치하면 왼쪽에
Kombai를 클릭할 수 있고
채팅 입력창에서 바로 Kombai 에이전트와
상호작용을 시작할 수 있습니다.
@ 기호를 사용해서
Figma 파일이나
프로젝트 안의 파일들을
참조할 수 있습니다.
코드 모드를 선택하거나
질문 모드를 선택해서
AI 에이전트와
다양한 유형의 대화를 나눌 수 있습니다.
에이전트가 우리를 위해
코딩을 해주는 코드 모드를 선택한다면
여기서 기술 스택도 변경할 수 있습니다.
기술 스택에서는
프레임워크를 변경할 수 있습니다.
프레임워크에서는 Next.js 15, 14 등
최신 프레임워크들로
변경할 수 있습니다.
또한 상태 관리나
컴포넌트 사용을 변경할 수도 있습니다.
UI 라이브러리 컴포넌트는
Material UI부터
ShadCN 같은 것까지 변경할 수 있습니다.
그리고 여기에는 스타일링도 있어서
Tailwind 같은 것들을 선택할 수 있고
글로벌 지시사항,
고급 구성 등 훨씬 더 많은 기능이 있습니다.
보통 기존 프로젝트가 있다면
이 기능을 사용해서
워크스페이스를 스캔하고
기술 스택 폼을 자동으로 채울 수 있습니다.
파일 탐색기로 가보면
프로젝트에 파일이
없는 것을 볼 수 있습니다.
그래서 Kombai가
처음부터 프로젝트를 구축하도록 할 것입니다.
그렇게 하기 위해 여기서
Figma 파일이나 폴더 안의 파일들을
참조할 수 있고 Figma 링크나
이미지도 첨부할 수 있습니다.
이 경우 Kombai가
디지털 마케팅 웹사이트 UI와 비슷한 프로젝트를 구축하도록 하고 싶습니다
디지털 마케팅 웹사이트 UI 디자인입니다. 제가 할 일은
이미지를 복사해서
Kombai로 돌아가서 이미지를 붙여넣고
Kombai가 처음부터 만들도록 하는 것입니다.
여기서 '이걸 만들어 주세요'라고 말하면
프레임워크나 API,
라우터 등에 대한 몇 가지 질문을
시작하는 것을 볼 수 있습니다.
이 프로젝트를 만들기 위해서요.
그리고 나서 설정을 바꾸면
저장을 클릭하고 돌아와서
프레임워크와 기술 스택에 대해
설정한 구성으로 진행하겠습니다.
이 프로젝트를 위해서요.
진행을 클릭하면
애플리케이션 처리를 시작하는 것을 볼 수 있고
프로젝트 생성을 시작한 후
결과가 어떻게 나오는지 봅시다.
여기 보시면 프로젝트를 생성하기 전에
계획 단계를 시작합니다.
실행하기 전에 제가 검토할
계획을 생성하기 시작합니다.
여기 보시면 히어로 섹션 같은
페이지의 다양한 섹션들이 있습니다.
클라이언트 로고, 비즈니스 성장,
브랜딩 등등 더 많은 것들이요.
그리고 여기에는 반응형 디자인,
정적 표시 같은 기능들도 있습니다.
그리고 여기 보시면 스타일링도 있어서
취향에 따라 색상도 바꿀 수 있습니다.
여기서 타이포그래피와
애니메이션도 바꿀 수 있습니다.
모든 것이 좋아 보이면
계획 승인을 클릭하고 코딩을 시작할 수 있습니다.
여기서 Kombai가
제공한 계획을 실행하도록 하겠습니다.
결국 파일과 코드를 생성하고
이것들이 컴포넌트,
훅, 스타일링 등의 파일들입니다.
여기서 저장을 클릭하면
우리 프로젝트에 이 파일들이 저장됩니다.
여기서 볼 수 있어요.
지금까지 페이지가 있고
컴포넌트도 있고
훅도 있습니다. 예를 들어 use mobile이요.
모바일 뷰에서는
다른 반응형 디자인으로
바꿀 수도 있어서 정말 멋져요.
이제 npm install을
먼저 실행할 수 있을 것 같습니다.
설치가 끝나면
npm run dev를 실행하고
이 포트로 이동하겠습니다.
좋습니다. 여기서 우리의 디지털
마케팅 서비스 결과를
볼 수 있습니다.
히어로 섹션과
콜투액션이 있고
회사 브랜딩과
정보 섹션, 최신 작업들,
브랜드 인정도 있습니다.
정말 반응형 카드들이에요.
그리고 정보를 보시면
모두 여기 있고
모바일 뷰를 위해
화면을 작게 하면
축소되거나 한 열로
배치할 수 있는 것을 볼 수 있습니다.
꽤 모바일 반응형이어서
여기서 볼 수 있고
모바일 뷰에서 모든 콘텐츠를
거의 다 볼 수 있습니다.
물론 프론트엔드 개발에 대해
더 배우고 싶다면
제 YouTube 채널에 몇 개의 동영상이 있어서
프론트엔드에 대해 다루고 있습니다. 그래서
여기 이 동영상들을 확인해보실 수 있어요
14가지 프론트엔드 시스템 디자인 개념이나
마이크로 프론트엔드 아키텍처도
확인해보실 수 있습니다. 여기서
복잡하고 견고한 프론트엔드 아키텍처를 구축하는 방법을
이 동영상들로 더 자세히 배우실 수 있어요
자, 그럼 동영상을 계속해서
제가 보여드리고 싶은 것은
Kombai를 사용해서 어떻게 완성된 프론트엔드를
구축하는지입니다. 그래서
기본적으로 이것이 전체 애플리케이션인데
간단히 말하면 Figma에서 UI 디자인을 가져와서
Kombai를 사용해서 이것을 구축했고, 이것이
완성된 결과물입니다. 여기서 보시면
우리의 운동, 다이어트 계획이 있고
칼로리와 매크로를 추적할 수 있습니다
그리고 여기는 일정, 목표,
진행상황에 대한 개요가 있고
여기서 목표도 볼 수 있고 활동 차트도
볼 수 있습니다. 따라서 이런 것들이
완전히 Kombai를 사용해서 구축된 전체 UI라는 것을
볼 수 있습니다
완성된 프론트엔드 애플리케이션을 구축하기 위해서요
현재 이 애플리케이션은
백엔드가 없습니다
이것은 단순히 Figma의
간단한 UI 디자인으로부터
프론트엔드를 구축할 수 있다는 것을
보여주는 것입니다. 여기 이런 모습인데
최종 결과물을 보시면 매우 유사합니다
사이드바, 상단 네비게이션 바와
아이콘들이 있고, 여기에는
일정, 목표, 진행상황이 있습니다
그리고 여기서도 매우 유사하게
사이드바, 상단 네비게이션 바
프로필 아이콘들과
진행상황 추적, 일정, 목표가 있어서
우리가 가진 것과 매우 매우 유사합니다
그리고 프로젝트를 보여드리자면
기본적으로 이것이 제가 말씀드린
프로젝트인데
개인 건강 관련 프로젝트이고
Kombai를 사용해서 기본적으로
Figma 디자인을 제공했고
이것이 이에 대한 계획을 생성하기 시작하는 것을
볼 수 있습니다. 제가 모든 것을 확인한 후
기본적으로 전체 애플리케이션을
구축하기 시작합니다. 하지만 이 과정에서
제가 정확히 제 요구사항이 무엇인지 말함으로써
추가 기능들을 더할 수 있었습니다
자, 이제 모든 것을 요약해보겠습니다
왜 우리가 전문화된 프론트엔드 AI 에이전트인
Kombai를 사용하고 싶어하는지에 대해서요
기본적으로 제가 그 기사를 가져와서
Gemini로 요약했는데
기본적으로 Kombai의 주요 차별화 요소는
프론트엔드 개발에 대한 도메인별 지식을
가지고 있다는 것입니다
그리고 다양한 프론트엔드 라이브러리와 함께
사전 검증된 인간 검증 컨텍스트도 함께 제공되는데
이는 현재의 모범 사례를 따르고
최신 라이브러리 버전으로 업데이트되어 있어서
다른 범용 모델들에 비해
주요한 장점입니다. 따라서 만약
모델을 사용해서 프론트엔드 코드를 생성하는데
일부 코드가 구식이라는 것을 발견한다면
이 제품을 시도해볼 때입니다
그리고 여기서 고급 Figma 통합과 같은
추가 기능들도 있습니다
Kombai는 Figma 디자인을 해석하는 능력이 있고
그 UI를 정확히 어떻게 복제해서
프론트엔드 애플리케이션에 추가하는지 알고 있어서
Kombai가 다른 일반 모델들과
확실히 차별화되는 것을 볼 수 있습니다
도메인별 계획 분석과 컴포넌트를
더 작은 작업으로 나누고, 자동으로 오류를 수정해서
생성된 컴포넌트를 미리보기하고
그리고 지능형 모델 라우팅도 있어서
주어진 작업에 가장 적합한 AI 모델을
선택하는 데 도움을 줍니다
따라서 프론트엔드 개발을 하신다면
확실히 Kombai를 시도해보셔야 합니다
가격 측면에서는 현재 우리가
프로 플랜을 사용하고 있는데
현재 월 4200 크레딧을
받고 있는 것을 볼 수 있습니다
하지만 무료 플랜을 사용하신다면
최대 200 크레딧을 받을 수 있고
무료 버전에서는 300 크레딧의
보너스까지 받을 수 있습니다
하지만 이 동영상은 여기까지입니다
이 동영상에서 가치를 발견하셨다면
좋아요를 눌러주시기 바랍니다
이런 콘텐츠를 더 보시려면
구독도 고려해주세요
그럼 이것으로
다음 동영상에서 뵙겠습니다