Skip to content

Hwirin-Kim/image-convertor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🖼️ 이미지 컨버터 (Image Converter)

로컬에서 사용하는 간단한 이미지 변환 도구입니다. 웹 브라우저 UI를 통해 여러 이미지를 한 번에 변환하고 지정된 폴더에 저장할 수 있습니다.

✨ 주요 기능

  • 다양한 포맷 지원: JPEG, PNG, WebP, AVIF, TIFF, GIF 간 상호 변환
  • 일괄 변환: 여러 이미지를 한 번에 변환
  • 품질/압축률 조절: 용도에 맞게 세밀한 조정 가능
  • 드래그 앤 드롭: 편리한 파일 선택
  • 한글 파일명 지원: macOS 한글 파일명 정상 처리

📦 설치

요구 사항

  • Node.js 18 이상

설치 방법

# 저장소 클론 또는 다운로드 후
cd image-convertor

# 의존성 설치
npm install

🚀 실행

npm start

서버가 시작되면 브라우저에서 접속:

http://localhost:4000

📖 사용법

1. 이미지 선택

![이미지 선택 영역]

  • 드래그 앤 드롭: 변환할 이미지 파일을 드롭존에 드래그
  • 클릭 선택: 드롭존을 클릭하여 파일 탐색기에서 선택
  • 여러 파일을 한 번에 선택 가능
  • 선택한 파일 목록에서 개별 파일 제거 가능

2. 변환 설정

출력 포맷

포맷 특징 추천 용도
WebP 우수한 압축률, 투명도 지원 웹용 이미지 (권장)
AVIF 최고의 압축률, 최신 포맷 최신 브라우저 타겟
JPEG 범용성, 손실 압축 사진, 일반 이미지
PNG 무손실, 투명도 지원 로고, 아이콘, 스크린샷
TIFF 고품질, 무손실 인쇄용, 아카이브
GIF 애니메이션 지원 간단한 애니메이션

품질 (Quality)

  • 범위: 1% ~ 100%
  • 기본값: 80%
  • 낮을수록: 파일 용량 ↓, 이미지 품질 ↓
  • 높을수록: 파일 용량 ↑, 이미지 품질 ↑

압축 레벨 (Compression Level)

  • 범위: 0 ~ 9 (포맷에 따라 다름)
  • 기본값: 6
  • 높을수록: 파일 용량 ↓, 변환 속도 ↓

3. 출력 폴더

  • 기본 경로: ./converted (프로젝트 폴더 내)
  • 원하는 경로로 변경 가능 (절대 경로 또는 상대 경로)
  • 폴더 열기 버튼으로 Finder에서 바로 확인

4. 변환 실행

  1. 이미지 선택 완료
  2. 포맷, 품질, 압축 레벨 설정
  3. "변환 시작" 버튼 클릭
  4. 결과 확인 (원본 파일명 → 변환 파일명, 크기, 해상도)

⚙️ 설정 옵션 상세

포맷별 옵션

JPEG

  • quality: 이미지 품질 (1-100)
  • mozjpeg: true (더 나은 압축률을 위해 mozjpeg 사용)

PNG

  • quality: 이미지 품질 (1-100)
  • compressionLevel: 압축 레벨 (0-9)
  • palette: 품질 50 미만시 팔레트 모드 자동 적용

WebP

  • quality: 이미지 품질 (1-100)
  • effort: 압축 노력 (0-6, 높을수록 더 좋은 압축)
  • lossless: 품질 100일 때 무손실 모드

AVIF

  • quality: 이미지 품질 (1-100)
  • effort: 압축 노력 (0-9)
  • lossless: 품질 100일 때 무손실 모드

📁 프로젝트 구조

image-convertor/
├── server.js          # Express 서버 + Sharp 이미지 처리
├── public/
│   └── index.html     # 웹 UI
├── converted/         # 변환된 이미지 저장 (기본)
├── package.json
└── README.md

🔧 API 엔드포인트

로컬 서버 API (고급 사용자용):

메서드 경로 설명
GET /api/output-dir 현재 출력 폴더 조회
POST /api/set-output 출력 폴더 변경
POST /api/convert 이미지 변환 (multipart/form-data)
POST /api/open-folder 출력 폴더 Finder에서 열기

🛠️ 기술 스택

  • Node.js - 런타임
  • Express - 웹 서버
  • Sharp - 고성능 이미지 처리 (libvips 기반)
  • Multer - 파일 업로드 처리

❓ 문제 해결

한글 파일명이 깨지는 경우

이미 해결되어 있습니다. macOS NFD 인코딩과 multer latin1 인코딩 문제를 자동으로 처리합니다.

포트가 이미 사용 중인 경우

server.js에서 PORT 값을 변경하세요:

const PORT = 4000; // 다른 포트로 변경

변환이 느린 경우

  • AVIF 포맷은 압축률이 높지만 변환 속도가 느립니다
  • 압축 레벨을 낮추면 속도가 빨라집니다

📝 라이선스

MIT License

image-convertor

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors