이 글의 성격은 무엇인가요?
질문 / 문제 해결
내용을 설명해주세요
Next JS로 포토샵, 그림판 앱을 만들고 있는데, 한 번에 편집하기 기능이 있습니다.
한 번에 편집은 가능한데, 공유하기를 하면 1장씩만 카카오톡으로 올릴 수 있더라구요.
그렇다고 모바일에서 zip으로 다운로드하게 하는건 편의성이 떨어질거같고..
여러 장 공유하는 방법이 있을까요? 아니면 아직 미지원인가요?
안녕하세요 
웹 표준 API 사용을 막고 있지 않아서, 필요하시다면 표준 Web Share API를 직접 사용할 수 있습니다.
navigator.share({ files })로 전달하고, 실제 지원 여부는 공유 전에 navigator.canShare({ files })로 확인해주세요.
const files = [...]; // File[]
if (
typeof navigator.share === 'function' &&
typeof navigator.canShare === 'function' &&
navigator.canShare({ files })
) {
await navigator.share({
files,
title: '편집한 이미지',
text: `${files.length}장의 이미지를 공유합니다.`,
});
} else {
// 미지원 환경 처리
}
이렇게 했는데도 결과가 같습니다.
N개의 이미지를 편집 → 1번씩 카카오톡에 공유 x N번..
테스트 했을때는 여러 이미지를 동시에 공유할 수 있었는데, 혹시 재현 코드를 주실 수 있을까요 ?
/**
* 대량 이미지 카카오톡 / 네이티브 공유 헬퍼
*/
export async function shareBatchToKakaoTalk(
items: Array<{ name: string; dataUrl: string }>,
title: string = "이미지 일괄 공유",
): Promise<{ success: boolean; message: string }> {
if (items.length === 0) {
return { success: false, message: "공유할 이미지가 없습니다." };
}
// 단일 파일인 경우 단일 공유로 위임
if (items.length === 1) {
const item = items[0];
const filename = item.name.includes(".")
? item.name
: `${item.name.replace(/\.[^/.]+$/, "") || "image"}.png`;
return shareToKakaoTalk(item.dataUrl, title, filename);
}
// 1. Web Share API로 여러 이미지 파일 한 번에 (카카오톡 묶어보내기/네이티브 멀티 공유) 전송 시도
if (
typeof window !== "undefined" &&
typeof navigator !== "undefined" &&
typeof navigator.share === "function" &&
typeof navigator.canShare === "function"
) {
try {
const filesArray = await Promise.all(
items.map(async (item, idx) => {
const res = await fetch(item.dataUrl);
const blob = await res.blob();
const itemMime = getMimeTypeFromDataUrl(item.dataUrl, item.name);
const filename = item.name.includes(".")
? item.name
: `${item.name.replace(/\.[^/.]+$/, "") || `photo_${idx + 1}`}.png`;
return new File([blob], filename, { type: itemMime });
}),
);
if (navigator.canShare({ files: filesArray })) {
await navigator.share({
files: filesArray,
title: title || "편집한 이미지",
text: `${filesArray.length}장의 이미지를 공유합니다.`,
});
return {
success: true,
message: "공유 창을 열었습니다!",
};
}
} catch (err: unknown) {
if (
err &&
typeof err === "object" &&
"name" in err &&
err.name === "AbortError"
) {
return { success: true, message: "공유가 취소되었습니다." };
}
console.log("Web share batch API failed/skipped:", err);
}
}
// 2. 앱인토스 환경에서 갤러리 일괄 저장 (saveBase64Data)
let savedCount = 0;
try {
if (typeof window !== "undefined") {
for (let i = 0; i < items.length; i++) {
const item = items[i];
const base64Data = item.dataUrl.includes(",")
? item.dataUrl.split(",")[1]
: item.dataUrl;
const itemMime = getMimeTypeFromDataUrl(item.dataUrl, item.name);
const filename = item.name.includes(".")
? item.name
: `${item.name.replace(/\.[^/.]+$/, "") || `photo_${i + 1}`}.png`;
await saveBase64Data({
data: base64Data,
fileName: filename,
mimeType: itemMime,
});
savedCount++;
}
}
} catch (err) {
console.log("saveBase64Data batch failed or not in Toss webview:", err);
}
if (savedCount === items.length && savedCount > 0) {
return {
success: true,
message: `${savedCount}장의 이미지가 갤러리에 모두 저장되었습니다!`,
};
}
// 3. 멀티 파일 공유 미지원 PC/웹 환경에서는 1개의 ZIP 파일로 다운로드
try {
const { downloadBatchAsZip } = await import("./zip-exporter");
await downloadBatchAsZip(
items.map((item, idx) => ({
id: String(idx),
name: item.name,
dataUrl: item.dataUrl,
})),
"converted_images.zip",
);
return {
success: true,
message: `${items.length}개 이미지가 ZIP 파일로 다운로드되었습니다.`,
};
} catch (e) {
console.error("Batch share fallback failed:", e);
return {
success: false,
message: "저장 및 공유 처리 중 오류가 발생했습니다.",
};
}
}
입니다!
Next JS, Android, Galaxy S26U 입니다.
이것저것 수정해보았는데, 여러장의 이미지를 1장으로 합쳐서 보내네요.
한 번에 공유해야되는데..ㅠㅠ
AI 자동 답변 — 이 답변은 AI 가 자동으로 작성했습니다.
Web Share API를 통해 여러 개의 파일을 전달하더라도 이미지가 하나로 합쳐져서 공유되는 현상은, API 호출 자체의 문제라기보다 해당 API를 전달받은 OS의 공유 시트(Share Sheet)와 수신 앱(카카오톡) 간의 처리 방식에 따라 결정되는 영역입니다.
현재 작성해주신 코드는 표준 Web Share API 규격을 정확히 따르고 있습니다. 다만, Android 환경의 특정 OS 버전이나 카카오톡 앱의 구현 방식에 따라 전달받은 files 배열을 개별 파일로 인식하지 않고 하나의 데이터 묶음으로 처리하거나, 첫 번째 파일만 추출하여 공유하는 경우가 발생할 수 있습니다.
이 현상의 원인을 명확히 파악하기 위해 아래 사항을 확인해 주시기 바랍니다.
1. 디버깅을 통한 데이터 확인
WebView 환경에서 API 호출 시점에 전달되는 filesArray의 구성을 확인해야 합니다. 로컬 개발 서버를 이용해 브라우저 개발자 도구에서 navigator.share 호출 직전의 filesArray에 각 파일이 독립된 File 객체로 올바르게 담겨 있는지 먼저 확인해 주세요.
2. 운영 환경(토스앱) 이슈 확인
만약 로컬 브라우저에서는 정상 동작하나 토스앱 내에서만 발생한다면, 이는 WebView 컨테이너가 Web Share API를 호출할 때 OS로 파라미터를 전달하는 과정에서의 차이일 수 있습니다. 토스앱(운영 환경)에서만 발생하는 동작 차이는 인스펙터 연결이 불가하므로, Sentry를 통해 클라이언트 로그를 수집하여 호출 시점의 데이터 상태를 확인하는 것을 권장합니다.
3. 대안 검토
OS 및 수신 앱의 제약으로 인해 Web Share API를 통한 다중 파일 공유가 지속적으로 제한될 경우, 현재 코드에 구현하신 ‘갤러리 일괄 저장(saveBase64Data) 후 사용자에게 안내’ 방식이 가장 안정적인 대안이 될 수 있습니다.
확인 가능한 로그나 추가적인 환경 정보가 있다면 공유해 주세요. 최대한 확인해 보겠습니다.
AI 답변은 부정확할 수 있습니다. 잘못된 내용이 있거나 추가 도움이 필요하면 댓글을 남겨 주세요. 담당자가 이어서 확인합니다.