코드LLM - 최고 AI 모델에 접근 가능한 새로운 에이전틱 코드 에디터

Developers Digest 구독자 35,400명

요약

영상은 코드LLM이라는 AI 기반 코드 에디터의 주요 기능과 사용법을 상세하게 소개합니다. 자연어를 통한 코드 자동 완성, 수정 및 개선 과정을 실제 예제(Tetris 게임 개발)를 통해 시연하며, 플랫폼에 내장된 다양한 AI 모델들(예, Sonet 3.5, o1 R1 등)의 장점을 설명합니다. 또한, 모델 라우터 기능을 통해 최적의 모델을 자동 선택하는 점과 월 구독료 10달러로 제공되는 웹 인터페이스 등 부가 기능들을 강조합니다.

주요 키워드

코드LLM AI 코드 에디터 자연어 기반 자동 완성 모델 라우터 Tetris 웹 인터페이스 구독

하이라이트

🔑 코드LLM은 자연어 기반 코드 자동 완성 및 수정 기능을 제공함.
⚡️ 다양한 AI 모델에 대한 접근성을 손쉽게 제공하며, 모델 라우터로 최적 모델을 선택함.
🌟 Tetris 게임을 예로 들어, 코드 생성과 실시간 수정 과정을 시연함.
📌 코드 수정 명령어를 통해 복잡한 코드 구조를 빠르게 개선할 수 있음.
🚀 월 10달러 구독료로 웹 인터페이스와 무제한 크레딧(토큰)을 제공함.

용어 설명

자동 완성 (Autocomplete)

자연어 설명을 입력하여 코드 작성 및 수정 작업을 자동으로 수행하는 기능.

모델 라우터 (Model Router)

입력된 요청을 분석하여 가장 적합한 AI 모델을 자동으로 선택해 사용하는 기능.

영상은 코드LLM과 접근 가능한 주요 AI 모델들을 간략히 소개합니다. 플랫폼의 기본 사용법과 기능에 대한 개요를 설명합니다.

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

GitHub Copilot과 유사한 자연어 설명을 통한 코드 자동 완성 기능을 시연합니다. 사용자는 주석으로 원하는 동작을 설명하여 코드를 생성할 수 있습니다.

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

코드 블록 전체를 선택해 명령어로 구조 개선 및 오류 수정 요청을 하는 기능을 보여줍니다. 변경 사항 비교(diff)와 함께 빠른 수정 과정을 확인합니다.

[02:44] RPG 게임 코어 생성을 요청하고, O1 모델의 특성과 처리 과정에 대해 설명합니다.

단일 HTML 파일 내에서 Tetris 게임을 전체적으로 생성하는 과정을 시연합니다. 코드 라인 수가 늘어나며 실제 게임 실행과 테스트가 진행됩니다.

[03:19] 생성된 RPG 게임 코드에는 플레이어, 적, 공격 함수, 레벨업 등 기본적인 게임 메커니즘이 포함되어 있습니다.

[03:40] Code LLM의 특징으로 O1 모델에 대한 높은 접근성을 강조하고, 테트리스 게임 생성 예시를 보여줍니다.

[04:30] 생성된 테트리스 게임의 UI 문제를 발견하고 Sonet 3.5를 사용해 해결하는 과정을 설명합니다.

[05:30] 캔버스 크기 조정을 통해 UI 문제를 해결하고, Code LLM의 차별화된 기능을 강조합니다.

[05:50] Code LLM의 주요 특징으로, 일반 코딩 에디터의 기능과 함께 최신 프론티어 모델들을 관대한 사용량 제한으로 사용할 수 있음을 설명합니다.

생성된 게임의 디자인을 개선하고, HTML/CSS 요소를 추가해 보다 전문적인 인터페이스를 구축하는 모습을 설명합니다. 웹 인터페이스에서 코드 업로드와 파일 관리 기능을 함께 활용합니다.

[06:15] 테트리스 게임 UI를 개선하기 위해 선형 그라데이션 배경, 헤더, 푸터를 추가하고 'developers digest Tetris'로 이름을 변경했습니다.

[06:35] tetris.com 사이트를 참고하여 더 전문적인 디자인으로 개선을 시도하고, 파일 업로드 기능을 활용해 레퍼런스를 제공했습니다.

[07:27] 다양한 AI 모델의 특징을 설명하며, 특히 Sonnet의 빠른 응답과 우수한 코드 생성 능력을 강조했습니다.

[08:05] Code LLM의 차별점으로 최신 모델의 빠른 통합과 관대한 사용량 제한을 설명하고, 월 10달러 구독 모델에 대해 소개했습니다.

모델 라우터 기능으로 최적의 AI 모델 선택 과정을 설명하며, 다양한 모델(예: o1 R1, Sonet 3.5 등)의 활용 사례를 언급합니다. 영상은 구독 및 공유 요청과 함께 마무리됩니다.

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

[00:00] 이 영상에서는 코드 LLM을 소개해드리려고 합니다.

[00:01] 이것은 AI 코드 에디터인데요

[00:03] Sonet 3.5, Deep Seek R1, 01 Mini

[00:05] 그리고 심지어 01 같은 모델들에도 접근할 수 있습니다.

[00:09] 한 가지 알아두실 점은

[00:11] 이 영상을 촬영한 후에

[00:13] OpenAI O3 Mini High 모델이 출시되자마자

[00:16] 에디터에도 포함되었다는 것입니다.

[00:18] 이 영상에서는 해당 모델을 보여드리지 않지만

[00:19] 에디터 내에서

[00:21] 전체 O3 Mini High 모델에

[00:23] 접근할 수 있다는 점을 알아두시면 됩니다.

[00:26] 플랫폼의 모습은 이렇고

[00:28] 몇 가지 기능들을 시연해보도록 하겠습니다.

[00:30] 먼저 자동완성 기능입니다.

[00:32] 자동완성에는 제가 주로 사용하는 두 가지 방법이 있는데

[00:34] GitHub 코파일럿과 매우 유사해서

[00:36] 사용해보신 분들이라면

[00:37] 익숙하실 거예요.

[00:39] 첫 번째는 원하는 자동완성 동작을

[00:42] 주석으로 작성하는 방법입니다.

[00:45] 예를 들어 '크기가 M과 N인

[00:47] 두 개의 정렬된 배열 nums1과 nums2가 주어졌을 때

[00:49] 두 정렬된 배열의 중앙값을

[00:53] 자바스크립트로 반환하라'고 입력하면

[00:55] 여기 새로운 줄에 해결책이 나타납니다.

[00:58] 멋진 점은 자연어로

[01:00] 원하는 작업을

[01:02] 설명하기만 하면 된다는 것입니다.

[01:04] 예를 들어 'CL'이라고만 입력해도

[01:06] console.log라는 것을 인식하고

[01:09] 현재 작업 중인 컨텍스트를 이해하며

[01:11] 심지어 그 메서드 실행 결과까지 보여줍니다.

[01:13] 이것이 자동완성의 한 가지 방법이고

[01:16] 다른 방법으로는

[01:17] 자동완성을 사용할 때

[01:19] 예를 들어 'player'라고 입력하고

[01:20] 이 객체 안에 플레이어에 대한

[01:23] 여러 가지 속성을 지정하고 싶다고 할 때

[01:25] 플레이어의 다양한 특성들을

[01:28] weapons를 지정하면

[01:30] 이것이 배열이 될 수 있다는 것을 인식하고

[01:32] 그 배열 안에 객체가 들어갈 수 있으며

[01:34] sword(검)가 있을 수 있고

[01:36] bow(활)나 dagger(단검)도 있을 수 있고

[01:38] 데미지도 지정할 수 있으며

[01:41] 이런 식으로 계속

[01:43] 작업을 진행할 수 있습니다.

[01:45] 이것이 자동완성 기능입니다.

[01:46] 이것 말고도 다른 방법이 있는데

[01:48] 모든 것을 선택하고

[01:50] Command + I를 누르면 선택한 내용을

[01:53] 변경할 수 있습니다.

[01:55] 더 복잡하게 만들고

[01:59] 더 나은 구조를 가지도록

[02:00] 요청하면 제출 후에

[02:03] 요청한 내용의 차이점을 보여줍니다.

[02:05] 여기 업데이트된 플레이어가 있고

[02:07] 제가 요청한 대로

[02:09] 훨씬 더 복잡해졌습니다.

[02:11] 프로필이 있고 스탯이 있으며

[02:14] 전투 정보도 있고 그 안에

[02:16] 무기와 인벤토리가 있습니다.

[02:18] 이 경우에는 Sonet 3.5를 사용했는데

[02:20] Command + I를 다시 누르면

[02:23] 이런 다양한 모델들에

[02:25] 접근할 수 있습니다. 특별히 어려운 문제라면

[02:27] Deep Seek R1이나

[02:29] 01 같은 모델에 직접

[02:31] 전송할 수도 있습니다. 이제 플레이어와

[02:34] 기본 구조가 있으니

[02:36] 다시 이것을 선택해서

[02:39] 다음 생성을 위해

[02:40] 더 강력한 모델을 사용하고

[02:43] 실제로 생성하려고 합니다.

[02:44] 게임 코어를 만들어보겠습니다.

[02:46] 이 캐릭터를 기반으로 RPG 게임을

[02:51] 시작하는데 필요한 모든 자바스크립트 코드를 생성하겠습니다.

[02:56] 이제 제출해보도록 하겠습니다.

[03:00] 만약 여러분이 O1이나 R1 모델을 사용해보셨다면,

[03:02] 이러한 모델들의 한 가지 특징을 아실 겁니다.

[03:05] 바로 쿼리에 따라

[03:07] 생각하고 추론하는 과정을 거친다는 점인데,

[03:10] 요청한 내용에 따라

[03:12] 시간이 좀 더 걸릴 수 있습니다.

[03:14] 여기 변경사항이 보이네요.

[03:16] 이를 수락하면

[03:19] 여기에 플레이어, 적

[03:21] 적 공격 함수가 있고,

[03:23] 적이 플레이어를 공격하는 함수, 레벨업 함수,

[03:27] 게임 시작 함수가 있으며

[03:29] 계속해서 발전시킬 수 있는

[03:31] 다양한 요소들이 있습니다.

[03:34] Code LLM의 큰 차별점 중 하나는

[03:36] 다른 AI 코드 에디터와 비교했을 때

[03:38] 특별한 점이 있는데,

[03:40] O1에 대한 많은 접근성을 제공한다는 것입니다.

[03:43] 또한 이 패널에서 코드를 생성할 수 있습니다.

[03:46] 예를 들어, O1에게

[03:48] 테트리스를 처음부터 만들고 싶다고 하겠습니다.

[03:51] HTML, CSS, JavaScript를 모두

[03:55] 하나의 HTML 파일에 포함시키고 싶다고 요청하겠습니다.

[03:59] O1을 사용해보지 않으셨다면, 이것이 얼마나 강력한지

[04:03] 아직 모르실 수 있습니다.

[04:06] 이런 종류의 질문들은

[04:08] 최신 코딩 모델들에게 물어보면 재미있습니다.

[04:11] 이 패널에서는 여러 옵션이 있는데,

[04:13] 코드를 복사하거나

[04:15] 삽입할 수 있으며,

[04:17] Cursor와 비슷하게 적용할 수 있습니다.

[04:19] 예를 들어 이것을 삽입하면

[04:21] 우리가 가진 모든 것을 볼 수 있습니다.

[04:22] 여기 상당히 많은 코드가 있네요.

[04:25] 수백 줄의 코드가 생성되었고

[04:27] 생성된 결과를

[04:29] 한번 살펴보겠습니다.

[04:30] 게임 시작을 클릭하면

[04:32] 테트리스가 나타납니다.

[04:35] 방향키로 움직일 수 있지만

[04:38] 한 가지 눈에 띄는 점은

[04:41] 오른쪽에 빈 공간이 있다는 것입니다.

[04:43] 그래서 O1을 기다리지 않고

[04:45] Sonet 3.5로 전환해서

[04:47] 오른쪽에 두 개의 빈 열이 있다는 것을 발견했으니

[04:53] 이 문제를 해결해달라고 요청할 수 있습니다.

[04:58] 이제 전송해보겠습니다.

[05:00] Sonet의 장점은

[05:02] 훨씬 더 빠르다는 것입니다.

[05:04] 여기서 보면 문제가

[05:06] 20픽셀 블록으로 10개의 열을 가지고 있어서

[05:09] 캔버스 너비가 240이 아닌

[05:11] 정확히 200이어야 한다고 합니다.

[05:15] 이를 보여드리기 위해

[05:17] HTML에서 캔버스 요소를 찾아보겠습니다.

[05:20] 캔버스가 여기 있네요.

[05:22] 이제 적용 버튼을 클릭하면

[05:24] 파일을 가져와서

[05:26] 변경사항을 적용하고

[05:28] 병합할 것입니다.

[05:30] 새로운 변경사항을 보면

[05:32] 너비 200과 높이 400이 있습니다.

[05:35] 이제 저장하고 게임으로 돌아가보면

[05:38] 자, 이제 크기가 즉시 작아졌습니다.

[05:40] 이 도구가 특별히 돋보이는 점은

[05:42] 다른 솔루션들과 비교했을 때

[05:44] 이런 도구가 갖지 못한

[05:46] 멀티파일 편집이나

[05:48] 다른 기능들에 접근할 수 있다는 것입니다.

[05:50] 다른 기능들도 사용할 수 있는데,

[05:52] 일반 코딩 에디터에서 볼 수 있는

[05:54] 기능들 중에서 특히

[05:55] 최신 프론티어 모델들을 사용할 수 있고

[05:58] 매우 관대한 사용량 제한이 특징입니다.

[06:00] 이제 이 코드를 더 전문적으로 보이게 만들어보겠습니다.

[06:03] 선형 그라데이션 배경을 추가하고

[06:07] 헤더와 푸터를 넣어서

[06:11] 'developers digest Tetris'라고 이름 붙여보겠습니다.

[06:15] 응답이 왔네요.

[06:18] 이제 이것을 삽입해보겠습니다.

[06:20] 우리 파일이 이제

[06:23] 376줄의 코드가 되었네요. 저장해보겠습니다.

[06:26] 어떻게 보이는지 확인해볼까요?

[06:27] developers digest Tetris가 나왔는데

[06:30] 조금 나아졌지만 아직 부족하네요.

[06:32] 마음에 들지 않는다면

[06:33] tetris.com 사이트에서

[06:35] 영감을 얻어볼 수 있습니다.

[06:37] 예를 들어 이 사진을 찍어서

[06:40] Code LLM으로 돌아가보면

[06:43] 여러분이 할 수 있는 것은

[06:44] 파일을 추가하고 업로드할 수 있습니다.

[06:46] 제 테트리스 버전이

[06:49] 이 웹사이트에서 영감을 받아 더 많은 색상을 사용하고

[06:54] 훨씬 더 전문적으로 보이게 만들고 싶다고 하겠습니다.

[06:59] 자, 이제 이것을 삽입해보면

[07:02] 상당히 많은 코드가 생성되었네요.

[07:05] 400줄의 코드가 되었습니다.

[07:07] 테트리스 게임으로 돌아가보면

[07:09] 이제 좀 더 나아보이네요.

[07:11] 물론 왼쪽에 치우쳐있어서

[07:13] 이를 수정하도록 요청하거나

[07:15] 직접 수정해야 할 것 같습니다.

[07:18] 01의 응답이 마음에 들지 않아서

[07:20] Sonnet으로 다시 시도해보겠습니다.

[07:23] 테트리스를 전체 화면으로 개선하고 싶다고 해보죠.

[07:26] 이러한 최신 모델들을

[07:27] 사용하다 보면

[07:29] 각 모델마다 특정한

[07:31] 강점이 있다는 것을 알게 됩니다.

[07:33] Sonnet은 빠른 응답과

[07:36] 전반적으로 우수한 코드를 생성하는데

[07:38] 대부분의 사람들이 일상적으로

[07:40] Sonnet을 사용한다고 봅니다.

[07:42] 이 도구의 좋은 점은

[07:44] 가장 강력한 코딩 모델을 사용하고 싶다면

[07:47] 제가 알기로는 이 에디터만이

[07:49] 매우 관대한 사용량 제한으로

[07:52] 01, R1 그리고

[07:54] Sonnet 3.5와 같은 모델들에 접근할 수 있습니다.

[07:57] 다른 솔루션들은 대부분

[08:00] 크레딧 기반 시스템을 제공하여

[08:01] 월별 토큰 수로

[08:03] 모델 접근을 제한합니다.

[08:05] Sonnet 3.5나 01, 01 mini와 같은 모델들은

[08:08] 저렴하지 않은 모델들입니다.

[08:11] Code LLM의 특별한 점은

[08:14] 새로운 모델이 출시되면

[08:16] 매우 빠르게

[08:18] 플랫폼에 통합한다는 것입니다.

[08:20] 가격이나 제공업체에 관계없이

[08:23] 01이나 Deep Seek, 또는

[08:26] Anthropic에서 새로운

[08:28] Stall 모델이 나오더라도

[08:31] 확실히 포함될 것입니다.

[08:33] 그리고 또 한가지

[08:34] 플랫폼 접근과 관련해서

[08:36] Code LLM은 월 10달러이며

[08:38] 구독하면 웹 인터페이스도

[08:41] 사용할 수 있습니다.

[08:42] 웹앱에는 많은 기능들이 있는데

[08:44] Chat LM에 대해서는 자세히 다루지 않겠습니다.

[08:46] 제 채널에 관련 영상이 있으니 참고하세요.

[08:49] 채널에서 확인해 보실 수 있는데요,

[08:50] 간단히 설명드리자면

[08:51] 이 플랫폼에서 접근할 수 있는

[08:53] 모델들로는 GPT-4, Claude-1, Mini-1, R1 등이 있고

[08:56] 정말 다양한 모델들이 있습니다. Gro도 있고

[08:59] DeepSeek B3도 있고

[09:00] Llama 시리즈 모델들도 있죠.

[09:03] 정말 많은 기능들이 내장되어 있습니다.

[09:05] 또 다른 특징으로는

[09:06] 원하는 항목의 컨텍스트를 쉽게 선택할 수 있고

[09:09] 또한 개별적으로 선택해서

[09:11] 우리가 작성한 자바스크립트나

[09:13] HTML을 참조할 수 있으며

[09:15] 이렇게 컨텍스트를 전달할 수 있습니다.

[09:17] 또한 대화도 가능한데

[09:19] 예를 들어 이렇게 물어볼 수 있죠.

[09:21] '리셋 버튼은 무엇을 하나요?

[09:24] 어떻게 작동하는지 설명해주세요'

[09:27] 자, 이렇게 물어보면

[09:30] 여기서 우리에게

[09:31] 설명을 제공할 텐데요.

[09:33] 응답을 보면 코드를 분석해서

[09:34] 리셋 버튼의 기능이 어떻게

[09:36] 작동하는지 설명하고 있습니다.

[09:38] 리셋 버튼에는 이벤트 리스너가 있어

[09:40] 클릭 시 다음 동작들이 실행되죠.

[09:42] 여기서 모든 단계를 볼 수 있고

[09:44] 각 부분이 무엇을 하는지 주석도 달아주었네요.

[09:47] 더 자세한 설명도 계속 이어집니다.

[09:49] 이런 기능은 잠재적으로

[09:52] 코드에서 까다로운 버그가 있을 때

[09:54] 유용하게 사용될 수 있습니다.

[09:56] Claude-1로 전환해서 최신 모델을 사용하고

[09:58] ChatGPT처럼 복사 붙여넣기 할 필요 없이

[10:00] 바로 사용할 수 있죠.

[10:02] 코드베이스 내에서 관련 부분을

[10:04] 빠르게 참조할 수 있고

[10:06] 이렇게 관련 부분을 선택해서

[10:08] 포함시킬 수 있습니다.

[10:10] 다음으로 목록을 보면

[10:12] Code LLM이라는 것이 있는데

[10:14] 이것은 특정 쿼리를 할 때 사용됩니다.

[10:16] 예를 들어 'HTML을 개선하고 싶은데

[10:19] 더 전문적으로 보이게 만들고

[10:21] 네비게이션 항목들과

[10:23] 전문적인 푸터를 추가해주세요'라고

[10:26] 요청하면

[10:28] 자, 이제 전송해보겠습니다.

[10:31] 전송하자마자 보시다시피

[10:32] 우리 작업 공간에 있는

[10:34] 예제의 관련 컨텍스트를 가져왔고

[10:36] 모델 라우터를 사용해서

[10:39] 요청을 효과적으로 분류했습니다.

[10:41] 모델 라우터를 사용해보지 않으셨다면,

[10:43] 작동 방식은 이렇습니다.

[10:45] 요청을 빠르게 살펴보고

[10:47] 이것이 Sonet을 사용해야 하는지

[10:49] 판단하게 됩니다.

[10:51] 앞뒤로 전환할 필요 없이

[10:53] 요청에 따라 가장 적합한 모델을

[10:55] 자동으로 선택해서 사용합니다.

[10:58] 그리고 마지막으로

[11:00] 언급하고 싶은 것은

[11:01] 이 영상을 녹화하는 시점에

[11:03] 소개 프로모션으로 무제한 쿼터를

[11:05] 제공하고 있다는 점입니다.

[11:07] Claude-1 Mini, DeepSeek R1, Qwen, Sonet 3.5에

[11:11] 접근할 수 있고

[11:14] 앞으로 Anthropic이나

[11:15] Google의 새로운 모델들이 나오면

[11:18] 특히 코드에 특화된 모델들도

[11:19] 이 플랫폼에 추가될 것 같습니다.

[11:22] 자, 이것으로 마무리하겠습니다.

[11:24] 이 영상이 도움이 되셨다면

[11:25] 좋아요, 댓글, 구독 부탁드립니다.

[11:26] 다음 영상에서 만나뵙겠습니다.

[11:28] 감사합니다.