내 폰에서 AI 코딩 에이전트를 제어하는 도구를 만들었습니다

발행: 1일 전 (2026년 3월 19일 AM 03:30 GMT+9)

13 분 소요

Source: Dev.to

내 폰으로 AI 코딩 에이전트를 제어하는 도구를 만들었습니다

소개

최근 AI 코딩 에이전트가 점점 더 강력해지고 있지만, 실제 개발 현장에서는 즉각적인 피드백과 빠른 조작이 필요합니다.
데스크톱이나 노트북에 붙어 있지 않아도, 스마트폰만 있으면 언제 어디서든 에이전트를 제어하고, 코드를 검토하고, 명령을 전달할 수 있으면 얼마나 편리할까요?

이 글에서는 내가 만든 간단한 모바일 인터페이스와 백엔드 서버를 이용해, AI 코딩 에이전트를 스마트폰에서 직접 제어하는 방법을 단계별로 설명합니다.

왜 이런 도구가 필요한가?

시간 절약: 회의 중이나 이동 중에도 에이전트에게 작업을 할당하거나 결과를 확인할 수 있다.
컨텍스트 전환 최소화: IDE를 열고 코드를 확인하기 위해 컴퓨터로 돌아갈 필요가 없다.
협업 강화: 팀원들이 같은 모바일 UI를 통해 에이전트와 상호작용하면, 작업 흐름을 공유하기 쉽다.

전체 구조

+-------------------+        +-------------------+        +-------------------+
|   스마트폰 UI     | <----> |   FastAPI 서버    | <----> |  AI 코딩 에이전트 |
+-------------------+        +-------------------+        +-------------------+

스마트폰 UI: Flutter 로 만든 간단한 화면. 명령 입력, 로그 보기, 파일 업로드 기능 제공.
FastAPI 서버: 모바일 요청을 받아서 AI 에이전트에게 전달하고, 응답을 다시 모바일에 반환.
AI 코딩 에이전트: OpenAI gpt-4o-mini (또는 선택한 모델)와 langchain을 이용해 실제 코드를 생성·수정.

구현 단계

1. FastAPI 백엔드 만들기

from fastapi import FastAPI, HTTPException
from pydantic import BaseModel
import openai

app = FastAPI()

class Prompt(BaseModel):
    message: str
    file_path: str | None = None

@app.post("/run")
async def run_agent(prompt: Prompt):
    # OpenAI API 호출
    response = openai.ChatCompletion.create(
        model="gpt-4o-mini",
        messages=[{"role": "user", "content": prompt.message}]
    )
    return {"response": response.choices[0].message.content}

핵심 포인트

/run 엔드포인트는 모바일 앱이 POST 요청을 보낼 때 사용합니다.

Prompt 모델에 file_path를 포함시켜, 파일 기반 작업도 지원하도록 확장할 수 있습니다.

2. Flutter 모바일 앱 만들기

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _controller = TextEditingController();
  String _response = '';

  Future<void> _sendMessage() async {
    final resp = await http.post(
      Uri.parse('http://YOUR_SERVER_IP:8000/run'),
      headers: {'Content-Type': 'application/json'},
      body: jsonEncode({'message': _controller.text}),
    );
    setState(() {
      _response = jsonDecode(resp.body)['response'];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AI 코딩 에이전트')),
      body: Column(
        children: [
          Expanded(child: SingleChildScrollView(child: Text(_response))),
          TextField(controller: _controller),
          ElevatedButton(onPressed: _sendMessage, child: Text('전송')),
        ],
      ),
    );
  }
}

핵심 포인트

http://YOUR_SERVER_IP:8000/run 부분을 실제 서버 주소로 교체합니다.

현재는 단순 텍스트 입력만 지원하지만, 파일 업로드 UI를 추가하면 multipart/form-data 로 파일을 전송할 수 있습니다.

3. 로컬에서 서버 실행하기

uvicorn main:app --host 0.0.0.0 --port 8000

Docker 컨테이너에 넣어 배포하면 언제든지 접근 가능하게 만들 수 있습니다.

4. 모바일에서 테스트하기

스마트폰과 같은 네트워크에 있는지 확인합니다.
앱을 실행하고, 텍스트 박스에 “Create a Python function that returns the nth Fibonacci number.” 와 같이 명령을 입력합니다.
전송 버튼을 누르면 서버가 OpenAI API에 요청을 보내고, 결과가 화면에 표시됩니다.

추가 기능 아이디어

파일 브라우저: 로컬 파일을 선택해 에이전트에게 전달 → 코드 자동 생성.
실시간 로그 스트리밍: WebSocket을 이용해 에이전트의 진행 상황을 실시간으로 표시.
다중 모델 지원: gpt-4o, Claude, Gemini 등 여러 모델을 스위치할 수 있는 드롭다운 메뉴.
인증: JWT 토큰 기반 인증을 추가해 보안 강화.

마무리

스마트폰 하나만 있으면 언제든지 AI 코딩 에이전트를 호출하고, 작업을 진행시킬 수 있습니다. 복잡한 IDE 설정 없이도 간단한 UI와 REST API만으로 충분히 강력한 워크플로우를 만들 수 있다는 점이 가장 큰 장점이죠.

앞으로도 이 프로젝트를 확장해서 팀 협업 툴이나 교육용 인터페이스로 활용하고 싶습니다. 여러분도 직접 시도해보고, 필요에 맞게 커스터마이징해 보세요! 🚀

문제

소파에 앉아 있든, 카페에 있든, 혹은 책상에서 잠시 떨어져 있든, 당신은 완료하고 싶은 코딩 작업 목록을 가지고 있고 머신에 AI 코딩 에이전트(Claude Code, Aider, Codex, Gemini CLI)를 설치해 두었지만, 휴대폰에서는 이를 사용할 수 없습니다.

Discord로 작업을 문자로 보내면 여러 AI 에이전트가 각각 자신의 터미널에서 작업을 시작하도록 할 수 있다면 어떨까요?

내가 만든 것

Agentboard — 휴대폰에서 Discord를 통해 여러 AI 코딩 에이전트를 조정할 수 있게 해주는 오픈소스 도구입니다.

You type:

team Alpha: Build a landing page for my portfolio
team Beta: Fix the auth bug in my API
team Gamma: Write tests for the payment module

On your Mac, three Terminal windows open — each running Claude (or Aider, Codex, Gemini, whatever you configure) working on its assigned task, in parallel.

작동 방식

You (Discord on phone)
    |
    v
Discord Bot (Python, runs on your machine)
    |
    +-- Team Alpha → Terminal.app → claude "Build landing page..."
    +-- Team Beta  → Terminal.app → claude "Fix auth bug..."
    +-- Team Gamma → Terminal.app → claude "Write tests..."

Discord에서 team Name: task 형식으로 메시지를 보냅니다.
봇이 메시지를 파싱합니다.
팀별로 실제 터미널 창을 엽니다.
AI 코딩 CLI를 인터랙티브하게 실행합니다.
각 팀은 독립적으로, 병렬로 작업합니다.

봇 자체에 API 크레딧이 필요하지 않습니다—이미 보유하고 있는 Claude Code 구독(또는 설치한 CLI)을 사용합니다.

플러그 가능한 백엔드

Agentboard는 하나의 AI 도구에 고정되지 않습니다. 모든 CLI와 함께 사용할 수 있습니다. 원하는 명령을 agentboard.toml에 설정하세요.

백엔드	명령 예시
Claude Code	`claude "task"`
Aider	`aider --message "task"`
Codex CLI	`codex "task"`
Gemini CLI	`gemini "task"`
Goose	`goose run "task"`
Any CLI	`agentboard.toml`에 사용자 정의 명령

빠른 시작

# Clone
git clone https://github.com/LakshmiSravyaVedantham/agentboard
cd agentboard/discord-bot

# Setup
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt

# Add your Discord bot token to .env
echo 'DISCORD_BOT_TOKEN=your-token' > ../.env

# Run
python bot.py

그런 다음 Discord에서:

team Alpha: Build a hello world Python script

Mac에서 Claude(또는 구성된 CLI)가 작업 중인 터미널 창이 열립니다.

Discord 봇 설정 (2 분)

Discord Developer Portal로 이동합니다.
New Application → 이름을 “Agentboard”로 지정합니다.
Bot 탭 → Reset Token → 토큰을 복사합니다.
Message Content Intent를 활성화합니다.
OAuth2 → URL Generator → scope: bot; permissions: Send Messages, Manage Channels, Read Message History.
생성된 URL을 열어 봇을 서버에 추가합니다.

Quick Start 섹션에 표시된 대로 토큰을 .env 파일에 넣습니다.

내부 구조

Agentboard는 전체 Rust 백엔드(선택 사항)도 포함합니다:

17개의 단위 테스트가 config, auth, 팀 상태 머신, 백엔드 레지스트리, 오케스트레이터를 다룹니다.
Axum 서버가 12개의 API 엔드포인트와 WebSocket을 제공합니다.
Svelte PWA가 다크 글래스모피즘 UI(페어링 화면, 팀 대시보드, 실시간 터미널 출력)를 갖추고 있습니다.
JWT 인증이 6자리 페어링 코드를 사용합니다.
TOML 설정을 통한 플러그인형 백엔드.
우아한 종료 – 모든 자식 프로세스에 SIGTERM 전송.

Rust 서버는 프론트엔드를 rust-embed로 포함한 단일 ~7 MB 바이너리로 컴파일됩니다.

실제로 Discord 봇(≈150줄의 Python)이 “핵심 기능”이며, 별도의 인프라 없이 바로 작동합니다.

명령어

Command	What happens
`team Alpha: Build a landing page`	Claude(또는 구성된 CLI)와 함께 작업하는 터미널을 엽니다.
`team Alpha: Fix auth in ~/myproject`	해당 디렉터리에서 터미널을 엽니다.
`status`	모든 활성 팀을 표시합니다.
`kill Alpha`	Alpha 팀 프로세스를 종료합니다.
`help`	사용 가능한 모든 명령을 나열합니다.

왜 Discord인가?

PWA를 먼저 만들려고 했지만 다음 문제에 부딪혔습니다:

휴대폰에서 로컬호스트 방화벽 문제.
Safari는 HTTPS 없이 Web Speech API를 차단합니다.
다른 앱을 유지 관리하는 것.

Discord는 이 모든 문제를 해결합니다: 이미 휴대폰에 설치되어 있고, 알림을 처리하며, 데이터를 개인 서버에 보관합니다. 봇은 약 150 줄의 파이썬 코드일 뿐이며 인프라 비용이 전혀 들지 않습니다.

내가 배운 점

Claude Code의 --print 플래그는 구독이 아니라 API 크레딧을 사용합니다. 인터랙티브 claude 명령은 구독을 사용하므로, 여러 에이전트를 생성할 때 중요합니다.
여러 Discord 봇이 쌓일 수 있습니다. 개발 중에는 새 인스턴스를 시작하기 전에 항상 pkill -9 -f bot.py를 실행해 좀비 봇을 방지하세요.
가장 단순한 접근이 승리합니다. 저는 복잡한 Rust + Svelte + WebSocket + JWT 시스템을 구축했지만, 최종 배포된 제품은 터미널 창을 여는 작은 Python Discord 봇입니다. 단순한 것을 배포하세요.

사용해 보기

Repo: https://github.com/LakshmiSravyaVedantham/agentboard

유용하다고 생각되면 별표를 눌러 주세요. PR을 환영합니다 — 특히 Linux/Windows 터미널 지원을 위한 PR을 환영합니다.

Agentboard는 오픈 소스(MIT)입니다. 텔레메트리 없이, 클라우드 없이, 데이터가 머신을 떠나지 않습니다.

내 폰에서 AI 코딩 에이전트를 제어하는 도구를 만들었습니다

내 폰으로 AI 코딩 에이전트를 제어하는 도구를 만들었습니다

소개

왜 이런 도구가 필요한가?

전체 구조

구현 단계

1. FastAPI 백엔드 만들기

2. Flutter 모바일 앱 만들기

3. 로컬에서 서버 실행하기

4. 모바일에서 테스트하기

추가 기능 아이디어

마무리

문제

내가 만든 것

작동 방식

플러그 가능한 백엔드

빠른 시작

Discord 봇 설정 (2 분)

내부 구조

명령어

왜 Discord인가?

내가 배운 점

사용해 보기

관련 글

Test Drive II를 SNES에서 PC로 포팅하기, 파트 5: 생성된 증거를 의도적으로 만들기

Obsidian AI Exporter: 다중 AI를 지원하는 현재 진화

개발자를 위한 기내 인터넷 가이드: 항공사 전반에 걸친 스타링크 항공 배치 추적

OpenClaw로 AI 기반 Signal Bot 만들기: 완전 가이드

내 폰으로 AI 코딩 에이전트를 제어하는 도구를 만들었습니다

소개

왜 이런 도구가 필요한가?

전체 구조

구현 단계

1. FastAPI 백엔드 만들기

2. Flutter 모바일 앱 만들기

3. 로컬에서 서버 실행하기

4. 모바일에서 테스트하기

추가 기능 아이디어

마무리

문제

내가 만든 것

작동 방식

플러그 가능한 백엔드

빠른 시작

Discord 봇 설정 (2 분)

내부 구조

명령어

왜 Discord인가?

내가 배운 점

사용해 보기

관련 글

Test Drive II를 SNES에서 PC로 포팅하기, 파트 5: 생성된 증거를 의도적으로 만들기

Obsidian AI Exporter: 다중 AI를 지원하는 현재 진화

개발자를 위한 기내 인터넷 가이드: 항공사 전반에 걸친 스타링크 항공 배치 추적

OpenClaw로 AI 기반 Signal Bot 만들기: 완전 가이드

Discord 봇 설정 (2 분)