채팅 목업
기능과 한계
미리보기에서 메시지와 사진 메시지를 직접 편집하고 PNG·JPEG·WebP 이미지 또는 MP4로 내보낼 수 있습니다. 지원 범위와 브라우저 저장 방식은 아래 사실표에서 확인하세요.
미리보기에서 직접 편집
가운데 미리보기에서 메시지·사진·참가자·채팅방 정보를 누르고 바로 수정하며, 말풍선을 끌어 순서를 바꿀 수 있습니다.
메신저 스타일의 목업을 구성하는 기능이며 실제 앱 화면과 동일함을 보장하지 않습니다.
웹 빌더 서버 미저장
웹 빌더에서 직접 입력한 대화 데이터는 서버에 저장되지 않습니다. MCP로 초안을 만들 때는 입력 내용이 PNG 렌더링을 위해 서버로 전송되므로 샘플 문장 사용을 권장합니다.
대화 상태는 localStorage, 처리된 사진 썸네일은 IndexedDB에 남습니다. 사진 Blob은 빌더 URL에 포함되지 않습니다.
다양한 내보내기 옵션
PNG, JPEG, WebP 이미지 포맷과 MP4 동영상으로 내보낼 수 있습니다. 전체 높이 캡처 옵션을 사용하면 긴 대화 스레드도 한 번에 저장할 수 있습니다.
워터마크와 시스템 바 노출 여부를 선택해 실제 기기 캡처와 구분되는 안전한 연출이 가능합니다.
브라우저 기반 제작
별도 디자인 소프트웨어를 설치하지 않고 지원 브라우저에서 빌더를 사용할 수 있습니다. 입력한 대화와 화면 설정은 미리보기에서 확인합니다.
렌더링과 내보내기 시간은 브라우저, 기기 성능, 메시지 수와 선택한 형식에 따라 달라질 수 있습니다.
AI·MCP 연동
Cursor, Claude Code, Codex, VS Code처럼 원격 HTTP MCP를 지원하는 AI 도구에서 자연어 설명만으로 채팅 목업 PNG와 편집 가능한 빌더 URL을 생성할 수 있습니다.
원격 HTTP MCP 주소는 https://mockaotalk.com/mcp 입니다. generate_chat_image 도구가 이미지와 builderUrl, editUrl을 함께 반환합니다. 공개 MCP 요청에는 민감한 실제 대화를 넣지 않는 편이 안전합니다.
MCP 사용법 보기반응형 디자인
데스크톱과 모바일 화면 크기에 맞춰 빌더 레이아웃이 재배치됩니다. 데스크톱은 넓은 편집 영역을, 모바일은 터치 입력용 인터페이스를 사용합니다.
CSS Grid와 Flexbox 기반 반응형 레이아웃을 사용합니다. 사용 가능한 공간과 조작 방식은 기기의 화면 크기에 따라 달라집니다.
사진 메시지
한 메시지에 사진을 최대 30장까지 추가하고 미리보기에서 사진 순서를 바꾸거나 삭제할 수 있습니다.
원본 한 장당 40MiB까지 선택할 수 있으며 브라우저에서 긴 변 최대 1024px의 썸네일로 처리합니다.
MP4 동영상 내보내기
메시지가 순차적으로 나타나는 애니메이션 영상을 MP4 형식으로 저장합니다. 결과 파일은 인스타그램 릴스, 유튜브 쇼츠, 틱톡 등 숏폼 콘텐츠 제작에 활용할 수 있습니다.
타이핑 버블 애니메이션이 적용되며 웹 빌더에서 결과를 확인하고 다운로드할 수 있습니다. 렌더링 시간은 대화 길이와 기기 환경에 따라 달라집니다.
기능 및 한계 사실표
사용할 수 있는 기능과 작업 전에 알아야 할 데이터 처리 범위를 함께 확인하세요.
| 항목 | 확인된 기능 | 한계·주의사항 |
|---|---|---|
| 미리보기에서 직접 편집 | 메시지·사진·참가자·채팅방 클릭 편집, 드래그 순서 변경 | 전체 설정은 미리보기 상단 메뉴에서 고급 편집 패널을 엽니다. |
| 사진 메시지 | 한 메시지에 최대 30장 · 한 장당 원본 40MiB 브라우저에서 긴 변 최대 1024px 썸네일 생성 | 썸네일은 IndexedDB MockaoTalkDS/photo_attachments에 저장되며 빌더 URL과 다른 기기에는 포함되지 않습니다. |
| 내보내기 | PNG · JPEG · WebP · MP4 전체 높이 캡처로 긴 대화 스레드 저장 | 포맷과 캡처 범위는 웹 빌더에서 선택합니다. |
| 원격 MCP | HTTP 엔드포인트 https://mockaotalk.com/mcp도구 generate_chat_image | 원격 HTTP MCP를 지원하는 클라이언트가 필요합니다. |
| MCP 결과 | PNG와 builderUrl, editUrl 반환 | URL을 열어 웹 빌더에서 생성 결과를 이어서 편집할 수 있습니다. |
| 데이터 처리 | 웹 빌더는 서버 대화 DB에 데이터를 저장하지 않음 | MCP는 PNG 렌더링을 위해 입력 내용을 서버로 전송합니다. 입력 상태와 생성 PNG에는 생성 시점 기준 10분의 만료 시각이 설정되며 활성 서버 인스턴스의 프로세스 메모리에 최대 32건 임시 캐시됩니다. 만료 뒤 조회 또는 예약 타이머 실행 시 제거됩니다. |
| 공개 MCP 안전 | 샘플·가상 대화로 목업 제작 | 공개 MCP에는 민감한 실제 대화를 입력하지 마세요. |
| 서비스 관계 | 독립적인 채팅 목업 제작 도구 | 카카오와 제휴하거나 공식 서비스가 아닙니다. |
MockaoTalk이 맞는 작업과 다른 도구가 필요한 작업
반복 가능한 채팅 목업 제작에는 적합하지만, 실제 메신저 기능이나 자유형 원본 편집까지 대신하지는 않습니다.
| 하려는 작업 | 선택 기준 |
|---|---|
| 반복해서 수정하는 메신저 스타일 목업 | MockaoTalk에서 문구·참가자·시간을 바꾸고 이미지나 MP4로 내보낼 수 있습니다. |
| 실제 메시지 전송·검색·알림 | 실제 메신저나 동작하는 앱 프로토타입이 필요합니다. |
| 자유형 그래픽과 PSD 레이어 납품 | 레이어 기반 그래픽 편집 도구가 필요합니다. |
| 특정 메신저 화면과 동일한 재현 | MockaoTalk은 독립적인 목업 도구이므로 해당 서비스의 공식 디자인 자료와 전용 제작 환경을 확인해야 합니다. |
| 팀 공동 편집·클라우드 원본 관리 | 실시간 협업과 버전 관리를 지원하는 디자인 도구가 필요합니다. |
왜 MockaoTalk인가요?
직접 편집, 내보내기, MCP 연동의 지원 범위와
작업 전에 확인할 환경 차이를 함께 정리했습니다.
핵심 가치
- 웹 빌더 입력 데이터는 서버에 저장되지 않음
- 미리보기에서 메시지와 사진을 직접 편집
- 한 메시지에 사진 최대 30장 추가
- AI·MCP 초안 생성 후 빌더에서 세부 수정
- 지원 브라우저에서 별도 디자인 소프트웨어 없이 사용
- 이미지 다운로드 (PNG, JPEG, WebP)
- MP4 동영상 내보내기 (릴스, 쇼츠, 틱톡용)
- 시스템 바, 배터리 등 세밀한 커스터마이징
- 워터마크 제어로 안전한 연출
구현 범위와 환경 차이
MockaoTalk은 Next.js와 React를 기반으로 대화 편집, 미리보기와 내보내기 기능을 제공합니다.
처리 시간은 브라우저와 기기 성능, 메시지 수, 이미지 또는 MP4 형식에 따라 달라질 수 있습니다.
CSS Grid와 Flexbox 기반 반응형 레이아웃을 사용하며, 화면 크기에 따라 편집 공간과 조작 방식이 달라집니다.
대표 활용 사례
다양한 분야에서 활용되는 MockaoTalk의 가능성을 확인하세요.
UX/UI 포트폴리오
신규 기능을 발표하거나 프로덕트 로드맵을 설명할 때 익숙한 채팅 플로우처럼 보이는 스토리텔링 이미지가 필요합니다.
SNS 마케팅
이벤트 안내, 브랜드 알림, 고객 후기 콘텐츠를 대화 형식의 이미지나 MP4로 제작할 수 있습니다. 성과는 소재와 채널, 대상에 따라 달라집니다.
CS 및 교육 자료
사내 가이드 문서, 튜토리얼 영상, 고객센터 공지에 사용할 대화 이미지를 같은 편집 흐름으로 제작할 수 있습니다.
포트폴리오 웹사이트
UX/UI 디자이너나 프로덕트 디자이너가 사용자 시나리오와 대화 흐름을 설명하는 목업을 포트폴리오에 포함할 수 있습니다.
광고 캠페인
고객 후기나 제품 소개 문안을 대화 형식의 이미지로 구성해 소셜 미디어, 이메일, 웹사이트 소재에 사용할 수 있습니다. 성과는 채널과 대상에 따라 달라집니다.
프로토타입 및 데모
제품 개발팀이 신규 기능이나 서비스를 소개하는 데모 이미지를 만들 수 있습니다. 실제 앱 스크린샷 대신 목업을 사용하면 더욱 일관된 디자인을 보여줄 수 있습니다.
