문제 상황

unno 프로젝트에서 사용자가 이미지를 업로드하면 해당 파일은 Supabase Storage에 저장된다. 이후 명함을 새로 만들 때도 기존에 업로드한 이미지들을 재사용할 수 있도록 DB에 저장된 이미지 URL을 기반으로 캔버스(Stage)에 추가하는 구조로 설계했다.

하지만, 캔버스에서 Stage.toBlob()을 통해 이미지를 저장하려고 할 때, 일부 이미지가 포함된 Stage에서 Blob 변환이 실패하는 문제가 발생했다.

문제 발생: toBlob이 null을 반환함

export const uploadStageImage = async (
  stage: Konva.Stage,
  userId: string,
  lastSlug: string,
  label: 'front' | 'back'
): Promise<string> => {
  const blob: Blob = await new Promise<Blob>((resolve, reject) => {
    stage.toBlob({
      mimeType: 'image/png',
      pixelRatio: 2,
      callback: (b: Blob | null) => {
        if (b) resolve(b);
        else reject(new Error('Konva.toBlob 반환값이 null입니다.'));
      },
    });
  });

  const fileName = `${label}_${lastSlug}_img.png`;
  const filePath = `${userId}/${lastSlug}/${fileName}`;

  return uploadToSupabaseStorage('cards', filePath, blob);
};

의도

• Konva.Stage를 이미지로 변환하여 Supabase에 업로드하고, 해당 public URL을 반환

현상

• 특정 이미지가 포함된 Stage에서는 toBlob() 결과가 null로 반환됨

상황 비교

업로드 직후 캔버스에 추가된 이미지

{
  "previewUrl": "blob:<http://localhost:3000/>...",
  "height": 98.54,
  ...
}

• 로컬 Blob URL이므로 보안 제약 없이 사용 가능

DB에서 가져온 Supabase 이미지 URL

{
  "previewUrl": "<https://your-project.supabase.co/storage/v1/object/public/uploadimg/>...",
  "height": 84.23,
  ...
}

• Supabase의 도메인이 다른 origin이기 때문에 브라우저 보안 정책에 의해 문제가 발생

원인 분석