마크다운 에디터에 이미지 업로드 기능 구현

이전에는 이미지를 대표 이미지로만 설정할 수 있었습니다.
그런데 글을 쓰다 보니 중간중간 이미지도 넣어서 좀 더 보기 좋게 꾸미고 싶다는 욕심이 생기더라고요.

그래서 이번에는 마크다운 에디터에서 이미지 파일을 선택하면 자동으로 Supabase Storage에 업로드되고, 해당 이미지가 마크다운 문법(![설명](URL))으로 삽입되는 기능을 구현해봤습니다.

1. 핵심 기능 ✨

드래그 앤 드롭 지원: 이미지 파일을 쉽게 업로드
자동 업로드: 선택 즉시 Supabase Storage에 저장
마크다운 삽입: ![설명](URL) 문법으로 자동 입력
형식 및 용량 제한: JPEG, PNG, GIF, WebP / 최대 5MB
실시간 미리보기: 업로드 후 바로 확인 가능

2. Supabase Storage 설정 가이드

2.1 Storage 버킷 생성

Supabase Dashboard → Storage → New Bucket
버킷 이름: blog-content
Public bucket ✅ (공개 설정)
Max file size: 5MB
Allowed MIME types: image/*

2.2 정책 설정: INSERT & SELECT

-- INSERT (업로드 허용)
Policy name: "Allow public uploads"
Type: INSERT
For: public
Definition: bucket_id = 'blog-content'

-- SELECT (조회 허용)
Policy name: "Allow public viewing"
Type: SELECT
For: public
Definition: bucket_id = 'blog-content'

3. 기술 구현 흐름

핵심 컴포넌트: MarkdownPreview

const handleImageUpload = async () => {
  const allowedTypes = [
    'image/jpeg', 'image/jpg', 'image/png',
    'image/gif', 'image/webp'
  ];
  if (!allowedTypes.includes(imageFile.type)) {
    throw new Error("지원하지 않는 이미지 형식입니다.");
  }

  // 업로드
  const { data, error } = await supabase
    .storage
    .from('blog-content')
    .upload(uniqueFileName, imageFile);

  if (error) throw error;

  // 마크다운 삽입
  const publicUrl = supabase
    .storage
    .from('blog-content')
    .getPublicUrl(uniqueFileName)
    .publicUrl;
  
  const markdown = `![${imageAlt || '이미지'}](${publicUrl})`;
  insertText(markdown);
}

세부 내용

파일 검증: 타입 및 크기 체크
고유 파일명: 타임스탬프 + 원본 파일명
에러 핸들링: 사용자에게 친절한 메시지 표시
로딩 처리: 업로드 진행 상태 표시

4. UX & DX 측면에서의 장점 🎯

사용자 경험

툴바의 이미지 버튼만으로 간편하게 사용 가능
업로드 상태와 에러를 실시간으로 알림
삽입 전 즉시 미리보기를 제공해 안전성과 편의성 강화

개발자 경험

TypeScript 기반 타입 안정성
마크다운 컴포넌트 분리되어 재사용성 우수
향후 추가 기능 확장 용이 (예: 대용량 파일 업로드, 리사이징, 이미지 편집 등)

5. 추가 설정 사항

주요 패키지 (package.json)

{
  "@supabase/supabase-js": "latest",
  "react-markdown": "latest",
  "remark-gfm": "latest"
}

6. 성능 최적화 팁 ⚙️

지연 로딩: 인라인 미리보기 영역에만 이미지 로드
헤더 캐시 설정: Supabase Storage에 캐시 정책 설정
WebP 변환 지원: 압축형식 추가로 전송 효율 향상 가능

7. 이미지 업로드 스크린샷 🖼️

마크다운 에디터에서 이미지를 삽입하고 싶은 위치에 커서를 두고, 툴바의 이미지 버튼을 클릭하면 아래와 같은 업로드 창이 나타납니다.

이미지를 업로드하면 자동으로 해당 위치에 삽입되며, 아래처럼 미리보기에서도 바로 반영된 모습을 확인할 수 있습니다.

✅ 요약

이미지 업로드 기능을 직접 구현해보니, 마크다운 에디터 활용이 훨씬 직관적이고 유연해졌습니다. 실제로 사용해보면서 느낀 점은, 개발 과정 자체가 꽤 재미있고 계속해서 개선 아이디어가 떠오른다는 점이었습니다. 앞으로도 사용자 경험을 중심으로 꾸준히 기능을 확장해갈 예정입니다.