신규: Claude 3.7 Sonnet + Cursor Agent = 최고의 AI 코딩 에이전트

Mckay Wrigley 구독자 18,200명

요약

이 영상은 최신 Claude 3.7 Sonnet과 Cursor Agent 업데이트를 활용해 슬랙 클론 애플리케이션을 처음부터 구축하는 과정을 보여줍니다. 발표자는 Shad CN CLI를 활용하여 빈 프로젝트에서 시작해 Git을 통한 버전 관리, 데이터베이스 구성, UI 컴포넌트 생성 등 전반적인 풀스택 개발 과정을 단계별로 진행합니다. AI 에이전트가 프롬프트를 받아 구체적인 작업 계획을 생성하고, 이를 통해 코드 자동화 및 오류 수정이 이루어지는 모습을 상세히 설명합니다. 이를 통해 초보자도 AI 도구의 도움으로 효율적이고 체계적으로 앱을 개발할 수 있음을 강조합니다.

주요 키워드

Claude 3.7 Sonnet Cursor Agent Slack Clone Shad CN CLI Git Drizzle Superbase UI Components AI 코딩 버전 관리

하이라이트

🔥 신규 모델 활용: Claude 3.7 Sonnet과 Cursor Agent의 동시 출시로 코딩 워크플로우가 획기적으로 향상됨을 보여줍니다.
🚀 슬랙 클론 구축: Git 초기화, 데이터베이스 스키마 구성, API 및 UI 컴포넌트 개발 등 전반적인 개발 단계가 상세히 설명됩니다.
🤖 AI 에이전트와의 상호작용: 요청 프롬프트와 계획 프롬프트를 통해 AI가 단계별 실행 계획을 자동으로 생성하는 과정을 강조합니다.
🛠️ 코드 자동화 및 디버깅: AI 도구가 코드 생성은 물론 오류를 스스로 파악하고 수정하는 모습을 통해 개발 효율성을 높입니다.
🎯 초보자 친화적 접근: 복잡해 보일 수 있는 풀스택 개발 프로세스를 AI의 도움으로 누구나 따라 할 수 있도록 쉽게 설명합니다.

용어 설명

Claude 3.7 Sonnet

최신 Claude 언어 모델 버전으로, 고급 자연어 처리 및 코드 생성을 지원하는 AI 도구입니다.

Cursor Agent

개발 과정에서 자동화된 코드 작성, 오류 수정, UI 구성 등의 작업을 수행하는 AI 에이전트를 의미합니다.

Shad CN CLI

빈 프로젝트를 신속하게 시작할 수 있도록 도와주는 커맨드 라인 인터페이스 도구로, 오픈 소스 템플릿 활용에 중점을 둡니다.

Drizzle

타입 안정성을 보장하는 ORM 도구로, 데이터베이스 스키마 구성 및 마이그레이션에 사용됩니다.

Superbase

백엔드 데이터베이스 서비스 플랫폼으로, 실시간 데이터베이스 연결 및 관리를 지원합니다.

영상은 Claude 3.7 Sonnet과 Cursor Agent를 소개하며, 이번 프로젝트의 목표와 개요를 설명합니다. 새 프로젝트를 빈 상태에서 시작하는 과정을 보여줍니다.

[00:00] Claude 3.7 Sonnet과 Cursor 0.46이 같은 날 출시되어 슬랙 클론 프로젝트를 시작하기로 결정했습니다.

[00:14] Shadcn CLI를 사용해 완전히 빈 프로젝트부터 시작하여, 새로운 모델과 Cursor 업데이트의 가능성을 탐색해보기로 했습니다.

[00:35] 기존 오픈소스 스타터 템플릿 대신 완전히 처음부터 프로젝트를 시작하여 개발 과정을 보여주기로 했습니다.

Shad CN CLI를 이용해 프로젝트를 초기화하고 Git으로 버전 관리를 설정하는 과정을 다룹니다. GitHub에 코드를 업로드하는 기본 절차를 설명합니다.

[01:03] Git 저장소를 초기화하고 GitHub에 프로젝트를 설정하며, 기본적인 개발 환경을 구성했습니다.

[01:42] 프론트엔드 설정을 확인하고 Supabase 프로젝트를 새로 생성하여 백엔드 환경을 준비했습니다.

AI에 프롬프트를 제공하여 슬랙 클론의 기능 목록과 단계별 개발 계획을 생성합니다. 요청 및 계획 프롬프트 사용법과 AI의 반응을 중점적으로 보여줍니다.

[02:08] 인증이나 결제 기능 대신 Claude 3.7 Sonnet과 Cursor 에이전트의 새로운 기능을 실험해보는 데 집중하기로 결정했습니다.

[02:58] 슬랙 클론 프로젝트를 시작하기 위해 Flow Voice를 사용하여 음성-텍스트 변환을 준비하고 있습니다.

[03:22] Claude 3.7 모델을 활용하여 슬랙 클론의 기능 목록을 작성하기 시작했습니다.

[03:49] 채널과 DM 기능, 메시지 스레딩, 검색 기능을 포함하고 실시간 기능과 파일 공유는 제외하기로 결정했습니다.

[04:50] 기술 스택으로 Next.js, Supabase, PostgreSQL, Drizzle, Tailwind, shadcn을 선택했습니다.

[05:12] Claude가 제안한 기본 요구사항을 검토하고 플래너 프롬프트를 준비하기 시작했습니다.

Drizzle과 Superbase를 활용해 데이터베이스 폴더와 스키마를 생성하고, 마이그레이션 과정을 진행합니다. 서버 측 API와 액션 설정도 포함됩니다.

[06:18] 새로운 Claude 인스턴스에서 단계별 계획을 수립하기 위한 준비를 진행 중입니다.

[07:05] 프로젝트 설정을 시작하면서 .gitignore 파일을 생성하고 public 디렉토리, .env.local, favicon 등을 무시 목록에 추가합니다.

[08:00] Shad CN으로 설치한 코드를 가져오고, 프로젝트 구조를 순차적으로 구성하기 시작합니다.

[08:37] Drizzle 설정을 위해 필요한 폴더와 파일들(actions, db 폴더, db.ts, drizzle.config.ts)을 생성합니다.

[09:16] Supabase 프로젝트 설정을 완료하고 DATABASE_URL을 포함한 환경 설정을 구성합니다.

[09:45] 누락된 패키지 설치를 위한 npm 명령어를 생성하고, scripts에 필요한 명령어를 추가합니다.

슬랙 클론의 핵심 UI 요소(사이드바, 헤더, 채팅 레이아웃 등)를 생성합니다. Shad CN 컴포넌트를 활용하며 AI 에이전트가 코드를 자동으로 생성하고 디버깅하는 모습을 보여줍니다.

[11:08] Claude를 통해 슬랙 클론 구축을 위한 약 15단계의 상세 계획을 생성하기 시작합니다.

[11:33] 계획을 옵시디언 에디터에 옮기고 Sonnet이 생성한 출력을 마크다운 블록 형식으로 수정하기로 결정했습니다.

[12:55] Claude 3.7 Sonnet이 CLI 앱에서 아티팩트로 너무 빨리 전환되는 점이 아쉽지만, 출시 초기이므로 큰 문제는 아니라고 판단했습니다.

[13:27] 데이터베이스 스키마 설계부터 시작하여, 인증 없이 프로필 테이블을 통해 가짜 사용자 데이터를 구현하기로 결정했습니다.

[14:49] 계획을 커서에 마크다운 파일로 추가하고, 카테고리별로 3.7 Sonnet 모델을 활용해 단계적으로 구현하기로 결정했습니다.

[15:26] 코드와 설정을 정리하고 검토하면서 배포 부분은 제외하기로 결정했습니다.

[15:43] 커서의 general.MDC 규칙을 설정하고 글로벌 적용을 활성화하여 모든 요청에 규칙이 적용되도록 했습니다.

[16:06] 슬랙 클론 프로젝트의 단계별 작업을 설정하고, 에이전트가 지정된 단계만 순차적으로 처리하도록 구성했습니다.

각종 채널, 메시지, DM, 스레드 기능의 오류를 수정하고, UI 및 API의 피드백을 통해 최적화를 진행합니다. 실제 사용 사례를 바탕으로 디버깅 과정을 상세히 설명합니다.

[17:02] 커서 에이전트를 통해 데이터베이스 설정 단계를 포함한 1-2단계 작업을 시작했습니다.

[18:00] Supabase와 Drizzle ORM을 사용하여 채널과 프로필 데이터베이스 스키마를 구성하고, 타입 안전성을 보장했습니다.

[18:34] 스키마 작성과 SQL 마이그레이션 파일 생성을 완료하고 Supabase 프로젝트에 테이블을 성공적으로 추가했습니다.

[19:14] Cursor 팀의 훌륭한 에러 처리 방식에 대해 칭찬하며, 보통은 최악일 수 있는 경험을 문제없게 만들었다고 평가합니다.

[19:36] 타입스크립트 시드 파일을 생성하고 프로필 데이터를 시딩하는 과정을 진행합니다.

[19:57] 기능 개발을 위한 효율적인 워크플로우를 설명하며, 1단계와 2단계 완료를 위한 코드 커밋의 중요성을 강조합니다.

[20:19] 초보 개발자들에게 버전 컨트롤의 중요성을 설명하고, 3단계와 4단계의 UI 컴포넌트 개발 계획을 소개합니다.

[20:46] 최소한의 코드 작성으로 슬랙 클론과 유사한 결과물을 만들 계획을 설명합니다.

[21:13] AI가 진행 과정에서 스키마를 조정할 수 있음을 언급하고, Shadcn 컴포넌트 사용을 제안합니다.

[22:22] Cursor의 체크포인트 기능의 유용성을 설명하고, 버전 관리 전략에 대해 조언합니다.

[22:39] 기존 컴포넌트 대신 gen-cn 컴포넌트를 사용하여 개발 시간을 절약하려 했으나, AI가 예상대로 동작하지 않는 문제가 발생했습니다.

[23:02] 새로운 Cursor UI와 Shadcn UI 환경에서 발생한 예상치 못한 문제를 해결하려 시도합니다.

[24:26] 컴포넌트 생성 명령어를 수정하고, 프론트엔드 규칙 파일 없이 완전히 처음부터 시작하는 과정에서의 차이점을 설명합니다.

[25:12] 사이드바, 헤더, 채팅 레이아웃 등 기본 UI 컴포넌트를 구축하고 TypeScript를 활용한 린터 에러 처리 방식을 설명합니다.

[26:11] 총 19개의 변경사항을 포함한 3단계와 4단계를 완료하고 프로젝트 진행 상황을 검토합니다.

[26:42] 에이전트를 리셋하고 5단계 작업을 시작합니다. 카테고리별로 작업을 진행하여 더 논리적이고 일관성 있는 결과를 얻고자 합니다.

[27:03] 커서 에이전트의 새로운 업데이트는 실제 개발자의 작업 방식과 유사하게 더 많은 검색을 수행하며, 이는 더 나은 결과물 생성으로 이어질 것으로 기대됩니다.

[27:29] 에이전트가 코드베이스에서 올바른 작업을 수행하려면 컨텍스트를 이해하고 적절한 온보딩 과정이 필요합니다.

[27:52] 5단계에서는 프로필 관리 유틸리티를 추가하며, 쿠키 기반의 가벼운 인증 시스템을 구현합니다.

[28:32] Next.js의 서버 액션을 통해 API 라우트를 함수 형태로 구현하며, 이는 서버 사이드에서 실행되는 효율적인 CRUD 작업을 가능하게 합니다.

[29:44] 6단계부터 9단계까지는 메시징 관련 기능인 채널, 메시지, 스레딩, DM 등을 구현할 예정입니다.

전체 프로젝트 과정을 리뷰하며, AI 모델과 도구를 활용한 개발의 효율성을 강조합니다. 초보자도 쉽게 앱을 구축할 수 있음을 강조하며 동기를 부여합니다.

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

[00:00] Claude 3.7 Sonnet과 Cursor 0.46이 같은 날 출시되어서

[00:03] 간단한 프로젝트를 진행해보면 재미있을 것 같았습니다.

[00:06] 이번에 우리가 만들어볼 것은

[00:07] 슬랙 클론을 만들어볼 건데

[00:09] 새로운 모델과

[00:10] 새로운 Cursor 업데이트를 사용해서 개발할 예정입니다.

[00:12] 그래서 바로 시작해보도록 하겠습니다.

[00:14] Shadcn CLI를 사용해서

[00:16] 완전히 빈 프로젝트부터 시작할 예정입니다.

[00:19] 얼마나 진행할 수 있을지는 모르겠지만

[00:23] 한번 시도해보고

[00:25] 어디까지 가능한지 살펴보도록 하겠습니다.

[00:29] 우리가 할 것은

[00:30] 진행하면서 확인해보도록 하겠습니다.

[00:33] 제가 다른 영상에서 말씀드렸듯이

[00:35] 보통은 제가 만든 오픈소스 스타터 템플릿으로

[00:38] 시작하는데, 이것도 완전히 오픈소스이고 무료입니다.

[00:40] 이건 홍보가 아니라

[00:42] 이번에는 그렇게 하지 않을 겁니다.

[00:45] 대신 완전히 처음부터

[00:47] 프로젝트를 시작하는 것이

[00:49] 어떤지 보여드리고 싶습니다.

[00:51] 말 그대로 완전히 처음부터

[00:53] 새로운 모델과 새로운 Cursor 업데이트로 시작해보겠습니다.

[00:57] 참고로 Cursor 업데이트는 정말 아름답네요.

[00:59] Cursor 팀에 박수를 보냅니다.

[01:01] 자, 이제 시작해보겠습니다.

[01:03] 먼저 Git 저장소를 초기화하겠습니다.

[01:07] 일단 private으로 만들고

[01:10] GitHub에서 열어보겠습니다.

[01:12] 여기로 드래그해서 가져오고

[01:14] 당연히 Git을 사용할 겁니다.

[01:17] Cursor 내의 체크포인트 기능이

[01:19] 훌륭하긴 하지만

[01:21] 버전 관리도 중요하니까요.

[01:23] 터미널을 열어서

[01:25] 초기 패키지들을 설치해야 합니다.

[01:28] 사실 이것도

[01:30] Shadcn 설정의 일부로

[01:32] 할 수 있었을 텐데 모르겠네요.

[01:34] 일단 npm run dev를 실행해서

[01:36] 제대로 작동하는지 확인해보겠습니다.

[01:38] 이게 프론트엔드에 필요한 거고

[01:40] 이게 실행되는 동안

[01:42] 잠깐 localhost:3000으로 돌아가보겠습니다.

[01:45] 실행되는 동안 새로운 Supabase 프로젝트를

[01:49] 만들어보겠습니다.

[01:51] 비밀번호는 잠시 화면 밖에서

[01:53] 복사해두겠습니다.

[01:55] 완전히 처음부터 시작한다는 걸 보여드리고 싶어서요.

[01:58] 프론트엔드와 백엔드 모두 다룰 텐데

[02:01] 인증이나 결제는

[02:02] 구현하지 않을 겁니다.

[02:05] 그런 내용은 제가 이미

[02:07] 다른 영상에서 많이 다뤘거든요.

[02:08] 이번에는 Cursor 에이전트와

[02:10] 새로운 Claude 3.7 Sonnet 모델로

[02:13] 어떤 것들이 가능한지 실험해보고 싶습니다.

[02:16] 가능성을 탐색해보는 거죠.

[02:19] 먼저 할 일은

[02:21] 아이디어 구상인데

[02:22] takeoff에 있는 프롬프트를

[02:24] 가져와보겠습니다.

[02:27] request 프롬프트와

[02:29] planner 프롬프트도

[02:31] 필요할 것 같네요.

[02:33] 이 프롬프트를 가져올 건데

[02:35] 이건 완전히 무료입니다.

[02:36] URL을 원하시는 분들은

[02:38] 자유롭게 가져가셔도 됩니다.

[02:41] 우리가 할 일은

[02:43] 이걸 Sonnet에 붙여넣을 건데

[02:47] 잠시만요, 먼저

[02:49] Obsidian에 새 파일을 만들어서

[02:51] slack-clone이라고 하고

[02:52] request 프롬프트라고 이름 붙이겠습니다.

[02:56] 이건 화면 밖에서 하고 다시 가져오겠습니다.

[02:58] 좋아요, 자, 우리가 할 일은

[03:00] 이 프롬프트를 붙여넣고

[03:02] 여기에 아이디어를 추가해야 합니다.

[03:04] Flow Voice를 사용해서

[03:06] 음성을 텍스트로 변환하도록 하겠습니다.

[03:10] 슬랙 클론을 만들 건데

[03:13] 기능 목록을 작성하는 데

[03:15] 도움을 받아보겠습니다.

[03:17] 좋아요, 이걸 가져와서

[03:19] 전부 선택한 다음

[03:21] 다른 모니터로 옮기고

[03:22] Claude 3.7 모델에 보내보겠습니다.

[03:26] 여기서 우리가 하고 있는 것은

[03:29] 기본적으로 Claude와 함께

[03:32] 기능들을 작업할 겁니다.

[03:37] Claude와 함께 기능 작업을 진행할 건데요

[03:42] 자, 이제 슬랙이라고

[03:46] 부르도록 하죠

[03:49] 클론이요. 타겟 사용자는 신경 쓰지 말고

[03:54] 채널과 DM 모두

[03:56] 필요합니다. 실시간 기능이나 파일 공유는

[04:01] 제외하고, 확실히 메시지

[04:04] 스레딩은 포함시키고

[04:07] 검색 기능도 필요하고

[04:12] 알림 기능은

[04:16] 포함하되

[04:18] 프로필은 제외합니다. 사용자 인증도 빼고

[04:23] 다른 것들은 뭐가 있었죠?

[04:27] 기본적으로 반응형으로 만들고

[04:32] 스타일링도 확인해 보죠.

[04:37] 거의 1:1 복제본으로

[04:41] 만들 겁니다.

[04:42] 스피드런 형식으로 진행할 거예요

[04:46] 하하, 그리고

[04:50] 통합은 Next.js와 Supabase, PostgreSQL

[04:54] Drizzle

[04:56] Tailwind와 shadcn도

[04:59] 포함시키죠

[05:03] 이제 이걸 보내면

[05:05] Claude가

[05:07] 응답할 거예요

[05:08] 기본적인 요구사항들을

[05:12] 보내줄 겁니다. 자, 채널 생성/참여

[05:14] 메시지 히스토리 보기, 개별 사용자

[05:16] 메시지, 대화

[05:18] 기록, 답글 스레드

[05:21] 검색, 알림

[05:24] 반응형, 일반적인 기술 스택까지.

[05:26] 완벽하네요. 이제

[05:28] 다음으로 할 일은

[05:30] 이 요구사항을 복사해서

[05:33] 여기에 넣을 겁니다. 나중에

[05:36] 필요하거든요. 그리고

[05:38] 저걸 옮기고

[05:39] 이제 플래너 프롬프트를

[05:41] 가져와서 복사하겠습니다.

[05:43] 이건 제가 평소에 하던

[05:46] 워크플로우와는 좀 다른데

[05:48] 보통은 프로젝트 규칙과

[05:50] 텍스트 스펙, 시작 템플릿을

[05:52] 가져오지만, 이번에는

[05:54] 그렇게 하지 않을 거예요.

[05:56] 그래서 그 부분은 제거하고

[05:58] 슬랙 클론이라고만

[06:00] 하겠습니다.

[06:02] 좀 더 단순화시키고

[06:04] 이걸 XML 태그 사이에 넣을 겁니다.

[06:07] 이제 Claude로부터

[06:09] 단계별 계획을 받을 거예요.

[06:14] 그리고 그 계획을 우리가

[06:16] 수정할 수 있죠.

[06:18] 이제 전체를 복사해서

[06:20] 새로운 Claude 인스턴스에 보내고

[06:23] 이제 작업을 시작하도록

[06:25] 하죠

[06:28] 음, 계획을 세워야 하는데요

[06:39] 단계별 계획이 나올 텐데

[06:42] 사실 이렇게 하는 게

[06:43] 좋겠어요.

[06:47] 이미 완료된 단계는 제외하고

[06:51] 현재 상태에서 시작하도록 하죠.

[06:54] 그리고 이제 제가 할 일은

[06:57] 레포 프롬프트를 열어보는 겁니다.

[07:01] 화면 밖에서 작업 중인데

[07:02] 잠시 후에 보여드리도록

[07:04] 하겠습니다.

[07:05] 여기서 우리는 슬랙 클론을 만들 건데,

[07:08] 먼저 실제로

[07:10] .gitignore 파일을 빠르게 생성해야 합니다

[07:13] 그리고

[07:15] 음... 그 다음에는

[07:18] 프로젝트 관련 파일들을 처리하고

[07:21] public 디렉토리를 무시하고

[07:23] 그리고 우리는

[07:26] 무시할 건데... 음...

[07:28] .env.local을

[07:31] 그리고 favicon도 무시해야 합니다

[07:35] favicon

[07:38] 이제 다시 repo prompt로 돌아가서

[07:40] 모두 선택하고 새로고침한 다음

[07:43] 토큰을 높은 순서대로 정렬할 겁니다

[07:45] 이제 이게

[07:46] 음... 테스트해볼게요

[07:49] favicon이 안 보이네요

[07:53] favicon을 했는데... 새로고침 해볼게요

[07:56] 새로고침

[07:57] 좋습니다. 이제 우리가 방금

[08:00] Shad CN으로 설치한 모든 코드를 가져올 겁니다

[08:03] Shad CN으로

[08:09] 단계들은 우리가 완료해야 할 순서대로 진행되어야 합니다

[08:14] 순서대로 진행해야 합니다

[08:21] 기억하세요, 우리는 Shad CN이 있는데... 자, 이렇게 해봅시다

[08:26] 실제로 이렇게 할 건데요

[08:28] 우리가 할 유일한 것은

[08:30] 제가 템플릿에서

[08:32] Drizzle 코드만 가져올 겁니다

[08:37] 여기서 우리가 할 것은

[08:39] actions 폴더를 만들고

[08:41] db 폴더를 만들고

[08:43] db.ts 파일을 만들고

[08:46] 그리고

[08:50] drizzle.config.ts를 만들어서 붙여넣을 겁니다

[08:58] 아직 테이블은 없습니다

[09:01] 테이블이 없는 상태에서

[09:03] 음... drizzle 설정을 가져와야 합니다

[09:06] drizzle 설정

[09:08] [음악]

[09:10] 코드와 .env.local 파일이 필요합니다

[09:16] 여기에는 DATABASE_URL이 필요하고

[09:20] 우리의 Supabase 프로젝트가

[09:23] 이제 설정이 완료되었으니

[09:25] connect를 클릭하고 ORM으로 가서 Drizzle을 선택하면

[09:29] 여기 있는 스니펫을 가져와서

[09:33] 붙여넣고

[09:34] 다음으로 할 수 있는 것은

[09:37] 데이터베이스 비밀번호를 가져오는 건데

[09:39] 이 프로젝트는 포스팅 전에 삭제할 겁니다

[09:42] 아무도 이걸 훔칠 수 없도록 말이죠

[09:45] 이제 첫 번째 에이전트 인스턴스를 실행할 건데

[09:47] /add를 입력해서 열고

[09:50] editors를 생성하고 누락된 패키지에 대한 npm install 명령을 만들겁니다

[09:54] 빠진 패키지들

[09:59] drizzle-kit을 받을 거고

[10:01] 좋습니다

[10:03] 그리고 마지막으로 해야 할 것은

[10:05] scripts에서

[10:08] 이것과 동일하게 하되 npx를 추가하는 겁니다

[10:10] npx를 추가하고

[10:13] 거기에

[10:16] 여기서는

[10:21] DB 커밋이라고 하겠습니다

[10:23] 그리고 이제 Repo Prompt를

[10:26] 다시 가져와야 할 것 같네요

[10:29] 이 코드를 모두 선택하고

[10:31] 새로고침하고

[10:32] 복사 버튼을 누르고

[10:34] 잠시 옆으로 빼두겠습니다

[10:37] 이제 Claude로 돌아가서

[10:42] 현재 코드가 여기 있고

[10:46] 좀 더 많은 컨텍스트와 함께

[10:51] 더 많은

[10:52] 컨텍스트를 포함해서 다시 보내서

[10:55] 단계들을 적절하게 포맷팅하도록 할겁니다

[10:58] 이 링크들 몇 개를 닫고

[11:00] 정리해보죠

[11:04] 이것도 닫을 수 있겠네요

[11:08] 좋습니다, 지금 진행되는 상황은

[11:10] Claude가 기본적으로

[11:13] 단계별 계획을 생성하고 있는데

[11:16] 이것을

[11:20] 슬랙 클론을 실제로 구축하는데 따라갈 겁니다

[11:24] 보시다시피

[11:26] 음... 약 15단계 정도가 될 것 같은데

[11:31] 이제 우리가 할 것은

[11:33] 할 것은 말 그대로

[11:35] 이 모든 것을 복사해서

[11:38] 옵시디언 에디터에 붙여넣을

[11:42] 겁니다

[11:47] 여기서 우리는

[11:51] 이 계획을 하나씩

[11:53] 살펴볼 건데요, Sonnet이 하지 않은 한 가지가

[11:58] 있습니다

[12:00] 원래 프롬프트에서 요청한 것처럼

[12:04] 하나의 마크다운 블록으로 반환하는 것인데

[12:08] 할 일 목록 형식으로 되어있죠

[12:12] 아티팩트 대신

[12:14] 실제로는 여기

[12:16] 마크다운 블록으로 필요하니까

[12:19] 빠르게 다시 작성해보겠습니다

[12:20] 이렇게 하면 우리 작업이 더 쉬워질 거예요

[12:22] 곧 보시게 될 겁니다

[12:29] 지금 차분히 모든 내용을 작성하고 있네요

[12:36] 그리고 나서 우리가 할 것은

[12:38] 단계별로 진행하면서

[12:40] 모든 단계가 제대로 되어있는지 확인할 겁니다

[12:46] 여기서 어떤 분석을 했는지

[12:49] 코드를 작성했나요

[12:52] 도대체

[12:55] 제가 유일하게 좀 아쉬운 점은

[12:58] Claude 3.7 Sonnet이 CLI 앱에서

[13:00] 아티팩트로 너무 빨리

[13:02] 넘어가는 것 같아요

[13:06] 물론 저는 아티팩트를 좋아해서

[13:08] 반대보다는 이게 낫다고 봅니다

[13:10] 그래서 불평하진 않을게요

[13:12] 출시된 지 하루밖에 안 됐으니까

[13:13] 좀 너그럽게

[13:14] 봐주도록 하겠습니다. 자 이제

[13:18] 붙여넣어볼게요

[13:20] 코드 블록 포맷팅을

[13:22] 제거하고... 네, 훨씬 좋네요

[13:24] 좋습니다

[13:27] 데이터베이스 스키마, 거기서부터

[13:29] 시작해야겠죠, 그리고 나서

[13:31] 스키마를 마이그레이션하고 기본

[13:35] UI를 만들고

[13:36] 인증은 필요 없는데

[13:40] 실제로 우리가

[13:42] 해야 할 것은

[13:46] 특이한 점 중 하나는

[13:49] 인증은 없지만

[13:53] 메시지를 보내려면 당연히

[13:55] 서로 다른 사용자가 필요하다는 거죠

[13:57] 음...

[14:01] 좋은 점은

[14:03] Claude에게 정확히 그걸 말할 수 있다는 거예요

[14:06] 한 번 더 수정이 필요한데

[14:08] 인증은 구현하지 않지만

[14:10] 사용자를 모방해야 하니까

[14:14] 프로필 테이블을 만들고

[14:16] 가짜 프로필로 시드 데이터를

[14:19] 추가할 수 있을 것 같아요

[14:21] 실제 인증은

[14:23] 하지 않을 거예요

[14:26] 그리고 또 하나, 테스트는

[14:27] 필요 없으니 테스트 관련 내용은 제거하고

[14:31] 마지막으로

[14:34] 네, 최종 계획을 위해

[14:36] 수정해보죠

[14:40] 이제 우리가 실제로

[14:42] 원하는 계획으로

[14:45] 정리될 거예요. 앞으로 할 일은

[14:49] 이 계획을 커서에 마크다운 파일로 추가하고

[14:52] 단계별로, 아니 아마도

[14:54] 카테고리별로

[14:56] 진행할 건데

[14:58] 카테고리별로

[15:00] 각 단계를

[15:03] 새로운 3.7 Sonnet 모델이 탑재된

[15:06] 커서 에이전트에 입력하고

[15:09] 어떻게 진행되는지 보겠습니다

[15:11] 이제 이걸 그대로

[15:13] 커서에 복사해서

[15:17] 넣을 건데요

[15:19] project steps.md라고 이름 붙이고

[15:24] 붙여넣기 하겠습니다

[15:26] 이것을 조금만 정리해보겠습니다

[15:28] 살짝

[15:31] 한 번 더 검토해보겠습니다

[15:32] 여기서는 배포 부분은 다룰 필요가 없겠네요

[15:41] 음, 모든 것이 좋아 보입니다

[15:43] 이제 커서의 기능을 활용해볼 건데요

[15:48] general.MDC 규칙을 만들어보겠습니다

[15:51] 글로벌 적용을 켜볼 건데요

[15:54] 이렇게 하면... 이것은

[15:58] 모든 요청에 이 규칙들이

[16:01] 적용될 것입니다

[16:05] 우리는

[16:06] 슬랙 클론을 만들고 있다고 명시하고

[16:11] 단계들을 찾아서 프로젝트 단계를 태그할 것입니다

[16:18] 에이전트에 요청할 때마다

[16:21] 이 토글이 켜져 있기 때문에

[16:23] 실제로 단계들을 살펴보고

[16:29] 제가 작업하라고 지시한

[16:31] 단계들에 대해서만 작업하고

[16:36] 한 번에 하나씩

[16:40] 그 단계들이 완료되면 완료 표시를 하고 멈출 것입니다

[16:47] 그 다음 지시사항을 제가 알려드리겠습니다

[16:51] 자, 이제 이것을 커밋해보겠습니다

[16:55] 초기 단계를 커밋하고

[17:02] 이제 할 수 있는 것은

[17:05] 커서 에이전트로 가서

[17:09] 우리의 단계들을 실제로 확인해봅시다

[17:10] 1단계부터 2단계까지 작업할 수 있도록

[17:15] 데이터베이스 설정이 포함된

[17:17] 데이터베이스 단계를

[17:23] 설정하면 이제 할 수 있는 것은

[17:25] 커서 에이전트가 새로운 3.7 Sonnet 모드로

[17:27] 이 첫 두 단계에 명시된

[17:29] 모든 작업을 실행할 수 있습니다

[17:32] 이 방식은 MVP에 정말 좋고

[17:34] 개별 기능 개발에도 아주 좋습니다

[17:38] 이걸로 할 수 있는 것들이 정말 많죠

[17:40] 보시다시피 YOLO 모드는 켜지 않았는데

[17:48] 켰어야 했나 싶네요

[17:50] 지금은 하지 않을게요. 참고로 커서의 YOLO 모드는

[17:52] 에이전트 코드나 명령어를 자동으로 실행합니다

[17:54] 제가 일일이 수동으로 확인할 필요 없이

[17:57] 자동으로 실행되죠

[18:00] 보시다시피 여기 채널과 프로필 데이터베이스 스키마가

[18:04] 작성되고 있습니다

[18:06] 우리는 Supabase와 함께 Drizzle을 사용하고 있는데

[18:08] 이것은 기본적으로 ORM이 있는 PostgreSQL입니다

[18:10] 이를 통해 앱 전체에서 타입 안전성을 보장받을 수 있죠

[18:13] 앱 전체에서 타입 안전성이 보장되고

[18:15] 에이전트가 데이터베이스 스키마를

[18:18] 쉽게 찾아볼 수 있게 해줍니다

[18:21] 이는 에이전트가 찾아보기 쉽고

[18:23] 데이터베이스

[18:24] 스키마를 쉽게 확인할 수 있어서

[18:26] 풀스택 앱에서 에이전트 기능이 잘 작동하게 하는데 매우 중요합니다

[18:28] 이것이 바로 ORM이 아주 강력한 이유죠

[18:34] 보시다시피 지금

[18:36] 말 그대로 모든 스키마를 작성하고 있고

[18:38] 이 인덱스 파일을 가져와서

[18:41] 데이터베이스 스키마에 추가할 것으로 보입니다

[18:45] 다음으로 추가해야 할 것은

[18:48] 인덱스에서 내보내기를 하고 있네요

[18:51] 그리고 SQL 마이그레이션 파일을 생성하라고 할 텐데

[18:54] 여기 보시면 모든 테이블이 있습니다

[19:02] 그리고 이제

[19:03] 마이그레이션 명령어를 제공할 텐데

[19:05] 이를 실행하면

[19:06] 우리의 Supabase 프로젝트에서

[19:08] 마법처럼 모든 테이블이 보일 겁니다. 완벽하네요

[19:11] 음, Anthropic 연결 에러가 발생했네요

[19:14] 그런데 말이죠, 참고로

[19:17] 정말 멋진 에러 처리네요.

[19:19] cursor 팀이

[19:22] 정말 잘 했어요.

[19:25] 보통은 완전히 최악이었을 경험을

[19:27] 전혀 문제되지 않게

[19:29] 만드는 좋은 방법이에요

[19:30] 정말로요

[19:33] 음

[19:36] 흥미롭게도 타입스크립트 시드 파일을 만들고 있네요

[19:39] 재미있죠. 기본적으로

[19:41] 타입스크립트를 실행하라고 요청하는 거예요

[19:43] 실행하면

[19:47] 이제 프로필이 시딩되어 있을 거예요

[19:50] 여기

[19:52] 새로고침하면 됩니다. 좋아요, 이제 이 단계가

[19:57] 완료된 것으로 표시될 거예요. 이건 정말

[19:59] 기능 개발을 위한 킬러 워크플로우예요. 저는

[20:02] 이걸 항상 사용하는데요, 지금은

[20:05] 전체 MVP에 적용하고 있어요

[20:07] 여기서 1단계와 2단계 완료라고

[20:10] 표시하고, 코드를 커밋해서

[20:12] 좋은 체크포인트를 만들겠습니다

[20:14] 다시 한 번 말씀드리지만

[20:16] 버전 컨트롤을 사용하는 것은 정말 좋습니다

[20:19] 특히 이제 막 시작하는

[20:22] '바이브 코딩'을 배우는 초보자들에게

[20:25] 정말 많은 도움이 될 거예요. 3단계와

[20:27] 4단계를 완료해보죠. 3단계와

[20:29] 4단계

[20:30] 3단계와

[20:32] 4단계는 핵심 UI 컴포넌트예요

[20:35] 우리는 말 그대로 목록을

[20:38] 하나씩 진행할 거예요

[20:39] 자, 커밋하고 연결해볼까요

[20:42] 보시면 아시겠지만

[20:46] 우리는 코드를 거의 작성하지 않을 거예요

[20:50] 물론 우리가 이전에

[20:52] 보일러플레이트 설정을 했지만

[20:53] 그건 코드 작성으로 안 쳐요

[20:55] 그냥 템플릿일 뿐이에요

[20:56] 그리고 우리는 아마도

[20:58] 슬랙 클론과 매우 비슷한

[21:00] 결과물을 얻게 될 거예요. 지금까지

[21:03] 데이터베이스 테이블을

[21:05] 설정했고, 이제 모두 수퍼베이스와

[21:07] 연결되어 있어요. 스키마 파일을 확인해보면

[21:10] 무슨 일이 일어나고 있는지 알 수 있죠

[21:13] AI가 진행하면서 이것들을

[21:15] 조금 조정해야 할 수도 있어요. 하지만

[21:19] 다음으로 할 일은

[21:20] 핵심 UI 컴포넌트들을 만드는 거예요

[21:24] 여기서... 음, 왜인지 다시

[21:26] 이걸 하라고 하네요

[21:33] 흥미롭게도 버튼들을 모두

[21:37] 수동으로

[21:38] 만들고 있어요. 여기가 바로

[21:41] 체크포인트가

[21:42] 필요한 부분이에요. 우리는

[21:45] 여기서 거절을 클릭할 거예요

[21:48] 그리고 우리가 할 수 있는 것은

[21:52] 이렇게 하면 되는데요

[21:56] 중지를 클릭하고 체크포인트로 복원한 다음

[21:58] 이렇게 말할 거예요

[22:00] '가능한 곳에 Shadcn을 사용하세요'

[22:04] 라고요

[22:06] 우리는 기본적으로

[22:08] 아, 제발 Cursor가 지금

[22:10] 다운되지 않았으면 좋겠네요. 그러면 정말

[22:12] 안 좋을 텐데

[22:17] 좋아요, 다행히 그냥

[22:20] 버그였네요. 우리는 기본적으로

[22:22] 여기서 체크포인트로 리셋할 수 있었어요

[22:24] 에이전트 UI 내에서요. Cursor의 킬러 기능이죠

[22:28] 버전 컨트롤로도 할 수 있는데

[22:30] 제가 생각하기에는

[22:31] 주요 단계는 커밋하고, 작은

[22:34] 단계들은 체크포인트를 사용하는 게

[22:36] 좋다고 봐요. 이제

[22:38] 일어날 일은 모든 걸 처음부터

[22:39] 이 모든 컴포넌트를 처음부터 생성하는 대신

[22:41] gen-cn 컴포넌트를 사용할 것입니다

[22:43] 이렇게 하면 우리와 AI 모두 시간을 절약할 수 있죠

[22:46] 하지만 AI가 원하는 대로

[22:48] 동작하지 않네요

[22:56] 그래서 이걸 중단하고... 어떻게 하지

[22:59] 중단하는 방법을...

[23:02] 새로운 Cursor UI에서는

[23:04] 사실 어떻게 중단해야 할지 모르겠네요

[23:07] Shadcn UI로 더 구체적으로 해볼게요

[23:12] 음... 좀 더 구체적으로 하면

[23:14] 왜 작동하지 않는지 잘 모르겠네요

[23:21] 이런 문제는 처음 겪어보는데

[23:24] 재미있네요, 아마도 새로운

[23:27] 모델의 특이한 점인 것 같아요

[23:29] 새로운

[23:31] 모델이 더 나은 컴포넌트를 만들 수 있다고 생각하나 봐요

[23:33] 라이브러리를...

[23:35] 도전을 받아들였네요

[23:38] 이걸

[23:41] 음... CLI를 지정하니까

[23:48] 아, 이런... 대시를 사용하지 말라고 하네요

[23:52] 대시 대신... 재미있네요... 음

[23:56] 아니

[23:59] shadcn이 맞나?

[24:01] shadcn@latest가

[24:05] 맞는

[24:12] 명령어에요

[24:14] 네, 맞습니다. 감사합니다

[24:18] 음...

[24:26] 그냥 생성...

[24:29] 모든 컴포넌트를 위한 하나의 명령어

[24:32] 왜 이렇게 이상하게 동작하는지

[24:34] 모르겠네요

[24:36] 이건 보통 매번 이렇게 나오는 건데

[24:38] 왜 이렇게

[24:40] 힘들어하는지

[24:41] 모르겠어요

[24:44] 아마도 제가 평소에는

[24:47] 프론트엔드 규칙이 있는 cursor 규칙 파일을

[24:49] 사용하는데 익숙해서 그런 것 같아요

[24:50] 이 프로젝트에서는 그걸 안 했거든요

[24:52] 완전히 처음부터 시작한 지

[24:53] 좀 오래됐네요

[24:55] 템플릿에서 시작하는 것과는 좀 다르죠

[24:57] 사실 이 둘은 약간 다른 개념이에요

[24:59] 공정하게 말하자면... 음, 아까 말했듯이

[25:04] 이 모델이 나온 지 하루밖에 안 됐고

[25:06] cursor 통합도 마찬가지예요

[25:08] 그래서 좀 더 너그럽게

[25:10] 봐줘야겠네요

[25:12] 보시다시피 우리는 사이드바

[25:15] 컴포넌트를 만들고 있는데

[25:16] 실제로 이 린터 에러들을

[25:18] 반복해서 수정할 수 있어요

[25:20] 이게 cursor의 정말 멋진 기능이죠

[25:22] 정말 마음에 들어요

[25:25] 채팅 레이아웃을 가져오고 있네요

[25:28] 기본적으로 3단계와 4단계에 설명된

[25:29] 전체 UI를 구축하고 있는 거죠

[25:32] 자, 이제 핵심 컴포넌트를 얻었고

[25:34] 이제 레이아웃을 구성할 거예요

[25:35] 사이드바, 헤더

[25:39] 그리고 채팅 레이아웃까지요

[25:42] 보시다시피 린터 에러가 몇 개 있지만

[25:44] 계속해서 수정될 거예요

[25:46] 이게 바로 TypeScript가 훌륭한 이유죠

[25:49] TypeScript 신봉자처럼 들릴 수 있지만

[25:51] TypeScript는 정말 대단해요

[25:53] LLM과 작업할 때 특히 놀랍죠

[25:57] 네

[26:11] 단계들이 완료됐다고 표시되고 있네요

[26:14] 슬랙 클론으로 가볼까요?

[26:16] 아직 페이지가 없으니까

[26:18] 기다려야 할 것 같네요

[26:20] 그걸

[26:21] 음... 하지만 우리가 할 수 있는 건

[26:24] 모두 수락하고 닫은 다음

[26:26] 3단계와

[26:29] 4단계를 완료하는 거예요, 총 19개의

[26:31] 변경사항이 있네요

[26:33] 물론 그 중 일부는 CLI 명령어라서

[26:36] 평소만큼 복잡하진 않아요

[26:38] 이제 프로젝트로 가서

[26:40] 단계들을 확인해볼게요

[26:42] 여기서 에이전트를 리셋하고

[26:46] 5단계를 실행하라고 할 건데요, 우리가

[26:49] 기본적으로 카테고리별로

[26:51] 진행하려고 하는 게

[26:53] 제가 목표로 하는 거예요

[26:54] 이렇게 하면 각 단계에서 작업하는 내용이

[26:57] 논리적이고 일관성 있게 되어서

[27:00] 더 나은 결과를 얻을 수 있을 거예요

[27:03] 커서 에이전트의 멋진 점 중 하나는

[27:04] 새로운 업데이트에서

[27:06] 훨씬 더 많은 검색을 수행한다는 건데

[27:08] 이게 실제 개발자가 일하는 방식과

[27:12] 더 비슷해졌어요

[27:13] 이런 방식이면 당연히

[27:16] 더 나은 결과물이 나올 거라고 생각하게 되죠

[27:24] 이건 직관적으로도 이해가 되는데

[27:26] 왜냐하면

[27:29] 에이전트가 코드베이스에 대해 올바른 작업을

[27:33] 수행하려면 실제로 작업하고 있는 내용을

[27:36] 이해할 수 있어야 하거든요

[27:38] 컴포저 인스턴스를 리셋하면

[27:40] 컨텍스트를 로드해야 하고

[27:42] 이런 온보딩 과정을

[27:44] 거쳐야 해요

[27:47] 지금까지 진행한 내용에 대해

[27:50] 충분한 컨텍스트를 얻은 것 같아서

[27:52] 이제 5단계 작업을 할 수 있을 것 같네요

[27:55] 프로필 관리 유틸리티들을

[27:58] 추가하는 단계가 될 거예요

[28:00] 보시다시피

[28:02] 사용자 입장에서는 당연히

[28:05] 프로필을 업데이트할 수 있어야 하죠

[28:06] 핵심 기능이니까요

[28:10] 보아하니 정말 가벼운 인증 시스템을

[28:16] 구현하고 있네요

[28:18] 쿠키를 사용해서 말이죠

[28:21] 필요하다면 그렇게 하지 말라고

[28:23] 할 수도 있어요

[28:24] 나중에 문제가 되면 그때 처리하죠

[28:27] 지금은 신경 쓰지 않을게요

[28:29] 서버 액션을 만들고 있네요

[28:32] Next.js의 서버 액션에

[28:34] 익숙하지 않으시다면

[28:35] 이걸 함수 형태로 작성된 API 라우트라고

[28:38] 생각하시면 됩니다

[28:41] 모든 코드가 서버 사이드에서 실행되죠

[28:43] 그래서 서버 액션이라고 부르는 거고요

[28:45] 정말 좋은 방식인데

[28:48] 보시면 기본적으로

[28:49] 일반적인 CRUD 코드를 작성할 수 있어요

[28:52] 보통의 REST API처럼요

[28:53] 하지만 이건 일반적인

[28:55] 함수 형태로

[28:57] 작성되는데, 제가 보기에는 정말 좋아요

[28:59] 그리고 API 라우트는

[29:01] 더 복잡한 작업을 위해 남겨두죠

[29:06] 자, 이제 새로운 페이지가 만들어질 거예요

[29:09] 네

[29:11] 이게 뭐지? 이건 어디서

[29:15] 가져오는 걸까요?

[29:17] 아마도 API를 사용하는 것 같네요

[29:20] SVG라면 정말 대단한 건데

[29:23] 그래서 좀 놀랐어요

[29:25] 좋아요, 이 모든 걸 수락하고

[29:28] 여기 6개의 변경사항이 있네요. 5단계

[29:31] 완료됐습니다

[29:34] 이걸 동기화하고 새로운 컴포저 인스턴스를 만들어서

[29:36] 다시 단계들을 열어볼게요

[29:39] 이제 더 큰 단계가 될 것 같은데

[29:41] 6단계부터 끝까지예요

[29:44] 네 단계를 완료할 거예요

[29:47] 6단계부터 9단계까지

[29:51] 모든 메시징 단계들에 대해서요

[29:55] 네, 이제 에이전트가

[29:59] 기본적으로 6단계의 모든 것을 처리할 거예요

[30:02] 채널들

[30:05] 메시지

[30:07] 스레딩과 DM들을 처리할 거예요

[30:11] 그래서 이것을 잘 처리할 수 있을 것으로 기대됩니다.

[30:13] 여기에는 Claude 3.7 Sonnet이 처리하기 어려운 내용이

[30:17] 전혀 없습니다.

[30:20] 보시다시피 지금

[30:22] 온보딩 과정을 진행하고 있는데

[30:23] 상황을 파악하면서

[30:25] 무슨 일이 일어나고 있는지 이해하고 있죠.

[30:28] 데이터베이스 스키마를 읽는 것이

[30:29] 매우 도움이 되는 것은 분명합니다.

[30:32] 제가 이미 언급했는지는 기억이 안 나지만

[30:35] 새로운 Cursor 0.46 업데이트에서는

[30:37] 에이전트가 실제 개발자처럼 행동하는 것이

[30:42] 가장 큰 특징입니다.

[30:44] 이것이 제가 얻은 주요 인상 중 하나죠.

[30:46] 보시다시피 모든 작업에 대해

[30:49] 액션을 얻을 수 있을 것 같습니다.

[30:50] 어떻게 작동하는지 보는 것이 흥미로울 것 같네요.

[30:53] 제 추측으로는 6단계와

[30:55] 7단계를 순차적으로 진행할 것 같습니다.

[30:57] 모든 액션을 한 번에 처리하는 대신

[30:58] 지금 보이는 것처럼 진행할 것 같네요.

[31:01] 이렇게 되고 있죠.

[31:03] 보시다시피

[31:04] 전체 계획을 에이전트에 전달하는 것이 매우 도움이 됩니다.

[31:07] 단순히 개별 단계만 전달하는 것이 아니라

[31:10] 이미 완료한 작업과

[31:12] 앞으로 해야 할 작업의 맥락을 이해하고 있죠.

[31:14] 이것이 실제 인간이 일하는 방식과 비슷합니다.

[31:16] 머릿속에 프로젝트의

[31:18] 전체적인 맥락을 가지고 있고

[31:20] 그 다음 개별 단계로 들어가서

[31:22] 작업하면서

[31:24] 더 큰 프로젝트의 맥락 안에서 작업하는 것과 같죠.

[31:26] 이것이 바로 이 시스템이 하는 일입니다.

[31:30] 제가 말씀드렸듯이

[31:32] 저는 이 기술을 기능 개발에

[31:33] 자주 사용할 것 같습니다.

[31:38] 새로운 Cursor 업데이트와

[31:41] 새로운 모델 업데이트를 통해

[31:43] 상당히 개선될 것으로 예상됩니다.

[31:45] 훨씬 더요.

[31:56] 보시다시피 메시지 액션이 있고

[31:59] 채널 ID로 메시지를 가져오는 것처럼

[32:01] 제가 말씀드렸듯이

[32:03] 이것들은 모두 일반적인

[32:05] CRUD 작업들을 서버 액션으로

[32:07] 작성한 것입니다.

[32:09] Drizzle 문법으로 작성된 폼이죠.

[32:14] 타입 안전하고 깔끔한 코드입니다.

[32:17] 읽고 쓰기가 매우 쉽죠.

[32:18] 메시지 컴포넌트들을 가져오고 있는데

[32:22] 정말 좋네요.

[32:25] 보시다시피

[32:30] 삭제, 답장, 편집 핸들러까지

[32:34] 우리가 원하는 모든 기능을 구현하고 있습니다.

[32:37] 좋아 보이네요.

[32:40] 이것들이 마음에 듭니다.

[32:43] 찰리 브라운처럼

[32:44] 선택 기능은 아직

[32:46] 구현되지 않은 것 같네요.

[32:49] 프로젝트 단계를 보면

[32:51] 여기

[32:53] 10단계에서 실제로

[32:56] 그 기능을 구현할 예정입니다.

[33:09] 페이지... 죄송합니다. 다시 시작하겠습니다.

[33:12] 단계들을 읽고 있었는데

[33:14] 오랫동안 멈춰있었나 모르겠네요.

[33:16] 가끔 연결이 끊기는 것 같은데

[33:18] 괜찮습니다. 다시 말씀드리지만

[33:20] 좋은 재개 UX만 있다면

[33:22] 전혀 문제없습니다. 저는

[33:26] 전혀 신경 쓰지 않습니다.

[33:33] 스레드 액션들도 모두 좋아 보이네요.

[33:38] UI 구현을 어떻게 할지 정말 궁금합니다.

[33:41] 백엔드 코드는 이전 모델들도

[33:43] 잘 처리했었는데, 좀 더

[33:46] 구조화되어 있고

[33:48] 명확하기 때문이죠.

[33:50] 이 UI를 보면 정말 흥미로운

[33:53] 한 부분이 궁금한데, 내가

[33:55] 이걸 제대로 범위 설정했는지 의심이 되네요.

[33:58] 이건 새로운 Sonnet 모델의

[34:01] 능력

[34:02] 범위 내에 있어야 할 것 같습니다.

[34:05] 할 수 있을

[34:07] 것 같네요.

[34:09] 그런데 한 가지 강조하고 싶은 점은

[34:11] 코드를 전혀 작성하지 않고도

[34:13] 얼마나 많은 것을

[34:15] 해냈는지 보세요. 우리는 그저

[34:17] 높은 수준에서 오케스트레이션하고

[34:19] 실행되는 것을 지켜보면서

[34:21] 모든 것이 잘 진행되는지 확인만 했죠.

[34:24] 지금까지는 잘 진행되고 있고

[34:27] 물론 우리는

[34:28] 수동으로 테스트를 해야 하고

[34:30] 테스트 경험을 바탕으로

[34:33] 모델에게 지시를 해야 합니다.

[34:35] 이건 잘 작동하고 있고

[34:37] 이건 그렇지 않다고

[34:40] 말이죠. 이제 우리 소프트웨어 개발자의 역할은

[34:44] 거의 소프트웨어 엔지니어나

[34:46] 아니 소프트웨어...

[34:49] 소프트웨어 오케스트레이터에 가깝네요

[34:54] 죄송합니다.

[35:01] 보시다시피 커서의

[35:02] XML 파싱이 약간

[35:04] 이상해지고 있는데, 이건

[35:05] 해결해야 할 문제일 수 있겠네요. 보세요

[35:08] 우리는 9단계까지 왔어요.

[35:10] 이제 DM 부분으로

[35:11] 넘어왔는데, 이 시스템이

[35:14] 계속

[35:15] 실행되고 있고 우리가 할 일은 없었죠.

[35:18] 물론 말씀드렸듯이

[35:20] 실제로 테스트를 해서

[35:21] 코드가 제대로 작동하는지 확인해야 하지만

[35:23] 이 모든 게 정말 좋아 보이네요.

[35:25] 심지어 Zod 스키마도 얻고 있어요

[35:27] 여기서

[35:29] 좋네요. 보시면

[35:31] 실제로 그 컴포넌트가 있나요?

[35:34] 우리가 해야 할 것 같은데

[35:37] 어디 보자...

[35:40] UI 셀렉트를 보니, 우리는

[35:43] 셀렉트 컴포넌트가 없네요.

[35:44] 그래서 생성해야 할 것 같은데

[35:46] 이런 경우에

[35:48] 커서 규칙에서는

[35:49] Shad CN 컴포넌트 사용을 지정하고 싶을 거예요.

[35:53] 그게 바로

[35:54] 제가 언급했던 템플릿에서... 음

[35:57] 우리가 할 수 있는 건

[35:58] 셀렉트에 Shad CN을 사용하자고 하는 거죠.

[36:03] 커서 규칙의 좋은

[36:06] 사용 사례네요. 하지만 일단 진행해 보죠.

[36:20] 셀렉트 추가를 해볼게요.

[36:23] 모델을 조금만

[36:25] 도와주면 되겠네요.

[36:35] 이 모델이 정말

[36:36] 그 명령어를 사용하고 싶어하는 게

[36:38] 재미있네요.

[36:41] 다시 말하지만 커서 규칙의

[36:43] 정말 좋은 사용 사례예요.

[36:45] 프론트엔드 커서 규칙이 있으면

[36:49] 모든 요청에서

[36:51] 이 문제를 해결할 수 있어서

[36:53] 아무도 걱정할 필요가

[36:55] 없을 거예요.

[36:59] 이제 다시 정상 궤도로 돌아왔네요.

[37:02] 살짝 돌아갔다가

[37:04] 그런데 참고로 여러분이 할 일은

[37:07] 말 그대로 우리가

[37:08] MDX 파일을 생성했던 것처럼

[37:10] 프론트엔드용을 만드는 거예요.

[37:13] 제 오픈소스 앱 템플릿에서

[37:16] 프론트엔드 규칙을 보면

[37:17] 140줄 정도 되요.

[37:20] 그런 것을

[37:23] 만드는 것은 어렵지 않습니다

[37:35] 좋아요

[37:36] 이제 우리가 받아들여야 할 부분은

[37:39] 바로

[37:40] 이제부터가 재미있는 부분입니다

[37:43] 10단계를 완성하고

[37:47] 실제로 페이지들을 만들어야 합니다

[37:50] 페이지들은 우리가

[37:51] 실제로 무엇이 진행되고 있는지 테스트할 수 있게 해줄 겁니다

[37:54] 여기서

[37:55] 홈페이지를 만들 거고

[37:59] 메인 앱 레이아웃을 만들고

[38:02] 대시보드 페이지도 만들 겁니다

[38:04] 채널 페이지, DM 페이지

[38:06] 쓰레드 페이지도 만들어야 하죠

[38:09] 사실 이 중 일부는

[38:11] 팝업으로 만드는 게 나을 것 같은데

[38:13] 중요한 건 기능이

[38:15] 먼저 작동하게 만드는 거예요

[38:17] 그 다음에 UI를

[38:19] 개선할 수 있죠

[38:20] 음... 이 영상을 위해서는

[38:22] 다른 단계들은 건너뛸 수도 있을 것 같아요

[38:25] 이건 좀 더 다듬는 작업이니까요

[38:27] 솔직히

[38:29] 음... 어디까지 갈 수 있을지 봅시다

[38:32] 10단계에서 얼마나 진행할 수 있을지 보죠

[38:35] 왜냐하면 여기서 중요한 건

[38:36] 코딩의 분위기를

[38:37] 보여주는 거니까요

[38:39] 아시다시피 제 업무의 큰 부분인데

[38:42] 음... 모르실 수도 있지만

[38:44] 저는 테이크오프라는 회사를 운영하고 있고

[38:48] 우리는 사람들에게 AI 기술을

[38:51] 가르치고 있어요

[38:53] AI로 코딩하고 만드는 방법을요

[38:55] 그래서 많은 사람들이

[38:58] 이런 것들을 보면서

[38:59] 우리의 풀스택 앱 코스를 보면서

[39:00] 이런 것들을 보게 되죠

[39:03] 그리고 이런 걸 보면서

[39:04] 백엔드, 인증, 결제 같은 것들을 보고

[39:06] 부담을 느끼게 되는데

[39:08] 여러분, 초보자라도

[39:11] 테이크오프를 시작하거나

[39:14] 바이브 코딩을 하는 데

[39:16] 경험이 필요한 건 아닙니다

[39:18] 제가 하는 걸 보세요

[39:19] 여러분에게 필요한 건

[39:21] 명확하게 생각하고 AI 모델과

[39:23] 일할 수 있는 능력이에요

[39:26] 이건 코딩 스킬을 위한 트로이 목마 같은 거예요

[39:28] 왜냐하면 사람들이

[39:30] 이런 걸 하다 보면

[39:32] 실제로 더 깊이 파고들게 되거든요

[39:35] 예를 들어 프론트엔드를 만들고 나서

[39:38] 좋은 프론트엔드를 만들고

[39:39] 데이터를 어떻게 처리할지 고민하면

[39:41] 그때 우리가 백엔드를 가르쳐주는 거죠

[39:43] 이런 것들에 겁먹지 마세요

[39:45] AI가 정말 좋아졌고

[39:47] 이제는 AI 튜터가 있어서

[39:50] 원하는 걸 모두

[39:51] 배울 수 있어요

[39:54] 지금이

[39:55] 배우기에 가장 좋은 시기예요

[39:57] 그래서 제가 이런 영상을 만드는 거예요

[39:59] 아이디어가 있을 때

[40:01] 슬랙 같은 앱은 절대 못 만들 거라 생각하지만

[40:03] 사실은

[40:04] 할 수 있어요

[40:05] AI에게 만들어달라고 하면 되니까요

[40:08] 단계별로 나누고

[40:10] 우리가 하는 것처럼 하면 됩니다

[40:13] 그러면 여러분의 앱이 완성되죠

[40:21] 제가 자주 보는 실수 중 하나는

[40:23] 사람들이

[40:25] AI가 이 모든 코드를 작성하니까

[40:26] 더 이상 배울 필요가 없다고 생각하는 건데

[40:28] 아니 아니 아니 아니 아니, 완전

[40:29] 정반대에요.

[40:30] 당신이 자신을 위해서든 비즈니스를 위해서든

[40:33] 소프트웨어를 만들고 싶다면

[40:34] 어떤 이유든 상관없어요.

[40:36] 취미로 할 수도 있고

[40:38] 단순한 호기심일 수도 있고

[40:40] 실제로 돈을 벌기 위한 것일 수도 있죠.

[40:42] 지금이야말로 이런 것을 시작하기에

[40:44] 최고의 시기입니다.

[40:53] 지금은 연결 문제가 많이 있네요.

[40:55] 하지만 곧 해결될 거에요.

[40:58] 시간이 지나면 분명 개선될 거에요.

[40:59] 말씀드렸듯이 이 모든 게 공개된 지

[41:03] 아직 24시간도 지나지 않았거든요.

[41:06] 아직 완성되지 않았어요.

[41:11] 사실 쿠키는 필요하지도 않은데

[41:13] 왜 자꾸 이러는지 모르겠네요.

[41:15] 나중에 신경 쓰도록 하고

[41:17] 일단 실행되게 놔둘게요.

[41:20] 여러분 기억나시나요? 초반에 제가

[41:23] 목 프로필은 만들되

[41:25] auth를 하지 말라고 했죠. 이게 바로

[41:27] 제가 생각했던 것 중 하나에요.

[41:29] 모델이 약간 이상한 방향으로

[41:31] 빠질 수 있다고 봤거든요.

[41:35] 네, 이게 바로 우리가 원하는 거에요.

[41:38] 테스트 목적으로

[41:40] 하드코딩된 프로필 ID가 필요한 거죠.

[41:44] 바로 그게 핵심이에요.

[41:46] 그리고 지금 마주치는 이런 문제들은

[41:48] 제가 게을러서 그래요.

[41:50] 더 나은 단계를 만들고

[41:53] 커서 규칙을 만들었어야 했는데

[41:55] 그러지 않았죠.

[41:58] 그런데 말이에요,

[42:00] 고급 커서 규칙 영상을 원하시는 분들은

[42:01] 알려주세요.

[42:03] 내일, 수요일에 만들어볼 수 있을 것 같아요.

[42:05] 지금 시점에서는요.

[42:09] 자, 보시다시피 이게 프로필 페이지에요.

[42:12] 여기서는

[42:15] 기본적으로 우리가 가지고 있는 건

[42:17] 6개의 다른

[42:20] 페이지고, 지금은 스레드 페이지에 있네요.

[42:24] 이게 마지막이 되어야 해요.

[42:38] 네, 이 쿠키 문제가

[42:40] 귀찮아질 것 같네요.

[42:44] 아마 이걸 반복해서

[42:46] 수정해야 할 것 같아요.

[42:52] 보시면 쿠키가 profile.ts 파일에

[42:55] 있는 걸 볼 수 있죠.

[42:58] 에러가 발생하고 있네요.

[43:12] 자, 진행되고 있는데, 마지막으로

[43:16] 한 번 더 확인해볼게요.

[43:17] 확실히 하기 위해서요.

[43:21] 좀 더 명확하게 하기 위해서

[43:23] 이렇게 하면 나중에 테스트할 때

[43:25] 골치 아픈 일을 좀 줄일 수 있을 거에요.

[43:40] 그걸 수락해야 해요.

[43:45] 죄송해요, 제발 멈추지 말아주세요.

[43:57] 보세요, Next.js 14를 참조하고 있는데

[43:58] 우리는 Next.js 15를 쓰고 있어요.

[44:00] 이것도 커서 규칙을 쓰기 좋은 경우죠.

[44:03] 하지만 지금 우리가 하려는 것과는

[44:05] 좀 벗어나는 내용이에요.

[44:06] 그래서 간단하게 유지할 거고

[44:08] 핵심에만 집중하도록 하겠습니다.

[44:11] 중요한 것만 보도록 하죠.

[44:22] 여기서 우리는

[44:24] profile.ts도 단순화할 거에요.

[44:26] 현재 프로필 쿠키는

[44:28] 필요 없거든요.

[44:43] 좋아요, 이제 어떻게 할 수 있는지 봅시다.

[44:46] 여기서 우리는 Charlie Brown으로

[44:48] 들어갈 수 있어야 해요.

[44:51] 그리고 실제 채팅을 위한 페이지는

[44:54] 어떻게 될까요?

[45:07] 자, 이제 이런 시점이 오죠.

[45:10] 이제 우리가 해야 할 게

[45:11] 보이는 거죠.

[45:13] 음... 이렇게 말하겠습니다.

[45:16] 실제로 이걸 해봅시다.

[45:18] 이게 오래된 빌드가 아닌지

[45:20] 확인해야 해요. 이런 일이 종종 있거든요.

[45:22] 많은 변경사항이 있을 때

[45:25] 프로필을 선택해보도록 하죠.

[45:29] 이게 어디에 있는지 알아보겠습니다.

[45:32] 음...

[45:35] 자, 이제

[45:38] 우리는 이걸 저장할 건데

[45:41] 스텝 10이라고 하고

[45:42] 여기까지 진행사항을 저장하겠습니다.

[45:46] 스크린샷을 보낼 건데

[45:48] 정말 가장 단순한 방법으로

[45:50] 처리하려고 합니다.

[45:52] 이걸 보내고

[45:55] 좋아요.

[45:57] 프로필을 선택했으니, 지금은

[46:01] 초보자가 경험할 만한 것을

[46:02] 시뮬레이션하려고 하는 거예요.

[46:11] 자, 이제

[46:14] 테스트를 진행해보도록 하겠습니다.

[46:20] 지금은

[46:24] 리스트의 단계들을 진행하지 말고 지금까지 만든 앱을

[46:29] 테스트해보죠.

[46:59] 여기 모든 프로필 컴포넌트들이 있는데

[47:03] 우리가 할 수 있는 건

[47:04] 프로필 카드를 검색하는 거예요. 이건 선택 프로필

[47:07] 폼에 있죠.

[47:10] 그러면 이제

[47:12] 이 컴포넌트가 어디 있는지

[47:14] 찾아봐야 하는데, 이 컴포넌트는

[47:16] 여기 있을 거예요. 한 가지 문제가

[47:21] 발생했네요. 기본적으로 두 개의

[47:30] 메인

[47:31] 페이지가 있는데, 이건 라우트 그룹이라서

[47:33] 이 페이지와 저 페이지가

[47:35] 동일한 거예요. 같은 라우트에

[47:40] 두 페이지가 있네요.

[47:43] 이건 Anthropic 연결

[47:46] 문제 때문인데

[47:48] 라우트 그룹이에요.

[48:02] 그리고

[48:05] 음, 기술적으로 이건 우리가 원하는 게

[48:08] 아니에요. 맞아요, 그렇죠.

[48:14] 네, 지금 에러를

[48:16] 인식하고 있는데, 이게 바로 우리가

[48:19] 원하는 거예요. 라우트 자체를 수정하거나

[48:22] 다른 페이지 처리 방식을 변경해야 해요.

[48:29] 자, 됐어요.

[48:44] 만약 이 문제를 해결할 수 있다면

[48:46] 정말 좋을 것 같네요.

[49:07] 좋아요, 이론적으로는

[49:12] 이제... 자, 보면

[49:15] 사이드바가 조금

[49:17] 있는데, 보아하니

[49:20] 프로필 페이지가 없네요. 있었던 것 같은데

[49:25] 아, 있네요. 알겠어요.

[49:28] 이해했어요.

[49:31] 설정 페이지가 없네요.

[49:33] 음... 만약 우리가

[49:38] 일반으로 가면 잘못된 UUID 에러가 나오네요.

[49:42] 무작위로요. 우리가 해야 할

[49:45] 일 중 하나는

[49:46] 디버깅을 좀 해야 할 것 같아요.

[49:48] 그러니까 일단

[49:50] 이 에러를 전달하고

[49:52] 이걸 수정하라고 하면 돼요.

[50:00] 이게 정확히 뭔지 알아요.

[50:02] 아까 말씀드렸던 것처럼

[50:03] Next.js 15를 명시했어야 했는데,

[50:06] 이건 Next.js 14에서 15로 바뀌면서

[50:08] 생긴 특이사항 중 하나예요. 이제 이런

[50:13] params는 await를 써야 하는데

[50:18] 이건 많은 트레이닝 데이터에

[50:21] 없는 내용이에요. 이게

[50:23] 이런 모델들의 짜증나는 특징 중 하나죠.

[50:28] 사실 이런 문제를 해결하려면

[50:30] Cursor 규칙이 필요한데

[50:33] 솔직히 말하면

[50:35] 이 문제를 해결하는데 매우 효과적인

[50:38] 방법이기는 해요.

[50:47] 음, 여기서 제가 말씀드리자면

[50:50] params에 await를 써야 해요.

[50:55] 왜냐하면 Next.js 15에서

[50:58] params는

[51:02] Promise거든요. 그래서 제가 아까

[51:04] 앱 템플릿에서 규칙을 언급했던 거예요.

[51:06] 제가 이것에 대한 규칙을 가지고 있다고 생각하는데

[51:11] 서버 페이지의 매개변수는 await를 사용해야 합니다

[51:14] 이게 제 cursor 규칙에서 이 라인이 하는 일이에요

[51:16] 보통은 문제가 되지 않지만

[51:18] 한 번의 프롬프트로

[51:21] 이것이 해결되는 것을 볼 수 있습니다

[51:24] 여기서 문제 중 하나는

[51:30] 목업 데이터를

[51:34] 이제는 실제 데이터베이스 데이터로

[51:37] 교체해야 한다는 점입니다

[52:05] 자, 다음으로 할 일은

[52:07] 에러를 해결한 후에

[52:10] 실제 데이터를

[52:12] 확실히 가져오도록 하는 것입니다

[52:14] 왜냐하면 목업 데이터의 문제는

[52:16] (물 한 모금 마시고)

[52:19] 실제로 작동하지 않을 거예요

[52:28] 데이터가 실제가 아니기 때문이죠

[52:32] 데이터가 실제가 아니에요

[52:36] 그래서 해야 할 일은

[52:39] 시드를

[52:44] 업데이트하는 것입니다

[52:49] 좋아요, 잘 되는 것 같네요

[53:00] 이걸 더 고도화하려면

[53:01] 팀 기능같은 것들을 추가하겠지만

[53:02] 그건 이 범위를 벗어나요

[53:05] 지금 하는 것과 똑같은 작업을

[53:09] 단계만 더 추가하면 되는 거죠

[53:10] 더 많은 단계를 추가하는 것뿐이에요

[53:11]

[53:17] 좋아요, 채널 페이지를 업데이트하고

[53:19] 실제

[53:20] 데이터로 만드는 게 정말 좋네요. 이제

[53:24] 스크립트를 실행하라고 할 거예요

[53:28] 이 목업 데이터를 모두 제거해주길 바라는데

[53:29] 지금 하고 있는 것 같네요

[53:33] 실제 쿼리를 가져오고 있어요

[53:35] 정확히 우리가 원하는 대로예요

[53:38] 명령을 실행하면 시드가 성공적으로 적용되고

[53:42] 슈퍼베이스에

[53:45] 이제 각 테이블에 목업 데이터가 있을 거예요

[53:47] 스레드를 제외하고요

[53:48] 하지만 괜찮아요

[53:50] 나중에 추가할 수 있으니까요

[54:00] 이제 채널 페이지를 만들고 있고

[54:02] 채널을 생성하고 있어요

[54:07] 생성 중이에요

[54:13] 잠깐 홈으로 돌아가볼게요

[54:15] 이제 이 채널들은 실제 채널이에요

[54:18] general을 클릭하면

[54:20] 보시다시피 사이드바가

[54:22] 이중으로 보이는데

[54:24] 이건 쉽게 고칠 수 있어요

[54:26] 자, 'hello'라고

[54:30] 입력하고 보내면

[54:32] 이제 받아지고, 새로고침하면

[54:35] 그대로 유지되어야 하는데, 잘 되네요

[54:38] 이 메시지를 삭제해볼까요, 아주 깔끔하게

[54:41] 낙관적 업데이트가 잘 되네요

[54:44] 이제 메시지로 가보면

[54:47]

[54:50] intro 메시지가 사라졌어야 하는데

[54:53] 실제로 사라졌네요. 모든 게 잘 작동하는데

[54:56] 스레드도 작동하는지 궁금하네요

[54:59] 다시 한 번 말씀드리지만 다른 페이지로 이동했는데

[55:02] 이전에 말씀드렸듯이 조정이 필요하고

[55:04] 돌아가보면

[55:07]

[55:09] 보시다시피 스레드는

[55:12] 이 부분이 바로

[55:14] 자, 실제로 한번 해볼까요

[55:18] 지금 바로 해보죠

[55:22] 스레드 메시지가

[55:26] 로드되지 않네요. 아마도 새로운

[55:29] 컴포저 인스턴스가 필요할 것 같아요

[55:31] 새 업데이트 때문에 단축키 일부가

[55:33] 엉망이 됐네요. 저장하고

[55:36] 간단히 저장해볼게요

[55:38] 커밋하죠. 스레드 메시지가 로드되지 않는

[55:42] 문제를

[55:43] 채널과

[55:46] 화면을 처리해 보죠

[55:50] 꽤 간단할 것 같네요

[56:06] 좋아요, 이제 제대로 채널 페이지로 들어갈 텐데

[56:08] 아마도 데이터를 가져와야 할 것 같아요

[56:11] threads 테이블을 보면

[56:13] 음... 여기 있어야 하는데

[56:17] 아, 흥미롭네요. 채널 ID가

[56:19] 없네요

[56:20] [음악]

[56:22] 아마도 메시지에만 ID가 있나 보네요

[56:28] 괜찮아요. 어차피 메시지가

[56:31] 채널과 연결되어 있으니까요

[56:37] 음... 이건 좀 더, 쿼리를 어떻게

[56:41] 작성하고 싶은지에 따라 다르죠

[56:43] 하지만 지금은 쿼리 최적화에 대해

[56:47] 이야기하지 않을게요

[56:49] 최적화는

[56:51] 나중에 하죠. 쿼리 최적화가 필요하다면

[56:54] AI에게 물어보면 되니까요

[57:00] 자, 이게 바로

[57:02] 실제 코딩 workflow의 모습이죠

[57:04] 우리가 원했던 threads가 여기 들어가야 하는데

[57:06] 작동하지 않아서

[57:09] AI에게 도움을 요청한 거예요

[57:12] 문제를 명확하게 설명하고

[57:15] 우리가 원하는 것을 설명했죠. 이 경우는

[57:17] 그리 복잡하지 않았어요

[57:18] 이제 AI가 코드를

[57:21] 수정하고 있네요

[57:24] 보세요, 이제 threads를 가져오고 있고

[57:27] UI 작업을 하고 있어요

[57:29] 이제

[57:31] 보이시죠? Bob Johnson에 대한

[57:33] 답글이 하나 제대로 표시되고 있고

[57:37] 클릭하면 이제 UI가 보이네요

[57:41] 이제 우리가 원하는 페이지로 이동할 수 있고

[57:44] 아주 좋아요

[57:47] 이제 다른 것도 해볼 수 있죠

[57:51] 커밋을 할 수 있어요

[57:53] '스레드 버그 수정'이라고 하고

[57:56] 스레드 버그를 수정했는데

[57:58] 이런, UI가 별로네요

[58:01] 문제

[58:02] 없어요. 새로운 에이전트 인스턴스를 실행하죠

[58:06] 스크린샷을

[58:09] 찍어서 '어머나, 이게 뭐죠? 너무 안 좋아 보여요.'

[58:16] '도와주세요'

[58:20] 이 문제들을 해결하는데... 보세요

[58:23] 클릭하면 이미지가

[58:25] 모델에 전달되고, 모델이

[58:28] 사이드바가 두 개 있다는 걸 명확히 보고

[58:30] 텍스트가 회색이고

[58:32] 메시지 입력창이 지저분하다는 걸 보고

[58:35] 기본적으로 코드를 읽고

[58:37] 수정이 필요한 부분을 파악해서

[58:40] 수정할 거예요

[58:41] 아주

[58:43] 간단하죠

[58:54] 말씀드리지만, 이렇게

[58:56] 관련 파일들을 모두 읽고

[58:58] 필요한 작업을 파악하는 방식이

[58:59] 정말 인상적이에요

[59:02] 이건 확실히

[59:04] 제가 본 것 중 가장 큰

[59:07] 음... 개선 사항 중 하나예요

[59:10] 보시면 메시지 레이아웃의 간격과

[59:12] 정렬 문제, 사이드바와

[59:13] 제목 스타일, 메시지 타임스탬프가

[59:15] 더 나은 포맷팅이 필요하고 전반적인

[59:18] 간격도 수정해야 해요. 저는

[59:21] 이미지만 보고도 사이드바가

[59:22] 두 개라는 걸 알아차렸으면 좋겠어요

[59:25] 좋을 것 같은데... 뭘 할지 봐야죠

[59:28] 어떻게 할지

[59:31] 여기 호버 효과도 좋네요

[59:42] 보세요, 간격을 조정하고 있어요

[59:44] 조금씩

[59:48] 이런 것들은 사소하지만

[59:50] 작은 것들이 모이면

[59:53] 차이가 커져요. 오, 좋은 프로필

[59:55] UI 특히

[01:00:00] UI에서는 이렇게 할 수 있죠

[01:00:02] UI는 반복적으로 개선해 나갈 수 있는데

[01:00:04] 계속해서

[01:00:10] 특히 UI는 반복 작업이 매우 쉽죠

[01:00:13] 왜냐하면 매우 시각적이라서

[01:00:16] 테스트할 필요도 없이

[01:00:19] 바로 결과가 눈에 보이니까요

[01:00:21] 이제 채널들이 나열되고 있네요

[01:00:22] 전에는 없었던 것 같은데

[01:00:25] 보시다시피 아래쪽에

[01:00:26] UI 문제가

[01:00:28] 있었는데

[01:00:30] 버튼 색상이 잘못된 것이 해결되었죠

[01:00:34] 색상이 이상했었는데

[01:00:38] 텍스트

[01:00:47] 음... 그래요

[01:00:49] 여러분도 동의하시겠지만

[01:00:51] 꽤 잘

[01:00:53] 진행되고 있지 않나요? 코드를 한 줄도

[01:00:55] 작성하지 않고 그저

[01:00:57] 전체적인 구조를

[01:00:58] 조율하고 있을 뿐인데

[01:01:15] 자, 소프트웨어를 보내기 전에

[01:01:17] 요청이 완료될 때까지

[01:01:18] 기다려보죠

[01:01:23] 이런 종류의 작업은

[01:01:26] 이미지 입력만으로도 모델이

[01:01:28] 파악할 수 있으면 좋겠어요

[01:01:29] 왜냐하면 사람이라면 누구나

[01:01:31] 이걸 보고 가장 눈에 띄는 문제점을

[01:01:33] 즉시 발견할 수 있죠. 바로 이중

[01:01:36] 사이드바 문제인데, 이런 것들이

[01:01:39] 바로 제가 모델과 에이전트들이

[01:01:41] 잘 처리했으면 하는 부분이에요

[01:01:50] 자, 새로운 이미지를 가져와서

[01:01:53] 현재 상황에 대한

[01:01:56] 이해를 높이고

[01:01:57] 같은 에이전트 인스턴스에서

[01:02:00] 계속 반복 작업을 진행해보죠

[01:02:04] 왜냐하면 이것이

[01:02:06] 우리가 하고 있는 작업과 관련이 있으니까요

[01:02:09] 지금 UI 작업을

[01:02:11] 하고 있잖아요

[01:02:12] 좋아요, 문제를 파악했네요

[01:02:14] 무엇이 잘못되었는지

[01:02:17] 이제 이것이 수정되면

[01:02:21] 전체 높이를 채우도록 하고

[01:02:23] 문제를 해결한 다음

[01:02:26] 여기 있는 이슈를

[01:02:31] 해결하면 됩니다

[01:02:37] 보시다시피 페이지 레이아웃이 작동하고 있어요

[01:02:39] 제가 코드를 한 줄이라도 작성했나요?

[01:02:42] 기본 설정 외에는 아무것도

[01:02:44] 작성하지 않았죠

[01:02:47] 정말 놀라운 일이에요

[01:03:01] 자, 이제 스크린샷을 한 번 더 찍고

[01:03:04] 이것을 마무리한 다음

[01:03:06] 몇 가지 기능을 테스트해보면 되겠네요

[01:03:08]

[01:03:34] 전체 높이를 사용하게 하고

[01:03:35] 이것을 조금

[01:03:37] 이동시키고 싶어요

[01:03:40] 그게 되면 정말

[01:03:45] 좋겠네요. 레이아웃을 수정하고 있는데

[01:03:47] 아마도

[01:03:51] 좋아요, 이제 보기 좋아졌어요

[01:03:54] 메시지에 여백이

[01:03:56] 조금 더 있으면 좋겠네요

[01:03:58] 메시지

[01:04:03] 스레드에

[01:04:06] 물론 모델이 바로 인식하지 못하면

[01:04:09]

[01:04:10] 우리가 구체적으로

[01:04:12] 지정할 수 있죠. 이게 바로

[01:04:13] 프롬프트가

[01:04:14] 중요한 이유예요

[01:04:17] 음... 모델에게 더 명확하고

[01:04:19] 직접적으로 지시할수록 더 나은

[01:04:22] 결과를 얻을 수 있거든요

[01:04:31] 자, 메시지 리스트... 어서

[01:04:34] 이미지를 보고

[01:04:35] 여백을 조정해줘야 하는데

[01:04:37] 이런 부분에서 모델이

[01:04:39] 더 발전했으면 좋겠어요. 좋아요

[01:04:41] 조금 나아졌네요

[01:04:47] 메시지 목록을 클릭하면 볼 수 있죠

[01:04:53] 가로 패딩 1을 추가했는데

[01:04:56] 그래서 가장자리에 붙어있지 않게 됐어요

[01:04:59] 더 이상 가장자리에 붙어있지 않네요

[01:05:01] 이건 좋은 변화입니다

[01:05:05] 이제 훨씬 더 프로덕션 수준처럼 보이네요

[01:05:08] 5분 전보다 훨씬 나아졌어요

[01:05:10] 확실히 좋아졌죠

[01:05:16] 이제 메시지 항목을 업데이트할 건데

[01:05:18] 메시지를

[01:05:20] 보니까

[01:05:26] 한 가지 마음에 들지 않는 점은

[01:05:28] 스레드 메시지를 보려면 마우스를 올려야 한다는 거예요

[01:05:30] 하지만 이것도 역시

[01:05:31] 쉽게 개선할 수 있는 부분이에요

[01:05:33] 모델을 통해서요

[01:05:38] 이 코드는 정말 좋습니다

[01:05:40] 모두 깔끔하고

[01:05:41] 잘 정리되어 있어요

[01:05:47] 여기 더 많은 간격이 생겼네요

[01:05:49] 아마도 이건

[01:05:52] 음... 그 안에서 일어난 것 같아요

[01:05:58] 이 클래스들을 보면

[01:06:01] 보시다시피 우리가 원했던

[01:06:03] 가로 패딩이

[01:06:05] 적용된 것을 볼 수 있어요

[01:06:07] 자 이제 랜덤 채널로 가보면

[01:06:10] 랜덤으로

[01:06:11] 잠깐, 버그가 발생했네요

[01:06:14] 이건 좋은 사례예요

[01:06:16] AWA 버그가 다시 발생한 건가요?

[01:06:21] UUID에 대한 잘못된 입력이라고 하네요

[01:06:25] 이걸 해결하기 위해 이 부분을 가져와서

[01:06:29] 이건 새로운 이슈인데, 우리가 할 수 있는 건

[01:06:33] 이걸 제거하는 거예요

[01:06:35] 랜덤 채널로 이동할 때 이런 현상이 발생하는데

[01:06:39] 아마도 이건

[01:06:42] 그런데

[01:06:49] 제가 일부러 에러가 뭔지 설명하지 않았어요

[01:06:51] 에이전트가 스스로

[01:06:54] 에러를 파악하길 원하거든요

[01:06:56] 그래서 일부러 멈췄어요. 이게

[01:06:58] 아마도 마지막으로 할 작업이 될 텐데

[01:07:00] 제가 보여드리고 싶은 건

[01:07:02] 새로운 모델과

[01:07:04] 새로운 커서로

[01:07:06] 작업하는 방식이에요

[01:07:07] 업데이트를 통해서요

[01:07:10] 음... 제가 관찰한 바로는

[01:07:12] 이게 채널 이름이 아닌 채널 ID로 된 sl/channel이어야 해요

[01:07:18] 채널의 이름 대신 ID를 사용해야 하는데

[01:07:23] 실제로는 모델에 알려주면

[01:07:25] 2초 만에 해결될 문제예요

[01:07:27] 하지만 저는 확인해보고 싶어요

[01:07:28] 에이전트가 실제로

[01:07:30] 무슨 일이 일어나고 있는지

[01:07:33] 파악할 수 있는지 보려고요

[01:07:35] 링크 처리에 문제가 있네요

[01:07:39] 채널 링크가

[01:07:41] 문자열 이름 대신 UUID를

[01:07:42] 하드코딩되어 있네요. 좋아요, 에이전트가

[01:07:46] 문제를 정확히 파악했어요

[01:07:48] 이제 수정이 진행될 거예요

[01:07:59] XML에서 보시다시피

[01:08:01] diff 포맷으로 작업하고 있어요

[01:08:04] 이건 그들이 좀 더

[01:08:07] 다듬어야 할 부분이네요

[01:08:10] 자, 이제 공지사항을 클릭하면

[01:08:11] 공지사항이 보일 거고

[01:08:13] [음악]

[01:08:15] 랜덤을 누르면 랜덤, 일반을 누르면 일반 채널이 보일 거예요

[01:08:17] 물론 이 페이지들 중 일부는

[01:08:21] 아직 존재하지 않아서 작동하지 않을 텐데요

[01:08:22] 아직 만들어지지 않았기 때문이에요

[01:08:26] 자, 밥에게 DM을 보낼 수 있는지 볼까요

[01:08:29] 밥에게 '안녕 밥, 잘 지내?'라고 보냈어요

[01:08:33] 잘 지내?

[01:08:38] 음... 에러가 났네요. 알겠어요

[01:08:41] 마지막으로 한 가지만 더 할게요

[01:08:42] 약속할게요

[01:08:45] 다시 한번 말씀드리지만, 이건

[01:08:47] 새로운 문제네요. DM 전송 에러를 확인하고

[01:08:52] 에러 내용을 살펴보겠습니다

[01:08:54] 메시지를 보내고 AI 에이전트가 작업을 시작하도록 할 겁니다.

[01:08:56] 우리는 팀원들과 DM을 할 수 있도록 하고 싶은데,

[01:09:00] 이것이 바로

[01:09:02] 2025년의 코딩이 어떤 모습일지 보여주는 것입니다.

[01:09:06] 정말 놀라운 점은

[01:09:09] 이것이 초보자들도 접근하기 쉽다는 것입니다.

[01:09:12] 이것은 단순히

[01:09:14] 초보자에게 for 루프를 가르치는 방식이 아니라

[01:09:17] 이것은

[01:09:18] 소프트웨어를 한 번도 만들어보지 않은 사람들에게

[01:09:20] 실제로 동작하는

[01:09:22] 진짜 앱을 만드는 방법을 가르칠 수 있는 방법입니다.

[01:09:25] 우리가 직접 코드를 한 줄도 작성하지 않았는데도

[01:09:28] 이런 앱을 만들 수 있다는 게 정말 대단하죠.

[01:09:31] 우리는 코드를 직접 작성하지 않았고,

[01:09:33] 그저 약 45분 정도

[01:09:35] 이것저것 시도해봤을 뿐인데,

[01:09:36] 이건 정말 대단한 일이에요.

[01:09:39] 자, 여러분. 이걸 무시하지 마세요.

[01:09:42] 저는 경험 많은 소프트웨어 개발자들이

[01:09:45] 저처럼 수년간 코딩을 해온 사람들이

[01:09:47] 이런 것들을 보면서

[01:09:48] 뭐라고 하는지 알아요.

[01:09:51] 제가 그렇게 경험이 많진 않죠. 6년 정도 됐고

[01:09:53] 2019년에 코딩을 배우기 시작했지만,

[01:09:57] AI 모델이 여러분이 잘하는 일을 잘한다고 해서

[01:10:00] 다른 사람들을 무시할 필요는 없습니다.

[01:10:02] 이건 정말 좋은 발전이에요.

[01:10:03] 더 많은 사람들이 이런 기술에

[01:10:06] 접근할 수 있다는 건 훌륭한 일입니다.

[01:10:08] '이건 리액트 쓰레기야'라고 말하는 건

[01:10:11] 정말 좋지 않은 태도예요.

[01:10:13] 자,

[01:10:15] 누구나 소프트웨어를 만들 수 있다는 아이디어는

[01:10:17] 정말 멋진 것이고,

[01:10:19] 이게 바보 같다고 생각한다면, 당신이 재미없는 사람일 뿐이에요.

[01:10:28] 자, 이제

[01:10:31] 이론적으로 이게 작동해야 하는데,

[01:10:34] 잘 됐네요. 한번 빠르게

[01:10:37] 새로고침 해보고

[01:10:38] 간단히 'sub Bob'이라고 해보죠.

[01:10:41] 단순하게 가보죠.

[01:10:42] 네, DM이 잘 작동합니다. 우리는

[01:10:45] 코드를 한 줄도 작성하지 않았어요.

[01:10:48] 그냥 실제로 한번 더

[01:10:51] 새로고침해서 확인해볼게요.

[01:10:53] 잘

[01:10:54] 됩니다.

[01:10:58] 우리는 그저 에러 메시지를

[01:11:01] 에이전트에 보내고 'DM send error'라고만 말했는데

[01:11:04] 모든 것을 해결해줬어요.

[01:11:06] 좋습니다.

[01:11:12] 여기에는 많은 페이지가 있고,

[01:11:14] 저는 여기서 몇 시간이고

[01:11:15] 앉아서 작업할 수 있어요.

[01:11:17] 이걸 최대한 퀄리티 높게 만들 수 있지만,

[01:11:20] 어디선가는 끝내야 하니까요.

[01:11:22] 여러분이 이걸 흥미롭게 보셨길 바랍니다.

[01:11:24] 실제로 이건

[01:11:26] 제가 생각했던 것보다 훨씬 간단했어요.

[01:11:30] 우리는 그저 앉아서

[01:11:32] 에이전트가 일하는 걸 지켜봤을 뿐이에요.

[01:11:35] 앱 개발에 부담을 느끼셨던 분들이

[01:11:38] 이제는 덜 부담스럽게 느끼시고

[01:11:40] 힘을 얻으셨길 바랍니다.

[01:11:41] 제가 이 영상을 만든 이유는

[01:11:44] 여러분이 에이전트를 사용해

[01:11:45] 실제로 유용한 것을 만들 수 있다는 걸 보여주기 위해서예요.

[01:11:48] 여러분은 계속해서 발전시킬 수 있고,

[01:11:51] 어떤 작은 아이디어나 버그 수정이 필요하더라도

[01:11:53] AI 모델들이

[01:11:55] 점점 더 좋아지고 있고

[01:11:57] 커서같은 도구들로 감싸진

[01:11:59] 이런 모델들이 정말 좋아지고 있어요.

[01:12:01] 이제 우리가 마지막으로

[01:12:03] 알아야 할 것이 있는데요.

[01:12:05] 케이포이의 트윗으로 마무리해보죠.

[01:12:07] 한번 보시죠.

[01:12:09] 여러분의 모든 아이디어와 꿈을

[01:12:13] 실현하는데 필요한 것은

[01:12:17] 바로

[01:12:18] 행동력입니다.

[01:12:21] 행동력이 지능보다 더 중요합니다.

[01:12:23] 이제 여러분은 무한한 지능을

[01:12:26] 손끝에서 사용할 수 있습니다.

[01:12:28] 특히 풀스택 소프트웨어 개발에서요.

[01:12:30] 그러니 행동하는 사람이 되세요.

[01:12:33] 이제 더 이상 변명의 여지가 없습니다.

[01:12:35] 강력한 모델들과 도구들이 있으니

[01:12:39] 이것들을 잘 활용하시기 바랍니다.

[01:12:41] 이 영상이 도움이 되었길 바랍니다.

[01:12:43] 다음에 또 만나요!