Anthropic의 비밀 키워드 ‘UltraThink’: 전문 Claude Code 워크플로우
Ray Fernando
구독자 13,200명
요약
이 영상은 Cursor 환경에서 Claude Code를 최대한 활용하는 방법을 다룬 첫 번째 파트입니다. 화자는 ‘계획 모드(plan mode)’와 확장된 사고 토큰 윈도우를 제공하는 UltraThink 키워드를 이용해, 버그 수정과 UI 개선을 위한 체계적 워크플로우를 시연합니다. 화면 캡처를 통해 컨텍스트를 제공하고, 병렬 서브 에이전트를 활용해 UI 레이아웃·사전 컴포넌트·디자인 패턴을 각각 분석해 최적의 설계를 도출해냅니다. 마지막으로, Convex와 Tailwind CSS 기반의 프로젝트 규칙을 참조해 코드 리팩토링을 자동화하고, 실시간 반응형 UI를 완성하는 전 과정을 선보입니다.
주요 키워드
UltraThink
plan mode
sub-agents
Claude Code
Convex
ChatCN UI
Tailwind CSS
parallel agents
디자인 시스템
반응형 레이아웃
하이라이트
- 🔑 UltraThink 키워드로 일반적인 토큰 한계를 뛰어넘어 32K 이상의 확장된 사고 윈도우를 확보합니다.
- 📌 계획 모드(plan mode)를 활용해 작업 흐름을 수립하고, 주제별 지시문을 단계별로 명확히 정의합니다.
- 🚀 병렬 서브 에이전트(sub-agents)가 UI 레이아웃, 사전 컴포넌트, 디자인 패턴을 동시에 분석해 효율성을 극대화합니다.
- ⚡ 프로젝트 루트의 디자인·DB 규칙 파일을 참조해 ChatCN UI 컴포넌트와 Convex 쿼리를 일관성 있게 생성합니다.
- 🌟 화면 캡처를 직접 드래그&드롭해 에이전트에게 컨텍스트를 제공하고, 실시간 대화로 UI 개선 계획을 조율합니다.
- 🎯 Tailwind CSS와 ChatCN UI 기반의 콜랩시블 컴포넌트로 사용자 경험을 대폭 향상합니다.
- 🛠 Convex를 데이터베이스 겸 캐시 계층으로 사용해 상태 관리 코드를 완전히 제거합니다.
- 💡 Claude Code가 설계 규칙(8-point grid, 60-30-10 색상 규칙 등)을 자동으로 적용해 디자인 일관성을 유지합니다.
용어 설명
Claude Code
Anthropic이 개발한 AI 코딩 에이전트로, IDE 내에서 코드 작성·수정·리뷰를 지원합니다.
UltraThink
계획 모드에서 확장된 사고 토큰 윈도우(최대 32K 이상)를 확보해 심층 분석과 정확도를 높이는 비밀 키워드입니다.
계획 모드(plan mode)
Claude Code에서 작업 흐름을 단계별로 계획하고 관리할 수 있는 모드입니다.
서브 에이전트(sub-agents)
병렬로 실행되어 각기 다른 맥락 창을 통해 작업을 분담하는 보조 에이전트입니다.
Convex
실시간 반응형 데이터베이스이자 캐시 솔루션으로, 프런트엔드에서 상태 관리 코드를 제거합니다.
ChatCN UI
디자인 시스템 규칙을 따르는 UI 컴포넌트 라이브러리로, Tailwind CSS 기반입니다.
Tailwind CSS
유틸리티 퍼스트(utility-first) 방식의 CSS 프레임워크로, 빠른 스타일링과 일관성을 제공합니다.
인트로 및 워크플로우 개요
영상의 목표와 전체 구성을 소개합니다. Claude Code와 Cursor 환경, 오늘 사용할 핵심 기능(플랜 모드·UltraThink·병렬 에이전트)을 간략히 설명합니다.
화자가 Claude Code를 최대한 활용하는 방법에 대한 첫 번째 영상을 시작하며, 'UltraThink'라는 비밀 키워드를 소개합니다. 이 키워드를 사용하지 않는 사람들을 위한 특별한 비법이라고 설명합니다.
플래닝 모드와 함께 현재 Claude Code로 기능을 배포하는 방법을 다룰 예정이며, 더 자세한 정보는 rayfernando.ai의 'Getting the Most from Claude Code' 블로그 포스트에서 확인할 수 있다고 안내합니다.
플래닝 모드 기능을 사용해서 앱의 버그를 수정하는 방법을 시연할 예정이며, 이미 기존 리포지토리를 Cursor에서 사용하고 있다고 설명합니다.
계획 모드와 UltraThink 개념
Claude Code의 계획 모드로 작업 흐름을 수립하는 방법을 시연합니다. UltraThink 키워드를 통해 확장 사고 윈도우(32K 토큰 이상)를 적용하는 이유를 설명합니다.
더 깊이 생각하기를 위한 네 가지 다른 모드가 있으며, UltraThink가 생각 토큰 윈도우를 최대한 활용하는 가장 효과적인 방법이라고 설명합니다.
이 영상은 Claude Code 사용법에 대한 간단한 라이브스트림 입문서가 될 것이며, 실제 작업을 라이브로 보여줄 예정입니다. 시청자들에게 댓글을 남겨달라고 요청하며, 현재 참여자들에게 감사 인사를 전합니다.
Cursor에서 Claude가 이미 설치되어 있는 상태를 보여주며, Claude Code가 설치되어 있다면 IDE에서 실행할 수 있는 옵션을 볼 수 있다고 설명합니다.
앱 환경 및 개선 대상 소개
자막 앱 RayTranscribes의 레포지토리와 UI 레이아웃 문제를 설명합니다. 사용자 정의 사전 인터페이스의 단점을 지적하고 개선 범위를 설정합니다.
Ray transcribes 앱에 대해 소개하며, 이 앱은 사용자가 어떤 비디오든 업로드하면 번개처럼 빠른 속도로 전사해주는 기능을 제공한다고 설명합니다. 최신 버전에서 UI 레이아웃을 개선하고 싶다고 언급합니다.
현재 사용자 정의 사전 기능이 있지만 두 번째 단계에서만 사용할 수 있어서, 사이드바나 독립적인 인터페이스로 만들어 사용자 경험을 개선하고 싶다고 설명합니다.
V1 프로토타입의 UI가 어색하다고 판단하고, 스크린샷을 찍어서 Claude Code에 보여주어 개선방안을 찾아보겠다고 합니다.
스크린샷으로 컨텍스트 제공
Cursor에 스크린샷을 드래그&드롭해 Claude Code에 UI 상태를 전달합니다. SHIFT+TAB으로 계획 모드를 실행하고, 명령어를 통해 에이전트에 지시합니다.
Shift-Tab을 눌러 화면 플래닝 모드를 활성화하고, 파인더에서 스크린샷 두 개를 Cursor 에디터에 드래그하여 업로드하는 과정을 보여줍니다.
자신이 형편없는 디자이너라고 인정하면서도 안목은 있다고 말하며, 모델의 전문성을 활용해서 더 나은 레이아웃을 만들어보고 싶다고 합니다.
데스크탑 뷰에서 스크롤이 필요하고 단순함이 사라진 현재 사전 레이아웃의 문제점을 지적하며, 사용자들에게 더 직관적인 레이아웃을 만들고 싶다고 요청합니다.
사용자가 사전을 수정할 수 있는 기능을 추가하는 방안을 검토하고 있습니다. 사이드바에서 수정할 수 있도록 하는 것을 고려했지만, 일반 사용자에게는 너무 복잡할 수 있어 이 기능을 제외하기로 결정했습니다.
키보드 단축키를 사용한 효율적인 텍스트 삭제 방법을 설명하고 있습니다. Option Delete를 사용하면 단어 단위로 빠르게 삭제할 수 있지만, 키 명령어가 혼란스럽다고 언급했습니다.
스크린샷을 검토하여 더 나은 레이아웃을 만들기 위해 Claude의 'UltraThink' 키워드와 병렬 서브 에이전트를 사용하라고 지시했습니다.
병렬 서브 에이전트 활용
UltraThink와 병렬 에이전트를 사용해 UI 레이아웃·사전 컴포넌트·디자인 패턴을 각각 분석하도록 요청합니다. 에이전트별 역할 분담 방식을 확인합니다.
Claude Code가 현재 작업 중인 파일의 컨텍스트를 올바르게 인식하고 있는지 확인하고 있습니다. 사용자 인터페이스에서 특정 파일들을 선택하여 컨텍스트에 포함시킬 수 있다고 설명했습니다.
UltraThink 키워드와 병렬 에이전트 기능을 사용하여 Claude가 작업을 시작합니다. 스크린샷을 읽고 분석하기 위해 데스크탑을 작업 디렉토리로 추가했습니다.
병렬 에이전트의 작동 방식을 설명하고 있습니다. 각 에이전트는 128-256k 토큰의 자체 컨텍스트 윈도우를 가지며, 다른 컨텍스트 윈도우에서 여러 파일을 동시에 읽을 수 있습니다.
Claude가 실제로 스크린샷을 분석하기 시작했습니다. 커스텀 사전의 스크린샷을 확인하고 있으며, 전사 폼 레이아웃을 분석하기 위해 병렬 에이전트를 사용하고 있다고 보고하고 있습니다.
Claude가 3개의 병렬 에이전트를 활용하여 코드의 다양한 측면을 동시에 분석하는 과정을 설명합니다. 하나는 UI 레이아웃 검토, 다른 하나는 사전 컴포넌트 분석, 마지막 하나는 디자인 패턴 연구를 담당합니다.
디자인 패턴 문서를 활용하여 특정 서브 에이전트가 전체 컨텍스트를 소모하지 않고도 메인 에이전트에게 필요한 정보를 전달하는 시스템을 설명합니다. 이는 프로젝트 매니저 1명과 엔지니어 3명이 협업하는 것과 같은 방식입니다.
병렬 처리 방식으로 3개의 작업이 동시에 진행되며, 사용자 인터페이스에서는 2-3개의 팝업창이 나타나 승인이나 다른 작업을 처리할 수 있다고 설명합니다. 인터페이스가 다소 혼란스럽지만 흥미로운 방식이라고 언급합니다.
UI 파일이 다른 앱들로 가는 게이트웨이 역할을 한다고 설명하며, 많은 것들이 이미 임포트되어 있어 시스템이 상황을 잘 이해한다고 언급합니다.
데스크톱에서 스크롤 문제를 해결하는 계획을 설명합니다. 전사 양식에 불필요하게 중첩된 스크롤 가능한 컨테이너들이 있어 이중 스크롤 바를 만들고 있다는 문제점을 지적합니다.
첫 번째 계획 결과 리뷰
디자인 패턴, 레이아웃 개선, 모바일·테이블트 호환성 등을 반영한 세 가지 계획을 살펴봅니다. 불필요한 기능은 제외하고, 필요한 개선사항을 선택합니다.
스크롤 가능한 컨테이너를 제거하고 폼이 부모의 자연스러운 스크롤을 사용하도록 변경하는 해결책을 제시합니다. 모바일과 태블릿에서도 잘 작동하는지 확인하고 회귀 현상이 발생하지 않는지 검토하려고 합니다.
단일 스크롤 바로 기존 기능을 유지하면서 최소한의 변경으로 스크롤링이 가능한 결과를 기대한다고 언급하며, 계속 계획을 세우겠다고 결정합니다.
또 다른 팝업창이 나타나서 승인된 사전 레이아웃 계획을 검토하고 있다고 설명합니다. 구현 분석을 바탕으로 더 컴팩트하고 직관적인 레이아웃을 만들 수 있는 기회들을 발견했다고 언급합니다.
사전 기능을 위한 구조 개선과 단어 목록 결합, 더 나은 시각적 계층구조 구성에 대한 계획을 논의합니다.
에이전트가 제안한 디자인 패턴들을 검토하며, 사이드바 압축 표시, 진행 상황 표시 패턴 등의 개선 사항을 평가합니다.
기본적으로 축소된 상태로 유지하다가 사용자 상호작용 시 확장하는 방식에 대한 찬성 의견을 표현합니다.
팝오버 시트 추가와 사이드 패널 이동에 대한 제안을 검토하지만, 플로팅 액션 바와 인라인 배지 표시 등의 개선 방안을 더 선호합니다.
새로운 기능 개발을 위해 브랜치 설정을 깜빡했다는 것을 깨닫고, 메인 브랜치에서 직접 작업하는 것의 위험성을 인지합니다.
수동 편집 승인 방식에 대한 관심을 표현하며, 올바른 브랜치로 이동하기 위한 준비 작업을 시작합니다.
브랜치 생성 및 컨텍스트 고도화
실수 방지를 위해 기능 브랜치를 생성합니다. 추가 컨텍스트(모바일·태블릿 회귀 테스트, Convex 규칙 파일)를 에이전트에 제공해 계획을 정교하게 다듬습니다.
features/dictionary-layout-fix 브랜치를 생성하고 퍼블리시하여 개발 환경을 적절히 설정합니다.
브랜치 설정 완료 후 계획 진행을 승인하며, 서브 에이전트들의 동작 방식에 대한 약간의 혼란을 표현합니다.
계획을 계속하기 전에 추가 컨텍스트를 제공하기로 결정하며, 제안된 개선 사항 중 마음에 드는 것이 있다고 언급합니다.
축소 및 확장 가능한 사전 기능과 사용 가능한 단어 수 표시에 대한 개선 제안을 검토합니다.
태블릿과 모바일에서도 작동하도록 계획을 개선하되 기존 사용자 경험에서 후퇴하지 않도록 주의해야 한다고 강조합니다.
코드 변경 전에 'ultra think'를 사용해 상세한 계획을 요청하고, LLM이 무엇을 할 것인지 이해하고 문서화하는 것이 중요하다고 설명합니다.
휴식 후 돌아왔을 때 참조할 수 있도록 하고, 언어 모델에게 기능을 넘겨줄 때 무엇이 완료되고 완료되지 않았는지 파악하는 것이 중요하다고 강조합니다.
완료되지 않은 작업을 파악하는 것이 가장 중요하며, 코드가 적용되기 전에 검토하여 진행 상황을 이해하려고 노력한다고 설명합니다.
시스템이 세 개의 서브 에이전트를 시작했고, shadtn 컴포넌트를 확인하며 BunX 사용을 인식하는 등 규칙 파일을 통해 설정을 파악하고 있다고 설명합니다.
디자인 시스템 규칙 통합
프로젝트 루트의 Markdown 규칙 파일을 에이전트가 자동으로 인식해 8-point grid, 색상 규칙, UI 표준을 코드 생성에 반영합니다. 일관성 확보 과정을 확인합니다.
Opus 최대 플랜을 사용하고 있으며, 현재 12명의 유료 사용자가 있고 리사가 연간 플랜을 결제했다고 감사 인사를 전합니다.
사용자들에게 좋은 경험을 제공하기 위해 빠른 피드백과 반복에 집중해왔으며, Claude의 반응형 디자인 계획을 검토합니다.
Claude가 제시한 컨테이너 구조 브레이크포인트와 모바일에서 타이틀 가시성 처리 등 반응형 디자인 계획을 긍정적으로 평가합니다.
Claude Code와 작업할 때의 핵심 방법론을 설명합니다. 여러 번 수정 요청을 보내는 대신, 처음부터 제대로 작동하도록 하는 것이 중요하며, 이것이 AI 에이전트들과 효과적으로 작업하는 방식이라고 강조합니다.
시스템이 사전 섹션과 모델 선택 기능, 핵심 응답들을 포함한 다양한 패턴을 따르고 있음을 보여줍니다. 특히 디자인 시스템 규정 준수의 중요성을 강조하며, RayFernando.ai에 구축된 계획 시스템을 소개합니다.
디자인 시스템의 구체적인 구현을 설명합니다. 마크다운 파일 형태의 규칙들을 레포지토리에 넣어두면 Claude Code가 자동으로 찾아서 UI 변경 시 이를 고려한다고 설명합니다. 8포인트 그리드 시스템과 같은 구체적인 디자인 규칙들이 자동으로 적용되는 과정을 보여줍니다.
Claude Code의 장점을 설명하며, 추가적인 컨텍스트 정보를 잘 찾아내고 활용하는 능력을 칭찬합니다. 60-30-10 색상 규칙과 같은 디자인 시스템이 LLM의 UI 생성에 어떻게 일관성을 제공하는지 구체적으로 설명합니다.
코드 리팩토링 및 결과 확인
기존 사전 UI 코드를 분리해 CollapsibleDictionary 컴포넌트를 새로 생성합니다. Convex 훅과 ChatCN UI를 활용한 구현 결과를 diff 뷰로 검토합니다.
모바일 태블릿 레이아웃에 대한 관찰 결과와 접을 수 있는 구현 권장사항을 언급합니다. 두 번째 에이전트가 shad CNUI 접을 수 있는 컴포넌트를 추가하겠다는 계획을 제시하는 것으로 마무리됩니다.
Claude Code가 프로젝트 규칙 파일을 자동으로 참조하여 필요한 명령어들을 실행하는 과정을 설명합니다. 개발자가 수동으로 파일을 선택할 필요 없이 Claude가 적절한 컨텍스트를 파악해주는 장점을 강조합니다.
프로젝트 규칙 파일에 정의된 디자인 시스템과 UI 컴포넌트 설치 방법을 보여줍니다. ChatZN을 사용하는 UI 컴포넌트와 특정 설치 명령어가 규칙으로 정의되어 있어 Claude가 이를 자동으로 활용할 수 있습니다.
Convex 규칙 파일을 추가하여 계획을 업데이트하는 과정을 설명합니다. Convex는 실시간 반응성을 제공하는 데이터베이스 프로바이더로, 모든 데이터가 백엔드에 있고 프론트엔드는 '윈도우' 역할만 합니다.
Convex의 실시간 동기화 기능을 설명하며, 여러 윈도우를 열어두고 한 곳에서 변경사항을 만들면 모든 윈도우에 즉시 반영되는 예시를 보여줍니다. 상태 동기화나 취소 작업에 대한 걱정 없이 개발할 수 있다는 장점을 강조합니다.
Ray Transcribes 앱의 실시간 동기화 기능을 시연합니다. 두 개의 창에서 파일을 선택하고 편집하면 즉시 반영되며, 데이터베이스 기반으로 동작하여 충돌이나 캐싱 문제가 없다고 설명합니다.
Convex 데이터베이스의 장점을 강조합니다. 프론트엔드와 백엔드 간의 동기화나 캐시 무효화 등 복잡한 작업을 자동으로 처리해주어 개발자가 추가 코드를 작성할 필요가 없다고 설명합니다.
반응형 레이아웃 테스트
데스크톱과 모바일 뷰에서 스크롤 중첩과 패딩 문제를 재검토합니다. 에이전트에 스크린샷을 제공해 기본 접힘 상태와 간격을 추가로 조정하도록 요청합니다.
Convex의 규칙 시스템을 소개합니다. LLM이 따라할 수 있는 명확한 규칙들이 있어서 코드 생성에 도움이 되며, 상태 관리와 구현 단계에 대한 자세한 정보를 제공한다고 설명합니다.
시청자들과 실시간으로 소통하며 스타일링 팁의 유용성에 대해 이야기합니다. GenSpark의 슈퍼 에이전트 테스트를 권하면서도 현재는 앱 출시에 집중하고 있다고 언급합니다.
AI 모델 비교에 대해 논의합니다. 현재 Opus가 최고라고 평가하며, Groq4는 아직 개발 중이고 코딩 에이전트 기능이 완전하지 않다고 설명합니다. RepoPrompt와 함께 사용한 경험을 공유합니다.
개발 도구 선택에 대한 개인적인 견해를 공유합니다. Cursor보다 Claude Code를 선호하는 이유를 설명하며, 월 200달러의 Claude Code 구독이 더 가치 있다고 판단한다고 언급합니다.
자신의 워크플로우를 시청자들에게 소개하는 목적을 설명하며, 지금까지 진행한 Ray Transcribes 프로젝트의 내용을 요약하겠다고 마무리합니다.
Claude Code 활용법 파트 1을 소개하며 지금까지 계획 모드를 광범위하게 사용하여 에이전트들이 준비될 수 있도록 했다고 설명합니다.
울트라 씽크라는 특별한 키워드를 소개하며, 이것이 4개 키워드 중 하나로 최소 32,000 토큰의 사고 창구를 제공하여 정확도를 크게 향상시킨다고 설명합니다.
서브 에이전트를 병렬로 실행하는 방법을 설명하며, 각 에이전트가 자신만의 컨텍스트 창과 사고 창을 가져 더 정확한 결과를 얻을 수 있다고 합니다.
커밋·빌드·테스트
자동 생성된 커밋 메시지로 변경사항을 스테이징하고 브랜치에 푸시합니다. bun run build로 빌드 오류를 점검하고 개발 서버에서 최종 동작을 확인합니다.
세 개의 에이전트가 스스로 역할을 분담했던 과정을 설명합니다. 하나는 디자이너, 하나는 규칙 파일 처리, 다른 하나는 코드 분석을 담당했습니다.
각 에이전트가 보고한 계획들을 반복적으로 수정하고 검토하는 과정을 거쳐 최종적으로 코드 작성 전에 큰 계획을 검토했다고 설명합니다.
AI와 코딩할 때 계획을 올바르게 세우는 것이 매우 중요하다고 강조하며, 현재 Claude Code가 작업하고 있는 동안 스트림에서 시청자들과 대화하고 있다고 설명합니다.
AI가 규칙과 디자인 관련 요소들을 찾아낸 과정을 설명하며, 시청자들을 위한 추가 정보로 rayfredando.ai에 있는 디자인 가이드에 대해 언급합니다.
프로젝트에 있는 규칙 파일을 소개하며, 생성될 코드가 특정 가이드라인을 따를 것이라고 설명합니다. Tailwind를 사용하는 이유에 대해 통합성과 일관성 측면에서 설명합니다.
Claude가 코드를 폼에서 빼내서 리팩터링을 진행하고 있다고 설명합니다. 할 일 목록에는 반응형 동작 테스트, 모바일 레이아웃, 리파이어링과 어그레션이 포함되어 있습니다.
diff 뷰를 통해 변경사항을 확인하며, Claude가 기존 코드를 제거하고 'collapsible dictionary'라는 새로운 파일을 생성했다고 설명합니다.
새로운 파일이 접을 수 있는 딕셔너리를 처리하며, 이것이 좋은 리팩터링이라고 평가합니다. Claude가 convex 규칙과 use dictionary의 훅들을 올바르게 사용하고 있다고 설명합니다.
convex 데이터베이스의 mutations와 useQuery를 사용한 구현을 설명합니다. Claude Code가 작성한 코드가 잘 구성되어 있고 훅 형태로 재사용 가능하게 설정되어 있다고 칭찬합니다.
소프트웨어의 복합적인 효과에 대해 설명하며, 메인 컴포넌트에서 코드를 추출하여 별도의 컴포넌트로 만든 것을 설명합니다. 데이터는 그대로 유지되면서 뷰로 변환되고 있다고 합니다.
ChatCN을 사용해서 설치된 UI 컴포넌트에 대해 설명하고, 구현이 완료되었다고 확인합니다. 모든 기존 기능을 유지하면서 특히 모바일 디바이스에서 레이아웃을 개선했다고 합니다.
이제 bun dev와 convex dev 명령어를 실행해야 한다고 설명합니다. 아직 코드를 배포하지 않고 convex 함수의 변경사항을 확인하려고 합니다.
마무리 및 커뮤니티 안내
멤버십 혜택과 Discord 초대, RayTranscribes 할인 쿠폰(RayCooks)에 대해 안내합니다. 앞으로의 스트리밍 일정과 질의 응답 채널을 안내하며 영상을 종료합니다.
OpenWebUI를 열어두지 않았다는 것을 깨닫고 찾고 있습니다. 다른 도구를 열어두고 있었다고 설명합니다.
개발 과정에서 프로세스를 종료하고 앱을 다시 시작하는 과정을 설명합니다. 블러 컴포넌트를 설정하여 보안을 유지하면서 로그인할 수 있다고 합니다.
라이브 스트리밍 중 페이지를 찾을 수 없다는 오류가 발생합니다. 로컬 개발 환경에서 여러 프로젝트를 동시에 작업할 때 쿠키 충돌 문제가 발생할 수 있다고 설명합니다.
앱 로딩 문제를 해결하기 위해 캐시를 지우고 강제 새로고침을 수행합니다. OpenWebUI로 리디렉션되는 문제가 있었지만 해결되었다고 합니다.
앱이 정상적으로 로드된 후 이전 작업에서 발생한 오류들을 확인합니다. 커스텀 딕셔너리가 있고 모바일 뷰에서 작업하고 있습니다.
모바일 뷰가 부분적으로 수정되었지만 여전히 여러 개의 스크롤바 문제가 있습니다. 스크린샷을 제공하여 현재 상태를 확인하고 개선점을 찾으려 합니다.
모바일 레이아웃이 퇴보했다고 지적합니다. 단어들이 겹치는 문제가 있고, UI가 전체 화면을 제대로 활용하지 못하고 있다고 설명합니다.
하단에 여전히 많은 공간이 남아있다고 지적합니다. iPhone Pro Max에서 테스트하면서 UI 문제가 자신의 설정 문제일 수도 있다고 언급합니다.
UI 문제점을 확인하며 여러 스크롤 바와 텍스트 겹침 현상을 지적하고, 모바일 최적화가 되지 않은 상태를 확인합니다.
collapsible 컴포넌트의 초기 상태를 설정하려고 시도하며, useState의 true/false 값에 대해 혼란스러워합니다.
collapsible 컴포넌트의 상태 관리 로직을 이해하려고 노력하며, setIsOpen과 관련된 동작을 파악하려고 합니다.
데스크톱 화면에서 UI가 화면 밖으로 나가는 문제를 발견하고, 이에 대한 피드백을 제공하기 위해 스크린샷을 준비합니다.
collapsible 콘텐츠가 처음에는 닫힌 상태로 시작하도록 제안하며, 스크린샷을 통해 피드백을 제공합니다.
시청자들의 댓글을 확인하며, Ultrathink에 대한 질문과 Claude Code의 웹 UI 버전에 대한 흥미로운 제안을 발견합니다.
시청자가 제안한 스크린샷 클립보드 저장 및 드래그 앤 드롭 워크플로우에 대해 긍정적으로 반응하며, 현재 여러 스크린샷을 처리하는 방식을 설명합니다.
Claude Code가 너프되었다는 시청자들의 우려에 대해 언급하며, 자신의 계획 중심 워크플로우가 여전히 잘 작동하고 있다고 설명합니다.
Claude Code의 성능과 웹 개발 작업에 대한 질문에 답하며, 현재까지 잘 작동하고 있다고 평가합니다.
모바일 오버랩 기능을 통해 버튼을 재구성하고 기본 접기 상태를 만들어 더 깔끔한 모바일 헤더를 구현했습니다.
컴포넌트 변경 후 사이트를 새로고침하고 다시 빌드하여 확장 가능한 UI 요소가 제대로 작동하는지 확인합니다.
커스텀 사전 기능을 고급 모드로 설계하여 사용자에게 선택권을 제공하되, 너무 눈에 띄지 않게 구현한 것에 대해 만족감을 표현합니다.
개선된 UI를 브랜치에 커밋하고 트랜스크립트 생성 기능이 정상적으로 작동하는지 테스트를 진행합니다.
개발자가 변경사항을 커밋하는 과정을 설명하고 있습니다. 커밋 메시지 생성 기능을 사용하여 자동으로 메시지를 생성하고, 플러스 기호를 눌러 모든 변경사항을 스테이징합니다.
package JSON의 접을 수 있는 기능과 전사 폼을 위한 코드 변경사항들을 확인합니다. 커스텀 딕셔너리를 React 컴포넌트인 CollapsibleDictionary로 교체하는 작업이 완료되었습니다.
Convex에서 모든 데이터를 가져오는 훅을 활용하여 반응성을 구현했습니다. ChatZN 컴포넌트를 사용한 레이아웃이 적절하게 구성되어 있어 중단점을 만들기에 충분합니다.
변경사항을 feature 브랜치에 동기화하고 빌드 테스트를 수행합니다. bun run build 명령어를 사용하여 타입 오류나 다른 문제가 없는지 확인하는 과정을 거칩니다.
빌드 과정에서 발생하는 오류들이 버그 수정이나 Claude Code에게 수정을 요청하는 데 도움이 된다고 설명합니다. 하지만 현재 UI가 완전히 만족스럽지 않다고 언급합니다.
상단에 추가 패딩이 필요하지 않다고 판단하고 마지막으로 한 번 더 시도해 보려고 합니다. 단축키 설정 문제로 인해 붙여넣기가 제대로 작동하지 않는 상황을 겪고 있습니다.
변경사항들이 전반적으로 훌륭하지만 데스크톱에서 사소한 문제가 하나 있다고 언급합니다. 패딩과 관련된 미세한 조정이 필요한 상황입니다.
스크린샷에서 보이는 UI 상단의 패딩 문제를 해결하기 위해 코드 수정을 진행하고 있습니다. 시스템이 자동으로 코드를 검토하고 수정하도록 설정했습니다.
스트림 참여자들과 인사를 나누며 곧 방송을 마쳐야 한다고 알립니다. CC 사용량 증가에 대한 우려를 표현하며, 이것이 사용자들이 얼마나 지출할지에 대한 깨달음을 준다고 언급합니다.
모든 댓글을 확인할 시간이 없어서 아쉽다고 하며, 먼저 멤버들에게 인사를 드리고 싶다고 합니다. 유튜브 멤버십 가입을 안내하며, 현재 60여명의 멤버가 있고 100명 도달 시 가격이 두 배로 오를 예정이라고 알립니다.
Eddie의 스케줄 문의에 답변하며, 7월과 8월 '스트리밍의 여름' 기간 동안 매일 태평양 일광 절약 시간 오전 9-10시에 방송한다고 설명합니다. 가족과의 시간을 우선시하면서도 스트림에 참여하고 있다고 언급합니다.
멤버들에게 디스코드 가입 방법을 안내하며, 멤버 전용 게시물의 지침을 따라하면 디스코드에 초대해준다고 합니다. 디스코드 커뮤니티가 활발하며 오늘 아침에도 질문들이 올라왔다고 설명합니다.
스트림 참여자들에게 감사 인사를 전하며, Anthropic의 토큰 가격에 대한 실제 비용과 공식 가격의 차이에 대해 논의합니다.
전사 폼의 패딩 변경사항을 확인하고 사이트 새로고침이 필요한 상황을 설명합니다.
시간이 촉박한 상황에서 친구와의 약속 때문에 서둘러야 하지만 시청자들을 위해 시간을 할애하고 있다고 설명합니다.
Claude Code와 Cursor를 활용한 워크플로우 시리즈의 1부를 요약하며, 계획 모드와 울트라 씽크 모드의 활용법을 설명합니다.
AI가 설치된 도구들을 인식하고 디자인 가이드라인을 따라 작업한 결과에 대해 설명하며, 관련 정보를 확인할 수 있는 웹사이트를 안내합니다.
채널 멤버십을 통한 지원을 요청하며, 첫 100명의 멤버를 모으면 풀타임 에디터를 고용해 라이브 스트림 편집이 가능해진다고 설명합니다.
멤버들에게 우선 제공되는 짧은 라이브 스트림과 일반 공개 예정인 전체 스트림에 대해 설명하며, 타임스탬프를 통한 내비게이션 기능을 안내합니다.
시청자들에게 댓글로 질문을 남기도록 안내하며, 매일 태평양 일광 절약 시간 기준 오전 9-10시에 라이브 스트림을 진행한다고 알려줍니다.
라이브 스트림에서 질문에 우선적으로 답변하지만, 너무 많은 질문으로 인해 모든 것을 다루지 못할 수 있으며, 나중에 댓글을 확인하여 답변할 것이라고 설명합니다.
RayTranscribes 앱에 대한 할인 코드 'RayCooks'를 제공하며, 이 코드로 15달러 할인을 받을 수 있다고 안내합니다.
RayTranscribes.com의 다양한 플랜에 대해 설명하며, 스타터 플랜으로 한 달 무료 사용이나 베타 버전에 5달러로 참여할 수 있다고 안내합니다.
오늘은 Claude Code를 최대한 활용하는 방법의 첫 번째 편입니다. 여러분께 하나의
작은 비밀을 알려드리겠습니다. 바로 UltraThink라는 것입니다.
만약 여러분이
이 키워드를 사용하지 않고 있다면, 이것은
정말 특별한 비법이 될 것입니다.
우리가 다룰 내용은
이것과 함께 다른 것들, 플래닝 모드와 제가
현재 사용하고 있는 것들을 포함해서
사용하여
Claude Code로 몇 가지 기능을 현재 배포하고 있습니다.
이것을 실제로 좀 더 자세히
확인해보고 싶다면,
실제로 rayfernando.ai에 블로그 포스트를
작성해 두었습니다. 제목은
Getting the Most from Claude Code입니다.
그래서 이것을 읽어보고 싶으시다면
코드로 가보세요.
그냥 가서 확인해 보시거나
이것을 한번 살펴보시거나
저와 함께
따라 해보실 수 있습니다.
저와 함께요.
오늘 우리가 다룰 내용은
이 멋진 플래닝 모드 기능입니다.
그래서 우리는 플래닝 모드를 사용해서
제 앱의 몇 가지 버그를 수정하는 데 도움을 받을 것입니다.
저는 이미 기존 리포지토리를 가지고 있습니다.
현재 이것을 Cursor 안에서
사용하고 있습니다.
그래서 우리는 그것도 다룰 것입니다.
다음으로 우리가 다룰 것은
더 깊이 생각하기입니다.
더 깊이 생각하기에는 네 가지 다른 모드가
있는데, 여러분이 살펴봐야 할 것들입니다.
살펴보세요.
그리고 지금 높은 수준의 요약을 해보면,
UltraThink는 생각 토큰을 최대한 활용하는
가장 효과적인 방법입니다.
윈도우를 말이죠.
그리고 우리가 그것에 대해 좀 더 들어가면서
조금 더 설명해 드리겠습니다.
만약 여러분이 이 영상을 시청하실 거라면,
이것은 제가 Claude Code를 어떻게 사용하는지에 대한
정말 간단한 라이브스트림 입문서가 될 것입니다.
Claude Code를 어떻게 사용하는지에 대한.
그리고 여러분은 저와 함께 걸어갈 것입니다.
저는 여러분에게 이런 종류의 일을 라이브로 어떻게 하는지
보여드릴 것입니다.
그래서, 네, 만약 여러분이 어떤 댓글이 있다면,
아래에 남겨주세요.
맨 처음에 저는 이 정보를 전달하는 것을
확실히 하고, 그 다음에
그 다음에
조금 후에 댓글들을 확인하겠습니다.
그래서 지금 참여할 수 있는 모든 분들께 감사드립니다.
참여해 주신 모든 분들께
그리고 댓글도 남겨주세요. 저는 Christian Codes를 보고,
Elal도 보고, Madagir도
거기서 보고 있습니다.
그래서 자, 여러분, 시작해 보겠습니다.
시작해 보겠습니다.
그래서
Cursor에서 제가 이것을 로드한 방법은
이미 Claude가 여기 위에 설치되어 있고
만약 여러분이 이미
Claude Code가 설치되어 있다면, IDE에
설치되어 있으면 아마
보실 수 있을 것입니다.
실행하기 위해 여기 위에 무언가가 보일 것입니다.
그리고 지금 현재 실행 중이므로,
실제로 모든 것이 이미 설정되어 있습니다.
그리고 제가 Ray transcribes에서 제 앱으로
하려고 하는 것은, 기본적으로
제 앱이 하는 일은 여러분이 어떤 비디오든 업로드할 수 있게 하고
그러면 제가 번개처럼 빠른 속도로
여기 있는 몇 가지 공급업체를 사용해서 그것을 전사합니다.
그래서 제가 방금 수정한 앱의 최신 버전에서,
저는 이런 종류의 UI
레이아웃을 가지고 있는데, 이것을 조금 더
잘 고치거나 개선하는 데 도움을 받고 싶습니다. 제가 추가한
잘 고치거나 개선하는 데 도움을 받고 싶습니다. 제가 추가한
이 사용자 정의 사전이 있는데, 사용자 정의 사전을
사용할 수 있도록 사이드바 여기나 어딘가 옆에
배치하고 싶어서 사용자들이 앱을 사용할 때
더 나은 경험을 할 수 있도록 하고 싶습니다. 왜냐하면
지금 상태에서는 앱을 사용해서 사용자 정의 사전을
추가하려면 두 번째 단계를 거쳐야만
사용할 수 있기 때문입니다.
하지만 이 인터페이스는 정말 좋긴 하지만,
이런 형태가 아닌 독립적인 인터페이스를
만들 수 있다면 좋겠습니다. 사람들이 스스로
할 수 있도록 말이죠. 그래서 이걸 설명하거나
수정할 수 있을지 보고 싶습니다. 제가 보기에는
UI가 조금 어색한 것 같거든요. 이건 V1
프로토타입이고 스크린샷을 좀 보여줘서
개선해볼 수 있을지 보고 싶습니다.
먼저 스크린샷을 찍어서
Claude Code에 보여주겠습니다.
이렇게 하면 제가 달성하려는 것을
이해할 수 있을 것 같습니다.
그런 다음 플래닝 단계를 도와보겠습니다.
Shift-Tab을 누르고 다시 Shift-Tab을 누르면
화면 플래닝 모드 기능이 나타납니다.
그리고 파인더 창을 열어서
데스크탑에 있는 스크린샷들을 가져왔습니다.
두 개의 스크린샷이 있고, Cursor에서
이것들을 드래그해서 넣을 수 있습니다.
Shift 키를 누르고 있어야 합니다.
에디터에 드롭하려면 Shift를 누르라고 나오네요.
그러면 에디터에 드롭되는데, 파일이 하나만 드롭됐네요.
한 번에 하나씩만 드롭할 수 있나 보네요.
아쉽네요. 어떤 파일이 드롭됐나 보니
447이라고 되어 있는 파일이 드롭됐네요.
이제 두 번째 파일도 드롭해야 하니 Shift를 누르고
이제 두 파일이 모두 들어간 것을 볼 수 있습니다.
이런 작은 구분자로 나뉘어 있네요.
이제 명령어를 입력하고 싶으니 Shift Enter를
몇 번 누르겠습니다.
그리고 Claude가 해야 할 일을
지시해보겠습니다.
지금 상태로는 정말 확실한 레이아웃이 없어서
저는 정말 형편없는 디자이너입니다.
안목은 있지만 모델의 전문성을 활용해서
좀 더 생각해보고 싶습니다.
그래서 한번 대화해보고 어떤 결과가 나오는지 보겠습니다.
아래는 사용자들이 정보를 업데이트하고
추가하려고 할 때 사용하는 사전의 레이아웃입니다.
데스크탑 뷰에서 볼 수 있듯이 스크롤이 조금 있고
단순함이 사라져버렸습니다.
앱을 위한 더 나은 레이아웃을 만들어서
사용자들에게 좀 더 직관적이 되도록
할 수 있는지 보고 싶습니다.
좀 더 나은 레이아웃을 만들 수 있는지
확인해보겠습니다.
지금 상태로는 정말 확실한 레이아웃이 없고
저는 정말 형편없는 디자이너입니다.
하지만 안목은 있어서 모델의 전문성을 활용해
좀 더 생각해보고 싶습니다.
그래서 한번 대화해보고 어떤 결과가 나오는지 보겠습니다.
아래는 사용자들이 정보를 업데이트하고
추가하려고 할 때 사용하는 사전의 레이아웃입니다.
데스크탑 뷰에서 볼 수 있듯이 스크롤이 조금 있고
단순함이 사라져버렸습니다.
앱을 위한 더 나은 레이아웃을 만들어서
사용자들에게 좀 더 직관적이 되도록
할 수 있는지 보고 싶습니다.
사용자들이 정보를 업데이트하고 추가하려고 할 때
사용하는 사전의 레이아웃입니다.
데스크탑 뷰에서 볼 수 있듯이 스크롤이 조금 있고
단순함이 사라져버렸습니다.
앱을 위한 더 나은 레이아웃을 만들어서
사용자들에게 좀 더 직관적이 되도록
할 수 있는지 보고 싶습니다.
사용자들에게 좀 더 직관적이 되도록
사용자들이 이 단계에서 사용하기 쉽도록 말이죠. 두 번째로, 사용자들이
사전을 수정할 수 있는 방법도 있었으면 좋겠어요. 아마 사이드바에서요.
예를 들어, 사이드바를 선택해서
거기서 몇 가지 수정을 할 수 있도록 말이죠.
하지만 사실 이 기능은
그냥 제외하려고 해요. 좀
혼란스러울 것 같거든요. 일반 사용자라면
그냥 삭제를 누르면
이 모든 단어들을 삭제하는 데 너무 오래 걸릴 거예요.
할 수 있는 것 중 하나는
Ctrl E를 사용하는 거죠. Ctrl E는 기본적으로
어, 잠깐, Ctrl, 아 죄송해요, Option
Ctrl E, Ctrl W인데
잠깐, Ctrl W, 아 죄송해요, Ctrl W, 잠깐, 뭘 하고 있는 거죠?
Option Delete는 기본적으로
여기서 단어들을 다시 되돌아갈 수 있게 해줘요.
그리고 Ctrl U였던 것 같은데
제 키 명령어들이 지금 좀 엉망이네요.
하지만 Option을 누르고
Delete를 누르면, 기본적으로
단어들을 꽤 빠르게 삭제할 수 있어요.
이게 첫 번째 부분이에요. 기본적으로
제 스크린샷을 검토하고
더 나은 레이아웃을 만들어낼 수 있는지 보고 싶었어요.
그리고 제가 스크린샷을 검토할 때
당신이 UltraThink를 사용하기를 원해요.
UltraThink를 사용하고 병렬 서브 에이전트를 사용해서
코드를 검토해주세요.
코드. 코드. 좋아요. 그럼 진행해보겠습니다.
현재 여기에 있다고 생각하는 것 같은데
제 UI 레이아웃이 실제로는
이 특정 부분인 것 같아요. 이 특정 파일에 있을 때
보시면 이제 Claude Code의 컨텍스트가
여기에 있다는 것을 실제로 이해하고 있어요.
그래서 올바른 파일을 가리키고 있는지 확인하고 싶어요.
사용자 인터페이스에서 특정 파일들을 선택할 수도 있어서
이런 다른 파일들이 컨텍스트에 관련이 있다는 걸 알 수 있죠.
이게 도움이 될 수 있을 것 같아요.
그래서 그렇게 하고 싶어요.
그리고 도움이 될 수 있겠지만
Claude Code가 어떤 일을 할지 볼 수 있어요.
맥스 플랜을 사용하고 있으니까 엔터를 눌러보죠.
여기서 엔터를 누르면 좋겠어요.
이제 Claude가 작업하는 걸 지켜봅시다.
기본적으로 지금 하고 있는 일은
저는 여기서 UltraThink라는 키워드를 사용했고
병렬 에이전트라고 하는 다른 것도 사용했어요.
스크린샷을 읽을 수 있는지 확인하려고 해요.
데스크탑을 작업 디렉토리로 추가하겠습니다.
나중에 더 많은 스크린샷이 있을 거고
그것들을 전달하고 싶거든요.
여기서 일어날 일은
병렬 에이전트로 나누어서
다른 컨텍스트 윈도우에서 여러 파일을 읽으려고 할 거예요.
각각은 컨텍스트를 위한
자체 윈도우를 가지게 될 거예요.
보통 128에서 256k 토큰 정도인 것 같아요.
그리고 지금 생각하고 있어요.
실제로 스크린샷을 살펴보고 있어요.
이 커스텀 사전의 스크린샷을 볼 수 있어요.
지금 무엇을 생각하고 있는지 알려주고 있어요.
이제 전사 폼 레이아웃을 분석하고
병렬 에이전트를 사용해서 검토할 거예요.
병렬 에이전트를 사용해서
검토할 거예요.
병렬 에이전트를 사용해서
검토할 거예요.
스크린샷을 살펴보고 있어요.
스크린샷을 볼 수 있어요.
이 커스텀 사전의 스크린샷을 볼 수 있어요.
지금 무엇을 생각하고 있는지 알려주고 있어요.
지금 무엇을 생각하고 있는지 알려주고 있어요.
생각하고 있어요.
이제 전사 폼 레이아웃을 분석하고
병렬 에이전트를 사용해서 검토할 거예요.
코드의 다른 측면들을 분석하고 있습니다.
정말 멋지네요.
3개의 에이전트가 동시에 작동하고 있습니다. 하나는
UI 레이아웃을 검토하고, 다른 하나는
사전 컴포넌트를 분석하고,
또 다른 하나는 디자인 패턴을
연구하고 있습니다.
제가 이렇게 하는 이유 중 하나는
디자인 패턴 문서를 가지고 있고,
실제로 이미 찾았기 때문입니다.
그래서 하나의 특정 서브 에이전트가
전체 컨텍스트를 소모하지 않고도
메인 에이전트에게 어떤 정보를 전달해야 할지
이해하여 제가 전체적으로 파악할 수 있게 됩니다.
모든 것을 종합적으로 이해할 수 있죠.
기본적으로 하나의 프로젝트 매니저와
세 명의 엔지니어가 저를 위해
다른 작업들을 수행하는 것입니다.
정말 대단하지 않나요?
병렬로 실행되는 모습을 볼 수 있습니다.
작업 1, 작업 2, 작업 3이 동시에 진행되고,
그 다음에 결과를 가져올 것입니다.
다시 돌아오죠.
사용자 인터페이스에서 저에게는
아마도 두 개 또는 세 개의
다른 팝업들이 나타나서 승인하거나
다른 작업들을 할 수 있습니다.
조금 혼란스럽긴 하지만, 이것이
인터페이스의 작동 방식입니다.
꽤 흥미롭다고 생각합니다.
저희가 여기 있는 UI 파일로 시작했던 것을 기억합니다.
여기요.
이것이 제가 다른 모든 앱들로 가는
게이트웨이 드럭이라고 부르는 것입니다.
많은 것들이 이미 임포트되어 있고
무엇이 진행되고 있는지 이해하는 데
꽤 똑똑하기 때문입니다.
데스크톱에서 스크롤 문제를 해결하는 계획입니다.
전사 양식에 불필요하게 중첩된
스크롤 가능한 컨테이너들이 있습니다.
컨테이너들이요.
이것이 v1이라는 것을 알고 있습니다. 이 전체를
코딩했습니다. 이것이 우리가 런칭한 방식이고,
첫 번째 유료 고객을 얻은 방식입니다.
폼 컨테이너에는 이미 스크롤 가능한
기능이 있는 내부 요소가 있습니다.
이중 스크롤 바를 만들고 있죠.
좋아요, 스크롤 가능한 컨테이너를 제거하고
이것을 변경하여 이렇게 바꾸면
폼이 부모의 자연스러운 스크롤을
사용할 수 있게 됩니다. 사전 단어
길이를 이렇게 조정하고요. 그리고 저는
계속 계획을 세우고 싶습니다. 왜냐하면
모바일과 태블릿에서도 잘 작동하는지
확인하고 싶고, 거기서도 회귀 현상이
발생하지 않는지 확인하고 싶기 때문입니다.
그에 대한 언급이 없었거든요.
그래서 그것을 인식하고 있는지
확인하고 싶습니다. 폼이 이제 자연스럽게
흘러야 합니다.
예상 결과인 단일 스크롤 바라고
말하는지 확인하고 싶습니다.
정말 멋지네요.
기존 기능을 유지하면서
최소한의 변경으로 스크롤링이 가능합니다.
좋습니다. 아니오, 계속 계획을 세우겠습니다.
그렇게 하겠습니다.
또 다른 팝업 창이 나타나는 것을 볼 수 있고,
이것은 승인된 사전 레이아웃 계획을
검토하고 있습니다.
레이아웃 계획을요.
구현에 대한 분석을 바탕으로
특정 기회들을 구현하여
더 컴팩트하고 직관적인
레이아웃을 만들 수 있습니다.
여기 제 계획이 있습니다.
기본적으로 사전 선택이
내부에 포함되어 있는 형태로
이런 종류의 것들 말이에요.
구조는 이렇게 하고, 제목 카운트를
별도의 라인으로 결합해보겠습니다.
좋아요. 단어 목록을 결합하고, 단어 경험을
통합하고, 더 나은 시각적 계층구조를 만들어보겠습니다.
아니요, 계속 계획을 세워보겠습니다. 살펴보죠.
그리고 또 뭐가 있을까요? 마지막 에이전트가
다른 계획으로 돌아왔네요. 디자인
패턴이 사전 기능에 적용되었습니다.
사전 기능을 더 직관적이고
공간 효율적으로 만들 수 있는
디자인 패턴들을 찾았습니다.
사이드바에 motion div를 사용하고, 상태 표시를
압축하고, 진행 상황 표시 패턴을
디자인 결과로 보여줍니다. 이런 종류의
것들이 여기에 있어요. 다단계 명확한 진행
조사자들. 네, 이미 여기서
일어났네요.
기본적으로 축소된 상태로 두는 것.
여기서 말하는 것은 사용자가
상호작용하기 전까지는 축소된 상태로
유지하겠다는 뜻이고, 솔직히 말하면
저도 좋아해요.
팝오버 시트를 추가하고, 사전을
사이드 패널로 이동하기 위해
Shian의 시트를 설치하는 것. 별로 좋아하지 않아요.
단어 카운트를 추가하고, 플로팅 액션 바를
더 직관적으로 추가하거나 개선하는 것.
인라인 배지 표시가 폼을 깔끔하게
집중시켜줍니다. 사전 기능이 확장되어
표시됩니다.
인터페이스로 커스텀 사전 x 단어들.
이것을 실제로 해보니 실제로
시도해볼 수 있을 것 같아요.
이것은 정말 정말 멋질 것 같아요.
이것을 위해 브랜치를 설정하려고 했었는데
아직 실제로 하지 못했다는 것을 완전히 잊었네요.
지금 여전히 메인 브랜치에 있는 것 같아요.
그래서 계속 진행하고
이것을 위한 브랜치를 만들어서
실수로 코드를 메인 브랜치에
커밋하지 않도록 하겠습니다.
메인 브랜치에 코드를 커밋하면
바로 프로덕션으로 가는 것이고
사용자들에게 문제를 일으키고 싶지 않아요.
좋아요. 이 계획을 좋아해요.
네, 수동으로 편집을 승인하는 것이
꽤 흥미로울 것 같아요.
하지만 그 전에 올바른 브랜치로
이동했는지 확인하고 싶어요.
여기 왼쪽에 있는 것을 클릭하겠습니다.
이것을 클릭하겠습니다.
이것을 클릭하겠습니다.
우클릭.
앗.
이것은 필요 없을 것 같아요.
여기서 우클릭해서
브랜치 생성을 하겠습니다.
features slash dictionary layout fix라고
부르겠습니다.
좋아요.
훌륭해요.
브랜치를 퍼블리시해서
사용할 수 있게 하겠습니다.
그리고 이미 브랜치로
체크아웃되어 있을 것 같아요. 완벽해요.
좋아요, 멋져요.
좋아요, 이 계획을 좋아해요.
네, 수동으로 편집을 개선하겠습니다.
지금 일어나고 있는 것은 여전히
서브 에이전트 중 하나가
뭔가를 하고 다른 하나는 하지 않는 것 같아요.
그것이 여기서 약간 혼란스러운 부분이에요.
계획을 계속하기 전에
추가 컨텍스트를 조금 더
추가하겠습니다.
제안된 개선 사항 중 하나가
마음에 들었는데, 그것이 계획을 보여주는 것이었어요.
축소 및 확장이 가능했고 기본적으로
사전을 표시하고 또한 사용 가능한
단어가 X개 있다는 것을 보여줄 거예요.
이용 가능한.
또한 염두에 두고 싶었던 것은
계획을 개선해서 이것이
태블릿과 모바일에서도 작동하도록 하고 싶다는 것이었어요.
이런 사용자 경험에서 후퇴하고 싶지 않아요.
후퇴하지 않도록. 네, 완벽해요.
그래서 저는 단순히 ultra think를 사용해서
코드 변경을 진행하기 전에 상세한 계획을 세워달라고 요청할 거예요.
코드 변경을 진행하기 전에 말이죠.
좋아요, 이제 기본적으로 저는 단순히
말하고 있는 거예요. 저에게는 정말로
LLM이 무엇을 할 것인지 이해하는 것이
중요하고 또한 그것을 문서화하여
제가 직접 참조할 수 있도록 하는 것이 중요해요. 왜냐하면
때때로 화장실에 가거나 휴식을 취하고
다시 돌아오고 싶기 때문이에요. 또한
우리가 특정 것들을 구현하지 않았다는 것을 잊지 않도록
확실히 하고 싶어요. 이것은 꽤 중요해요.
특히 언어 모델에게 기능을 넘겨주는 경우
이것을 이해하는 것이 중요해요. 무엇을
작업하고 있는지? 무엇을 완료했고 무엇을
완료하지 않았는지 말이에요.
완료하지 않았는지를요.
가장 중요한 것은 완료되지 않은 것이
아마도 꽤 중요할 것 같아요.
또한 코드가 들어가기 전에 검토해서
무엇이 진행되고 있는지 이해하려고 노력해요.
여전히 세 개의 다른 서브 에이전트를 시작했고
제가 개선한 것 중 하나를 기반으로
그것을 추가하려고 할 것 같아요. 그래서 이것은
존재하지 않는다고 말해요.
존재하지 않는다고요.
또한 실제로 우리가 Tailwind v4를 사용하고 있는지
이해하고 있는지 모르겠어요.
그래야 할 텐데요.
축소 가능한 패턴을 찾고 있어요. 네. 작업이
이제 shadtn 컴포넌트를 확인하고 있어요. 네.
그리고 이제 제가 BunX를 사용하고 있다는 것을 이해해요.
그건 꽤 멋지네요. 그것은 모두 작성되어 있어요.
제 규칙 파일에 말이에요.
그것은 모두 그곳을 살펴보고 있어요.
네. 형, 프로덕션에 커밋해. 그건 좀...
그건 좀...
현재 계획을 위해 Opus를 사용하고 있나요?
네, 현재 Opus를 사용하고 있어요. 저는
최대 플랜을 가지고 있어요.
그리고 그것이 바로 그거예요. 제 월별
정기 수입이 지금 얼마나 되죠?
아벨, 다른 창에서 확인해보겠어요.
몇 명의 사용자가 있다는 것을 알아요.
12명의 유료 사용자가 있고 5명이 있다고
말하고 싶어요. 그리고 누군가가 방금
연간 플랜을 결제했어요. 리사에게
큰 감사를 전해요. 그녀는 정말 멋져요. 정말 좋은
채널 서포터예요. 그녀가
연간 플랜을 결제했어요. 그리고 저는 정말
감사해요. 그래서 곧 계산을 좀 해야겠어요.
대부분 가능한 한 빨리 피드백을 받고
반복해서 제 사용자들이
정말 좋은 경험을 할 수 있도록
집중해왔어요. 그러니까 이 간단한 계획을
빠르게 살펴보죠. 와.
좋아요, 그럼 봅시다. 좋아요, 여기에
Claude의 계획이 있어요. 반응형 디자인. 그래서
컨테이너 구조를 만들 거예요.
브레이크포인트. 좋아요, 타이틀 가시성은
꽤 좋아 보여요. 모바일에서는 숨겨져 있어요.
좋아요, 이건 좋아요. 그래서 이제 실제로
이 정보를 얻었어요. 이것은 좋아요. 이것은
이런 정보들을 얻었어요. 이게 좋은 점이에요. 이렇게 하면
여러 번 왔다갔다 하는 일을 방지할 수 있거든요.
이제 이걸 고쳐, 저걸 고쳐 하는 식으로 말이에요.
저는 처음부터 제대로 되길 바라는 거예요.
이게 제가 AI 에이전트들과 작업하는 방식이에요.
계속 스크롤이 내려가고 있네요.
아마 아직 실행 중인 하위 작업들이나
무언가가 있는 것 같아요.
계속 진행되고 있는 작업들이 있나 봐요.
다른 부분을 보면, 여기에 사전 섹션이 있고
이런 타입의 규칙을 따르게 될 거예요.
그리고 모델 선택 기능도 있어요.
패턴으로서 존재하는 것들이고
핵심 응답들도 마찬가지예요.
그리고 제가 또 중요하게 생각하는 건
디자인 시스템 규정 준수예요.
모르시는 분들을 위해 설명하면, RayFernando.ai에
제가 계획을 세워둔 게 있어요.
이게 제 규칙 중 하나이고, 실제로 이걸
계획을 실행하면서 찾아낸 거예요.
이래서 이런 방식으로 계획하는 게 중요해요.
여기에 디자인 검토라는 계획이 있어요.
커서와 LLM으로 UI 표준을 자동화하는
내용이에요. 여기에 정말 자세한 블로그가 있고
이 디자인 시스템에 대해서만 따로
라이브 스트림을 할 수도 있을 것 같아요.
하지만 여기에 이런 규칙들이 있어요.
여기 옆쪽을 보면 '규칙'이라고 되어 있어요.
이런 규칙들을 마크다운 파일로 만들어서
레포지토리 안에 넣어두면, Claude Code가
이것들을 찾아낼 거예요.
그리고 UI 변경을 요청하면
실제로 이걸 고려해서 작업할 거예요.
정말 놀라운 기능이에요.
실제로 여기 있는 8포인트 그리드 시스템에
대해 알려주고 있어요.
이미 그걸 파악했고, 이제
이걸 생각해보니 적용하겠다고
말하고 있어요.
정말 놀라워요.
제가 Claude Code를 이렇게 좋아하는 이유가
바로 이런 추가적인 것들을 정말 잘 찾아내서
컨텍스트에 포함시키고
우리가 정말 효과적으로
작업할 수 있게 해주기 때문이에요.
60-30-10 색상 규칙도 있어요.
여기 있는 게 바로 그거예요. 정말
자세한 블로그 포스트로
제가 어떻게 사용했는지, 왜 이런 게
정말 중요한지에 대해 다루고 있어요.
디자인 일관성을 위해서요. 그냥 LLM에게
UI를 생성하라고 하는 대신
이제 실제로 이런 패턴을 따라갈 거예요.
그래서 우리 UI는 이제 이런 아름다운
계층구조를 항상 가지게 될 거예요.
그냥 여기저기 랜덤한 클래스들을
생성하는 대신 말이에요.
이런 식으로 디자인에서 더 많은 일관성을
얻을 수 있어요.
모바일 태블릿 레이아웃
관찰 결과도 있어요.
그것도 살펴보고 있네요.
접을 수 있는 구현에 대한
권장사항도 있고요.
저는 '와, 이거 멋지다'라고 생각했어요.
지금 노란색으로 표시되고 있네요.
이 시점에서 '좋아 보인다'고 했어요.
그리고 이제 이게 두 번째 에이전트에서 나온
두 번째 계획이에요. 여기로 돌아와서
shad CNUI 접을 수 있는 컴포넌트를
추가하겠다고 말하고 있어요.
그래서 이런 명령어들을 실행할 거예요. 이런 명령어들은 제가 레포의 규칙 파일에도 넣어둔 것들입니다.
제가 여기에 디자인 리뷰를 넣어두었다고 하네요.
디자인, design.mtc로 가보면
이게 말 그대로 규칙 파일입니다.
여기에 제가 실제로 정리해둔 것들이 있는데, 보여드릴 수 있나 살펴보겠습니다.
이것도 규칙 관련 내용의 일부로
구현 방법에 대해 알려주는 역할을 합니다.
그리고 제가 파일을 직접 제공하지 않아도 됐다는 점이 정말 좋습니다.
아시다시피, 저는 커서에서 파일을 선택하는 데 많은 시간을 소비했었거든요.
적절한 컨텍스트를 제공하기 위해서 말이죠.
하지만 Claude Code가 대신 해줬습니다.
이게 제가 Claude Code를 사용하는 큰 이유 중 하나입니다.
그래서 여기에 실제로 project라는 항목이 있습니다.
여기 프로젝트 규칙에 저의 디자인 시스템에 대한 설명이 있고
UI 컴포넌트를 위해 ChatZN을 사용한다고 되어 있습니다.
그리고 특정 명령어를 사용해서 설치하는 방법도 나와 있어요.
그래서 여기 있는 규칙들을 기반으로 무엇을 해야 할지 알고 있는 거죠.
이게 바로 정말 훌륭한 점입니다.
좋아요, 이런 시스템들이 이런 것들을 파악해준다는 게 정말 흥미롭고
저는 이게 정말 마음에 듭니다.
자, 그러면 여러 개의 접을 수 있는 컴포넌트가 필요한 경우
어떤 걸 선택해야 할지에 대해 말하고 있네요.
아니면 Collapsible 컴포넌트를 사용할 수도 있고
두 컴포넌트 모두 완벽하게 통합될 것이라고 하는데
일단 YOLO로 가보겠습니다.
좋아요. 제 연구를 바탕으로 구현 계획을 세웠습니다.
기본적으로 사전 섹션을 별도 컴포넌트로 분리할 예정입니다.
아, 그리고 이것에 대해서도 하고 싶은 게 있는데
Convex 규칙을 따르도록 하고 싶습니다.
Convex 규칙 파일이 있거든요. 제 앱에 반응성 기능이 많이 있어서요.
그래서 확실히 하고 싶어서
계속 계획하지 말고 이렇게 하겠습니다.
이걸 드래그해서 넣을 거예요.
첨부된 Convex 규칙을 사용하도록 계획을 업데이트해주세요.
기본적으로 반응성을 설명하는 이 규칙 파일들을 사용하고 싶습니다.
Convex는 기본적으로 제 데이터베이스 프로바이더입니다.
Convex를 사용하는 큰 장점 중 하나는
모든 데이터가 백엔드에 있다는 점입니다.
그리고 프론트엔드에서는 제가 '윈도우'라고 부르는 것을 만들기만 하면 됩니다.
데이터베이스로의 윈도우 말이죠.
프론트엔드에서 변경사항을 만들면 즉시 데이터베이스에 푸시되고
실시간으로 볼 수 있습니다.
5개의 윈도우를 열어두고 하나의 사전을 추가하면
모든 윈도우에 나타날 것입니다.
지금 이게 어떻게 보이는지 빠르게 보여드릴게요.
상태 동기화를 처리하거나
한 곳에서 규칙이 업데이트되고 다른 곳에서는 안 될 때
무언가를 취소하는 것에 대해 걱정할 필요가 없어서 좋습니다.
제 앱에서 두 개의 다른 윈도우를 열어서
지금 이게 어떻게 보이는지 보여드릴게요.
app.ray로 가보겠습니다.
두 개의 다른 윈도우를 열고
지금 이게 어떻게 보이는지 보여드릴게요.
그래서 app.ray
트랜스크라이브를 다시 보겠습니다.
두 개의 다른 윈도우죠.
저에게는 코드도 적고 모든 것이 더 간단합니다.
그리고 나서 그들이
하나의 윈도우를 만들고
프론트엔드에서 변경사항을 만들면
즉시 데이터베이스에 푸시되고
실시간으로 볼 수 있습니다.
5개의 윈도우를 열어두고 하나의 사전을 추가하면
모든 윈도우에 나타날 것입니다.
지금 이게 어떻게 보이는지 빠르게 보여드릴게요.
모든 윈도우에 나타날 것입니다.
상태 동기화를 처리하거나 한 곳에서 규칙이 업데이트되고
다른 곳에서는 안 될 때 무언가를 취소하는 것에 대해
걱정할 필요가 없어서 좋습니다.
제 앱에서 두 개의 다른 윈도우를 열어서
지금 이게 어떻게 보이는지 보여드릴게요.
그래서 app.ray로 가보겠습니다.
트랜스크라이브를 다시 보겠습니다.
두 개의 다른 윈도우죠.
저에게는 코드도 적고 모든 것이 더 간단합니다.
그리고 나서 그들이
transcribes를 다시 살펴보죠. 두 개의 다른 창으로
나누어 보여드리겠습니다. 이렇게 하면 코드가 훨씬 적어지고
모든 게 간편해집니다. 그리고 이미
이런 유형의 작업에 대해 정말 좋은 경험을 가지고 있어서
별로 신경 쓸 필요가 없습니다.
걱정할 게 전혀 없어요.
그냥 파일을 선택하면 됩니다. 만약
하나를 추가한다면, 예를 들어 이걸 바꿔보겠습니다.
여기 위로 올라가서 YOLO로 스크롤해보겠습니다.
짜잔! 이미 업데이트되었습니다. 그리고
만약 여기서 이걸 그냥 삭제하고 삭제 버튼을 누르면
바로 삭제됩니다. 예를 들어, 만약
여기서 이 단어를 삭제하면 바로 사라집니다.
Groq처럼 말이죠.
그래서 충돌을 처리할 필요가 없습니다.
사용자에게 동기화가 안 되어서
페이지를 새로고침하라고 말할 필요도 없습니다.
모든 게 데이터베이스에서 처리됩니다.
캐싱에 대해서도 생각할 필요가 없습니다.
Convex가 모든 캐싱을 처리하고 있어서
프론트엔드에서 이 캐시를 무효화하고
백엔드에서 이걸 처리하라고 하는 추가 코드를
작성할 필요가 없습니다. 아니요, 그런 건
다룰 필요가 없습니다. 그냥 여기 내 것이 있으니
가져가라고 하면 됩니다.
계속 진행하세요.
Convex에는 정말 멋진 규칙들이 있어서
LLM이 따라할 수 있도록 어떻게 설정하는지
설명하고 있습니다. 그래서 LLM이 그에 맞게
코드를 생성할 수 있습니다. 이제 이 계획을 검토했으니
우리가 여기서 설정한 특정 규칙들을 사용해서
맞춤형 계획을 만들어나갈 겁니다.
여기서 토글한 규칙들을 사용해서 말이죠.
정말 자세한 정보가 다 있습니다. 우리가 원하는
상태 관리에 대해서도 얘기하고 있고
구현 단계들도 설명하고 있습니다.
좋습니다. 그럼 일단 YOLO로 가보죠, 친구들!
멋지네요!
요, Dazeen, 어떻게 지내? 대단해, 형!
스타일링 팁이 정말 많은 골칫거리를 줄여주네요.
말해주는데, 형, 이게 바로 해야 할 방법이에요.
하나의 라이브를 GenSpark의 슈퍼 에이전트
테스트에 전념하세요. 사실 Manus는
다시 사용하지 않고 있어요. 잘 모르겠네요.
지금은 그냥 제 앱들을 출시하는 데
집중하려고 하고 있어요. 만약 정말, 정말 좋은
뭔가가 제 레이더에 나타나면
한번 살펴봐야겠죠. Opus가 아직도
Grok4보다 낫다고 생각하세요?
지금 현재로서는 Opus가 킹이에요, 형.
Groq4는 뭔가 준비하고 있는 것 같고
아직 더 테스트를 해봐야 할 것 같아요.
하지만 현재로서는
코딩 에이전트가 아직 준비가 안 되었어요.
Groq4로 해왔던 작업들과
RepoPrompt와 함께 사용하는 방식은
괜찮았어요.
Groq4와 Cursor를 조금 사용해봤는데
그럭저럭 했지만
Cursor Ultra 플랜은 없어요.
그냥 월 20달러 프로 플랜을 사용하고 있어요.
솔직히 말해서
차라리 Claude Code를 사용하고 싶어요.
Claude Code가 지금 정말 엄청나게 좋거든요.
그리고 이미
Claude Code에 200달러를 지불하고 있어요.
제가 작업하고 있는 이런 류의 소스를 보셨죠.
이게 바로 제 워크플로우예요.
이걸 여러분께 소개하고 싶었어요.
이해할 수 있도록 말이죠. 그럼 지금까지
rayfernando에서 해왔던 것들을 간단히 요약해보면
지금까지 살펴본 내용들을 정리해보겠습니다.
Claude Code로 최대한 활용하기 파트 1
지금까지 제가 한 것은 플랜 모드를 광범위하게 사용해서
에이전트들이 계획을 세우고 준비될 수 있도록
확실히 해놓았습니다
제가 사용하는 두 번째 키워드는 울트라 씽크라고 불리는 것입니다
울트라 씽크는 특별한 키워드입니다
이런 키워드들 중에서 4개 중 하나죠
이것은 최소 32,000 토큰을 제공합니다
에이전트들이 확장된 사고를 위한 생각 창구를 말이죠
그리고 기술적으로 정확도가 훨씬 뛰어납니다
이 플래닝 모드에서 많은 경우에 저는
꽤 정확하게 만들고 싶습니다
그래서 이 에이전트에서 더 많은 성능을 얻을 수 있는 방법은
다음과 같이 말하는 것입니다
병렬로 몇 개의 서브 에이전트를 추가로 실행하고 싶다고 하면
각 에이전트가 자신만의
컨텍스트 창과 자신만의 사고 창을 가지게 되고
그것이 훨씬 더 정확한 결과를 가져다줍니다
그래서 우리는 그 세 개의 에이전트를 봤습니다
몇 개인지 말하지 않았는데도 스스로 알아냈죠
하나는 디자이너였고 모든 디자인 관련 작업을 처리했습니다
하나는 제 규칙 파일을 처리하고
다른 하나는 코드를 살펴보고
모든 다른 레이어에서 무슨 일이 일어나고 있는지 이해하려고 했습니다
각각이 다른 계획들을 보고했고
우리는 그것들을 반복적으로 수정하고
예, 아니요, 이런 종류의 변경사항을 만들자고 했습니다
우리는 추가적인 검토를 했고
마지막으로 코드를 작성하기 전에 큰 계획을 검토하라고 했습니다
이것은 특히 AI와 코딩을 할 때
요즘 시대에는 정말 중요합니다
그 계획을 올바르게 세우는 것 말이죠
그래서 Claude Code에게 넘길 수 있습니다
지금 Claude Code는 우리를 위해 작업하고 있고
저는 스트림에서 여러분들과 대화하면서 편히 쉬고 있죠
그래서 이것이 기본적으로 우리가 다뤄온 것들의 간단한 요약입니다
제대로 작동하는지 아닌지는 지켜봐야겠지만
전체 계획을 통해 작동하는 것을 보고 있고
이것이 제게는 정말 아름답습니다
제 규칙을 찾았고 디자인 관련 것들도 찾았습니다
시청하시는 분들을 위한 추가 보너스로
실제로 디자인 가이드가 있습니다
그리고 그게 뭔지 궁금한 분들을 위해
rayfredando.ai에 있습니다. 디자인 리뷰라고 되어 있고
AI 표준을 자동화한다고 되어 있어요
그래서 그 규칙 파일이 실제로 제 프로젝트에 있고
그것이 포착할 수 있었던 것입니다
그래서 생성될 코드는 이 특정 가이드라인을 따를 것입니다
여러분도 이것을 프로젝트에 추가하고 필요에 따라 조정할 수 있습니다
저는 Tailwind를 사용하고 있는데
모든 것이 통합되어 있는 방식 때문입니다
솔직히 말해서 이런 종류의 작업을 할 때
일관성을 얻기 위해서는 그것이 앞으로 나아갈 길이라고 생각합니다
이런 종류의 것들을 하는 데 있어서 말이죠
자, 이제 보니까 코드를 이동시키고 있는 것 같아요.
폼에서 코드를 빼내서
기본적으로 여기 코드를
리팩터링하고 있어요.
꽤 괜찮네요.
이제 펜슬을 만들겠다고 하고
할 일 목록을 따라가고 있어요.
반응형 동작 테스트, 모바일 레이아웃,
리파이어링과 어그레션이라고 되어 있고
이미 완료된 것 같아요.
왼쪽 diff 뷰를 보면
모든 변경사항을 볼 수 있어요.
지금까지 한 작업을 보면
기본적으로 여기 있던 코드를
빼내서 모든 코드를 제거하고
collapsible dictionary라는
새 파일을 만들었어요.
이건 접을 수 있는 딕셔너리를
처리하는 새로운 파일이에요.
정말 좋은 리팩터링이네요.
그리고 실제로 제가 만든 convex 규칙들도
사용하고 있어요.
실제로 use dictionary에서
제가 만든 훅들을 사용하고 있어요.
이 훅들은 convex에서 온 거예요.
여기서 보면 이것들은 모두
convex 데이터베이스에서 온 mutations이에요.
기본적으로 useQuery를 사용해서
호출을 하고 있어요.
이것들은 제 convex 데이터베이스의
특정 함수들이고
제 쿼리와 mutations의 기반이에요.
Claude Code가 이 모든 걸 작성했다는 게
정말 좋아요. 보시다시피 정말 잘 작성되어 있고
나중에 사용할 수 있도록 훅 자체로
설정되어 있어요.
이것이 소프트웨어의 복합적인 효과의
힘이라고 할 수 있어요.
이제 리팩터링을 할 수 있고
메인 컴포넌트에서 코드를 빼낼 수 있어요.
이건 말 그대로 프로토타입이거든요.
use dictionary나 collapsible dictionary용
자체 컴포넌트로 만들었어요.
뷰를 보는 방식을 바꾼 거죠.
데이터는 여전히 그대로 있고
이제 뷰로 변환되고 있어요.
그리고 collapsible을 위한 작은 UI
컴포넌트도 있어요.
이건 ChatCN을 사용해서 설치된
컴포넌트예요. 정말 멋지네요.
벌써 끝났나요? 네, 끝났네요.
구현이 모든 기존 기능을 유지하면서
특히 수직 공간이 소중한
모바일 디바이스에서 레이아웃을
개선했다고 하네요.
collapsible 패턴, 멋져요.
정말 좋아요. 이제 해야 할 일은
bun, bunX, convex dev를 실행하는 거예요.
아직 이 코드를 배포하고 싶지 않아요.
여기서 명령어를 실행해서
convex 함수를 변경했는지 확인해보려고요.
변경하지 않았을 것 같아요.
플러스 사인을 누르고
bun dev를 실행할게요.
이제 여기서 실행되고
클릭할 수 있어야 해요.
아, OpenWebUI를 열어두지 않았네요.
뭘 클릭했지? OpenWebUI가 없는 것 같아요.
어디에 있지? 아, 찾았어요.
네, 다른 걸 열어두고 있었네요.
프로세스를 죽여야 했습니다.
이제 기본적으로 앱에 로그인해서 실행시킬 수 있을 것 같습니다.
앱에 로그인해서 실행시킬 수 있을 것 같습니다.
지금 제가 하는 것은 이 작은 블러 컴포넌트를 설정했고
이제 너무 많은 비밀 정보를 노출하지 않고도
로그인할 수 있을 것 같습니다.
네, 이것은 꽤 멋지네요.
라이브 스트리밍의 즐거움이죠.
이 페이지를 찾을 수 없습니다.
몇 가지 문제가 있네요.
지금 제가 할 일은 캐시를 지우는 것입니다.
로컬 네트워크 작업을 할 때는
같은 환경을 사용하는 여러 앱을 작업하는 경우가 있어서
환경 설정 등 모든 것을 공유하게 됩니다.
localhost 3000을 사용할 때
localhost에서 이런 쿠키들이 모두 남아있게 됩니다.
다른 프로젝트를 작업하면서 생긴 쿠키들이요.
다른 프로젝트를 작업하면서 생긴 쿠키들이요.
쿠키들이 겹치게 되어서 별로 좋지 않습니다.
별로 좋지 않죠.
지금 앱이 로드되지 않는 문제가 있습니다.
그리고 아마도... 잘 모르겠네요.
잘 모르겠네요.
이 페이지를 찾을 수 없습니다. 왜죠?
왜 오류가 발생하는지 궁금하네요. 아, 이건
OpenWebUI로 가고 있네요. 왜죠?
아, 신경 쓰지 마세요. 네, 캐시를 지워야 했었고
모든 것을 지워야 했었습니다. 강제 새로고침을 했네요.
이제 다시 돌아왔습니다, 여러분.
좋네요. 이제 됐네요.
앱으로 돌아왔으니 모든 것을 볼 수 있을 것입니다.
이전에 보았던 것은 단지
여러 작업을 하면서 생긴 오류들이었습니다.
커스텀 딕셔너리가 있고, 이제 이런 식으로 작동하고 있네요.
모바일에서는 여기서 하고 싶은 것이 있습니다.
이런 종류의 것들을 하고 있는 것 같습니다.
모바일에서는 여기서 하고 싶은 것이 있습니다. 그래서 이것은
앱을 어느 정도 고쳐줍니다.
모바일 뷰를 말이죠. 하지만 여전히
여러 개의 스크롤 형태의 것들이 있는 것을 볼 수 있습니다.
이런 것들이 있네요.
그래서 한 부분만 구현했고
탭해서 탐색하라고 하지만 그냥
진행하겠습니다.
이 스크린샷을 제공하고
이것이 우리가 있는 지점이라고 말하겠습니다.
계속해봅시다.
여기서 반복하기 위해서요. 이것은 별로 좋아 보이지 않네요.
스크린샷을 끌어다 놓겠습니다.
그 다음에
어떤 스크린샷이 필요한지 말이죠.
모바일에서는 레이아웃이
레이아웃이
그냥 좀 웃기네요. 좋아요, 봅시다.
여기서 그 뷰를 잡아서 그냥 시프트하겠습니다.
보세요, 모바일에서는 레이아웃이 여전히...
레이아웃이 퇴보했습니다.
퇴보했습니다.
단어들이 겹치는 것을 볼 수 있고...
봅시다, 디자인이 더 직관적인가요?
음, 네, 멋지네요. 제 생각에는... 네.
네. 네. 그리고 UI는 여전히 하단에 공간이 있습니다.
여전히 있고, UI가 전체 상단과 하단을 차지하고 있다는 느낌이 들지 않습니다.
공간을 차지하고 있다는 느낌이 들지 않습니다.
그 공간을 말이죠.
어떻게 말해야 할지 모르겠네요.
아래쪽에 여전히 꽤 많은 공간이 있습니다.
사용할 수 있는 공간이 있습니다. 좋아요.
iPhone Pro, iPhone Pro Max로 하면, 네.
아, 아마 그것일 거예요. iPhone Pro, iPhone Plus. 좋아요.
좋아요.
아, 신경 쓰지 마세요. 그것은 그냥 제 UI 문제였던 것 같습니다.
iPhone Pro Max. 좋아요.
하지만 여전히 여러 개의 스크롤 바가 있어서
정말 보기 안 좋네요. 음, Control W를 눌러도
텍스트가 겹쳐서 보이고
UI도 별로고요. 그리고
모바일 최적화도 안 되어 있는 것 같아요. 그리고
데스크톱 화면에서는 피드백을 줄 수 있을 것 같은데
일단 새로고침부터 해보겠습니다.
새로고침하겠습니다.
처음에는 접혀있는 상태로 시작하고 싶어요.
collapsible set이 열려있는 것 같은데, useState를
false로 하면 열려있다는 뜻이고, true로 하면
반대로 되어야 할 것 같은데, 정확히 모르겠네요.
아니다, 아니다, 아니다. 내가 뭘 하고 있는지
모르겠네요. useState는 open 상태를 설정하는 것 같고
그래서 collapsible이 열려있으면 setIsOpen으로 설정하고
collapsible이 열리면 setIsOpen이 되고,
만약 열려있지 않으면 '펼치려면 탭하세요'라고 나오는데
반대로
하고 싶어요. 그리고 데스크톱에서는
그래, 데스크톱에서는... 아직도 좀 이상하네요.
아직도 좀 이상하네요.
그래서 이렇게 하겠습니다. 이 스크린샷을
보내겠습니다. 그리고 데스크톱에서는 여전히
보기가 화면 밖으로 나가는 것 같아서
이상하다고 말하겠습니다. 그 화면이
화면 밖으로 나가는 것 같아요.
collapsible 콘텐츠가 열려있어요.
그래서 처음에는 닫힌 상태로 시작하면 어떨까요?
좋습니다.
피드백으로 이렇게 해보겠습니다.
해당 스크린샷에 액세스하고 싶다고 나올 텐데
그러면 괜찮을 것 같아요.
좋습니다.
좋아요.
이제 스크린샷을 읽고
처리할 거예요. 네.
좋아요, 맞습니다. 이것도 추가할게요.
좋습니다. 이제 처리할 거예요.
좋습니다.
댓글을 좀 확인해보겠습니다.
Ultrathink에 대해 얘기하는 분이 계시네요.
브라우저에서 실행되는 Claude Code의
웹 UI 버전을 만들었는데
E2B를 사용해서 샌드박스에서 모든 것을 실행한다고 하네요.
E2B를 사용해서 샌드박스에서 모든 것을 실행한다고 하네요.
와, 그게 어떻게 작동하나요? 정말 멋질 것 같은데요?
정말 궁금해요. 어떻게 작동하는지
정말 보고 싶어요.
정말 보고 싶어요.
그래요.
안녕하세요, IO님?
Glycele님, 안녕하세요, 여러분!
스크린샷을 클립보드에 저장하도록 설정해서
클립보드에 저장하고
Max Showcut을 사용해서 Claude Code에 바로 붙여넣기 하면
Claude Code에 바로 붙여넣기 하면
Finder를 사용해서 드래그 앤 드롭으로 하면 어떨까요?
정말 좋은 아이디어네요. 그렇게 해야겠어요.
제가 좀...
제가 좀...
좋은 워크플로우를 찾아보겠습니다.
보시다시피 때로는 여러 개의 스크린샷을 찍어야 해서
여러 개의 스크린샷을 찍어야 해서
단순히 하나를 복사해서 붙여넣는 것이 아니라
여러 개를 복사해서 붙여넣어야 하거든요.
Claude Code가 너프됐다는 얘기를 많이 하시는데
모델이 더 멍청해지고 속도 제한에
더 빨리 걸린다고 느끼는 분들이 있나요?
저는 아직 그런 문제를 겪지 않았는데
무슨 일이 벌어지고 있는지 정말 궁금해요.
제 워크플로우는 말 그대로 먼저 계획을 세우고
그 다음에 진행하는 방식이에요.
보시다시피 말이죠. 그래서 잘 모르겠어요.
제가 계획을 많이 나누어서 하는 편이고
제가 계획을 많이 나누어서 하는 편이고
특정 워크플로우가 더 민감한지
정확히 잘 모르겠어요.
지금까지는 꽤 잘 작동하고 있어요.
웹이 아닌 다른 것도 작업하시나요? 지금은
웹 쪽에 더 집중하고 있지만,
네, 이전에 웹이 아닌 작업도 해봤어요.
전에요.
Claude Code가 약해졌다는 건 못 느끼겠지만,
Mac 구독이 확실히 덜 관대해졌어요.
특히 말이죠.
오, 정말 궁금하네요. 아직 이걸로
엄청 열심히 해보지는 않았거든요.
그러니까 어떻게 되는지 한 번 봅시다.
좋아요, 이제 여기서 기본적으로 확인해보겠어요.
모바일 오버랩이 이제 이 버튼을 재구성했고
기본 접기 상태도 만들었네요.
그러니까 모바일
깔끔하고 컴팩트한 헤더. 좋아요, 멋지네요.
한 번 봅시다. 좋아요, 그러면 살펴보죠. 오, 멋져요.
와. 이게 훨씬 깔끔하네요. 이해하기 훨씬 쉬워요.
무슨 말인지 아시겠죠.
그냥 새로고침하고 여기서 모든 걸 해보겠어요.
오, 그냥 다시 시작하겠어요.
다시 빌드해야 해요. 보통 이런 컴포넌트들을 할 때
다시 빌드해야 하거든요.
좋아요. 새로고침. 이제 사이트를 다시 빌드하고 있어요.
멋져요. 파일을 선택하고. 오, 멋져요.
좋아요, 이제 기본적으로 우리는
여기서 이런 작은 확장 가능한 것을 가지고 있어요.
사람들이 여기서 가지고 놀 수 있는,
정말 멋져요. 이건 훨씬 더 직관적이에요.
이 퇴행은 마음에 안 들지만, 뭐 어쨌든.
모바일로 가보겠어요.
오, 모바일 뷰를 리셋하겠어요. 이건
아이폰 iOS 버그인가 뭔가 그런 것 같아요.
좋아요, 최대 크기. 좋아요, 이거 좋아 보이네요.
위아래 사이에 간격이 조금 더 필요할 것 같지만
이미 이게 마음에 들어요. 훨씬 깔끔해요.
완전히 깔끔해요.
계층 구조는 이 모델을 선택하는 거고
그러면 만약 당신이 - 제가 여기서 생각하는 건
이게 커스텀 사전을 위한 고급 모드 같은 거라는 거예요.
사람들이 항상 커스텀 사전을 사용하길 기대하지 않기 때문에
이게 거기에 확장 가능한 형태로 있다고 생각해요.
궁금하다면 이걸 사용할 수 있고
그러면 사람들이 여기서 볼 수 있으니까
커스텀 사전은 고급 옵션이라고 할 수 있어요.
제가 더 선호하는 방식이고 너무 눈에 띄지 않아요.
이것들은 그렇지만요.
그래서 이게 정말 좋은 절충안이라고 생각해요.
사실 이거 정말 마음에 들어요.
좋아요, 멋져요. 이제 바로 이걸
제 브랜치에 커밋하겠어요. 이미 거기에 있으니까요.
트랜스크립트를 생성할 수 있는지 확인해 보겠어요.
이게 적어도 작동하는지 확인하기 위해서요.
야, 무슨 일이야? 퇴행이 생겼다는 얘기 들었어?
네, 무슨 일인지 모르겠어요. 스위치 때문에
앱이 좀 이상한 것 같아요. 빠르게 테스트해보겠어요.
좋아요, 여기 있네요. 멋져요. 네. 멋져요.
멋져요. 좋아요. 오, 멋져요. 네, 정말 빠르게 작동하네요.
좋아요. 마음에 들어요. 지금까지는
제가 이제 하는 일은 기본적으로, 앗, 잘못했네요.
그냥 확인하고 시작할 수 있는지 확인하겠어요.
트랜스크립트를 생성할 수 있는지 확인해 보겠어요.
이게 적어도 작동하는지 확인하기 위해서요.
야, 무슨 일이야? 퇴행이 생겼다는 얘기 들었어?
네, 무슨 일인지 모르겠어요. 스위치 때문에
앱이 좀 이상한 것 같아요. 빠르게 테스트해보겠어요.
좋아요, 여기 있네요. 멋져요. 네. 멋져요.
멋져요. 좋아요. 오, 멋져요. 네, 정말 빠르게 작동하네요.
좋아요. 마음에 들어요. 지금까지는
제가 이제 하는 일은 기본적으로, 앗, 잘못했네요.
멋져요. 좋아요. 오, 멋져요. 네, 정말 빠르게 작동하네요.
좋아요. 마음에 들어요. 지금까지는
제가 이제 하는 일은 기본적으로, 앗, 잘못했네요.
제가 이제 하는 일은 기본적으로, 앗, 잘못했네요.
창을 선택해서 이제 여기서 할 일은
설정을 할 거예요
여기서 이 기능을 설정하는데
변경사항을 커밋하려고 해요
그래서
여기서 하는 일은 기본적으로
커밋 메시지 생성을 누르는 거예요
그러면 기본적으로
커밋 메시지를 생성해 줄 거예요
그리고 여기서 플러스 기호를 누르면
모든 변경사항이 스테이징돼요
변경사항들이요
보니까 우리가 몇 가지 변경사항을 만들었네요
이 package JSON 접을 수 있는 기능을 추가했어요
그리고 실제 전사 폼을 위한
코드 변경사항들이 있어요
이미 일부를 검토했지만
기본적으로 여기서 제거하는 건
커스텀 딕셔너리
여기에 나열되어 있던 것들이에요
그리고 이걸 React 컴포넌트로
CollapsibleDictionary로 교체했어요
그리고 여기 CollapsibleDictionary는
우리가 사용하는 새로운 레이아웃이에요
모든 것에 대한
이 전체 컴포넌트를 위한 거예요
그래서 우리는 훅을 활용하고 있어요
Convex에서 모든 것을 가져오는
그 반응성을
모든 단어들에 대해 가지고 있는
반응성을요
그리고 그것이 내 UI로
끌어올려지는 방식이에요
그리고 여기 이 레이아웃이 기본적으로
우리가 이런 종류의 것을 다루는 방식이에요
Collapsible과 관련해서는, 이것은 ChatZN
컴포넌트로 Bunnex를 실행했을 때
설치된 거예요
그리고 모든 레이아웃 부분들이
꽤 괜찮아 보여요. 지금으로서는
우리가 작은 중단점을 만들기에는 충분하다고 생각해요
그리고 그냥 커밋을 진행하려고 해요
변경사항을 동기화하려고 해요
그러면 내 feature 브랜치에서 사용할 수 있을 거예요
그리고 빌드가 되는지 확인하고 싶어요
그래서 해야 할 일 중 하나는
bunX가 아니라 bun run build예요
그래서 빌드를 실행할 수 있는지
다른 타입 오류가 없는지 확인하고 싶어요
만약 오류가 있다면 보통
여기서 소리를 지르면서 '이 특정한 것을 빠뜨렸다'
규칙이나 특정 타입 같은 걸 말해줄 거예요
그리고 일반적으로 그게 꽤 도움이 돼요
버그를 수정하거나 Claude Code에게
수정하라고 말하는 데 말이에요
그래서 지금까지는
이런 종류의 것을 가지고 있지만
Claude Code가 고치라고 말하는 거예요. 지금까지는
이런 종류의 것이 있지만
내 UI가 완전히 만족스럽지 않아요
왜냐하면 추가적인 것이 필요하지 않기 때문이에요
상단에 패딩을요
그래서 마지막으로 한 번만 더 시도해 보고
실제로 그걸 찾을 수 있는지 보려고 해요
그래서
말하려고 하는 건 다시 드래그를 해서
붙여넣을 수 있는지 확인하는 거예요
그냥 할 수 있을까요
붙여넣기가 안 되네요
Control U를 해봐야겠어요. 네, 예전에는
있었는데
네, 그 단축키를 설정해야겠어요
왜냐하면 그게 정렬되어 있거든요
그래서
마지막으로 한 번만 더 말해보려고 해요
할 수 있나요... 변경사항들이
정말 훌륭해 보여요. 단지
데스크톱에서 사소한 문제가 하나 있어요
우리가 조금 더 필요한 것 같아요
패딩을 더 추가해야 해요
상단에 말이에요. 여기 스크린샷에서 보시는 것처럼
약간 잘려있는 상태입니다. 그리고 이제
우리가 가지고 있는 상태에서
이제 그냥 진행하도록 하겠습니다
알아서 작업하도록 하고, 시스템이
시도할 거예요
코드를 검토하고 수정하는 것을. 그래서
그게 바로 현재 상황입니다.
안녕하세요 Eddie Steve, 함께해 주셔서 감사합니다
친구. 나가야 하는 걸 알고 있어요. 사실 저도
나가야 해요
저도 1분 안에 나가야 하거든요
말 그대로. 그게 현재 상황입니다. 오
와, 뮤지컬
체어네요. 그렇습니다. 저는 걱정하고 있었어요
CC 사용량을 늘리는 것들에 대해서, 그들이
계속해서
그리고 C.C.
이런 일이 일어났다고 생각해요, 그들이
깨닫든 깨닫지 못하든 말이에요.
제게는 단순히 더 많은 것에 대한 것이었어요
사람들이 실제로 얼마나 많이 지출할지에 대한 깨달음
말이에요.
그리고 그것이 실제로 그들을 막지는 않는다고 생각해요.
단지 당신이 이해할 수 있게 해줄 뿐이라고 생각해요
이 모든 상황에서 당신이 어디에 서 있는지를
그리고 당신이 투자한 만큼의 가치를 얻고 있는지
아닌지를요.
그래서, 네, 그게 현재 상황입니다.
모든 댓글을 다 확인할 시간이 없었지만
확실히 앞으로 시도해보겠습니다
가능하다면 확인해보도록 하겠습니다.
많은 분들이 알고 있듯이, 계속
들어오고 계신 상황입니다. 그래서 지금 제가
나가기 전에, 말 그대로 몇 분
밖에 남지 않았어요. 먼저 멤버분들에게
인사드리고 싶습니다. 그리고 만약 당신이
멤버가 되고 싶다면, 언제든 편하게
RayFernando1337 유튜브에서 가입하세요. 그 작은
가입 버튼을 누르시면 되고
$6.99로 가입할 수 있습니다. 디스코드에 들어가게 되고, 저는
이미 60여명의 멤버를 보유하고 있습니다. 그래서 제가
100명에 도달하면, 처음 100명의 멤버들에게는
디스코드 접근과 멤버십을 위한 가격이
두 배로 오를 예정입니다.
그래서, 네, 이것이 두 번째가 될 것입니다
디스코드에 들어가는 티어가요.
디스코드, 정말 멋질 것 같습니다.
Eddie, 방금 라이브에서 봤어요. 기본적으로
제가 따르는 스케줄이
이번 달에 있는지요? 지금 현재로서는
기본적으로 매일 하고 있어요
말 그대로
7월과 8월 한 달 동안, 8월 대부분 동안
저는 이것을 스트리밍의 여름이라고 부릅니다.
그래서 시도하고 있어요
오전 9시에서 10시 사이에 나타나도록
태평양 일광 절약 시간으로. 보통
바로 이 시간대
정도입니다. 가족과 함께하는 일들을
잘 챙기고 싶고, 그리고
그러면 제가
잠시 스트림에 들어와서
참여할 수 있습니다. 그래서 만약 질문이
있으시면
언제든 들어오세요. 당신이
멤버이시니까, 디스코드 가입을 위한
게시물이 있습니다. 거기 있는
지침을 따라하시면 제가
디스코드에 초대해드리겠습니다. 멤버이시니까요.
그리고 우리는 채팅도 할 수 있습니다. 꽤
활발합니다. 몇 분이
오늘 아침에 질문을 하고 계세요. 저는
거기에도 갈 수 있도록 하겠습니다
네, 다른 멤버들도 있는지 확인해보겠습니다
다른 멤버 관련 내용들이 지속적으로 나오고 있네요.
지금까지 스트림에 참여해주신 모든 분들께 감사드립니다.
우리와 함께 할 수 있게 되어서 정말 좋습니다.
저는 bacon overflow를 정말 좋아하고,
여러분의 댓글이 있을 때마다 항상 좋아합니다.
Anthropic에서 100만 토큰이 5천만 달러라고 말할 수 있지만,
그게 실제 가격을 의미하는 건 아니죠. 정확히 그겁니다.
하지만 우리가 월 200달러 플랜에 대해 지불하는 것보다
더 많이 사용하고 있을 거라고 생각해요.
동감합니다. 그들의 데이터 센터 상황이
정확히 어떤지는 모르지만, 그렇습니다.
전사 폼의 경우, PT6에서 PT8로
패딩을 더 추가한 것 같네요.
좋은 변화이고, 그렇게 했어야 맞습니다.
잠깐 새로고침 해보겠습니다.
그게 문제일 수도 있고 아닐 수도 있어요.
그런데 코드의 특정 부분에 변경사항이 있을 때마다
기본적으로 사이트를 다시 실행해야 합니다.
여기서 이걸 고쳐보겠습니다. 알겠습니다.
정말로 가야 할 시간이에요.
1분 정도 늦을 것 같아요.
친구가 화낼 거지만, 괜찮아요.
여러분이 그만한 가치가 있거든요.
아니요, 실제로 고치지는 못했지만
정말 가야 합니다. 하지만 최소한
이것은 여기에 있어요.
아직 프로덕션에 체크인하지 않았습니다.
체크인하기 전에 더 많은 테스트를 하고 싶어요.
이제 막 참여하신 분들을 위해 간단히 요약하면,
이것은 Cursor 내에서 Claude Code와 함께
작업하는 방법에 대한 멀티 스텝 시리즈의
1부입니다. 그래서 우리는
계획 모드, 울트라 씽크 모드, 그리고
제가 실제 디자인 규칙을 따르도록
추가한 소스들을 활용할 수 있었습니다.
그리고 거기서 한 것은 제 코드를 살펴볼 수 있었고,
ChatCN이 설치되어 있다는 것을 확인했습니다.
이런 규칙 파일들 덕분에 Tailwind 4C가
설치되어 있다는 것도 확인했습니다.
그뿐만 아니라 제 디자인 가이드라인도
따라했는데, 이건 정말 대단한 일입니다.
모든 것을 확인하고 싶으시다면
블로그 포스트에 대해서는 rayfernando.ai에서
확인해보세요.
채널을 지원하기 위해 멤버가 되고 싶으시다면
정말 감사하겠습니다.
첫 100명의 멤버를 모으려고 하는데,
정말 대단한 일이 될 것 같습니다.
그러면 풀타임 에디터를 구할 수 있어서
이런 라이브 스트림들을 편집하기 시작할 수 있습니다.
멤버들의 시간을 많이 절약해드릴 수 있어요.
이런 짧은 라이브 스트림들은
멤버들에게 먼저 제공되고
나중에 일반 공개될 예정입니다.
전체 라이브 스트림을 시청하고 싶으시다면
그렇게 하실 수 있습니다.
라이브 스트림 후에 저는 C.C.를 처리하고
아래에 타임스탬프를 넣을 예정입니다.
언제든지 돌아가고 싶으시다면
그 타임스탬프들을 살펴보실 수 있어요.
필요한 것들을 안내해드릴 수 있습니다.
당연히 질문이 있으시면
궁금한 점이 있으시면 언제든지 댓글로 남겨주세요.
저는 여름 내내 매일 여기에 있습니다.
오전 9시, 10시쯤
태평양 일광 절약 시간 기준으로요.
그냥 여기에 들어오시면 됩니다.
기억하시면, 라이브 스트림에서 질문에 대한 답변을 먼저 받을 수 있어요.
라이브 스트림에서요.
가끔 너무 정신없어서 모든 분들의 질문을 다 다루지 못할 때가 있어서, 가능할 때 걸러서 답변드리려고 노력합니다.
시간이 될 때 말이죠.
하지만 댓글을 남기시면 나중에 읽어보거든요. 영상을 보면서 여러분의 댓글을 확인할 거예요.
그래서 참여해주셔서 정말 감사합니다. RayTranscribes를 확인해보고 싶으시다면 할인 코드를 드릴게요.
RayCooks라고 입력하시면 됩니다. R-A-Y-C-O-O-K-S, RayCooks라는 쿠폰 코드로 15달러 할인받으실 수 있어요.
RayTranscribes.com에 가셔서 이 코드를 입력하시면 RayTranscribes로 요리하는 비용을 조금 할인받으실 수 있습니다.
RayTranscribes.com에서 할인을 받으시는 거죠.
Ray와 함께하고 있고, 참여해주신 모든 분들께 감사드립니다.
여기에 가셔서 자막 작업을 시작하고 싶으시다면, 이 플랜들 중 어느 것이든 15달러 할인받으시고 적용하시면 됩니다.
어느 플랜이든 말이죠.
기본적으로 스타터 플랜으로 한 달 무료로 사용하실 수 있어요. 또는 베타 버전을 사용하고 싶으시다면
첫 달에 5달러만 내시면 베타에 참여할 수 있어요. 또는 총 15달러로 말이죠.
결제할 때 RayCooks 코드를 입력하시면 곧 여러분과 함께 요리할 수 있을 거예요.
안녕히 계세요, 여러분.
안녕히 계세요.
www.cdc.com.au