Claude와 연동하여 제품을 설계하고 스코핑하는 시각적 캔버스 도구, Mowgli 출시

커뮤니티 반응

작성자가 도구의 유용성을 강조하며 무료 크레딧과 프로 구독권을 제안하여 긍정적인 반응을 얻고 있다.

Mowgli는 단순한 UI 생성기가 아니라 '스펙 중심(Spec-driven)'의 시각적 캔버스이다. 대화형 설문을 통해 소프트웨어의 PRD를 정의하고, 이를 기반으로 앱의 모든 화면을 한꺼번에 설계한다.

설계된 결과물은 Claude Code나 Claude.ai에서 즉시 빌드 가능한 코드 패키지로 내보낼 수 있다. 또한 Figma와의 양방향 연동을 지원하여 기존 디자인을 가져오거나 결과물을 디자인 도구로 보낼 수 있다.

개발 과정에서 Claude Code를 광범위하게 사용했다. 프론트엔드 전체와 주요 기능의 상당 부분을 Claude Code가 작성했으며, 개발자는 에이전트 하네스나 프롬프트 같은 핵심 연구 작업에 집중했다.

개발 비용 측면에서 Claude 3 Opus 모델을 API로 환산 시 약 6,000달러 분량의 토큰을 소비했다. 이는 복잡한 도구를 구축하는 데 필요한 AI 추론 비용의 실제 사례를 보여준다.

제품 요구사항 정의서(PRD): — 제품의 목적, 기능, 사용자 흐름 등을 상세히 기술한 문서이다. 개발 전 단계에서 팀 간의 합의를 이끌어내고 구현의 기준점이 되는 핵심 설계도 역할을 한다.
범위 설정(Scoping): — 프로젝트에서 구현할 기능과 제외할 기능을 명확히 정의하는 과정이다. 제한된 자원 내에서 개발 목표를 달성하기 위해 작업의 경계를 확정하는 필수적인 기획 단계이다.
클로드 코드(Claude Code): — Anthropic에서 제공하는 CLI 기반의 AI 코딩 에이전트이다. 터미널 환경에서 직접 코드를 수정, 실행, 테스트하며 복잡한 개발 작업을 자율적으로 수행할 수 있는 도구이다.

Mowgli추천링크

제품 스코핑 및 시각적 설계 도구

Claude Code추천

CLI 기반 AI 코딩 에이전트

Figma중립

UI/UX 디자인 도구