제이브레인 시스템 트레이딩

최근 Cursor, Windsurf처럼 AI 기반 개발 IDE가 인기를 끌고 있는데,
Trae AI는 무료로 사용 가능한 AI 코딩 IDE로 React 같은 프론트엔드 개발에 특히 편리합니다.

이 글에서는 Windows 환경에서 Trae AI 설치 → React 웹 앱 생성 → 실행까지
처음 사용하는 분도 따라 할 수 있습니다.

요즘 개발자라면 ChatGPT로 코딩을 한 번쯤은 해봤을 겁니다.
하지만 실제 프로젝트를 하다 보면,

“설명은 좋은데… 코드 적용이 번거롭다”
“파일 여러 개 수정하는 건 귀찮다”

라는 생각이 들 때가 많습니다.

그래서 최근 각광받는 것이 Trae AI 같은 AI 코딩 IDE입니다.
이 글에서는 ChatGPT로 코딩하는 방식과 Trae AI를 사용하는 방식의 차이는 다음과 같습니다.

간단하게 말해서 ChatGPT 는 매번 채팅창에 코드를 설명하고 에러가 발생하면 에러를 복사 붙여넣기 후에 질문해야 합니다.

그런데 IDE 가 통합된 Trae AI 는 코드를 붙여 넣을 필요가 없고 에러가 발생해도 알아서 수정해줍니다.

이 것은 인공지능이 개발자에게 내려준 알라의 요술봉, 도깨비 방망이~ 비슷한 것이 아닐까 생각됩니다.

🆚 기본 개념 차이

📌 Trae AI란?

• AI 기반 코드 자동 완성 & 생성
• ChatGPT 스타일의 코드 질문 가능
• VS Code와 유사한 UI
• React / Vue / Node.js 개발에 적합
• Windows 무료 사용 가능

요금제

우선 무료로 사용해볼 것을 권장합니다.

뭐든 사람에 따라 기호가 다르듯이 커서가 더 좋을 수도 있고 Windsurf 가 좋을 수도 있습니다.

그래서 저도 Free 로 설치했습니다.

🖥️ 1. Trae AI Windows 설치

1️⃣ 공식 사이트 접속

2️⃣ Windows 버전 다운로드

• Download for Windows 클릭
• Trae-Setup.exe 파일 다운로드

3️⃣ 설치 진행

1. 다운로드한 Trae-Setup.exe 실행
2. Next → Install
3. 설치 완료 후 Trae 실행

🔐 2. Trae AI 로그인

Trae AI는 계정 로그인이 필요합니다.

• Google 계정 로그인 권장
• 로그인 후 바로 사용 가능

⚙️ 3. 개발 환경 준비 (Node.js 설치)

React 개발을 위해 Node.js가 필요합니다.

1️⃣ Node.js 다운로드

• LTS 버전 다운로드 권장

2️⃣ 설치 확인

Trae AI 터미널 또는 CMD에서 실행:

버전이 나오면 정상 설치 완료 🎉

⚛️ 4. 간단한 프로젝트 생성

처음 Trae AI 를 실행한 모습니다.

@Builder 대화창이 있는데 여기에 원하는 것을 입력하면 됩니다.

저는 다음과 같이 입력해보았습니다.

간단한 React 메인 페이지를 만들어주세요.
제목과 버튼 하나가 있고 버튼 클릭 시 alert를 띄워주세요.

Create a new project 를 선택했습니다.

뭔가 뚝딱뚝딱 만듭니다.

1 files need review 라고 파일을 확인하고 버릴 지 (Undo All), 그대로 진행할 지 (Keep All) 선택해달라고 합니다.

저는 Keep All 을 선택했습니다.

실행 버튼이 보이지 않아서 다음과 같이 입력했습니다.

실행해주세요.

이제 Run 버튼이 보이네요. 클릭합니다.

실행 결과 입니다.

알람 띄우기를 클릭하니 잘 동작하네요.

1. 워크플로우 생성

1. n8n 접속 (http://localhost:5678)
2. 좌측 상단 Workflow → 새 워크플로우 클릭
3. 워크플로우 이름 예시: Gemini Chat Test

2. Chat Trigger 노드 생성

1. 노드 추가 → When Chat Message Received 선택
2. 채팅 플랫폼 연결 (예: Slack, Discord, 또는 n8n 자체 테스트 채팅)
3. 테스트 메시지 수신용으로 간단히 설정:
   • 채널/방 선택
   • 메시지 이벤트 활성화

3. AI Agent 노드 추가

1. 노드 추가 → AI Agent 선택
2. 연결: When Chat Message Received → AI Agent
3. Agent 이름 입력: GeminiBot
4. Language Model: Google Gemini Chat 선택 ( gemini-2.5-flash )
5. API Key 입력 (Google AI Studio에서 발급받은 키)

4. Simple Memory 연결

1. AI Agent 노드 설정에서 Memory → Simple Memory 활성화
2. 역할: 이전 대화 저장
3. 옵션:
   • Maximum entries: 50
   • Persist memory: true
4. 이전 대화를 기억하도록 연결
   • AI Agent → Simple Memory 연결

5. 간단한 Tool 연결 (예: Calculator)

1. AI Agent에서 Tool 사용 활성화
2. Tool 추가: Calculator (간단한 연산 테스트용)
3. 연결: AI Agent → Calculator Tool → Output
4. 테스트 예시 입력: "2 + 3"
5. 실행 시, Gemini Chat 모델이 계산을 Tool로 수행하고 결과 반환

6. 테스트 실행

1. Start Node 클릭
2. 테스트 메시지 입력: "안녕하세요, 2+3 계산해줘"
3. AI Agent가 메시지를 수신 → Gemini 모델 처리 → Tool 실행 → 결과 반환
4. Output 확인: "5"

7. 워크플로우 구조 예시

When Chat Message Received
            ↓
        AI Agent (Gemini Chat)
            ↓
       Simple Memory
            ↓
         Calculator Tool
            ↓
         Output / Reply

1️⃣ Google 계정 준비

• Google AI Studio는 Google Cloud 계정 기반으로 동작합니다.
• 이미 Google 계정이 있다면 그대로 사용 가능, 없다면 새로 생성합니다.

Google 계정 생성 링크

2️⃣ Google Cloud Console 접속

1. 웹 브라우저에서 Google Cloud Console 접속
2. Google 계정으로 로그인
3. 약관 동의 및 결제 수단 등록
   • AI Studio API 사용은 일부 무료 사용량이 있지만, 초과 시 결제 필요

3️⃣ 프로젝트 생성

1. 상단 메뉴 → 프로젝트 선택 → 새 프로젝트
2. 프로젝트 이름 입력 (예: n8n-gemini)
3. 조직/위치 선택 (없으면 개인)
4. 만들기 클릭

프로젝트를 나중에 API Key, API 사용량 관리, 결제 관리에 사용합니다.

4️⃣ Google AI Studio API 활성화

1. 왼쪽 메뉴 → API 및 서비스 → 라이브러리
2. 검색창에 "AI Studio" 또는 "Gemini" 입력
3. Gemini API 선택 → 사용 클릭

활성화 후 이 프로젝트에서 API를 호출할 수 있게 됩니다.

5️⃣ 사용자 인증 정보(Credentials) 생성

1. API 및 서비스 → 사용자 인증 정보 클릭
2. 사용자 인증 정보 만들기 → API 키 선택
3. 잠시 기다리면 API Key가 발급됩니다.
4. 발급된 키 복사
   • n8n에서 HTTP Request 노드나 공식 API 노드에 사용