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