핵심 요약
LLM과의 대화는 현재 대부분 평문 텍스트로 제한되어 있어 사용자가 수동으로 후속 조치를 취해야 하는 번거로움이 있다. MDMA(Markdown Document with Mounted Applications)는 Markdown 내에 폼, 테이블, 승인 게이트 등 상호작용 가능한 컴포넌트를 삽입할 수 있는 사양과 도구 모음을 제공한다. LLM이 MDMA 규격에 맞춰 구조화된 데이터를 생성하면, 프론트엔드에서 이를 즉시 렌더링하여 사용자가 직접 데이터를 입력하거나 작업을 승인할 수 있는 실행 가능한 인터페이스를 구축할 수 있다. 이를 통해 AI 에이전트와의 협업 효율성을 극대화하고 데이터의 구조적 무결성을 보장한다.
배경
Markdown 기초 문법, React 및 TypeScript 개발 지식, LLM 프롬프트 엔지니어링에 대한 이해
대상 독자
LLM 기반 상호작용형 애플리케이션이나 AI 에이전트를 개발하는 프론트엔드 및 풀스택 개발자
의미 / 영향
LLM과의 상호작용이 단순 채팅을 넘어 앱 인터페이스 자체를 동적으로 생성하는 단계로 진화하고 있음을 보여준다. 이는 AI 에이전트가 복잡한 업무를 수행할 때 사용자에게 명확한 피드백을 주고 제어권을 제공하는 표준적인 방법론이 될 가능성이 크다.
섹션별 상세
```mdma
type: form
id: intake-form
fields:
- name: patient-name
type: text
label: "Full Name"
required: true
sensitive: true
- name: email
type: email
label: "Email"
required: true
sensitive: true
```MDMA 규격을 사용하여 마크다운 내에 환자 접수 폼을 정의하는 예시
import { MdmaDocument } from '@mobile-reality/mdma-renderer-react';
import '@mobile-reality/mdma-renderer-react/styles.css';
function App({ ast, store }) {
return <MdmaDocument ast={ast} store={store} />;
}React 애플리케이션에서 파싱된 MDMA 문서를 렌더링하는 방법

const systemPrompt = buildSystemPrompt({
customPrompt: `You are a bug tracking assistant. When a user reports a bug, always generate a single form component matching this exact structure:
\`\`\`mdma
type: form
id: bug-report
fields:
- name: title
type: text
label: "Bug Title"
required: true
// ...(중략)
\`\`\``,
});LLM이 특정 구조의 MDMA 컴포넌트를 생성하도록 유도하는 시스템 프롬프트 설정
실무 Takeaway
- LLM 기반 에이전트 시스템 구축 시 MDMA를 도입하면 텍스트 파싱의 불확실성을 제거하고 검증된 구조적 데이터를 주고받아 시스템 안정성을 높일 수 있다.
- 복잡한 승인 절차가 필요한 엔터프라이즈 워크플로우에서 MDMA의 승인 게이트 컴포넌트를 활용해 인간 개입(Human-in-the-loop) 프로세스를 코드 몇 줄로 구현할 수 있다.
- 기본 제공되는 React 렌더러 외에도 커스텀 컴포넌트 등록 기능을 사용하여 기존 서비스의 디자인 시스템과 일관된 UI를 유지하면서 기능을 확장할 수 있다.
언급된 리소스
AI 요약 · 북마크 · 개인 피드 설정 — 무료
출처 · 인용 안내
인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.