내 AI에게 '대시보드 보여줘' 하면 진짜 작동하는 화면이 나온다 — 오픈소스 Fenced
AI가 대화하면서 동시에 클릭 가능한 화면을 만들어줍니다. 마크다운을 프로토콜로 사용해 React UI를 실시간 생성하는 오픈소스 Fenced가 해커뉴스에서 주목받고 있습니다.
ChatGPT나 Claude에게 "대시보드 만들어줘"라고 하면 코드 블록이나 이미지가 나옵니다. 하지만 실제로 클릭하고, 입력하고, 데이터가 실시간으로 바뀌는 화면이 대화 속에서 바로 나타난다면 어떨까요? 개발자 파비안 큐블러(Fabian Kübler)가 만든 오픈소스 프로젝트 Fenced가 정확히 이 문제를 해결했습니다. 해커뉴스에서 103표를 받으며 "AI 인터페이스의 미래"라는 평가를 받고 있습니다.
마크다운이 AI의 '화면 설계 언어'가 된다
핵심 아이디어는 단순합니다. AI 모델(ChatGPT, Claude 등)은 이미 마크다운을 아주 잘 씁니다 — 별도 학습 없이도요. Fenced는 이 마크다운 안에 세 가지 블록을 넣어서 AI가 대화하면서 동시에 프로그램을 실행하고 화면을 만들 수 있게 합니다.
세 가지 마법 블록:
1️⃣ 일반 마크다운 — AI가 사용자에게 보여주는 텍스트 (기존과 동일)
2️⃣ 코드 실행 블록 — AI가 작성한 코드가 서버에서 바로 실행됨
3️⃣ 데이터 블록 — 실시간 데이터가 화면에 자동으로 반영됨
예를 들어 "이번 주 서비스 상태를 보여줘"라고 말하면, AI가 마크다운으로 대답하면서 동시에 코드를 실행하고, 그 결과로 필터, 새로고침 버튼, 로그 보기까지 갖춘 완전한 대시보드를 화면에 띄워줍니다. 정적 이미지가 아니라 실제로 클릭이 되는 살아있는 화면입니다.
기존 AI 도구와 뭐가 다른가
Claude의 Artifacts(대화 속 시각화)나 ChatGPT의 Canvas(코드 편집 화면)와 비교하면 차이가 명확합니다.
Claude Artifacts — 차트, 표 등을 보여주지만 미리 정해진 형태만 가능
ChatGPT Canvas — 코드를 함께 편집하지만 화면을 직접 만들지는 않음
Fenced — AI가 아무 형태의 화면이든 실시간으로 생성하고 실행. 버튼 클릭, 폼 입력, 실시간 데이터 업데이트까지 전부 동작
해커뉴스 댓글에서 한 개발자는 "이걸 쿠버네티스(서버 관리 시스템) 모니터링에 붙이고 싶다"고 했고, 다른 사용자는 "Notion이나 Obsidian 같은 노트 앱을 완전히 바꿀 수 있다"고 반응했습니다.
4가지 데이터 흐름이 만드는 '살아있는 화면'
Fenced가 단순한 프로토타입을 넘어서는 이유는 네 가지 방향의 데이터 흐름을 모두 지원하기 때문입니다.
📥 사용자 → AI — 폼에 입력한 내용이 AI에게 전달됨
📤 AI → 화면 — 데이터가 바뀌면 화면이 자동으로 업데이트됨
🔄 실시간 스트리밍 — AI가 말하는 도중에도 화면이 점점 완성됨
🖱️ 버튼 콜백 — 화면의 버튼을 누르면 AI 없이도 서버 기능이 바로 실행됨
이 네 가지가 합쳐지면 AI에게 "매출 보고서 보여줘"라고 말하는 것만으로 필터링 가능한 차트, CSV 내보내기 버튼, 실시간 새로고침이 되는 대시보드를 받을 수 있습니다.
직접 해보기 — Docker 한 줄이면 시작
Fenced는 MIT 라이선스(무료, 상업 사용 가능)로 공개되어 있습니다. Docker가 설치되어 있다면 바로 시작할 수 있습니다.
# Docker로 바로 실행
docker build -t fenced .
docker run -p 4000:4000 \
-e OPENAI_API_KEY=your-key \
fenced
# 또는 로컬 개발 (Bun 1.0 이상 필요)
bun install
cp .env.example .env
bun run dev:server⚠️ 주의할 점: 현재 프로토타입 단계이므로 보안 샌드박스가 없습니다. AI가 생성한 코드가 서버에서 직접 실행되기 때문에 개인 실험용으로만 사용하고, 민감한 환경에서는 사용하지 않는 것이 좋습니다.
AI 인터페이스는 어디로 가고 있나
Fenced가 보여주는 방향은 명확합니다. AI가 텍스트로만 대답하는 시대는 끝나가고 있습니다. 구글 AI Studio의 바이브코딩, Claude의 인터랙티브 시각화, 그리고 이제 Fenced까지 — AI가 직접 화면을 만들어주는 흐름이 빠르게 자리잡고 있습니다.
큐블러는 성공 비결을 이렇게 설명합니다: "AI 모델에게 새로운 걸 가르치려 하지 않았습니다. 마크다운, TypeScript, React — 모델이 이미 잘 아는 것만 사용했더니 별도 학습 없이도 바로 작동했습니다."
아직 55개의 깃허브 스타를 가진 초기 프로젝트이지만, 해커뉴스에서의 반응과 기술적 완성도를 보면 주목할 가치가 있습니다. 특히 사내 도구, 모니터링 대시보드, 데이터 분석 화면처럼 디자인보다 기능이 중요한 영역에서 먼저 활용될 가능성이 높습니다.
관련 콘텐츠 — Easy클코로 AI 시작하기 | 무료 학습 가이드 | AI 뉴스 더보기