채팅 목업 사진 첨부 방법: MockaoTalk 사진 메시지 기능 출시

채팅 목업 사진 첨부 방법은 간단해요. MockaoTalk 빌더의 미리보기 하단에서 첨부 메뉴 → 사진을 열고 JPEG·PNG·WebP 파일을 고르면 사진 메시지를 만들 수 있어요. 한 메시지에 최대 30장을 넣고 화자, 시간, 읽지 않은 수와 사진 순서까지 조정할 수 있어요.

2026년 8월 12일 현재 로컬 릴리스 후보의 사진 처리·저장·내보내기 코드와 실제 빌더 화면을 확인했어요. 바로 만들어 보려면 사진 메시지 채팅 목업 만들기에서 미리보기를 열어 보세요. 기본 편집 흐름은 MockaoTalk 소개, 전체 기능은 채팅 목업 고급 기능 가이드에서 이어서 볼 수 있어요.

한눈에 요약

첨부 메뉴 → 사진에서 JPEG·PNG·WebP 파일을 추가할 수 있어요.
한 사진 메시지에 최대 30장, 원본 한 장당 최대 40MiB까지 처리해요.
사진을 추가한 뒤 발신자, 시간, 읽지 않은 수, 사진 순서를 한 화면에서 조정할 수 있어요.
처리가 끝난 뒤 사진 편집기를 닫으면 메시지가 확정돼요. 처리 중 닫으면 진행 중인 초안은 버려져요.
처리된 사진 썸네일은 현재 브라우저에 저장돼요. 사진은 builder URL로 다른 기기에 옮겨지지 않아요.

사진 메시지 기능에서 달라진 점

사진 메시지 기능은 텍스트 말풍선 사이에 실제 사진 묶음을 배치하는 편집 기능이에요. 제품 소개, 여행 후기, 고객 응대 예시처럼 사진이 대화의 맥락을 설명하는 장면을 별도 디자인 도구 없이 빌더 안에서 구성할 수 있어요. 사진 1장은 큰 이미지로 보이고, 여러 장은 대화 화면 폭에 맞춘 그리드로 정리돼요.

이번 업데이트는 사진 업로드만 추가한 것이 아니에요. 미리보기에서 사진 메시지를 만들고, 사진 묶음의 순서를 바꾸고, 기존 메시지 사이로 이동하는 작업을 하나의 흐름으로 연결했어요. 텍스트 메시지와 사진 메시지를 함께 드래그해 장면 순서를 바꿀 수도 있어요.

할 수 있는 일	현재 동작	확인할 점
사진 추가	JPEG·PNG·WebP 선택	AVIF는 지원하지 않아요
여러 장 구성	한 메시지에 최대 30장	원본 한 장은 40MiB 이하여야 해요
화자 변경	참가자 이름 버튼으로 발신자 변경	프로필과 말풍선 방향을 함께 확인해요
사진 정리	추가·삭제·순서 변경	처리 중에는 완료될 때까지 기다려요
메시지 배치	텍스트·사진 메시지 순서 이동	시간 순서도 함께 확인해요
결과 저장	PNG·JPEG·WebP, 지원 브라우저에서 MP4	브라우저와 기기에 따라 MP4 처리 시간이 달라요

채팅 목업에 사진을 첨부하는 7단계

대화 목업 빌더를 열고 가운데 채팅 미리보기를 확인해요.
미리보기 하단의 첨부 메뉴 버튼을 누른 뒤 사진을 선택해요.
사진 메시지 작성 창에서 JPEG·PNG·WebP 파일을 추가해요.
참가자 이름 버튼을 눌러 사진을 보낸 사람을 정해요.
시간과 읽지 않은 수를 장면에 맞게 조정해요.
사진을 드래그하거나 이동 버튼을 눌러 순서를 정리해요.
사진 처리가 끝난 뒤 닫기, 바깥 영역 또는 Escape로 편집기를 닫으면 사진 메시지가 확정돼요.

별도의 사진 N장을 대화에 추가 버튼은 없어요. 처리가 끝난 상태에서 편집기를 닫는 동작이 확정 단계예요. 처리 중 창을 닫으면 아직 완료되지 않은 사진 초안은 버려지니 진행 표시가 사라진 뒤 닫아 주세요.

사진 개수와 파일 제한은 어떻게 되나요?

채팅 목업 사진 첨부 방법에서 확인할 제한은 사진 수, 원본 용량과 해상도예요. MockaoTalk 사진 메시지는 한 메시지에 최대 30장을 받을 수 있어요. 원본 파일 한 장은 최대 40MiB, 안전 검사 범위는 최대 4,000만 픽셀과 한 변 16,384px예요. 브라우저는 통과한 사진을 긴 변 최대 1024px의 썸네일로 처리해요. WebP 썸네일을 우선 만들고 브라우저가 지원하지 않으면 JPEG 또는 PNG를 사용해요.

항목	확인값
입력 형식	JPEG, PNG, WebP
한 메시지의 사진 수	최대 30장
원본 한 장의 용량	최대 40MiB
안전 검사 픽셀 수	최대 4,000만 픽셀
원본 한 변	최대 16,384px
처리된 썸네일 긴 변	최대 1024px

큰 원본을 그대로 보관하는 기능은 아니에요. 공개할 결과의 확대 품질이 중요하면 내보낸 파일을 실제 게시 크기로 열어 글자와 사진 선명도를 확인해 주세요.

사진이 잘 어울리는 채팅 장면 10가지

신제품 색상 3개를 비교하고 선호도를 묻는 제품 소개 장면
숙소 사진과 체크인 시각을 함께 보내는 여행 일정 장면
파손 사진을 받은 뒤 교환 절차를 안내하는 고객 응대 장면
메뉴 사진과 주문 마감 시간을 전달하는 단체 주문 장면
작업 전후 사진을 나란히 보여 주는 포트폴리오 장면
행사 포스터와 장소 지도를 순서대로 보내는 모임 공지 장면
수업 자료 사진 뒤에 질문과 피드백을 붙이는 교육 장면
옷이나 소품 후보를 여러 장 보내고 선택을 요청하는 친구 대화 장면
오류 화면과 해결 화면을 차례로 보여 주는 서비스 가이드 장면
썸네일 후보를 공유하고 최종안을 정하는 콘텐츠 제작 장면

사진은 장식보다 근거로 쓸 때 읽기 쉬워요. 예를 들어 고객 응대 장면이라면 파손 사진 → 주문 확인 → 처리 방법 → 완료 시점 순서가 자연스러워요. 여행 장면은 장소 사진 → 날짜 → 집결 시각 → 준비물 순서로 배치하면 한 화면에서 필요한 정보를 찾기 쉬워요.

사진 순서와 화자를 자연스럽게 정하는 법

사진 순서는 독자가 먼저 알아야 할 정보부터 배치해요. 제품 비교라면 전체 모습 다음에 세부 사진을 두고, 문제 해결 장면이라면 문제가 보이는 사진 뒤에 해결 결과를 놓는 편이 좋아요. 여러 사진을 넣었을 때는 사진 순서 창에서 드래그하거나 앞·뒤 이동 버튼을 사용하면 돼요.

화자도 사진의 의미를 바꿔요. 고객이 보낸 파손 사진과 상담원이 보낸 교환 안내 이미지는 말풍선 방향이 달라야 해요. 참가자 이름 버튼을 눌러 발신자를 바꾸면 참가자 정보와 메시지 방향이 함께 맞춰져요. 사진 메시지를 이동한 뒤에는 앞뒤 텍스트 메시지의 시간도 다시 확인해 주세요.

오후 2:10 · 고객: 상자를 열었는데 모서리가 깨져 있었어요.

오후 2:10 · 고객: [파손 부위 사진 2장]

오후 2:14 · 상담원: 확인했어요. 교환 접수 방법을 안내해 드릴게요.

이 장면은 사진이 문의의 근거가 되고 텍스트가 다음 행동을 설명해요. 실제 고객의 이름, 주문 번호, 주소가 보이는 사진은 쓰지 말고 가명과 샘플 이미지를 사용해 주세요.

사진은 어디에 저장되나요?

웹 빌더에서 처리한 사진 썸네일은 현재 브라우저의 IndexedDB MockaoTalkDS/photo_attachments에 저장돼요. 대화 상태와 사진 참조는 같은 브라우저의 localStorage에 남을 수 있어요. 웹 빌더에서 직접 입력한 대화 내용을 별도 서버 대화 DB에 저장하는 흐름과는 달라요.

사진 Blob은 builder URL에 포함되지 않아요. 사진이 들어간 장면의 URL만 다른 브라우저나 기기로 보내면 텍스트 상태는 열릴 수 있지만 사진은 복원되지 않아요. 중요한 결과는 PNG·JPEG·WebP 파일로 내려받아 보관해 주세요. 공용 기기에서는 작업 후 빌더 초기화와 사이트 데이터 삭제도 확인해 주세요. 데이터 처리 범위는 채팅 목업 개인정보 보호 설명에서 더 자세히 볼 수 있어요.

이미지와 MP4로 저장할 때 확인할 점

사진 메시지는 PNG·JPEG·WebP 이미지 내보내기와 지원 브라우저의 MP4 흐름에 포함돼요. 내보내기 전에 사진이 모두 로드됐는지, 마지막 말풍선이 잘리지 않는지, 전체 높이 옵션이 목적에 맞는지 확인해 주세요. MP4는 메시지를 순서대로 보여 주므로 사진 메시지 앞뒤의 텍스트와 시간을 한 번 더 읽는 편이 좋아요.

결과물	추천 상황	마지막 확인
PNG	문서, 포트폴리오, 선명한 글자	전체 높이와 마지막 메시지
JPEG	사진 비중이 큰 가벼운 공유 이미지	작은 글자의 압축 흔적
WebP	웹 게시용 이미지	게시 환경의 표시 지원
MP4	메시지 등장 순서가 필요한 쇼트폼	브라우저 지원과 재생 순서

공개 전에 확인하는 10가지

사진을 보낸 화자가 장면의 역할과 맞는지 확인해요.
사진 순서가 전체 모습에서 세부 모습으로 자연스럽게 이어지는지 봐요.
사진 메시지 앞뒤의 시간 순서가 거꾸로 되지 않았는지 읽어요.
읽지 않은 수가 대화 진행과 충돌하지 않는지 확인해요.
사진에 실명, 전화번호, 주소, 주문 번호가 보이지 않는지 확대해 봐요.
인물 사진과 브랜드 자산의 사용 권한을 확인해요.
실제 대화 기록으로 오인되지 않도록 창작 목업임을 주변 문맥에서 밝혀요.
내보낸 결과에서 사진과 말풍선이 잘리지 않았는지 확인해요.
builder URL만으로 사진이 백업되지 않는다는 점을 기억해요.
공용 기기라면 작업 후 브라우저 저장 데이터를 정리해요.

자주 묻는 질문

사진은 한 메시지에 몇 장까지 넣을 수 있나요?

한 사진 메시지에 최대 30장까지 넣을 수 있어요. 각 원본은 40MiB 이하여야 하고 JPEG·PNG·WebP 형식을 지원해요. 여러 장을 고르면 처리 진행 상태를 보여 주며, 완료된 사진은 순서를 바꾸거나 삭제할 수 있어요.

사진 메시지도 MP4에 나오나요?

지원 브라우저에서는 사진 메시지를 포함한 대화 순서를 MP4로 내보낼 수 있어요. 처리 속도와 성공 여부는 브라우저, 코덱, 기기 성능, 사진 수와 메시지 수에 따라 달라질 수 있어요. 먼저 이미지로 장면을 확인한 뒤 MP4를 만드는 순서를 권해요.

사진이 builder URL에 함께 저장되나요?

아니요. builder URL에는 지원되는 텍스트 대화 상태만 들어가고 사진 Blob은 포함되지 않아요. 같은 브라우저에서는 IndexedDB의 처리된 썸네일을 불러올 수 있지만 URL만 다른 기기에 보내 사진을 복원할 수는 없어요.

사진 처리 중 편집기를 닫으면 어떻게 되나요?

사진 처리가 진행 중일 때 편집기를 닫으면 진행 중인 초안은 버려져요. 진행 표시가 끝난 뒤 닫으면 완료된 사진 묶음이 메시지로 확정돼요. 파일이 너무 크거나 형식이 맞지 않으면 오류 내용을 확인하고 해당 파일만 다시 준비해 주세요.

사진이 있는 첫 채팅 목업 만들기

사진 2장과 텍스트 메시지 4개로 시작해 보세요. 사진 메시지 대화 목업 만들기에서 첨부 메뉴 → 사진을 열고 사진을 넣은 뒤 화자와 시간을 맞추면 돼요. 공개 전에는 사진 권리, 개인정보, 메시지 순서와 내보낸 결과의 잘림을 확인해 주세요.

이미지 출처

공지 화면에 사용한 풍경 사진 2장은 Giuseppe Milo가 촬영하고 Wikimedia Commons에 공개한 이미지예요. 두 사진 모두 Creative Commons 저작자표시 2.0 라이선스에 따라 크기를 조정해 사용했어요.

Lysefjord, Norway — Landscape, travel photography — Giuseppe Milo, CC BY 2.0
Sunset in Ålesund, Norway — Landscape photography — Giuseppe Milo, CC BY 2.0