개발 개발 개발

Google이 최근 공개한 Agent2Agent(A2A) 프로토콜은 AI 에이전트 간 협업을 위한 오픈소스 통신 표준으로, 대규모 멀티 에이전트 시스템 구축 시 발생하는 상호운용성 문제를 해결하기 위해 설계되었습니다. Anthropic의 MCP(Model Context Protocol)를 보완하는 역할을 하며, 다양한 플랫폼과 클라우드 환경에서 에이전트 통합을 가능하게 합니다.

 핵심 특징

에이전트 중심 협업: 공유 메모리나 컨텍스트 없이도 에이전트 간 자연스러운 협업 지원

표준 기술 기반: HTTP, SSE, JSON-RPC와 같은 기존 웹 표준을 활용해 통합 용이성 제공

확장성: 텍스트 외 오디오, 비디오 스트리밍 등 다양한 데이터 형태 처리 가능

보안 강화: OpenAPI 수준의 인증 체계로 엔터프라이즈급 보안 구현

주요 구성 요소

Agent Card: JSON 형식으로 에이전트의 기능을 정의(예: 이름, 스킬 목록, 입출력 형식)

클라이언트-서버 구조: 독립적으로 운영되는 에이전트를 클라이언트에서 연결 및 관리

작업 관리: 단기/장기 작업 모두 지원하며, 실시간 피드백과 상태 업데이트 기능 포함

실제 적용 사례

채용 프로세스 자동화: 채용 담당자의 조건 입력 → 후보 탐색 에이전트 → 신원 조회 에이전트 연동

예제 에이전트: Google ADK(비용 환급), CrewAI(이미지 생성), LangGraph(환율 정보)

MCP와의 차이점

A2A는 Anthropic의 MCP와 유사하지만, 독립 에이전트 간 협업에 초점을 두며 클라이언트-서버 구조를 기반으로 합니다. 반면 MCP는 LLM 확장에 더 특화되어 있어 상호 보완적 관계로 평가됩니다.

이 프로토콜은 Google Cloud, Accenture, Atlassian 등 주요 기업과의 협력으로 생태계 확장 중이며, 오픈소스로 공개되어 개발자 커뮤니티의 참여를 유도하고 있습니다.

참고 링크

https://developers.googleblog.com/en/a2a-a-new-era-of-agent-interoperability/

https://google.github.io/A2A/#/

https://storage.googleapis.com/gweb-developer-goog-blog-assets/original_videos/A2A_demo_v4.mp4

https://github.com/google/A2A

https://modelcontextprotocol.io/introduction ( 번역 )

MCP는 애플리케이션이 LLM(Large Language Model)에 컨텍스트를 제공하는 방식을 표준화한 오픈 프로토콜입니다. MCP를 AI 애플리케이션의 USB-C 포트라고 생각하면 이해하기 쉬운데요, USB-C가 다양한 주변기기와 액세서리를 연결하는 표준 방식인 것처럼, MCP는 AI 모델이 다양한 데이터 소스나 도구에 표준 방식으로 연결되도록 해줍니다.

왜 MCP인가?

MCP는 LLM 위에 에이전트나 복잡한 워크플로우를 구축할 수 있도록 도와줍니다. LLM은 자주 외부 데이터나 도구와의 통합이 필요한데, MCP는 다음과 같은 이점을 제공합니다:

• LLM이 바로 연결할 수 있는 사전 구축된 통합 목록이 계속해서 늘어나고 있습니다.

• LLM 제공업체나 벤더를 유연하게 전환할 수 있는 자유도를 제공합니다.

• 여러분의 인프라 내에서 데이터를 안전하게 보호할 수 있는 모범 사례들을 제공합니다.

일반 아키텍처

MCP의 핵심은 클라이언트-서버 아키텍처를 따르는 것입니다. 이 구조에서 하나의 호스트 애플리케이션이 여러 서버에 연결될 수 있습니다.

• MCP 호스트 (MCP Hosts): Claude Desktop, IDE, 기타 AI 도구처럼 MCP를 통해 데이터에 접근하고자 하는 프로그램입니다.

• MCP 클라이언트 (MCP Clients): 서버와 1:1 연결을 유지하는 프로토콜 클라이언트입니다.

• MCP 서버 (MCP Servers): 각기 특정 기능을 표준화된 Model Context Protocol을 통해 외부에 노출하는 경량 프로그램입니다.

• 로컬 데이터 소스 (Local Data Sources): MCP 서버가 안전하게 접근할 수 있는 사용자의 컴퓨터 내 파일, 데이터베이스, 서비스 등을 말합니다.

• 원격 서비스 (Remote Services): MCP 서버가 연결할 수 있는 API 등의 인터넷 기반 외부 시스템입니다.

2025년, 크로스 플랫폼 모바일 애플리케이션 개발 분야에서는 ByteDance의 Lynx, Meta의 React Native, 그리고 Google’s Flutter가 주요 프레임워크로 자리 잡고 있습니다. 각 프레임워크는 다양한 플랫폼에서 고품질의 앱을 효율적으로 개발하기 위한 독특한 접근 방식을 제공합니다.

Lynx는 TikTok의 성능 요구를 충족시키기 위해 개발되었으며, 2025년 3월에 오픈 소스로 공개되었습니다. 이 프레임워크는 혁신적인 듀얼 스레드 JavaScript 엔진과 완전한 CSS 지원을 통해 웹 표준을 준수합니다.

React Native는 JavaScript 개발자들에게 친숙한 솔루션으로, 개선된 아키텍처와 방대한 생태계를 자랑합니다.

Flutter는 Dart 기반의 접근 방식을 통해 모든 플랫폼에서 일관된 비주얼을 제공하며, 상당한 인기를 얻고 있습니다.

각 프레임워크의 주요 특징을 비교하면 다음과 같습니다

• 기원:

• Lynx: ByteDance가 2025년에 오픈 소스로 공개
• React Native: 2015년에 Facebook(Meta)에서 출시
• Flutter: 2018년에 Google에서 안정 버전 출시

• 목적:

• Lynx: 웹 기술을 활용하여 네이티브 앱의 성능을 우선시하는 접근 방식
• React Native: JavaScript와 React를 사용하여 웹과 모바일 개발을 통합
• Flutter: Dart를 활용하여 일관된 크로스 플랫폼 UI를 제공하는 고성능 UI 툴킷

• 기술 아키텍처:

• Lynx: 메인 스레드에서 PrimJS(UI 처리), 백그라운드에서 QuickJS(로직 처리)를 사용하는 듀얼 스레드 아키텍처
• React Native: JavaScript 브릿지(기존 방식), Hermes 엔진과 Fabric 아키텍처로 개선
• Flutter: 모든 픽셀을 제어하는 커스텀 Skia/Impeller 렌더링 엔진

• 렌더링 접근 방식:

• Lynx: 기본적으로 네이티브 UI 컴포넌트를 사용하며, 픽셀 단위의 커스텀 렌더링 모드도 지원
• React Native: 플랫폼의 룩앤필을 유지하기 위해 네이티브 UI 컴포넌트를 사용
• Flutter: 일관된 UI를 위해 모든 픽셀을 제어하는 커스텀 렌더링 사용

• 성능 특징:

• Lynx: 즉각적인 첫 프레임 렌더링(IFR), 동기화된 UI 업데이트를 위한 메인 스레드 스크립트(MTS), 60fps 이상의 애니메이션
• React Native: Hermes 엔진으로 개선되었으며, 무거운 작업을 위한 인터랙션 매니저 등의 최적화 필요
• Flutter: GPU 가속 렌더링, JIT/AOT 컴파일된 Dart로 일반적으로 부드러운 60fps UI 제공

• 앱 크기 및 오버헤드:

• Lynx: QuickJS 엔진(~<1MB)과 Lynx 코어로 경량화
• React Native: JS VM과 번들을 포함하여 일반적으로 몇 MB의 크기
• Flutter: Dart 런타임과 Skia 엔진을 포함하여 “Hello World” 앱이 5-10MB 이상

• 플랫폼 지원:

• Lynx: 공식적으로 모바일(Android/iOS)과 웹 지원, 실험적인 데스크톱 지원
• React Native: 공식적으로 모바일(Android/iOS) 지원, React Native Web을 통한 웹 지원, 비공식적인 데스크톱 지원
• Flutter: 모바일, 웹, 데스크톱(Windows, macOS, Linux)을 공식적으로 지원

• UI 정의:

• Lynx: 태그와 표준 CSS/SCSS(flexbox, grid, 애니메이션 포함)를 사용하는 JSX/HTML 유사 문법
• React Native: 제한된 CSS 스타일링을 지원하는 JSX 컴포넌트
• Flutter: Dart 코드로 위젯 트리를 구성하며, HTML/CSS 미사용

• 스타일링 기능:

• Lynx: 선택자, 미디어 쿼리, 애니메이션 등을 포함한 완전한 CSS 지원; Tailwind CSS 사용 가능
• React Native: 제한된 CSS 하위 집합, JavaScript 객체를 통한 스타일링
• Flutter: CSS 미지원, Dart 코드 내에서 위젯을 통한 스타일링

각 프레임워크는 고유한 장점과 단점을 지니고 있으며, 개발 팀의 기존 기술 스택, 성능 요구 사항, 타겟 플랫폼에 따라 최적의 선택이 달라질 수 있습니다. Lynx는 신선한 아이디어와 혁신적인 접근 방식을 제공하며, React Native와 Flutter는 성숙한 생태계와 광범위한 커뮤니티 지원을 자랑합니다. 프로젝트의 요구 사항에 맞춰 적절한 프레임워크를 선택하는 것이 중요합니다.

Event 클래스의 생성자말고 추가 데이터 전달하는 방법을 알아보자.

1. Example 클래스에 메소드 추가 

http://realtime-with-laravel-reverb.test:8000/broadcast 실행하여 Example  브로드캐스트 실행

개발자 도구 > 콘솔 확인

Array에 전달하고자 하는 데이터 설정 ( User id, name 추가 )

http://realtime-with-laravel-reverb.test:8000/broadcast 실행하여 Example  브로드캐스트 실행

개발자 도구 > 콘솔 확인

2. Message Model 추가하여 Broadcast에 사용하기

realtime-with-laravel-reverb $ php artisan make:model Message -m

database > migrations > php 파일 생성 > 마이그레이션 실행

realtime-with-laravel-reverb $ php artisan migrate

messages Table > New Record 

Web.php > /broadcast 부분에 Message 데이터 추가 

Example.php > 생성자 부분에 Message 데이터 추가 ( protected )

http://realtime-with-laravel-reverb.test:8000/broadcast Example  브로드캐스트 실행 

개발자 도구 > 콘솔 확인

* Broadcast Event(Example)에 데이터 추가

1. Example.php > Example 클래스에 메시지 추가

http://realtime-with-laravel-reverb.test:8000/broadcast 실행하여 Example  브로드캐스트 실행

개발자 도구 > 콘솔 확인

Example Class 생성자에 전달한 데이터 추가

Routes > Web.php

현재 가입되어 있는 유저 정보 하나를 가져와 생성자에 설정

use App\Models\User;

Example Class 생성자에 데이터 추가 

* Laravel에서는 이벤트를 처리할 때 이벤트 클래스가 public 생성자를 사용하는 경우가 일반적입니다. 이벤트 클래스는 보통 외부에서 인스턴스화되므로 생성자는 public으로 선언되는 경우가 많습니다. 반면, 이벤트가 특정 로직을 처리하고자 할 때 protected나 private 생성자를 사용할 수 있지만, 이는 이벤트 시스템에서 흔히 사용되는 방식은 아닙니다.

 

따라서 Laravel 이벤트 시스템에서는 주로 public 접근 제한자가 사용되며, 이벤트 클래스는 기본적으로 public 생성자를 사용해 외부에서 인스턴스화하고 디스패치할 수 있습니다.

http://realtime-with-laravel-reverb.test:8000/broadcast 실행하여 Example  브로드캐스트 실행

개발자 도구 > 콘솔 확인

* /dashboard 페이지 로드 시 Event Listening 처리하기

1. dashboard 페이지에 Event Listening 처리 추가

Chrome > 보기 > 개발자 정보 > 개발자 도구 실행

> resources > views > dashboard.blade.php 파일 오픈

"You're logged in!" 문구 출력 부분의 div 코드 추가 > x-init 

* x-init는 Alpine.js에서 사용되는 디렉티브로, DOM이 초기화될 때 특정 JavaScript 코드를 실행할 수 있게 해줍니다. x-init는 일반적으로 컴포넌트가 처음 로드될 때 실행되는 초기화 작업을 설정하는 데 사용되며, 예를 들어 데이터를 초기화하거나 이벤트 리스너를 등록할 때 유용합니다.

x-init > Echo.js > Echo 사용

x-init="Echo.channel('chat')" 코드 추가하고 Reverb 서버 로그 확인 > Subscribe 등록 

Reverb 서버 로그 > Message Received > subscribe 'chat'

Echo Subscribe 채널(chat)에 Listener 등록

http://realtime-with-laravel-reverb.test:8000/broadcast 실행하여 Example  브로드캐스트 실행

개발자 도구 > 콘솔 확인

iptables 및 iptables-services 패키지를 기반으로 진행

* Rocky Linux는 기본적으로 firewalld를 사용하지만, iptables를 사용할 수 있도록 설정

1. iptables 설치 및 설정 준비

Rocky Linux에서 iptables를 사용하려면 iptables-services를 설치해야 함

firewalld 비활성화 및 iptables 활성화

# firewalld 비활성화 ( iptables 사용을 위해 )
$ sudo systemctl stop firewalld
$ sudo systemctl disable firewalld

# iptables-services 설치
$ sudo dnf install iptables-services -y

2. iptables 규칙 작성

규칙을 설정한 뒤 저장함

( 공식 사이트 : https://linux.die.net/man/8/iptables )

iptables 설정 추가
예제 규칙 (필요에 따라 수정하여 사용)

# 기본 정책 설정
$ sudo iptables -P INPUT DROP
$ sudo iptables -P FORWARD DROP
$ sudo iptables -P OUTPUT ACCEPT

# SSH 허용
$ sudo iptables -A INPUT -p tcp --dport 22 -j ACCEPT

# HTTP 및 HTTPS 허용
$ sudo iptables -A INPUT -p tcp --dport 80 -j ACCEPT
$ sudo iptables -A INPUT -p tcp --dport 443 -j ACCEPT

# 로컬호스트 허용
$ sudo iptables -A INPUT -i lo -j ACCEPT

# 응답 패킷 허용
$ sudo iptables -A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT

* iptables 옵션 
iptables는 상당히 많은 옵션등이 제공

–append, -A : 새로운 규칙을 추가
–policy, -P : 기본정책을 변경
–delete, -D : 규칙을 삭제
–insert, -I : 새로운 규칙을 삽입(기존 규칙은 내려감)
–replace -R : 새로운 규칙으로 교체
–jump, -j : 규칙에 맞는 패킷을 어떻게 처리할 것인가를 명시
–in-interface, -i : 입력 인테페이스–state : 연결 상태와의 매칭
–match, -m : 특정 모듈과의 매치

3. iptables 설정 저장

iptables-services를 사용하면 설정을 저장하고 재부팅 시 불러올 수 있음

# 현재 iptables 설정 
$ sudo service iptables save

이 명령을 실행하면 설정이 /etc/sysconfig/iptables에 저장됨

4. iptables 자동 적용 설정

부팅 시 iptables를 자동으로 적용하도록 설정함

# iptables 서비스 활성화

$ sudo systemctl enable iptables
$ sudo systemctl start iptables

5.  부팅 후 확인

시스템을 재부팅한 후 설정이 제대로 적용되었는지 확인

# iptables 규칙 확인

$ sudo iptables -L -v -n

6. iptables 규칙 수정

추후 iptables 규칙을 수정할 경우 다음과 같이 진행

1. 규칙 수정

예를 들어 새로운 포트를 허용하려면:
$ sudo iptables -A INPUT -p tcp --dport 8080 -j ACCEPT

2. 변경사항 저장
$ sudo service iptables save

3. 서비스 재시작
$ sudo systemctl restart iptables

* realtime with laravel reverb

작성된 Laravel 개발 환경 
 - macOS 14.3.1
 - PHP 8.2.26 
 - Laravel Installer 5.10.0
 - laravel/laravel (v11.3.3)

1. Reverb 서버 실행

* Assets 사용을 위한 빌드 - npm build
realtime-with-laravel-reverb $ npm run dev

* Reverb 서버 디버그 옵션으로 실행
realtime-with-laravel-reverb $ php artisan reverb:start --debug 

2. Channel 등록 

routes>channels.php 파일을 열어서 channel을 추가

3. Event 등록

* Event 등록하여 이벤트를 Broadcasting 하도록 설정
realtime-with-laravel-reverb $ php artisan make:event Example 

* PrivateChannel에서 (Public)Channel, 'chat' 채널명으로 변경하여 테스트 

* Event > Example  클래스를 ShoulBroadcastNow 구현
class Example implements ShouldBroadcastNow

1. ShouldBroadcast:

• 이벤트가 큐(queue)에 저장된 후, 백그라운드 작업을 통해 브로드캐스트됩니다.
• 비동기 처리로 이벤트가 전송되기 때문에 메인 애플리케이션의 실행 흐름을 방해하지 않습니다.
• 큐 설정 및 실행이 필요합니다.

2. ShouldBroadcastNow:

• 이벤트가 즉시 브로드캐스트됩니다.
• 큐에 저장되지 않고 동기적으로 처리되기 때문에 즉각적으로 클라이언트에 전송됩니다.
• 큐 시스템이 설정되어 있지 않더라도 작동합니다.

1) ShouldBroadcastNow 인터페이스를 구현하면 이벤트가 즉시 브로드캐스트됩니다.

2) broadcastOn() 메서드에서 브로드캐스트할 채널을 설정합니다.

3) broadcastAs() 메서드를 사용해 이벤트의 이름을 설정할 수 있습니다.

ShouldBroadcastNow는 큐를 사용하지 않고 즉시 처리해야 할 때 유용합니다. 하지만 동기 처리이기 때문에 애플리케이션 성능에 주의해야 합니다.

3. Routes에 Broadcasting 하도록 추가 (web.php)

Route::get('/broadcast', function () {
       broadcast(new Example());
});

4. Laravel 웹서버 실행

realtime-with-laravel-reverb $ php artisan serve

5. Example (Event) > Broadcasting 하고 받은 메시지 확인

* Broadcasting URL 호출하기 
http://realtime-with-laravel-reverb.test:8000/broadcast

* Reverb 서버 종료하여 오류 메시지 확인

* realtime with laravel reverb

작성된 Laravel 개발 환경 
 - macOS 14.3.1
 - PHP 8.2.26 
 - Laravel Installer 5.10.0
 - laravel/laravel (v11.3.3)

1. Laravel 프로젝트 생성

$ laravel new realtime-with-laravel-reverb

$ cd realtime-with-laravel-reverb
realtime-with-laravel-reverb $

이후 Visual Studio Code로 해당 프로젝트 오픈

2. Visual Studio Code에서 프로젝트 오픈 후 확인

3. Laravel에 broadcasting 기능 Install 하기 ( php artisan 사용 )

realtime-with-laravel-reverb $ php artisan install:broadcasting  

1) .env 파일에서 BROADCAST_CONNECTION=log 항목이 reverb 로 변경됨

*  BROADCAST_CONNECTION=reverb

2) .env 파일의 REVERB_HOST를 localhost에서 테스트 서버 호스트로 변경

REVERB_HOST="realtime-with-laravel-reverb.test"

 

3) resource/js/echo.js 자동 생성됨 

4) resource/js/bootstrap.js 파일 하단에 echo.js 포함 

5) config 디렉토리에 broadcasting.php / reverb.php 파일 자동 생성되어 포함 

6) config/reverb.php에서 허용할 서버의 도메인을 지정할 수 있음 

예를 들어 wontae.com 서버의 접속만 허용하려면 'allowed_origins' => ['wontae.com'], 

3. Broadcasting 기능  사용을 위한 환경 설정 완료 > Reverb 서버 실행 방법

1) Reverb 서버 실행
realtime-with-laravel-reverb $ php artisan reverb:start

2) Reverb 서버 디버그 모드로 실행
realtime-with-laravel-reverb $ php artisan reverb:start --debug

* hosts 파일에 realtime-with-laravel-reverb.test 등록해서 사용
$ sudo vi /private/etc/hosts

주의할 사항
Flutter 기본 개발환경 설정이 끝난 이후 내용을 정리

Flutter로 웹사이트 개발
Flutter SDK가 설치되어 있어야 합니다. 설치가 되어 있지 않다면 Flutter 공식 사이트에서 설치할 수 있습니다.
웹 지원을 확인하려면 다음 명령어를 실행하여 Flutter 버전과 웹 지원이 포함되어 있는지 확인합니다.

$ flutter doctor

# 결과 확인
Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.4, on macOS 14.3.1 23D60 darwin-arm64, locale ko-KR)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] VS Code (version 1.95.1)
[✓] Connected device (3 available)
    ! Error: Browsing on the local area network for Wontae’s iPhone 14 Pro Max. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources

새 Flutter 프로젝트 생성
터미널에서 새 프로젝트를 생성합니다.

$ flutter create my_web_app
$ cd my_web_app

웹 타겟으로 빌드 설정
Flutter는 기본적으로 Android와 iOS 앱 타겟을 포함하므로, 웹 타겟을 추가해야 합니다.
Flutter의 웹 기능이 활성화되어 있는지 확인한 후 웹 브라우저에서 실행할 수 있도록 설정합니다.

$ flutter config --enable-web

# 결과
Setting "enable-web" value to "true".

You may need to restart any open editors for them to read new settings.

Flutter 웹 앱 실행
아래 명령어를 사용하여 웹 브라우저에서 앱을 실행해볼 수 있습니다.

$ flutter run -d chrome

# 결과
Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...

크롬 브라우저로 웹사이트 실행
기본 샘플 프로젝트 ( + 버튼 기능 구현 )