코드에 대한 불안감은 이제 그만 떨쳐버리고 개발의 즐거움을 느껴보세요: Trae AI를 사용하면 앱을 쉽게 만들 수 있으며 누구나 개발자가 될 수 있습니다!

소프트웨어 개발은 인공 지능(AI)에 의해 큰 변화를 겪고 있습니다. 코드 완성 및 버그 수정에서 자연어 대화를 통한 코드 생성에 이르기까지 AI는 놀라운 속도로 진화하고 있습니다.

최근 바이트 점프는 새로운 AI 프로그래밍 도구인 Trae를 다시 출시하여 다시 한 번 업계에서 큰 관심을 불러일으켰습니다.

Trae 인터페이스는 중국어로 되어 있어 중국 개발자에게 매우 친숙하며 시작의 문턱을 낮춰줍니다. 또한 Trae는 다음과 같은 기능을 갖추고 있습니다. Claude 3.5 Sonnet 및 GPT-4o 모델 기반 AI 어시스턴트는 개발자에게 강력하고 지능적인 지원을 제공합니다.

존재 빌더 모드 Trae는 개발자의 비전을 이해하고 개발자가 처음부터 실제 제품을 만들 수 있도록 도와주는 본격적인 조력자입니다.

뿐만 아니라 채팅 모드 Trae는 개발자의 프로그래밍 요구 사항에 대응하고 개발 작업을 효율적으로 완료할 수 있도록 항상 대기하고 있는 풀스택 프로그래머입니다.

더욱 흥미로운 점은 이제 사용자에게 무료로 제공되는 Claude 3.5 Sonnet 및 GPT-4o와 같은 고급 모델이 Trae 도구에 통합되어 개발자에게 큰 도움이 된다는 점입니다.

이번 글에서는 대화형 인터랙션을 통해 처음부터 애플리케이션을 개발하는 방법을 보여드리며 Trae를 심도 있게 체험하고, AI 프로그래밍의 새로운 매력을 느껴보세요.

빠른 시작 가이드

1. 공식 Trae 웹사이트를 방문합니다:

인터뷰 https://www.trae.ai/ 공식 웹사이트에 들어가면 아래와 같은 인터페이스가 표시됩니다. "MacOS용 다운로드' 버튼을 클릭하여 설치 프로그램을 다운로드합니다.

참고 사항Trae는 현재 macOS에서만 지원되며, Windows 버전도 준비 중이니 계속 지켜봐 주시기 바랍니다.

2. 설치 및 초기 시작:

설치 후 Trae를 처음 열면 기본 언어는 중국 개발자의 사용 습관을 고려한 중국어 간체입니다.

3. 초기화 구성 및 로그인:

Trae는 테마 선택, IDE 구성 가져오기, 명령줄 시작 항목 추가 등의 초기 설정 과정을 거쳐 마지막으로 로그인 화면으로 사용자를 안내합니다.

중요 참고 사항트래의 AI 기능을 사용하려면 로그인해야 합니다. 로그인 과정에서는 웹 기반 도구를 사용해야 할 수 있으며, 사용자는 이메일 등록 또는 타사 계정 로그인 중에서 선택할 수 있습니다.

4. 기능 인터페이스 개요:

로그인에 성공하면 사용자는 개별 개발 요구 사항을 충족하기 위해 에디터의 코딩 기능을 향상시키기 위해 설치할 수 있는 다양한 플러그인 확장 기능을 지원하는 Trae의 기본 인터페이스로 들어갑니다.

실습: AI 춘절 커플링 생성기 개발

이 글에서는 Trae의 응용 기능을 보다 직관적으로 보여드리기 위해 AI 춘절 커플 생성기 개발을 예로 들어, 독자들이 AI와 함께 프로그래밍하고 자신과 가족을 위한 특별한 춘절 축복을 커스터마이징하는 재미를 경험해볼 수 있도록 안내합니다.

이 글에서는 프로젝트 개발 프로세스를 프로젝트 초기화, 기본 UI 구현, 춘절 커플트 생성 로직 및 스타일 최적화의 네 단계로 나누어 설명합니다.

프로젝트 초기화

먼저 빌더 모드로 전환하고 다음과 같은 이름의 파일을 만듭니다. ai-couplet 새 프로젝트의 수입니다.

대화 상자에 요구 사항에 대한 설명을 입력합니다:

我想在当前目录创建一个 AI 春联生成器的项目，使用 React + Tailwind CSS 技术栈。
请帮我完成以下步骤：
初始化项目结构
*配置必要的依赖
设置基本的开发环境
请开始第一步。

Trae AI는 프로젝트 초기화 명령을 제공하여 신속하게 응답하며, 사용자는 간단히 "움직여야 합니다." 버튼을 눌러 실행합니다.

그러면 AI가 필요한 스타일 파일을 구성하는 데 도움을 줍니다. 사용자는 변경 사항을 검토하고 올바른지 확인한 후 "전액 수락"를 클릭하여 구성을 완료합니다.

몇 번의 클릭만으로 프로젝트 초기화가 완료되고 프로젝트가 실행됩니다.

Trae에는 인터페이스 효과를 실시간으로 보여줄 수 있는 웹 미리보기 기능이 내장되어 있어 프론트엔드 프로젝트 디버깅에 매우 편리하다는 점도 언급할 가치가 있습니다.

기본 UI 구현

프로젝트 초기화가 완료되면 다음 단계는 봄 축제 생성기의 사용자 인터페이스 구현을 시작하는 것입니다. 아래 인터페이스 프로토타입 다이어그램을 참조하여 AI에 대한 인터페이스 요구 사항을 설명하세요.

프로토타입 다이어그램이 포함된 간단한 프롬프트를 보내면 Trae는 즉시 설계 의도를 파악하고 자동으로 코드 작성을 시작합니다. 사용자는 문서 변경 사항을 검토하고 "전액 수락', 즉

프로토타입 이미지와 매우 일관되고 글꼴 및 색 구성표 측면에서 더욱 미적으로 만족스러운 봄 축제 생성기 인터페이스가 빠르게 제공됩니다.

위의 상호작용 과정을 통해 Trae가 코드를 이해할 뿐만 아니라 이미지 콘텐츠를 정확하게 구문 분석한다는 것을 알 수 있습니다. 전체 인터페이스 개발 프로세스가 매끄럽고 자연스러워 기존 인터페이스 개발 작업을 쉽고 효율적으로 만들 수 있습니다.

춘절 커플트 생성 로직 구현

사용자 인터페이스를 만든 후 핵심 작업은 춘절 커플트 생성 기능을 구현하는 것입니다. 이 함수는 사용자 입력을 받아 Claude API를 호출하여 해당 춘절 커플트를 생성합니다.

이 기능의 개발은 Trae AI와 함께 계속 진행 중입니다:

请帮我实现春联生成功能：
当用户点击 “生成春联” 按钮时，需要执行以下操作：
获取输入框中用户输入的主题或关键词
调用 Claude API 生成一副对联，具体要求如下：
横批（四字）
上下联（七字对）
对仗工整，符合春节喜庆氛围
将生成结果分别展示在对应的红色区域中

Trae AI는 API 인터페이스 호출, 오류 처리 및 기타 로직을 포함한 기능 개발을 빠르게 완료했습니다. 하지만 테스트 과정에서 "춘절 커플트 생성에 실패했습니다"라는 메시지가 표시되었습니다.

문제에 대해 걱정할 필요 없이 계속 AI에 피드백하여 문제를 해결하세요.

사용자는 문제에 대한 간단한 설명과 함께 스크린샷을 AI에 전송하여 AI가 문제를 더 정확하게 이해하고 해결할 수 있도록 도울 수도 있습니다.

여러 차례의 최적화와 조정 과정을 거쳐 마침내 완벽하게 작동하고 안정적인 춘절 커플 생성 기능을 완성했습니다.

이제 '집', '봄' 또는 다른 키워드를 입력해도 Trae는 잘 만들어진 상서로운 새해맞이 문구를 생성할 수 있습니다.

인터페이스 스타일 최적화

다음으로, 채팅 모드로 전환하여 춘절 커플트 표시를 더욱 최적화해 보세요.

채팅 모드로 전환한 후에는 인터페이스의 스크린샷과 함께 자연어 대화로 최적화 요구 사항에 대해 AI와 계속 소통합니다:

我发现当前界面背景色为灰色，节日氛围略显不足。希望进行如下调整：
将背景色修改为白色，使红色的春联更加醒目突出。
适当增加左右对联之间的间距。
调整字体大小，使对联文字更加醒目。
请帮我修改相关样式代码。

Trae AI는 사용자가 코드를 검토하는 데 필요한 특정 스타일 수정 코드도 빠르게 제공합니다.

"어플라이언스" 버튼을 클릭하면 Trae가 변경 사항을 다시 표시하고 오류가 없는지 확인한 후 "전액 수락" 업데이트를 완료합니다.

인터페이스 세부 사항을 최적화하기 위해 AI와 여러 차례 대화하고 조정해야 할 수도 있습니다. 사용자는 수정 의도를 명확하게 설명하기만 하면 됩니다.

예를 들어, 현재 커플 스타일이 다소 단조롭고 축제 분위기에서 개선의 여지가 있다면 AI에게 최적화 제안을 요청할 수 있습니다.

AI의 제안에 영감을 받아 배너의 왼쪽과 오른쪽에 작은 등불 두 개를 추가하여 축제 분위기를 더하기로 결정했습니다. 디자인 콘셉트를 보다 명확하게 표현하기 위해 인터넷에서 랜턴 소재 이미지를 검색하고 간단한 모식도를 그려서 AI에게 전송하고 디자인 구현에 도움을 요청했습니다.

Trae AI는 디자인 의도를 빠르게 이해하고 코드를 작성하기 시작했습니다. 랜턴 요소 추가는 곧 만족스러운 결과로 완성되었고, 랜턴을 더욱 생동감 있게 만들기 위해 좌우로 흔들리는 동적 효과까지 추가했습니다.

등불을 추가하면 인터페이스에 설날 분위기가 물씬 풍깁니다. 커플링 가운데 부분이 약간 비어 있는 것을 보고 커플링 가운데에 "福"이라는 단어를 추가하기로 결정했습니다. 또한 이를 실현할 수 있도록 도식을 그려서 AI에 보냈습니다.

결론

이 백서에서 볼 수 있듯이 Trae는 'AI 봄 축제' 프로젝트 개발 과정에서 효율적인 프로그래밍 도우미 역할을 수행하여 자연스럽고 원활한 대화 상호 작용을 통해 개발자가 완전한 기능을 갖춘 애플리케이션을 구축할 수 있도록 지원합니다.

물론 신제품인 Trae는 아직 몇 가지 보완해야 할 점이 있습니다.

예를 들어, 랜턴 애니메이션 효과를 구현하는 과정에서 사용자는 예제 이미지를 제공하여 AI가 개발 작업을 보다 효율적으로 완료할 수 있도록 안내해야 합니다.

일반적으로 사용되는 일부 구성 규칙의 경우 편집기에서 아직 전역 옵션을 제공하지 않아 사용자가 설정을 재사용할 때 설정을 반복해야 하므로 작업 과정이 다소 번거롭습니다. Trae 팀은 다음 릴리스에서 이러한 세부 사항을 최적화할 예정입니다.

그럼에도 불구하고 더 많은 개발자가 참여하고 긍정적인 피드백을 제공하면 Trae와 같은 AI 프로그래밍 도구가 완성될 것이라고 믿습니다. 도구와 장인은 서로를 보완하며 소프트웨어 개발의 효율성을 크게 향상시킬 것입니다.

AI 기술이 추가되면서 프로그래밍의 문턱이 낮아져 더 많은 사람들이 소프트웨어 개발에 참여하고 더 실용적이고 창의적인 인터넷 제품을 만들 수 있게 된 것은 분명한 사실입니다.

앞으로 우리는 인터넷 제품 혁신의 급물살을 타는 시대를 맞이할지도 모릅니다.