Trae의 MCP와 Agent 능력 업데이트, 이번 업데이트는 강도가 최고입니다 특히 Agent는 MCP와 프롬프트를 결합하여 다양한 기능을 수행할 수 있습니다 이번 업데이트를 기회로 제가 AI 프로그래밍(Vibe Coding)을 어떻게 하는지 작성해보았습니다 여러 가지 작은 팁들이 있으며, 동시에 여러분에게 Trae 사용법을 알려드리겠습니다 또한 <15>의 Vibe Coding 조언을 미리 공개하겠습니다 자세한 튜토리얼과 Trae 업데이트 소개는 아래에 있습니다👇

Trae가 공개한 4가지 주요 기능을 살펴보겠습니다. 이제 그 기능은 Cursor와 Windsurf와 동등해졌고, 경험은 더욱 좋아졌습니다. 예를 들어, 지능형 에이전트를 사용자 정의할 수 있으며, MCP와 프롬프트를 사용하여 여러 명의 전담 AI 전문가를 한 번에 모아 사용할 수 있습니다. 에이전트 생성: 프롬프트 단어와 MCP 도구를 기반으로 에이전트를 사용자 정의할 수 있습니다. 매번 복잡한 명령을 입력할 필요 없이, 간단히 @를 눌러 사용하세요.

공사가 진행되는 동안 기다리기 너무 귀찮으시다면 먼저 긴 글을 읽어보세요: mp.weixin.qq.com/s/ADHNyGj17b4...

먼저 결과를 살펴보자 최근에 저는 AI 프로그래밍과 40 이미지 생성 프롬프트에 대한 글을 많이 올렸습니다. 많은 친구들이 그들을 정리할 수 있는 웹페이지를 만들어 달라고 부탁했습니다. 이번에는 좀 더 복잡한 것을 찾고 싶었기 때문에 그렇게 하기로 했습니다. LLM 및 이미지 생성 프롬프트 단어 필터링을 지원하고, 모델 필터링을 지원하고, 클릭 후 모든 콘텐츠를 표시하고, 프롬프트 단어의 빠른 복사를 지원합니다.

먼저 환경 구성의 내용을 살펴보겠습니다. 먼저, Trae IDE를 공식 웹사이트에서 다운로드하여 설치하고, 영어 이름의 빈 폴더를 만든 다음 처음 시작할 때 프로젝트 디렉토리로 선택합니다. 다음으로, 오른쪽 상단 모서리에 있는 ⚙️ 설정 → 규칙을 열고 "프런트엔드 모범 사례 규칙" 전체를 붙여넣어 AI가 Tailwind, DRY 및 ARIA 사양을 자동으로 준수하는 코드를 작성할 수 있도록 합니다. AI가 설계 초안이나 외부 서비스를 참조하도록 하려면 다음을 입력하십시오.

요구 사항을 정리하고 프롬프트를 구성합니다. 요구사항을 정리할 때, 먼저 "개발하고 싶은 것은..." 템플릿을 사용하여 대상 사용자, 사용 시나리오, 핵심 기능을 체계적으로 작성하고, 핵심 요점이 완전하고 명확하며, 프롬프트 단어가 그림에 있는지 확인하세요. 그러면 내 디자인 및 개발 요구 사항을 프롬프트로 사용하세요. 그런 다음 디자인 스타일과 기술 스택 요구 사항을 동일한 프롬프트로 결합하여 AI가 시각적 사양과 코드 사양을 동시에 이해할 수 있도록 합니다. 첫 번째 프롬프트 1‑2‑3에 함수를 포함해야 합니다.

첫 번째 초안을 미리 본 후 "기능적 완전성 → 경계 데이터 → 반응형 레이아웃"의 3단계 체크리스트에 따라 각 항목을 클릭하고, 극단적인 데이터를 끌어오고, 다양한 화면 너비로 전환하여 핵심 상호 작용에 사각지대가 없는지 확인합니다. 문제가 발견되면 "한 번에 하나의 버그/기능만 수정"하는 원칙을 따르고 수정 후 AI 백테스트를 실시하여 여러 동시성 지점으로 인한 코드 차이를 방지합니다. 모델에 오해가 있는 경우 Trae의 "개시 전으로 돌아가기"를 즉시 사용하여 대화를 롤백한 다음 사용하십시오.

배포 시에는 느긋한 방법이 선호됩니다. 생성된 프로젝트 폴더를 yourware나 비슷한 정적 호스팅 서비스로 직접 끌어다 놓으면 몇 초 안에 자동으로 패키징되어 공개 URL이 지정됩니다. 사용자 정의 도메인 이름이나 자동 CI/CD가 필요한 경우 코드를 GitHub 저장소에 푸시한 다음 Netlify/Vercel을 사용하여 클릭 한 번으로 연결하고 "메인 브랜치 → 자동 배포" 파이프라인을 활성화합니다. 모든 API 키와 키 정보는 플랫폼의 환경으로 변경됩니다.

제가 클로드의 웹페이지 프롬프트를 작성한 지 불과 한 달 만에, 바이브 코딩을 위한 전체 생태계와 도구가 급속히 발전했습니다. IDE부터 프런트엔드 및 백엔드 구성 요소 라이브러리, 데이터베이스, 배포 서비스 등 AI 프로그래밍에 맞게 특별히 설계된 것들이죠. 트레이의 국내 방식이 출시된 지 얼마 되지 않아 그는 많은 기능을 추가했습니다. 현재 바이브 코딩은 위젯과 작은 웹 페이지로만 사용할 수 있지만, 앞으로도 위젯과 작은 웹 페이지에만 국한되지는 않을 것입니다.

그럼, 튜토리얼은 여기서 끝납니다. 궁금한 점이 있으면 댓글로 질문해주세요. 자세한 정보를 가지고 가는 것이 가장 좋습니다. 저나 다른 전문가가 이 문제를 보고 답을 줄 수 있을 것입니다.

Exa의 Twitter 검색을 사용하여 Sam의 Twitter에 대한 분석 페이지를 만듭니다. x.com/op7418/status/1914561908...