<aside>

이미지를 서버에 보내지 않고 브라우저에서 용량과 형식을 바꾸는 웹 도구입니다.

여러 이미지를 선택해 JPG·PNG·WebP로 변환하고, 자주 쓰는 설정을 저장할 수 있습니다.

</aside>

기본 정보와 역할

• 기간·형태: 2026.05부터 진행 중인 1인 개발 프로젝트
• 담당: 이미지 압축 화면과 처리 기능, 설정 저장, 결과 안내 및 검증
• 주요 기술: HTML, CSS, JavaScript, 브라우저 이미지 처리 기능(Canvas), 브라우저 저장소(localStorage)
• 서비스: 이미지 압축 도구 열기

왜 만들었나요?

사진 용량을 줄이기 위해 별도 프로그램을 설치하거나 원본을 외부 서버에 보내는 일이 부담스러울 수 있습니다. 이미지 선택부터 변환, 다운로드까지 브라우저 안에서 끝내고, 반복 작업에서도 같은 설정을 쉽게 사용할 수 있도록 만들었습니다.

실제 화면

2026.09.10 실제 서비스에서 직접 캡처한 이미지 선택 화면입니다. 파일 선택, 설정, 다운로드 순서로 작업합니다.

기존 화면 자료

핵심 문제 해결

1. 원본 이미지를 외부에 보내지 않고 처리하기

브라우저가 파일을 읽고 이미지를 변환해 다운로드 파일을 만들도록 구성했습니다(File·Canvas·Blob API). 이미지 압축을 위한 서버 업로드 없이 사용자의 브라우저 안에서 작업이 끝납니다.

2. 압축 작업과 설정 관리를 구분하기

메인 화면은 세 단계로 나누되 이전 단계로 돌아가 수정할 수 있게 했습니다. 자주 쓰는 품질·크기·파일명 설정은 별명으로 저장하고, 관리 기능은 별도 페이지로 옮겨 압축 화면이 복잡해지지 않도록 했습니다. 설정은 브라우저에 저장되므로 사이트 데이터를 지우면 사라질 수 있다는 점도 안내했습니다.

3. 현재 결과를 믿고 내려받을 수 있도록 안내하기

설정을 바꾸면 ‘재압축 필요’를 표시하고, 다운로드한 항목에는 완료 상태를 보여줍니다. 결과 파일이 더 커지면 ‘0% 절감’ 대신 실제 증가율을 표시하도록 수정했습니다. 사용자가 현재 결과와 설정이 일치하는지 판단할 수 있게 하는 데 집중했습니다.