AI 에이전트는 이미 워크플로우 안으로 들어왔다
문제는 도구의 존재 여부가 아니다. Claude Code를 열고, Cursor를 켜고, 에이전트에게 컴포넌트를 만들어달라고 요청하는 것—이건 이미 많은 프론트엔드 개발자의 일상이 됐다. 진짜 문제는 그 에이전트가 우리 팀의 방식으로 일하고 있느냐는 것이다.
최근 두 가지 흐름이 이 질문에 대한 실질적인 답을 제시하고 있다. 하나는 MCP Apps—AI 에이전트가 텍스트를 넘어 실제 인터랙티브 UI를 호스트 환경 안에서 렌더링하는 패턴이다. 다른 하나는 CLAUDE.md와 .cursorrules를 활용해 AI 코딩 어시스턴트에게 프로젝트 컨벤션을 주입하는 설정 전략이다. 이 두 흐름은 서로 다른 레이어에서 작동하지만, 동일한 방향을 가리킨다. AI를 잘 쓰는 것이 아니라, AI가 잘 일할 수 있는 구조를 설계하는 것.
MCP Apps: 에이전트가 UI를 '설명'하는 대신 '렌더링'한다
기존 AI 에이전트의 한계는 명확했다. 복잡한 데이터셋을 설명하거나, 구조화된 입력을 받거나, 실시간 시각화를 보여줘야 할 때 텍스트는 벽에 부딪힌다. 해결책은 보통 외부 웹 앱으로 사용자를 내보내는 것이었는데, 그 순간 대화 흐름이 깨지고 컨텍스트가 사라졌다.
dev.to의 Ashita Prasad가 소개한 MCP Apps는 이 구조적 한계를 정면으로 겨냥한다. Model Context Protocol(MCP)의 확장으로 설계된 이 패턴은, MCP 서버가 대시보드·폼·인터랙티브 시각화 같은 풍부한 양방향 UI 컴포넌트를 AI 호스트 환경 내부에서 직접 렌더링할 수 있게 한다. 핵심 구조는 세 줄로 요약된다: 서버는 뷰를 선언하고, 툴은 그 뷰를 가리키고, 호스트는 무엇을 로드할지 정확히 안다.
구현 관점에서 흥미로운 건 호스트 컨텍스트 인식 메커니즘이다. MCP App이 ui/initialize 요청을 보내면 호스트는 자신의 테마 변수(--vscode-editor-background, --vscode-foreground 등)를 CSS 토큰으로 돌려준다. 이 토큰을 applyHostContext()로 적용하면 임베디드 UI가 'iframe이 박혀있는 이물감' 없이 호스트 환경에 자연스럽게 녹아든다. 에이전트가 생성하는 UI가 디자인 시스템의 연장선에서 작동하기 시작하는 것이다.
프론트엔드 개발자 입장에서 이 패턴이 흥미로운 이유는 단순한 기능 추가가 아니기 때문이다. shared-styles.ts에 디자인 토큰을 모아두고, rpc-client.ts로 JSON-RPC 통신을 추상화하고, 호스트 캐퍼빌리티를 체크해 폴백을 설계하는 구조—이건 우리가 컴포넌트 라이브러리를 설계할 때와 동일한 사고방식이다. AI 에이전트의 UI 레이어를 설계하는 일이 결국 프론트엔드 아키텍처 문제라는 뜻이다.
CLAUDE.md: AI에게 '우리 팀의 방식'을 가르치는 가장 확실한 방법
AI 코딩 어시스턴트를 써본 개발자라면 다 아는 고통이 있다. 동작은 하는데 우리 프로젝트답지 않은 코드. 잘못된 파일 구조, 레거시 API, 누락된 타입 힌트, ORM 대신 날 SQL. 15초 만에 생성된 코드를 고치는 데 15분이 걸린다.
dev.to에서 공유된 실전 설정 가이드는 이 문제의 해법으로 CLAUDE.md와 .cursorrules를 제시한다. Claude Code는 세션 시작마다 프로젝트 루트의 CLAUDE.md를 읽고, Cursor는 .cursorrules를 참조한다. 핵심은 "TypeScript 써줘, 베스트 프랙티스 따라줘" 같은 모호한 지시가 아니다. 기술 스택의 정확한 버전, 레이어드 아키텍처 규칙, 그리고 절대 하면 안 되는 것들의 목록이 AI 출력 품질을 근본적으로 바꾼다.
특히 DO NOT 섹션의 위력은 실제로 써보면 체감된다. 서비스 레이어에 비즈니스 로직 넣지 말 것, 동기 DB 호출 금지, SQLAlchemy 모델 직접 반환 금지—이건 팀이 코드 리뷰에서 반복적으로 지적해온 패턴들이다. 그 패턴을 파일 하나에 모아두면, AI는 팀이 축적한 판단을 매 코드 생성마다 자동으로 반영하기 시작한다.
훅(Hooks) 설정도 주목할 만하다. Claude Code의 PostToolUse 훅으로 파일 수정 직후 자동 포맷팅을 실행하거나, 하드코딩된 시크릿을 탐지하거나, 200줄 이상의 대규모 변경을 경고하는 것—이건 CI/CD 파이프라인의 게이트를 로컬 에이전트 워크플로우 안으로 당겨온 것이다. 리뷰 사이클에서 발견될 문제를 생성 시점에 잡는다.
에이전트 워크플로우의 진짜 설계 과제: 책임의 경계
도구가 강력해질수록 설계해야 할 경계도 명확해져야 한다. Jaideep Parashar가 dev.to에서 제기한 핵심 질문은 이것이다: AI가 워크플로우에 개입하는 순간, 책임은 누구에게 있는가?
보일러플레이트 생성, 테스트 케이스 제안, 로그 요약—이런 작업은 AI 지원에 적합하다. 하지만 아키텍처 결정, 보안 트레이드오프, 장기적 시스템 진화—이 영역은 여전히 깊은 인간적 판단이 필요하다. 잘 설계된 AI 협업 시스템은 이 경계를 명시적으로 정의한다. 자동화가 마찰을 줄이되, 책임을 제거하지는 않도록.
CLAUDE.md의 아키텍처 규칙과 MCP Apps의 호스트 캐퍼빌리티 체크는 모두 같은 원칙의 구현이다. AI가 무엇을 할 수 있는지 정의하고, 무엇을 하면 안 되는지 명시하고, 인간이 최종 판단을 내릴 수 있는 구조를 유지하는 것. 투명성 없는 AI 출력은 신뢰할 수 없고, 신뢰할 수 없는 도구는 결국 워크플로우에서 튕겨나온다.
시사점: '빠른 프로토타이핑 → 검증 → 고도화' 루프를 AI로 가속하려면
MCP Apps와 CLAUDE.md 설정 전략은 각각 다른 레이어를 다루지만, 프론트엔드 개발자에게 주는 메시지는 하나로 수렴한다. AI 에이전트가 실제로 우리 워크플로우에 통합되려면, 에이전트를 위한 설계가 필요하다.
MCP Apps는 프로토타입 단계에서 AI가 텍스트 설명 대신 실제 인터랙티브 UI를 렌더링하게 함으로써 사용자 검증 루프를 가속한다. CLAUDE.md는 반복적인 컨벤션 교정 없이 AI가 팀의 아키텍처 언어로 코드를 생성하게 함으로써 고도화 단계의 리팩토링 비용을 줄인다. 이 두 가지를 함께 갖춘 팀은 '빠르게 만들고 → 실제로 보여주고 → 팀답게 다듬는' 루프를 훨씬 낮은 마찰로 돌릴 수 있다.
전망: 에이전트는 팀원이 되려 하고, 팀은 온보딩 문서를 써야 한다
흥미롭게도 CLAUDE.md를 잘 쓰는 것과 새 팀원을 온보딩하는 것은 본질적으로 같은 작업이다. 기술 스택을 설명하고, 아키텍처 원칙을 전달하고, 반복되는 실수 패턴을 공유하는 것. AI 에이전트가 워크플로우의 고정 멤버가 되는 속도가 빨라질수록, 팀이 자신의 컨벤션을 명문화하는 능력이 AI 활용 품질을 결정하는 핵심 역량이 될 것이다.
MCP Apps가 가리키는 방향도 비슷하다. 에이전트가 단순히 코드를 생성하는 것을 넘어 실제 UI를 호스트 환경 안에서 렌더링하고, 호스트의 디자인 시스템에 맞게 스스로를 조정하는 패턴—이건 에이전트가 도구가 아니라 협업자로서 워크플로우에 참여하는 구조다. 그 구조를 설계하는 것이 앞으로 프론트엔드 개발자의 핵심 역량 중 하나가 될 것이다.