AI 코딩 도구로 앱을 개발할 때는 화면 배치나 버튼 클릭 시 동작 등을 텍스트로 설명해야 합니다. 이에 따라 Google 의 'Material 3 Expressive'에 대응하는 컴포넌트를 브라우저에서 조립하고 여러 화면을 연결하여 실제 탭을 누르며 동작을 확인할 수 있으며, 설계 내용을 그대로 AI 코딩용 프롬프트로 변환할 수 있는 무료 오픈소스 도구인 'M3E Canvas'입니다. M3E Canvashttps://lnkiai.github.io/m3e-canvas/lnkiai/m3e-canvas: 브라우저에서 Material 3 Expressive 화면을 스케치하고 이를 vibe-coding 프롬프트로 변환하세요.https://github.com/lnkiai/m3e-canvas◆M3E Canvas 로 화면 생성M3E Canvas 는 공식 웹사이트에 접속하기만 하면 바로 사용 가능하며, 계정 등록이나 소프트웨어 설치 없이도 이용할 수 있습니다.
편집 화면에는 컴포넌트 목록과 스마트폰 형태의 캔버스가 표시되며, 각 컴포넌트를 드래그 앤 드롭으로 배치할 수 있습니다.
이번에는 작업 목록과 추가 화면을 갖는 ToDo 앱을 예로 들어, 화면 생성부터 AI 를 위한 프롬프트 생성까지 시도해 보겠습니다.
왼쪽의 '부품'에서 톱 애플리케이션 바, 목록 항목, 체크박스, 그리고 FAB(원형 추가 버튼) 을 선택하여 스마트폰 화면에 배치합니다.
배치한 부품에 클릭하면 오른쪽에 설정 항목이 표시되며, 제목과 버튼의 문자, 모양, 크기 등을 조정할 수 있습니다.
또한 버튼이나 칩을 서로 가까이 두면 부품들이 자석처럼 연결되며, 부품의 배치 상태에 따라 모서리 둥글기도 자동으로 변합니다.
◆ 화면 간 연결을 확인하기 위해 화면 상단의 '화면 추가'를 클릭하여 작업 추가용 화면을 만들고, 화면 이름을 '작업 추가'로 변경합니다.
목록 화면의 '추가 버튼'을 선택한 후 '트리거' 탭을 클릭하고 이동 위치를 '작업 추가'로 설정하면 두 화면이 화살표로 연결됩니다.
상하좌우 슬라이드, 페이드, 확대 등 화면 전환 애니메이션을 설정할 수 있습니다.
'프리뷰' 모드로 '추가 버튼'을 클릭하면 애니메이션이 포함된 이동 상황을 실제로 확인할 수 있습니다.
◆ 화면에서 AI 코딩용 프롬프트를 생성하려면 화면 오른쪽의 '프롬프트' 버튼을 클릭하면 화면 크기, 부품 종류와 배치, 색상 구성, 버튼 클릭 시 이동 위치 등을 포함한 지시문이 자동으로 생성됩니다.
생성된 글은 즉시 수정하여 복사할 수 있으며, Claude Code 나 Codex 와 같은 AI 코딩 도구로 붙여넣기만 하면 앱 개발을 요청할 수 있습니다. 또한 일반적인 프롬프트 생성은 브라우저 내에서 완료되므로, 생성 자체에 외부 AI API 키나 이용료가 필요하지 않습니다.
◆테마 및 디자인 일괄 변경
왼쪽의 '컬러' 아이콘을 클릭하면 컬러 테마 선택 화면이 표시되며 7 가지 색상 조합 중 테마를 선택할 수 있습니다. 어느 템플릿을 클릭하면 화면 내의 버튼 및 배경색이 일괄 전환됩니다.
라이트 모드와 다크 모드 변경에도 대응되어, 동일한 구성 요소 구성으로 외관을 비교할 수 있습니다.
'셰이프' 아이콘을 클릭하면 구성 요소의 모서리 둥글기를 일괄 변경할 수 있습니다.
◆기타 기능
이외에도 구성 요소의 겹침 순서를 변경하는 레이어 기능, 여러 구성 요소의 그룹화, 16dp 여백을 활용한 자동 정렬, 이미지로 저장 등의 기능을 제공합니다.
디자인 편집 화면에는 스마트폰 412x892 픽셀과 데스크톱 1280x800 픽셀 표시를 전환하는 버튼이 있으며, 각 화면 너비에 맞춰 구성 요소가 재배치됩니다.
OpenAI, Claude, Google Gemini, DeepSeek 의 API 키를 설정하면 글에서 화면 초안을 생성하거나 구성 요소의 동작 설명을 작성하게 하는 AI 보조 기능도 사용할 수 있습니다.
◆Self-hosted M3E Canvas 설치 방법 이번에는 Windows 환경에 Node.js 와 Git for Windows 의 Git Bash 를 준비한 환경에서 구축합니다. 작업 폴더에 저장소를 클론한 후 다음 명령어를 실행합니다.
브라우저에서 "http://localhost:3000" 으로 접속하여 M3E Canvas 의 디자인 화면이 표시된다면 구축이 완료되었습니다.
원문 보기 | 출처: Gigazine