lnkiai/m3e-canvas

어떤 프로젝트인가요?

핵심 기능

• 01실제 Material 3 Expressive 요소를 휴대폰이나 데스크톱 화면에 드래그해 배치할 수 있으며, 요소는 4dp 그리드에 맞춰 정렬됩니다.
• 02요소를 슬라이드, 페이드 또는 확장 전환 효과로 다른 화면에 연결하고 흐름을 미리 확인할 수 있습니다.
• 03AI 코딩 도구에서 사용할 디자인 브리프를 Android 또는 웹 대상으로 네 가지 언어로 생성할 수 있습니다.
• 04한 패널에서 테마 색상, 모양, 서체와 라이트 또는 다크 모드를 조정할 수 있습니다.
• 05OpenAI, Claude, Gemini 또는 DeepSeek의 API key를 직접 입력해 선택적 AI 도우미를 사용할 수 있습니다.
• 06디자인을 링크로 공유할 수 있으며, 자동 저장 데이터는 브라우저에 보관됩니다.

활용 사례

• AI 코딩 에이전트에 구현을 맡기기 전에 앱 화면 흐름을 스케치할 때.
• 디자인 도구 라이선스 없이 모바일 또는 웹 프로젝트용 Material 3 레이아웃을 프로토타이핑할 때.
• 클릭 가능한 흐름과 문서화된 브리프로 개발자에게 UI 아이디어를 전달할 때.
• Material 3 인터페이스의 테마 팔레트와 라이트 또는 다크 변형을 살펴볼 때.

빠른 시작

1. 1

   종속성 설치

   npm install
2. 2

   localhost:3000에서 개발 서버 시작

   npm run dev
3. 3

   ./out에 정적 내보내기 빌드(선택 사항)

   npm run build

사용 전 알아둘 점

• !로컬에서 실행하려면 Next.js 앱을 설치하고 빌드할 Node.js와 npm이 필요합니다.
• !AI 도우미 기능을 사용하려면 OpenAI, Claude, Gemini 또는 DeepSeek의 API 키가 필요합니다.

토픽

자주 묻는 질문

m3e-canvas은(는) 무엇인가요?

Material 3 Expressive 앱 화면을 스케치하고 AI 코딩 도구용 프롬프트로 변환하는 브라우저 스케치패드입니다. M3E Canvas는 Material 3 Expressive 컴포넌트로 앱 화면을 구성하는 브라우저 기반 스케치 도구입니다. 버튼, 카드, 바, 탭, 피커 같은 요소를 휴대폰이나 데스크톱 화면에 드래그해 배치하고, 전환 효과를 지정해 다른 화면과 연결한 다음 직접 눌러 보며 흐름을 미리 확인할 수 있습니다. 계정이나 서버 없이 브라우저에서만 실행되며, 변경 사항은 로컬에 자동 저장됩니다.

m3e-canvas은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

m3e-canvas은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

m3e-canvas은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. m3e-canvas의 마지막 커밋은 2026년 10월 16일입니다.

m3e-canvas은(는) 어디에 사용할 수 있나요?

AI 코딩 에이전트에 구현을 맡기기 전에 앱 화면 흐름을 스케치할 때. 디자인 도구 라이선스 없이 모바일 또는 웹 프로젝트용 Material 3 레이아웃을 프로토타이핑할 때. 클릭 가능한 흐름과 문서화된 브리프로 개발자에게 UI 아이디어를 전달할 때. Material 3 인터페이스의 테마 팔레트와 라이트 또는 다크 변형을 살펴볼 때.

m3e-canvas는 어떻게 설치하나요?

종속성 설치: npm install localhost:3000에서 개발 서버 시작: npm run dev ./out에 정적 내보내기 빌드(선택 사항): npm run build

m3e-canvas은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/lnkiai/m3e-canvas