Blog Post
#채팅목업
#메신저화면
#웹빌더
#콘텐츠제작
#MockaoTalk

MockaoTalk이 뭔가요? 설치 없이 채팅 목업 만드는 방법

2025-11-11

MockaoTalk의 실제 편집 항목, 저장 형식, 웹 빌더와 MCP의 데이터 처리 차이를 소스 기준으로 설명하고 첫 채팅 목업을 만드는 순서를 안내합니다.

MockaoTalk은 브라우저에서 참가자·메시지·시간·상태바를 편집해 메신저 형태의 채팅 목업을 만드는 무료 웹 도구입니다. 샘플 대사를 바로 수정할 수 있고, 설치와 로그인 없이 결과를 PNG·JPEG·WebP 이미지 또는 MP4로 내보낼 수 있습니다.

처음이라면 채팅 목업 빌더에서 샘플 대사를 수정해 보세요. 디자인 도구와의 작업 차이는 포토샵 채팅 목업 비교, AI에서 PNG 초안을 만드는 흐름은 MockaoTalk MCP 사용법에서 확인할 수 있습니다.

한눈에 요약

  • 웹 빌더는 방 이름, 참가자와 프로필, 메시지 순서, 시간, 읽지 않은 수, 상태바 시간·배터리를 편집합니다.
  • 편집 상태는 브라우저 localStorage에 자동 저장되며, 웹 빌더에서 직접 입력한 대화를 별도 대화 DB로 전송해 저장하는 코드는 확인되지 않았습니다.
  • 이미지 내보내기는 브라우저에서 화면을 캔버스로 변환해 PNG·JPEG·WebP로 만들고, 영상은 브라우저 저장소를 거쳐 MP4로 렌더링합니다.
  • MCP는 별도 흐름입니다. 요청한 대화는 서버로 전송되어 PNG로 렌더링되므로 민감한 실제 정보 대신 가명과 샘플 값을 써야 합니다.

MockaoTalk이란?

MockaoTalk은 완성된 실제 대화 기록을 편집하는 앱이 아니라, 가상의 대화 장면을 구성하는 목업 빌더입니다. 화면 가운데 미리보기에서 메시지·사진·참가자·채팅방 정보를 직접 누르고 수정할 수 있으며, 메뉴를 열면 전체 편집 패널을 사용할 수 있습니다. 제품 기획 화면, 교육 예시, 고객 응대 매뉴얼, 마케팅용 창작 장면처럼 대화가 어떻게 보이는지를 전달해야 할 때 사용할 수 있습니다.

2026년 8월 11일 소스를 확인한 기준으로, 서비스는 특정 메신저와 제휴·승인된 공식 도구가 아닙니다. 실제 앱과 완전히 동일, 픽셀 퍼펙트, 오류가 없음을 보증하지 않으며, 브라우저·폰트·화면 폭에 따라 줄바꿈과 결과가 달라질 수 있습니다. 공개 콘텐츠에는 창작 목업임을 밝히고 최종 이미지를 직접 검수하세요.

실제로 편집할 수 있는 항목

영역현재 확인한 기능확인할 한계
채팅방방 이름공식 서비스 방으로 오인될 이름은 피하기
참가자이름, 프로필 이미지, 여러 상대사진 권리와 개인정보 확인
메시지본문, 화자, 순서, 시각, 읽지 않은 수실제 대화로 오인되지 않게 표시
상태바표시 여부, 시간, 배터리장면과 맞는 값인지 검수
이미지PNG, JPEG, WebP, 배율, 현재 화면·전체 대화브라우저별 결과 확인
영상대화 재생 후 MP4 내보내기길이와 기기 성능에 따라 처리 시간 변동
AI 연동MCP의 generate_chat_image로 PNG 초안서버 전송, 텍스트 중심 입력

첫 채팅 목업을 만드는 10단계

  1. 대화 목업 빌더를 열고 기본 샘플이 표시되는지 확인합니다.
  2. 방 이름을 장면의 목적이 드러나는 가상 이름으로 바꿉니다.
  3. 참가자 이름을 가명으로 정하고 상대 역할을 구분합니다.
  4. 필요한 경우 사용 권한이 있는 프로필 이미지를 브라우저에서 불러옵니다.
  5. 첫 메시지에 장소·관계·문제 중 하나를 넣어 상황을 설명합니다.
  6. 메시지를 추가하고 각 화자와 시각을 맞춥니다.
  7. 긴 설명은 여러 말풍선으로 나누되 한 화면의 핵심을 유지합니다.
  8. 읽지 않은 수와 상태바 시간·배터리는 서사에 필요할 때만 바꿉니다.
  9. 미리보기에서 이름, 줄바꿈, 시간, 공개하면 안 될 정보를 확인합니다.
  10. 목적에 맞춰 PNG·JPEG·WebP 또는 MP4로 내보낸 뒤 실제 게시 크기로 다시 검수합니다.

웹 빌더 데이터는 어디에 남나요?

웹 빌더의 참가자, 메시지, 방 설정과 사진 참조 정보는 브라우저의 localStoragemockaotalk-state에 자동 저장됩니다. 업로드한 프로필 사진은 FileReader로 데이터 URL로 읽혀 참가자 상태에 포함될 수 있습니다. 사진 메시지는 원본을 보관하지 않고 브라우저에서 긴 변 최대 1024px의 썸네일로 처리한 뒤 IndexedDB MockaoTalkDSphoto_attachments 저장소에 보관합니다. 같은 브라우저 프로필을 다른 사람이 사용한다면 작업 후 초기화와 사이트 데이터 삭제를 고려하세요. 서버에 저장되지 않는다는 말은 기기에 아무것도 남지 않는다는 뜻이 아닙니다.

이미지 내보내기는 현재 화면의 DOM을 캔버스로 변환해 데이터 URL과 Blob을 만들고 브라우저 다운로드를 실행합니다. MP4 흐름은 브라우저의 IndexedDB MockaoTalkDS에 최신 다운로드 작업을 임시로 넣어 다운로드 페이지에서 처리합니다. 이 역시 서버 대화 DB와는 다르지만, 공용 기기에서는 브라우저 저장소를 정리하는 습관이 필요합니다. 자세한 구분은 채팅 목업 개인정보 보호 설명에서 다룹니다.

MCP는 웹 빌더와 어떻게 다른가요?

MCP에서 AI가 generate_chat_image를 호출하면 대화 스크립트와 렌더링 설정이 https://mockaotalk.com/mcp로 전송됩니다. 서버는 헤드리스 브라우저로 PNG를 만들고, 이미지와 builderUrl·editUrl을 응답합니다. 검사한 소스에는 영구 대화 DB나 서버 저장 공유 파일을 만드는 로직은 없습니다. 입력 상태와 생성 PNG에는 생성 시점 기준 10분의 만료 시각이 설정되며 활성 서버 인스턴스의 프로세스 메모리에 최대 32건 임시 캐시됩니다. 만료 뒤 조회 또는 예약 타이머 실행 시 제거됩니다.

빌더 URL의 #state=...에는 압축된 텍스트 대화 상태가 들어갑니다. URL fragment는 일반 HTTP 요청에 포함되지 않지만, 전체 URL을 받은 사람은 상태를 열 수 있습니다. 사진 메시지의 IndexedDB 썸네일은 URL에 포함되지 않으므로 URL을 다른 브라우저나 기기에서 열어도 사진은 복원되지 않습니다. 빌더가 URL을 불러오면 fragment를 주소창에서 지우고 가져온 상태를 브라우저 localStorage에 저장합니다. 실제 고객 대화·전화번호·인증번호·내부 문서는 MCP와 빌더 URL에 넣지 않는 편이 안전합니다.

용도별 시작점

사용자첫 장면다음에 볼 글
UX/UI 디자이너오류 상태와 정상 상태 비교채팅 UI 목업 체크리스트
마케터창작임을 밝힌 제품 사용 장면바이럴 콘텐츠 채팅 가이드
교육자질문·오답·피드백 4~8개 말풍선에듀테크 학습 자료 채팅
CS 운영자문의·확인·조치·기한 흐름CS 매뉴얼 예시
AI 도구 사용자가명으로 만든 짧은 PNG 초안MockaoTalk MCP 사용법

공개 전 10가지 확인

  1. 실제 메신저 서비스의 공식 화면으로 오인될 표현이 없는가?
  2. 대화가 창작·예시·목업임을 독자가 알 수 있는가?
  3. 실명, 전화번호, 주소, 인증번호, 주문 정보가 남아 있지 않은가?
  4. 프로필 사진과 브랜드 자산의 사용 권한을 확인했는가?
  5. 날짜와 시간, 읽지 않은 수가 장면 안에서 일관되는가?
  6. 작은 모바일 화면에서도 핵심 문장이 읽히는가?
  7. 내보낸 이미지의 줄바꿈과 잘림을 확인했는가?
  8. 광고·협찬 콘텐츠라면 필요한 고지를 유지했는가?
  9. 공용 기기라면 작업 후 빌더 초기화와 사이트 데이터 삭제를 했는가?
  10. MCP를 썼다면 결과 URL과 이미지에 민감한 상태가 없는가?

자주 묻는 질문

MockaoTalk은 무료인가요?

2026년 8월 11일 공개 기능과 이용약관 기준으로 웹 빌더는 로그인이나 결제 없이 사용할 수 있는 무료 도구입니다. 다만 운영 정책과 기능은 바뀔 수 있으므로 장기 프로젝트의 비용 조건은 사용 시점의 서비스 화면과 약관을 다시 확인하세요. 무료라는 사실이 제3자의 사진·상표·저작물을 자유롭게 쓸 권리를 주는 것은 아닙니다.

웹 빌더를 닫았다가 다시 열면 작업이 남나요?

같은 브라우저 프로필에서 localStorage와 IndexedDB가 유지되면 참가자, 메시지, 방 설정과 사진 메시지 썸네일이 다시 불러와질 수 있습니다. 시크릿 모드 종료, 사이트 데이터 삭제, 브라우저 초기화 뒤에는 사라질 수 있으며 서버에서 복구해 주는 계정 저장 기능은 확인되지 않았습니다. 빌더 URL만으로 사진을 백업할 수도 없습니다. 중요한 결과는 파일로 내려받고 민감한 작업은 공용 기기에 남기지 마세요.

MockaoTalk으로 만든 이미지를 상업적으로 써도 되나요?

서비스 약관은 사용자 제작 결과물의 소유권이 사용자에게 있다고 설명하지만, 사용자는 제3자의 저작권·상표권·초상권을 별도로 확인해야 합니다. 실제 인물이나 기관을 사칭하거나 공식 서비스로 오인시키는 사용은 피해야 합니다. 특정 캠페인의 법적 표시 의무는 해당 국가와 플랫폼 정책에 맞춰 별도로 검토하세요.

바로 시작하기

가명 2명과 말풍선 4개로 첫 장면을 만든 뒤 공개 전 확인표를 적용해 보세요. 채팅 목업 빌더 열기에서 대사와 시간을 바꾸면 결과가 바로 미리보기에 반영됩니다.

직접 만들어보세요

지금 바로 MockaoTalk에서 나만의 대화 내용을 만들어보세요.

무료로 만들기

함께 읽으면 좋은 글