단일 HTML 파일로 구현한 Graph-based Prompt Engineering 캔버스

How I Built PromptBoard — A Visual Canvas for Building AI Prompts

Machina Tools2026년 6월 21일5분intermediate

AI 요약

Context

선형적 텍스트 입력 방식의 Prompting은 복잡한 워크플로우와 시각적 제약 사항을 표현하는 데 한계가 있음. 텍스트 기반의 직렬화 과정에서 정보 간의 구조적 관계(Graph Structure)가 손실되어 AI의 추론 부하를 증가시키는 문제 발생.

Graph Structure 기반의 시각적 노드(Text, Image, Flow)와 Labeled Arrow를 통한 관계의 명시적 정의
고정된 Schema의 Form 방식 대신 자유로운 Layout 기반의 Canvas 구조를 채택하여 컨텍스트의 유연한 구성 지원
Base64 Image Embedding을 통한 Markdown 내 이미지 통합으로 Self-contained한 Multimodal 데이터 전달 체계 구축
Chromium의 Web Speech API와 로컬 Whisper Server를 병행 운용하는 비대칭적 Voice Dictation 아키텍처 설계
JSON-serializable한 단일 상태 객체(S object)와 Snapshot 기반의 History Stack을 통한 Undo/Redo 메커니즘 구현
SVG Quadratic Bézier Curve와 Transparent Path Hit Area를 적용한 효율적인 시각적 연결선 렌더링

실천 포인트

1. 복잡한 Prompt 설계 시 관계 중심의 Graph 구조로 컨텍스트를 정의했는가

2. Multimodal 데이터 전달 시 이미지-텍스트 간의 명시적 연결(Explicit Linking)이 포함되었는가

3. 도구의 진입 장벽을 낮추기 위해 Zero-build/Zero-dependency 아키텍처 적용이 가능한지 검토했는가

태그