Jjapgma(짭그마)는 화면 요소를 조립하고 개발에 필요한 결과물로 연결하는 웹 UI 빌더입니다. 화면 구성을 빠르게 시험하려는 기획자·디자이너·개발자가 요소를 배치하고, 속성과 레이어를 편집하며, 데스크톱·태블릿·모바일 화면을 확인할 수 있습니다.
화면 구조는 공통 UI 명세로 관리합니다. 요소를 추가·이동·복제하고 기기별 스타일을 조절한 결과를 서버에 저장하며, 저장할 때마다 버전 기록을 남깁니다. 최신 버전과 다른 편집 내용이 제출되면 충돌을 알려 기존 변경을 확인하도록 합니다.
AI 편집은 외부 n8n과 연결합니다. 현재 페이지·선택 요소·버전 정보를 대화와 함께 전달하고, AI가 MCP 도구로 만든 변경을 제안으로 보관합니다. 사용자는 제안 화면을 미리 본 뒤 병합 또는 덮어쓰기를 선택해 적용할 수 있습니다. 모델 호출은 외부 서비스가 맡고, 프로젝트 접근 권한과 화면 명세 검증·버전 저장은 짭그마가 처리합니다.
React·TypeScript 편집기와 NestJS API, PostgreSQL로 구성했습니다. 편집 화면과 미리보기, HTML·Storybook 내보내기에서 같은 렌더러를 사용합니다. 결과는 UI 명세 JSON, 브라우저에서 여는 HTML ZIP, 프로젝트 페이지·요소·템플릿을 담은 Storybook ZIP으로 내려받아 개발 과정에서 이어 사용할 수 있습니다.