M3E Canvas: 브라우저에서 Material 3 UI 스케치 후 AI 코딩 프롬프트로 변환하는 오픈소스 도구

인공지능 코딩 도구(Claude Code, Codex, Gemini CLI, Cursor 등)를 활용한 '바이브 코딩(Vibe Coding)'이 보편화되면서, 개발자가 마주하는 가장 빈번한 병목은 화면 레이아웃과 인터랙션을 말로 설명하는 과정입니다. 텍스트 프롬프트만으로 복잡한 UI 계층 구조를 묘사하면 모델이 레이아웃을 임의로 추측하고, 이를 교정하기 위해 수차례 재생성을 거치는 비효율이 발생합니다. 이러한 간극을 줄이기 위해 브라우저에서 구글 Material 3 Expressive 컴포넌트를 시각적으로 조립하고, 화면 전환 인터랙션을 연결한 뒤, 코딩 에이전트에 최적화된 프롬프트로 추출해 주는 오픈소스 도구 **M3E Canvas(lnkiai/m3e-canvas)**가 공개되었습니다.

개발자 lnkiai가 MIT 라이선스로 공개한 M3E Canvas는 별도의 설치나 회원가입 없이 웹 브라우저에서 즉시 실행되는 정적 웹 애플리케이션입니다. 캔버스 위에 여러 모바일 및 데스크톱 화면을 펼쳐 두고 컴포넌트를 배치한 뒤 터치·스와이프 플로우를 설정하면, 전체 기획과 화면별 배치 의도가 구조화된 자연어 브리프로 자동 변환됩니다.

36종의 Material 3 Expressive 컴포넌트와 인터랙티브 플로우 프리뷰

M3E Canvas의 가장 큰 특징은 단순 와이어프레임 박스를 그리는 것이 아니라, 구글 Material 3 Expressive 디자인 시스템의 세부 스펙을 정밀하게 반영한 컴포넌트 셋을 제공한다는 점입니다.

• 36종 이상의 내장 컴포넌트: 앱바(Top App Bar), 하단 내비게이션 바(Bottom Navigation Bar), 플로팅 툴바, 탭, 검색바, 플로팅 액션 버튼(FAB) 및 메뉴, 분할 버튼(Split Buttons), 칩, 카드, 리스트, 다이얼로그, 스낵바, 텍스트 필드, 스위치, 슬라이더, 체크박스, 배지, 디바이더 등을 지원합니다. 구글의 안드로이드 소스코드(material-components-android)에서 이식된 셰이프 모핑 로딩 인디케이터까지 포함되어 있습니다.
• 자석형 컴포넌트 결합(Magnetic Grouping): 인접한 버튼이나 리스트 항목들을 가로(x) 또는 세로(y) 축으로 끌어당겨 정돈된 하나의 컴포넌트 그룹으로 묶어 줍니다.
• 인터랙티브 화면 연결 및 실시간 프리뷰: 버튼, 앱바 아이콘, 탭 항목 등에 목적지 화면(또는 뒤로 가기)을 지정하고 화면 전환 효과(좌·우·상·하 슬라이드, 페이드, 확장 애니메이션)를 설정할 수 있습니다. 캔버스 위에는 화면 간 이동 경로가 연결 화살표로 시각화되며, 프리뷰 모드에서 실제 터치하며 전환 흐름을 사전 검증할 수 있습니다.
• 테마 및 디바이스 환경 설정: 7가지 컬러 팔레트 키(Purple, Blue, Green, Coral, Amber, Teal, Mono)와 단일 시드 컬러 기반 동적 스킴, 라이트·다크 모드, 형태(둥글기), 폰트 설정을 지원합니다. 폰 규격(412×892)과 데스크톱 규격(1280×800)을 자유롭게 구성할 수 있으며, 모바일 브라우저 접속 시에는 단일 화면 하단 시트 편집 모드를 제공합니다.

자연어 프롬프트 추출과 바이브 코딩(Vibe Coding) 연계 워크플로우

M3E Canvas는 디자이너와 AI 코딩 에이전트 사이의 '번역기' 역할을 수행하도록 설계되었습니다. 시각적 조립이 끝나면 설계 데이터 전체(또는 개별 화면)를 AI 도구에 그대로 전달할 수 있는 프롬프트로 변환합니다.

• 구조화된 프롬프트 엔진: 단순 텍스트 나열이 아니라, 화면 내 컴포넌트 중첩 관계, 좌우 배치 행, 크기, 변체(Filled, Tonal, Elevated, Outlined, Text)를 정밀하게 명시합니다. 반응형으로 동일한 이름의 화면이 여러 크기로 존재할 경우 이를 하나로 묶어 설명합니다.
• 타깃 스택 및 다국어 지원: 기본 타깃인 안드로이드(Android, Jetpack Compose 등) 또는 웹(Web)을 선택할 수 있으며, 이에 맞춰 프롬프트가 적합한 기술 스택을 요구합니다. 프롬프트 출력 언어는 한국어, 영어, 일본어, 중국어를 지원합니다.
• 컴포넌트 동작 노트 삽입: 작업자가 각 컴포넌트의 클릭 동작, 유효성 검증 규칙, 데이터 저장 방식 등을 인스펙터 노트에 작성하면, 해당 설명이 프롬프트 본문에 정확한 위치와 함께 그대로 반영됩니다.
• BYOK 방식의 선택적 AI 헬퍼: 브라우저에 직접 본인의 API 키(OpenAI, Claude, Gemini, DeepSeek)를 입력하면, 모델이 각 컴포넌트의 동작 설명이나 화면 요약을 다듬어 주는 보조 기능을 제공합니다. API 키는 브라우저 내부에서만 사용되며 외부 중계 서버로 전송되지 않습니다.

생성된 프롬프트를 복사하여 Claude Code나 Cursor, Codex, Gemini CLI에 붙여넣고 작성을 요청하면, AI가 화면 배치와 인터랙션을 정확히 파악한 상태에서 실제 프론트엔드 코드를 작성하기 시작합니다.

무설치 클라이언트 구동 구조와 실무 적용 시 고려사항

M3E Canvas는 인프라 종속성이 없는 순수 클라이언트 정적 빌드로 제작되었습니다.

• Next.js 정적 익스포트 구조: 백엔드 서버나 외부 데이터베이스가 전혀 없으며, 공식 배포 페이지(lnkiai.github.io/m3e-canvas)에서 브라우저만으로 모든 기능이 동작합니다. 로컬 환경에서 직접 구동할 경우 저장소를 복제한 뒤 npm install, npm run dev(기본 포트 3000) 또는 npm run build를 통해 정적 파일(out/)을 직접 호스팅할 수 있습니다.
• 데이터 보존 주의사항: 모든 작업 상태는 브라우저의 로컬스토리지(localStorage)에 저장됩니다. 따라서 브라우저 캐시를 삭제하거나 시크릿 창을 닫으면 작업 내용이 유실될 수 있으므로, 프로젝트 메뉴의 JSON 프로젝트 내보내기(Export) 기능을 이용해 로컬 파일로 백업하는 관리가 필요합니다.
• AI 에이전트 연동 명세(agent.md): 전체 프로젝트는 하나의 JSON 문서 규격으로 직렬화됩니다. 리포지토리에 포함된 agent.md 가이드를 AI 에이전트에 제공하면, 에이전트가 직접 JSON 화면 명세를 생성하고 URL 해시 프래그먼트 공유 링크를 통해 사용자 브라우저 캔버스로 시각화 결과를 돌려주는 에이전트 협업 기능(현재 베타)도 지원합니다.
• 역할 범위의 한계: 본 도구는 어디까지나 UI의 시각적 배치와 화면 전환 흐름의 명세를 추출하는 프로토타이핑 도구입니다. 실제 데이터베이스 트랜잭션, 복잡한 비즈니스 로직, 외부 API 통신 코드는 프롬프트로 전달된 UI 뼈대 위에서 AI 코딩 도구를 통해 추가로 구현해야 합니다.

M3E Canvas는 텍스트만으로 UI를 설명하느라 시간을 허비하던 개발자들에게 직관적인 시각적 도면과 AI 친화적인 프롬프트를 동시에 제공함으로써, 바이브 코딩 파이프라인의 완성도를 한 단계 끌어올려 주는 실용적인 오픈소스 도구입니다.

출처

• GitHub 저장소: lnkiai/m3e-canvas
• 온라인 라이브 웹 앱: M3E Canvas Live
• Snow Brave X 소개 (@Sn0wbrave): M3E Canvas 오픈소스 안내