이미지 에디터 만들기-1

 
아주 간단한 이미지 에디터 1차 버전을 주말 동안 빠르게 구현해 보았다.
시작하게 된 계기는 엄마가 수업 후 학생들 작품 사진을 수업 기록용으로 편집하는 과정을 지켜봤는데, 리사이징과 라벨링 등을 각각 다른 툴에서 처리하느라 작업이 번거롭고 비효율적이었다. 그래서 필요한 기능들을 쭉 정리하고, 계속 미루다 주말에 1차 버전을 완성하였다.
 
완성 후 오늘 유저 테스트를 진행하며 피드백을 받았고, 현재는 이슈 처리와 피드백 반영을 포함한 2차 추가 기능 구현이 필요한 상태다. 

1차 주요 기능

1. 이미지 가져오기
   - 파일 선택 or 드래그 앤 드롭으로 업로드 가능
   - 업로드 시 미리 보기 제공

2. 리사이즈 옵션 
    유저가 고정된 크기만 사용하기 때문에 크기 변경 기능은 제외했고, 이미지 비율만 유지하도록 구현

3. 라벨링 기능
   - 하단 좌측 / 중앙 / 우측 위치 선택 가능
   - 폰트 크기와 여백 조절 가능
   - 미리 보기에 노출 필요

4. 다운로드
   - 개별 저장 버튼으로 단일 이미지 다운로드
   - 전체 이미지를 ZIP 파일로 묶어 다운로드

일단 다운로드는 개별 다운로드와 전체 다운로드가 가능하도록 해야 해서 JSZip 라이브러리를 활용하였다. 다만 테스트 중에 엄마가 사용하는 다른 에디터와 호환성 이슈가 있는 것 같아 해결이 필요한데 지금 윈도우 노트북이 없어서 무슨 이슈인지 제대로 확인이 어려운 상황이다.

구현 과정에서 알게 된 점과 겪은 이슈

1. Object URL 메모리 누수 방지
이미지 미리보기 기능을 구현하기 위해 URL.createObjectURL을 활용하였다. 해당 메서드는 라우저 메모리에 파일 내용을 Blob 형태로 보관하고, 해당 Blob에 접근할 수 있는 임시 URL을 만들어주는 역할을 한다. 다만 해당 메서드를 사용할 때 주의할 점이 있는데 URL.revokeObjectURL로 해제하지 않으면 브라우저가 해당 메모리를 계속 붙잡고 있게 되어서 업로드와 삭제를 반복하면 메모리 점유가 점점 커져 성능 저하나 브라우저 탭 다운으로 이어질 수 있다고 한다. 그래서 아래와 같이 ZIP Blob을 만들어 다운로드 링크로 연결할 때, 다운로드가 끝나면 URL을 해제하는 로직을 추가하였다.

const handleDownloadSelected = async () => {
  const zip = new JSZip();
  for (const it of items) {
    const blob = await renderBlob(it.file, it.label ? it.label : null);
    if (!blob) continue;
    const nameWithoutExt = it.name.replace(/\.[^.]+$/, '');
    const suffix = it.label && it.label.trim() ? '_labeled' : '_resized';
    zip.file(`${nameWithoutExt}${suffix}.jpg`, blob);
    await new Promise((r) => setTimeout(r, 0)); 
  } 
  ....
  setTimeout(() => {
    URL.revokeObjectURL(a.href); 
    a.remove();
  }, 100);
};

 
2. 폰트 스케일링 이슈
캔버스 폰트 크기를 절댓값으로 값을 고정해 두면, 리사이즈된 이미지의 픽셀 크기에 따라 상대적인 비율이 깨지는 이슈가 발생하였다. 그래서 기준 width을 하나 정해 두고, 실제 렌더링 width에 비례해서 폰트,패딩을 스케일 하도록 하였는데, 최솟값, 최댓값 클램프를 걸어 너무 작거나 크지 않게 제한하였고, 만약 텍스트가 박스보다 길면 폭에 맞춰 자동 축소 기능도 일단 추가하였다. (++ 폰트가 너무 작아지는 것을 대비해서 최소 12px 로 제한)

const fs = Math.max(12, Math.floor((fontSize * W) / 800));

 
3. 텍스트 오버플로우 방지
텍스트가 박스보다 길어질 경우를 대비해서 자동으로 크기를 조절하는 기능이 필요했는데,
먼저 텍스트의 실제 크기를 측정하고

const metrics = ctx.measureText(text);
const textW = Math.ceil(metrics.width);
const textH = Math.ceil(fs * 1.3);

측정된 텍스트 크기를 기준으로 패딩을 포함한 전체 박스 크기를 계산하도록 하였다.

const boxW = textW + paddingX * 2;
const boxH = textH + paddingY * 2;

---

항상 사이드 프로젝트를 해도 유저가 없다 보니 중간에 흐지부지 끝나거나, 새로운 기술을 익히기 위해 앱을 만드는 정도로 마무리하곤 했었는데, 이번에는 실제 유저가 있고, 필요성도 명확해 진행 과정이 훨씬 재미있게 느껴지는 것 같다. 🙂