짭그마

프로젝트 소개

Storybook을 알게 되면서, 화면과 컴포넌트를 먼저 설계하고 그 결과를 실제 개발 과정까지 이어서 활용할 수 있겠다는 생각에서 시작했습니다.

기존에는 화면을 설계한 뒤 다시 개발자나 AI에게 구조와 디자인을 설명해야 했고, 설계 결과와 실제 구현이 서로 달라지는 경우도 많았습니다.

그래서 Figma처럼 화면을 직접 구성할 수 있으면서, 만들어진 결과를 단순 이미지가 아니라 구조화된 UI 명세로 저장하고 Storybook이나 AI 코딩 도구가 그대로 활용할 수 있는 UI Builder를 만들기 시작했습니다.

사람은 화면을 직관적으로 설계하고, AI는 동일한 UI 구조와 컴포넌트·테마 정보를 읽어 실제 프로젝트를 구현하도록 하는 것이 목표입니다.

주요 기능

1. 시각적 UI Builder

• Palette에서 컴포넌트를 선택해 화면 구성

• Layer Tree를 통한 UI 구조 관리

• 요소 이동ㆍ복제ㆍ잠금 및 Undo / Redo

• Desktop / Tablet / Mobile별 반응형 설정

• 자동 저장 및 Revision 충돌 처리

2. 공통 UI Spec

화면을 Canvas 전용 데이터로 따로 저장하지 않고, 하나의 UI Tree / JSON Spec을 기준으로 관리합니다.

같은 Spec을 Canvas, Preview, Storybook, AI/MCP가 함께 사용하도록 구성해서 설계 화면과 실제 개발 결과가 서로 달라지는 문제를 줄이는 것이 핵심입니다.

3. 컴포넌트ㆍ템플릿 관리

• 공통 Component Registry

• 공식 / 개인 Template 관리

• Theme 관리

• 프로젝트 특화 Custom Component 확장 구조

• 컴포넌트별 Props, Event, Slot, 반응형 규칙 관리

4. storybook / HTML 내보내기

작성한 UI를 단순 캡처가 아니라 실제 개발에 활용할 수 있는 형태로 내보낼 수 있습니다.

5. AI 기반 UI 수정

자연어로 화면 변경을 요청하고, AI가 바로 화면을 덮어쓰는 대신 변경 내용을 제안 형태로 생성해 사용자가 확인한 뒤 적용하도록 구성했습니다.

6. MCP를 통한 AI 개발 연동

외부 AI Coding Agent도 Builder와 동일한 UI Spec, Component Registry, Theme 정보를 MCP를 통해 읽도록 설계했습니다.

핵심 기능

• 사람과 AI 가 동일한 UI 명세를 사용

• Canvas와 실제 구현 사이의 재설명 과정 최소화

• 하나의 UI Spec 으로 PreviewㆍStorybookㆍMCP 까지 연결

• AI가 화면을 직접 바꾸기보다 변경 제안 > 검토 > 적용

• UI 결과물을 단순 디자인이 아니라 개발 가능한 자산으로 관리