속도는 올리고, 화질은 그대로

1배경 — 알아야 할 기본 개념

아래 4가지만 알면 이 문서 전체를 이해할 수 있습니다. (웹 캔버스 그래픽 기초)

2무엇이 문제였나

3핵심 아이디어 — 해상도 분리

4buildPreviewImageData 자세히

이 작은 헬퍼 하나가 최적화의 심장입니다. 하는 일은 단 한 문장:
"무손실 원본(imageData)을 현재 화면 크기로 딱 한 번 줄여서 필터용 버퍼(previewImageData)를 만든다."

실제 코드 — django/frontend/src/FracR/shapes/ImageEditor/image.ts

// pristine 자연 해상도 imageData 를 현재 디스플레이 사이즈(objWidth × objHeight)로
// 1회 다운스케일해 previewImageData 에 저장한다. 필터 픽셀 루프는 이 디스플레이
// 해상도 버퍼에서만 돌아 가볍다. 리샘플 원본이 항상 pristine 자연 해상도라
// 크롭/리사이즈를 반복해도 누적 블러가 생기지 않는다.
const buildPreviewImageData = (state: ImageState) => {
    if (state.imageData === null || state.imageData === undefined) return;

    // 1) 원본 픽셀(imageData)을 자연 해상도 임시 캔버스에 올린다
    const naturalCanvas = document.createElement('canvas') as HTMLCanvasElement;
    naturalCanvas.width  = state.imageData.width;
    naturalCanvas.height = state.imageData.height;
    (naturalCanvas.getContext('2d') as CanvasRenderingContext2D)
        .putImageData(state.imageData, 0, 0);

    // 2) 화면 크기(objWidth × objHeight)의 임시 캔버스를 만들고
    const previewCanvas = document.createElement('canvas') as HTMLCanvasElement;
    previewCanvas.width  = state.objWidth;
    previewCanvas.height = state.objHeight;
    const previewCtx = previewCanvas.getContext('2d') as CanvasRenderingContext2D;

    // 3) 원본 → 화면 크기로 drawImage 한 번 (브라우저가 고품질 축소 처리)
    previewCtx.drawImage(
        naturalCanvas,
        0, 0, state.imageData.width, state.imageData.height, // src: 원본 전체
        0, 0, state.objWidth,        state.objHeight          // dst: 화면 크기
    );

    // 4) 줄여진 화면 해상도 픽셀을 꺼내 필터 입력 버퍼로 저장
    state.previewImageData = previewCtx.getImageData(0, 0, state.objWidth, state.objHeight);
};

한 줄씩 풀어보면

언제 호출되나 (재생성 시점)

이 함수는 슬라이더를 움직일 때마다가 아니라, 화면에 보이는 크기가 바뀔 때만 호출됩니다.

• 이미지 최초 로드 시 (drawImageOnFilterCanvas의 init 분기)
• 크롭 / 리사이즈로 objWidth/objHeight가 바뀔 때 (else 분기)
• 매직봉 등으로 원본을 다시 캡처할 때 (getImageDataFromFilterCanvas)
• 안전장치로, changeFilterValue 안에서 preview 크기가 화면 크기와 다르면 자동 재생성

// changeFilterValue 안의 안전장치 — 사이즈가 바뀌었으면 1회 재생성
if (
    state.previewImageData == null ||
    state.previewImageData.width  !== state.objWidth ||
    state.previewImageData.height !== state.objHeight
) {
    buildPreviewImageData(state);
}
const p = state.previewImageData;   // 이제 필터는 p(화면 해상도)만 순회

5전체 흐름 (라이프사이클)

사용자 동작별로 어떤 함수가 어떤 버퍼를 만지는지 따라가 봅니다. 모두 image.ts 안의 함수입니다.

6코드 BEFORE / AFTER

파일: django/frontend/src/FracR/shapes/ImageEditor/image.ts (단일 파일 수정)

const changeFilterValue = (cv,ev,sv,wbv,tv, state) => {
  // imageData = 자연 해상도 (예 1200만 px)
  state.correctedImageData =
    ctx.createImageData(
      state.imageData.width,
      state.imageData.height);

  for (let i=0;
       i < state.imageData.data.length; // 전체!
       i += 4) {
    // contrast/saturation/whiteBalance…
    // 슬라이더 1틱마다 1200만 회
  }
};

const changeFilterValue = (cv,ev,sv,wbv,tv, state) => {
  if (size 바뀜) buildPreviewImageData(state);
  const p = state.previewImageData; // 48만 px

  state.correctedImageData =
    ctx.createImageData(p.width, p.height);

  for (let i=0;
       i < p.data.length; // preview만!
       i += 4) {
    // 동일 필터, 25배 적은 픽셀
  }
};

크롭 / 리사이즈 — 누적 블러를 막는 지점

else if (state.imageData) {
  // ✅ 깨끗한 원본(자연 해상도)에서 새 화면 크기로 1회 재리샘플
  buildPreviewImageData(state);

  // 드래그 중 즉시 페인트는 직전 결과를 임시로 늘려 보여주고,
  // 50ms 뒤 debounce 된 changeFilterValue 가 선명하게 덮어쓴다.
  // → 권위 버퍼(imageData)는 절대 오염되지 않아 블러가 쌓이지 않음
}

7직접 체감해 보기

아래 데모는 큰 가상 이미지(2400×1800 ≈ 430만 px)에 밝기·대비 필터를 적용합니다. 모드를 바꿔가며 슬라이더를 움직여 1회 필터 시간(ms)과 처리 픽셀 수를 비교해 보세요. 화면 결과 화질은 동일합니다.

8요약