MDMA: LLM을 위한 상호작용형 Markdown 문서 프레임워크

섹션별 상세

MDMA는 LLM이 텍스트 응답 대신 폼, 테이블, 승인 버튼과 같은 구조화된 인터페이스를 생성할 수 있게 하는 마크다운 확장 규격이다. 표준 마크다운 문법을 유지하면서 특정 코드 블록 내에 YAML 형식을 사용하여 복잡한 UI 요소를 정의한다.

yaml

```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 규격을 사용하여 마크다운 내에 환자 접수 폼을 정의하는 예시

제공되는 React 렌더러 라이브러리를 통해 폼, 버튼, 차트, 승인 게이트 등을 별도의 커스텀 UI 개발 없이 즉시 화면에 표시할 수 있다. 이는 개발자가 매번 새로운 유스케이스를 위해 전용 UI를 만들 필요 없이 LLM이 생성한 명세에 따라 화면이 동적으로 구성됨을 의미한다.

javascript

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 문서를 렌더링하는 방법

MDMA 컴포넌트가 실제로 작동하는 모습을 보여주는 데모 애니메이션 — ScreenshotLLM이 생성한 마크다운 내의 폼과 버튼이 어떻게 실제 UI로 변환되어 사용자와 상호작용하는지 직관적으로 보여준다. 텍스트 입력과 버튼 클릭에 따른 상태 변화와 렌더링 과정을 확인할 수 있다.

시스템은 폼, 버튼, 작업 목록, 테이블, 차트, 콜아웃, 승인 게이트, 웹훅, 사고 과정(Thinking) 등 9가지 핵심 컴포넌트를 기본으로 지원한다. 특히 사고 과정 컴포넌트는 AI의 추론 과정을 접이식 블록으로 보여주어 사용자 경험을 개선한다.

보안과 신뢰성을 위해 모든 데이터 변경 사항은 변조 방지 감사 로그에 기록되며, 개인정보(PII)는 해싱이나 마스킹 처리를 통해 자동으로 보호된다. 이는 금융이나 의료와 같이 데이터 보안이 중요한 산업군에서 LLM을 안전하게 활용할 수 있는 기반을 제공한다.

개발자는 전용 CLI와 프롬프트 팩을 사용하여 LLM이 특정 도메인에 맞는 유효한 MDMA 문서를 생성하도록 가이드하고 성능을 평가할 수 있다. 프롬프트 빌더를 통해 시각적으로 컴포넌트를 구성하고 이를 시스템 프롬프트로 내보내는 워크플로우를 지원한다.

javascript

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 컴포넌트를 생성하도록 유도하는 시스템 프롬프트 설정

용어 해설

추상 구문 트리(AST): — 마크다운 텍스트를 컴퓨터가 이해하고 조작할 수 있는 구조화된 객체 모델로 변환한 결과물이다. MDMA 파서는 텍스트를 AST로 변환하여 각 컴포넌트의 속성을 검증하고 렌더링 엔진에 전달하는 기초 자료로 활용한다.
개인 식별 정보(PII): — 이름, 이메일, 전화번호 등 특정 개인을 식별할 수 있는 민감한 데이터를 의미한다. MDMA는 폼 필드 등에 입력되는 PII를 자동으로 감지하여 해싱하거나 마스킹 처리함으로써 데이터 유출 위험을 방지한다.
야멜(YAML): — 데이터를 사람이 읽기 쉬운 텍스트 형식으로 표현하는 직렬화 양식이다. MDMA는 마크다운 코드 블록 내부에서 컴포넌트의 타입, ID, 필드 구성 등을 정의하는 설정 언어로 YAML을 채택하여 가독성을 높였다.
리마크(remark): — 마크다운 문서를 파싱하고 변환하는 자바스크립트 생태계의 대표적인 프로세서이다. MDMA 파서는 remark의 플러그인 형태로 구현되어 표준 마크다운 문법을 확장하고 커스텀 MDMA 블록을 처리한다.
상태 관리(State Management): — 사용자의 입력이나 버튼 클릭과 같은 상호작용에 따라 문서 내 데이터의 현재 상태를 추적하고 업데이트하는 메커니즘이다. MDMA는 런타임 엔진을 통해 문서 전체의 반응형 상태를 관리하고 변경 사항을 동기화한다.

기술

MDMA
React
TypeScript
Zod
Remark
GPT-4o

활용 사례

AI 고객 지원 폼 생성
동적 데이터 분석 대시보드
에이전트 작업 승인 워크플로우
구조화된 의료/법률 보고서 작성

언급된 리소스

GitHubMDMA GitHub Repository

문서@mobile-reality/mdma-spec npm package