풀스택 AI 에이전트들이 엄청나게 잘해지고 있다!

All About AI 구독자 189,000명

요약

이 영상은 풀스택 AI 에이전트를 활용해 LLM API 가격 비교와 모델 성능 평가를 위한 웹앱을 쉽고 빠르게 구축하는 과정을 담고 있습니다. 프롬프트 작성, 디자인 설정, 데이터베이스 통합 및 API 연동, 단계별 태스크 수행 등 다양한 기능이 실시간 데모로 진행됩니다. 영상은 사용자가 직접 작업하면서 코드 수정과 배포 과정을 경험할 수 있도록 하여, 개발 효율성을 높이는 방법을 제시합니다. 마지막에는 향후 업데이트와 추가 기능 개발 가능성에 대해 언급하며 AI 기술의 혁신적 활용 사례를 전달합니다.

주요 키워드

풀스택 AI 데이터 버튼 프롬프트 Supabase 랜딩 페이지 모델 비교 코드 수정 배포 API 가격 비용 효과성

하이라이트

🔑 풀스택 AI 에이전트를 활용해 웹앱을 간편하게 구축하는 전 과정을 실시간 데모로 보여줍니다.
🚀 프롬프트를 작성하여 API 가격과 모델 성능 비교 기능을 명확하게 설정하는 방법을 소개합니다.
🌟 독창적인 다크 테마 디자인과 매트릭스 그린, 보라색 하이라이트로 시각적 매력을 더합니다.
📌 Supabase 데이터베이스 통합과 API 키 연동 과정을 통해 데이터 관리가 용이해짐을 보여줍니다.
⚡️ 단계별 태스크 수행과 실시간 코드 수정 기능으로 개발 효율성을 극대화하는 모습을 확인할 수 있습니다.
🚀 모델 데이터 입력 및 비용 대비 성능 비교 기능에서 라이브 벤치 점수를 활용하는 점이 돋보입니다.
🌟 간단한 배포 과정으로 번거로움 없이 웹앱을 실시간으로 배포할 수 있음을 강조합니다.
📌 AI 에이전트를 통한 자동화가 전통적인 코딩 및 앱 개발 프로세스를 혁신적으로 변화시킵니다.
🔑 영상 후반부에서는 지속적인 업데이트와 추가 기능 개발 가능성을 암시하며 사용자 참여를 유도합니다.

용어 설명

풀스택 AI 에이전트

전체 시스템 구축에 있어 인공지능 기반 자동화 도구를 활용한 종합적인 개발 방법을 의미합니다.

Supabase

오픈소스 백엔드 서비스로 데이터베이스 관리와 API 연동에 사용되는 플랫폼을 의미합니다.

프롬프트

AI 시스템에 특정 목표나 작업을 전달하기 위해 작성하는 입력 명령어를 의미합니다.

영상 초반, 풀스택 AI 에이전트를 활용해 LLM API 가격 비교 및 모델 성능 평가 웹앱 구축 목표를 소개합니다.

[00:00] 풀스택 AI 에이전트를 사용해 새로운 앱을 개발하려는 계획을 소개합니다. 최근 업그레이드된 데이터 버튼의 AI 에이전트를 활용할 예정입니다.

앱의 기능 요구사항과 디자인 테마를 정의하며 프롬프트를 통해 필요한 요소들을 전달하는 과정을 보여줍니다.

[00:32] 개발하고자 하는 앱은 다양한 LLM API 제공업체들의 가격을 비교할 수 있는 도구입니다. 모델명, 벤치마크 점수, 가격 정보 등을 포함하며, Supabase DB에 저장하고 그래프로 시각화할 계획입니다.

[00:54] 디자인은 매트릭스 스타일의 다크 테마를 적용하며, 초록색과 보라색 하이라이트를 사용할 예정입니다.

[01:22] 데이터 버튼 플랫폼에서 프로젝트 설정을 진행하며, UI 디자인 참고용으로 기존 웹사이트 스크린샷을 업로드했습니다.

[02:16] Supabase 데이터베이스 통합을 설정하고, 풀스택 AI 엔지니어처럼 작동하는 데이터 버튼의 자동 개발 기능을 시작합니다.

Supabase 데이터베이스를 설정하고 API 키 및 URL을 연동하여 데이터 관리 환경을 구축하는 단계를 설명합니다.

[02:57] 8개의 할 일 목록을 확인하고 웹 앱 구축을 위한 단계별 계획을 수립했습니다. 첫 번째 작업으로 랜딩 페이지 제작을 시작하기로 결정했습니다.

랜딩 페이지를 생성하고 단계별 작업(태스크) 목록을 통해 디자인 수정 및 코드 편집 과정을 진행하는 모습을 보여줍니다.

[03:36] 컴포넌트와 타입스크립트를 사용하여 레트로 퓨처리스틱 스타일의 랜딩 페이지를 구현하기 시작했습니다.

[03:52] Press 2p 폰트를 추가하고 하얀색 하이라이트를 보강하여 랜딩 페이지의 디자인을 개선했습니다.

[04:41] 첫 번째 작업을 마무리하고 두 번째 작업인 LLM 2로 넘어가기로 결정했습니다.

[05:08] Supabase 데이터베이스 설정을 시작하고, SQL 코드를 이용해 providers와 Model 테이블을 생성했습니다.

[05:41] 데이터베이스 연결을 위해 API 설정을 구성하고 샘플 데이터 추가를 시도했습니다.

[06:05] 데이터베이스에 샘플 데이터가 성공적으로 추가되었으며, 기존 샘플 데이터를 삭제하고 새로운 데이터를 추가할 준비를 합니다.

[06:18] 1단계와 2단계를 완료하고, 3단계인 모델 입력 폼 생성을 시작합니다.

[06:41] 풀스택 AI 에이전트의 장점으로, 백그라운드에서 작업이 진행되는 동안 다른 작업도 동시에 수행할 수 있습니다.

모델 입력 폼을 생성하여 라이브 벤치 점수, 입력/출력 가격 등 데이터를 추가하고, 비용 대비 성능을 비교하는 기능을 시연합니다.

[07:12] OpenAI의 O3 mini 모델을 추가하면서 입력 가격 1.10, 출력 가격 4.55, 코딩 평균 82.7점의 데이터를 입력합니다.

[08:10] 데이터 입력이 성공적으로 완료되었으며, 다음 단계로 그래프 비교, 모델 리스팅, 데이터 관리 등의 기능을 구현할 계획입니다.

[08:59] 모든 단계가 완료되었고, 최종 웹 앱에서 모델 비교, 그래프 표시 등 다양한 기능이 성공적으로 구현되었습니다.

[09:33] 모델 비교 기능을 살펴보면서 O3 mini와 Deeps R1의 비용 효율성을 비교. Deeps R1이 달러당 더 높은 LiveBench 포인트를 보여줌.

[10:34] Anthropic의 Claude 3.5 모델을 추가하고 입력/출력 가격과 LiveBench 점수를 설정. 비용이 높지만 성능도 우수함을 확인.

[11:30] 모델들의 비용 효율성을 비교한 결과, 대부분의 경우 O3 mini가 가격 대비 성능이 좋은 선택임을 확인.

[12:00] 데이터 버튼을 사용한 앱 개발 과정과 코드 편집, 설정 관리 등 다양한 기능을 설명.

[12:34] 앱 배포 과정을 보여주며, 사용자 이름 설정과 배포 완료 후 실제 동작을 확인.

웹앱을 배포하는 과정을 통해 실시간 결과를 확인하며, 향후 업데이트 및 추가 기능 개발 가능성을 언급하며 마무리합니다.

[13:12] 앱 배포의 복잡성을 줄이는 방법에 대해 설명하며, 모델을 로딩하고 확인하는 과정을 보여줍니다.

[13:26] Vercel이나 Firebase 같은 플랫폼에서의 배포가 기술에 익숙하지 않은 사람들에게 어려울 수 있다는 점을 설명합니다.

[13:49] 앱의 지속적인 업데이트 계획과 API 가격 관리에 대한 설명, Data Button을 이용한 프론트엔드 프로젝트 개발 계획을 공유합니다.

[14:14] Data Button의 파이썬 코드 실행 기능과 향후 더 고급 기능을 다룰 예정임을 안내합니다.

[14:38] 제품 할인 및 추가 크레딧 제공에 대해 안내하고, AI 에이전트의 미래와 웹 앱 개발 방식의 변화를 설명합니다.

[15:11] 일회성 소프트웨어 개발의 예시로 판타지 풋볼 앱 개발 경험을 공유하고, 도구의 발전과 활용 가능성에 대해 이야기합니다.

[00:00] 오늘 영상은 정말 흥미진진할 것 같네요

[00:01] 전체 스택 AI 에이전트를 테스트한 지 꽤 시간이 지났는데요

[00:03] 이번에는 이러한 풀스택 AI 에이전트들을 한번 시도해보려고 합니다

[00:05] 앱을 하나 만들어보려고 하는데요

[00:08] 곧 어떤 앱을 만들지 보여드리겠습니다

[00:09] 지금 데이터 버튼 사이트에 있는데요

[00:12] 그들이 최신 AI 에이전트를 업그레이드했더라고요

[00:14] 오늘 한번 사용해보도록 하겠습니다

[00:16] 일단 여기서 시작해서

[00:18] 새 앱을 클릭하면 됩니다

[00:20] 보시다시피 설명이 필요한데요

[00:22] 프롬프트가 필요해서 미리 준비해왔습니다

[00:25] 오늘 만들고 싶은 것에 대해 간단히 설명해드리겠습니다

[00:27] 저는 제가 평소 사용하는 XML 태그 프롬프팅을 사용할 건데요

[00:30] 다양한 제공업체와 모델들의 LLM API 가격을

[00:32] 비교할 수 있는 앱을 만들고 싶습니다

[00:34] 필요한 기능으로는 이름, 모델명

[00:37] 라이브 벤치마킹 점수가 있고

[00:39] 백만 토큰당 가격 등이 있습니다

[00:41] 이 데이터들을 Supabase DB에 저장하고 싶고

[00:44] 그래프 시각화도 추가해서 비교할 수 있게 하고 싶습니다

[00:47] 꽤 멋질 것 같네요

[00:50] 두 모델을 나란히 놓고

[00:52] 비교할 수 있게 하고 싶고

[00:54] 디자인은 다크 블랙 테마에

[00:55] 매트릭스 스타일의 초록색과 보라색 하이라이트를 넣을 겁니다

[00:58] 자, 이제 제가 준비한 프롬프트를 가져와서

[01:01] 데이터 버튼에 붙여넣기 하겠습니다

[01:02] 이렇게 복잡하게 프롬프트를 작성할 필요는 없습니다

[01:05] 원하시는 대로 하시면 됩니다

[01:06] 자, 이제 데이터 버튼으로 돌아가서

[01:08] 여기에 붙여넣기를 하면 되는데

[01:11] 이런 방식으로 프롬프트를 작성하면 됩니다

[01:14] 자, 이제 요구사항이 나오는데요

[01:17] 이미 작업해 놓은 것이 있는지 묻네요

[01:19] 여기서 피드백을 좀 줘야겠는데

[01:22] 이 영상이 스폰서 영상이라

[01:24] 건너뛰기 버튼을 추가하면 좋겠다고

[01:26] 피드백을 드렸습니다

[01:29] 작업해놓은 게 없어서

[01:31] 좀 헷갈릴 수 있거든요

[01:33] 일단 계속 진행하도록 하겠습니다

[01:35] 다음으로 디자인 영감이 있냐고 묻는데

[01:37] 있습니다

[01:39] 제 웹페이지를 보여드리려고 하는데요

[01:42] 이건 제 웹사이트 스크린샷입니다

[01:45] 이런 스타일이 마음에 들어서

[01:47] 이걸 유지하려고 합니다

[01:49] 이 파일을 업로드하기만 하면 되는데

[01:51] 여기에 드래그앤드롭하면 됩니다

[01:53] 네, 간단하게 디자인이 정해졌네요

[01:55] 설명에서 언급했듯이

[01:58] 디자인에서 다크 블랙 테마를 원한다고 했으니

[02:00] 이 부분은 지우고

[02:03] 다크 블랙 테마만 유지하거나

[02:06] 아니면 업로드한 이미지를

[02:08] 따르도록 하면 될 것 같네요

[02:11] 괜찮을 것 같습니다

[02:14] 자, 이제 파일이 준비되었으니

[02:16] 통합 부분으로 가보겠습니다

[02:19] 말씀드렸듯이 Supabase 데이터베이스에

[02:21] LLM 값들을 저장하고 싶습니다

[02:24] 이제 '시작하기'를 누르면 되는데

[02:27] 데이터 버튼의 정말 멋진 점은

[02:29] 풀스택 AI 엔지니어처럼 동작한다는 거예요

[02:32] 대부분의 개발을 완전 자율적으로 수행합니다

[02:35] 녹화하기 전에 먼저 데모를 해봤는데

[02:38] 꽤 만족스러웠어요

[02:41] 많은 부분을 제대로 처리하더라고요

[02:43] 이 영상에서 그 부분을 보여드리도록 하겠습니다

[02:46] 지금은 백그라운드에서 작업이 진행될 텐데

[02:49] 이 영상에서 보여드리도록 하겠습니다

[02:50] 작업이 시작되면 다시 돌아오도록 하겠습니다

[02:52] 자, 이제 시작이 됐네요

[02:55] 좋습니다

[02:57] 꽤 빠르게 진행됐네요. 여기를 보시면

[02:59] 8개의 서로 다른 할 일 목록이 있습니다.

[03:01] 이걸 하나씩 살펴보면, 우리가 어떻게

[03:04] 웹 앱을 만들어 나갈지에 대한 단계별 계획이 있죠.

[03:07] 우리가 만들 것을 웹 앱이라고 부를 수 있겠네요.

[03:10] 저는 LLM 1부터 시작하는 것을 제안합니다.

[03:13] 첫 번째 작업은 랜딩 페이지를 만드는 것인데,

[03:16] 이것에 대해 어떻게 생각하시나요?

[03:18] 네, 한번 해보죠. 이제 보시면

[03:21] 에이전트의 데이터 버튼이

[03:24] 단계별 계획을 수행하고 있고

[03:27] 물론 우리가 가지고 있는 할 일 목록을

[03:29] 가져올 것입니다. 첫 번째 단계는

[03:31] 레트로 퓨처리스틱한 랜딩 페이지를

[03:33] 만드는 것이고, 이것을

[03:36] 아마도 컴포넌트와 타입스크립트를 사용해서

[03:38] 구축할 것 같습니다.

[03:42] 자, 이제 에이전트가 실행되도록 두고

[03:44] 완료되면 미리보기를 확인해보겠습니다.

[03:47] 좋습니다, 이제 완료되었네요.

[03:51] 여기서 볼 수 있듯이 에이전트가 물어보는데

[03:52] 픽셀 아트 타이포그래피를 위한

[03:54] Press 2p 폰트만 빠져있네요.

[03:57] 추가해드릴까요?

[03:59] 네, 한번 시도해보죠.

[04:02] 미리보기를 보면 약간 화이트가

[04:03] 부족한 것 같아요. 제가 업로드했을 때는

[04:07] 이것보다 더 하얀색이 많았거든요.

[04:10] 그래서 랜딩 페이지에

[04:12] 하얀색 하이라이트를 좀 더 추가해보겠습니다.

[04:14] 한번 시도해보고, 에이전트가 코드를 업데이트하면

[04:17] 다시 돌아오겠습니다.

[04:20] 좋습니다. 이제 폰트도 추가했고

[04:22] 변경사항도 적용했네요.

[04:24] 미리보기를 보시면

[04:26] 훨씬 더 좋아보이네요.

[04:28] 이 부분이 약간 이상하긴 하지만

[04:31] 나중에 수정할 수 있을 것 같아요.

[04:33] 지금은 랜딩 페이지에 만족합니다.

[04:35] 폰트와 스타일이 마음에 드네요.

[04:38] 이제 다음 단계로 넘어갈 수 있습니다.

[04:41] 다음 단계는 LLM 2가 될 텐데

[04:43] 작업 시작 버튼을 클릭하면 됩니다.

[04:45] 여기서 이전 작업을 완료로 표시할 수도 있고요.

[04:49] 음, 그것을 위해서는 잠시 기다려야 할 것 같네요.

[04:54] 2번 작업을 완료하고 나서

[04:56] 1번 작업을 완료로 표시할 수 있을 것 같습니다.

[04:58] 2번 작업을 위해서는

[05:01] Supabase 데이터베이스를 설정해야 하는데

[05:03] 아마도 키와 URL을 입력해야 할 거예요.

[05:05] 그게 거의 전부일 것 같네요.

[05:08] 좋습니다. 이제 Supabase DB를 위한

[05:10] 코드가 있는데, 이제 해야 할 일은

[05:13] 에이전트가 제공한 SQL 코드를

[05:15] 가져와야 합니다.

[05:18] 이것을 생성해야 하니까요.

[05:20] Supabase SQL 에디터로 가서 이것을 붙여넣고

[05:23] 실행을 클릭하면 됩니다. 완벽하네요.

[05:26] 성공적으로 실행되었습니다.

[05:29] 이제

[05:30] 테이블 에디터로 가보면 providers라는 DB와

[05:32] Model이라는 DB가 있는 것을 볼 수 있습니다.

[05:36] 이게 모델 이름이네요, 좋습니다.

[05:39] 잘 된 것 같은데

[05:41] 한 가지 더 해야 할 일이 있습니다.

[05:42] 에이전트가 데이터베이스에 연결할 수 있도록

[05:45] API 설정을 제공해야 합니다.

[05:48] 프로젝트 설정의 Data API로 가서

[05:51] URL과 키를 가져와서

[05:55] 에이전트에 전달하면

[05:57] 계속 진행할 수 있을 것 같네요.

[05:59] 완료됐네요. 보시다시피 에이전트가

[06:02] 샘플 데이터를 추가하려고 했어요.

[06:03] 한번 확인해볼까요?

[06:05] 우리의 데이터베이스가 여기 있네요, 완벽해요.

[06:08] 샘플 데이터가 잘 추가되었어요.

[06:11] 이제 이것을 삭제해도 될 것 같아요.

[06:13] 더 이상 필요하지 않으니까요.

[06:15] 나중에 우리만의 데이터를 추가할 거거든요.

[06:18] 이제 2단계를 완료했네요, 정말 좋아요.

[06:21] 1단계를 완료 표시하고

[06:24] 2단계도 완료 표시를 해두겠습니다.

[06:28] 그리고 이제 3단계로 넘어갈 수 있어요.

[06:31] 이제 3단계로 넘어가볼게요.

[06:34] 모델 입력 폼을 만들어서

[06:35] 데이터베이스에 추가할 수 있도록 할 거예요.

[06:39] 이 작업을 시작해볼게요.

[06:41] 제가 생각하기에 정말 멋진 점은

[06:42] 이런 풀스택 자율 AI 에이전트의

[06:45] 특징이라고 할 수 있는데요.

[06:48] 이게 백그라운드에서 작업하는 동안

[06:50] 지금 보시는 것처럼 영상 편집도 할 수 있고

[06:53] 다른 많은 일들도 할 수 있어요.

[06:56] 이게 실행되는 동안

[06:57] 백그라운드에서 돌아가고 있고

[07:00] 커서로 이동할 수도 있죠.

[07:02] 여러 가지 일을 동시에 할 수 있어요.

[07:05] 최근 며칠 동안 데이터 버튼을 가지고

[07:07] 놀면서 정말 즐거웠어요.

[07:09] 이제 데이터를 추가해볼까요?

[07:12] 모델 추가 페이지가 있네요.

[07:14] 창을 좀 더 크게 열어볼게요.

[07:17] 자, 데이터를 추가해보도록 하죠.

[07:21] OpenAI의 O3 mini를 추가해볼게요.

[07:24] 입력 가격이 1.10 정도이고

[07:28] 출력 가격은

[07:31] 4.55입니다.

[07:35] 벤치마크 점수도 확인해볼게요.

[07:38] O3 mini High의

[07:41] 코딩 평균이

[07:45] 82.7점이에요. 다시 돌아가서

[07:49] 82.7을

[07:50] 입력하고 추가해볼게요.

[07:55] 우리의

[07:57] 데이터베이스를 확인해보면, 잘 들어갔네요.

[08:00] 페이지를 찾을 수 없다고 나오는 건

[08:03] 아직 이 페이지를

[08:05] 만들지 않았기 때문이에요.

[08:07] 다음 단계에서 만들 예정이에요.

[08:10] 지금까지는 잘 진행됐네요.

[08:12] 이제 계속 진행해볼게요.

[08:16] 완료 표시를 하고,

[08:19] 나머지 단계들을 빠르게 진행할게요.

[08:21] 그래프 사이드 바이 사이드 비교,

[08:23] 모델 리스팅, 데이터 추가,

[08:26] 데이터 관리와 업데이트,

[08:29] 마지막으로 네비게이션과

[08:32] 레이아웃 수정을 구현할 거예요.

[08:36] 마지막 다섯 단계를

[08:37] 빠르게 진행할 텐데요.

[08:39] 에이전트가 백그라운드에서 실행되는 동안

[08:42] 작업이 진행되는 모습을 보실 수 있을 거예요.

[08:44] 그리고 최종적으로

[08:45] 우리가 만든 웹 앱을 살펴볼 건데요.

[08:48] 30분 정도면 충분할 것 같아요.

[08:53] [음악]

[08:59] 자, 이제 다 됐네요.

[09:01] 모든 단계가 초록색으로 완료됐고

[09:04] 미리보기를 확인해볼까요? 와, 정말 좋네요.

[09:07] 테스트도 해봤는데

[09:10] 정말 인상적이에요.

[09:12] 모델 페이지로 가보면

[09:14] DeepSeek 모델을 추가했고

[09:16] 창을 좀 더 크게 열어볼게요.

[09:19] 여기가 랜딩 페이지고

[09:21] 모델 페이지로 가보면

[09:23] DeepSeek R1과 가격 정보가 있고

[09:26] 비교도 할 수 있어요.

[09:29] 그래프를 클릭하면

[09:31] 모델들이 그래프에 표시되는 걸 볼 수 있죠.

[09:33] 여기서 비교를 클릭하면

[09:35] 모델을 선택할 수 있습니다. O3 mini를 선택하고

[09:39] Deeps R1과 비교해보겠습니다. 여기서 볼 수 있는

[09:42] 비용 효율성은 아마도

[09:44] LiveBench 점수를 가격으로 나눈 값일 겁니다.

[09:47] 여기서 보면

[09:52] 달러당 14.6%의 LiveBench 포인트가 나오고

[09:57] Deeps R1은 달러당 24포인트가 나옵니다.

[10:01] 이것이 더 저렴하지만

[10:05] 물론 LIB 점수는 좀 더 낮습니다.

[10:08] 제가 생각하기에 비용

[10:10] 효율성을 지능과 비교해서

[10:13] 그래프에 표시하는 것이

[10:15] 좋을 것 같네요. 꽤 흥미롭죠.

[10:19] 우리가 이걸 바꿀 수도 있지만

[10:20] 그래도 전반적으로는

[10:23] 만족스럽습니다. 이런 스타일이

[10:24] 마음에 드네요.

[10:28] 아래쪽에서 모델 추가를 클릭하면

[10:30] 페이지에 더 많은 모델을 추가할 수 있습니다.

[10:32] 자, 한번 해볼까요?

[10:34] Anthropic의 Claude 3.5를 추가해보죠.

[10:40] 입력 가격을 보면 꽤

[10:42] 비싼 모델이네요. 3달러입니다.

[10:46] 3.0을 입력하고, 출력은

[10:51] 음...

[10:52] 15달러나 되네요.

[10:55] 정말 비싸죠. 15.0을 입력하고

[10:59] 이 모델의 LiveBench 점수는...음...

[11:06] 67.1입니다.

[11:08] 67.1을 추가해보죠.

[11:11] 좋습니다. 이제 완료됐네요.

[11:14] 이제 Claude가 여기 있는 걸 볼 수 있죠.

[11:16] 달러당 포인트를 보면

[11:18] 3.7로 큰 차이가 납니다.

[11:21] Claude를 여기서 비교해볼까요? O3와 비교하면

[11:25] 포인트 효율성을 볼 수 있는데

[11:30] 가격에 비해 점수가 낮네요.

[11:32] 대부분의 경우에는

[11:35] 비용 효율성을 원한다면 O3 mini를 선택하는 게

[11:39] 좋을 것 같네요. 이건

[11:41] 계속 작업할 예정입니다.

[11:43] 이런 기능을 추가하는 게 꽤 멋진 것 같고

[11:45] 물론 아직 완벽하진 않지만

[11:48] 이걸 통해 보여주고 싶었던 건

[11:51] 제가 사용하고 싶은 빠른 앱을

[11:54] 데이터 버튼으로 얼마나 쉽게 만들 수 있는지

[11:57] 정말 간단했죠.

[12:00] 태스크를 시작하고 체크인하고

[12:01] 몇 가지를 수정했을 뿐이에요. 이제

[12:04] 코드를 편집할 수도 있고

[12:07] 코드를 내보낼 수 있는 옵션도 있어서

[12:09] Cursor에서 계속 작업할 수 있고

[12:12] 오프라인에서도 가능하죠.

[12:14] 설정 부분은 아직 보여드리지 않았는데

[12:16] 여기서 Supabase URL이나

[12:19] Supabase 키같은 시크릿을 볼 수 있고

[12:21] 다른 API 키들도 추가할 수 있습니다.

[12:23] 디자인도 제어할 수 있고

[12:26] 확장 기능도 있어서

[12:28] 커스텀 도메인 같은

[12:30] 나중에 할 수 있는 것들이 많이 있죠.

[12:33] 이제 다음으로 할 일은

[12:34] 플랜으로 돌아가서 배포 버튼을

[12:37] 클릭하는 거예요. 배포를 클릭하면

[12:39] 공개 계정 사용자 이름을

[12:41] 설정해야 한다고 나오네요.

[12:44] 사용자 이름을 선택해보죠.

[12:46] 'aaaChris' 이런 식으로 하면 될 것 같네요.

[12:50] 확인했고, 이제 이름도 설정했으니

[12:53] 배포를 클릭하고 'llm bench'라고

[12:56] 하겠습니다. 좋네요. llm bench로

[13:00] 배포하고 실행되는걸 기다려볼게요.

[13:03] 라이브로 올라가는지 확인해보죠.

[13:05] 시크릿 창을 열어서

[13:07] 주소를 붙여넣으면... 짜잔! 됐네요!

[13:10] 정말 멋지지 않나요?

[13:12] 이렇게 하면 앱 배포가 얼마나 어려운지에 대한

[13:16] 모델로 가보시면 우리가 지금

[13:18] 모델들을 로딩하고 있는 것을 볼 수 있죠. 완벽해요

[13:21] 이런 방식으로 배포할 때의

[13:23] 번거로움을 줄일 수 있습니다

[13:26] 기술에 익숙하지 않은 사람들에게는

[13:28] Vercel에 배포하는 것이 매우 어려울 수 있죠

[13:31] 설정해야 할 것들이 많고

[13:32] Firebase나 다른 프레임워크들도

[13:36] 뭔가를 배포하려고 할 때

[13:38] 여전히 다루기 꽤 어렵습니다

[13:41] 그래서 저는 이것의 링크를

[13:42] 설명란에 남겨두겠습니다

[13:44] 원하시면 여기에 몇 가지 모델을 추가하실 수 있고

[13:46] 한번 시도해보실 수 있습니다

[13:49] 모델들을 비교해볼 수 있고, 이 앱은

[13:52] 제가 계속 업데이트할 예정입니다

[13:54] API 가격이 어떻게 변하는지

[13:56] 제가 직접 관리할 수 있어서 매우 기쁩니다

[13:58] 앞으로도 계속

[14:00] Data Button을 사용해서

[14:03] 프론트엔드 프로젝트를 만들 예정입니다

[14:05] 정말 쉽거든요. 오늘은

[14:08] 이런 풀스택 AI 에이전트로

[14:11] 할 수 있는 것들 중 일부만 보여드렸는데

[14:14] 할 수 있는 것들이 더 많습니다

[14:16] 예를 들어 Data Button은

[14:17] 파이썬 코드도 실행할 수 있어요

[14:20] 앞으로도 계속 탐구해볼 예정이고

[14:22] 나중에 다른 영상에서

[14:25] Data Button을 사용한 더 고급 기능들을

[14:28] 살펴볼 예정입니다만

[14:31] 정말 멋진 소프트웨어이고 제품입니다

[14:34] 설명란을 보시면

[14:36] 이제 링크가 있을 텐데

[14:38] 할인된 가격으로 시작해보실 수 있고

[14:41] 추가 크레딧도 받으실 수 있습니다

[14:42] 꼭 한번 확인해보세요

[14:45] 정말 멋진 제품이고, 이런 풀스택

[14:48] AI 에이전트와 AI 엔지니어들은

[14:51] 앞으로도 계속 있을 거라고 생각하고

[14:53] 우리가 웹 앱을 다루는 방식을 바꾸고 있죠

[14:57] 소프트웨어라고 할 수 있는데

[14:59] 개인용 소프트웨어라고 생각하시면 되고

[15:02] 음... 뭐라고 할까요

[15:06] 일회성이라고 할까요

[15:09] 일회성 소프트웨어처럼

[15:11] 간단한 용도의 앱을 빠르게 만들 수 있고

[15:13] 그게 정말 멋진 것 같아요

[15:15] 예를 들어 저와 제 친구들이

[15:18] 판타지 풋볼 앱을 만들었는데

[15:20] 내부적으로만 사용하고 수익화는 없지만

[15:23] 함께 플레이하고 있고

[15:25] 아주 잘 작동하고 있어요

[15:28] 이런 도구들을 가지고 놀면서

[15:29] 얼마나 발전했는지 보는 게

[15:32] 정말 재미있어요

[15:34] 설명란의 링크를 클릭해서 확인해보세요

[15:36] 정말 멋진 제품입니다

[15:39] 시청해주셔서 감사합니다

[15:40] 뭔가 배우셨길 바라고

[15:41] 여러분만의 것을 만들어보시길 바랍니다

[15:44] 곧 다시 만나요