Frontend Note의 글은 공개 프로젝트인 img-compressor를 기준으로 작성한 구현 기록입니다. 아래 주제별 목록에서 브라우저 이미지 처리, 상태 설계, 성능, 접근성, 테스트 글을 이어서 볼 수 있습니다.
Canvas, FileReader, Object URL, WebP 변환처럼 브라우저 안에서 파일을 다루는 구현 기록입니다.
img-compressor의 Canvas 처리 함수를 따라가며 FileReader, 비율 유지 리사이즈, toBlob, File 생성, 실패 처리를 하나의 파이프라인으로 정리합니다.
URL.createObjectURL로 만든 미리보기와 다운로드 링크를 언제 revoke해야 하는지, 다중 이미지 처리 화면을 기준으로 정리합니다.
이미지를 줄일 때 가로세로 크기, 인코딩 품질, 처리 시간을 따로 보지 않고 함께 판단해야 하는 이유를 정리합니다.
초기 번들, Web Worker, 처리 시간, 결과 측정처럼 이미지 도구의 반응성을 점검하는 글입니다.
파일을 선택하기 전에는 무거운 압축 라이브러리를 불러오지 않고, 처리 중에는 진행 상태와 다운로드 가능한 결과를 분리한 구현을 살펴봅니다.
압축 라이브러리를 동적으로 불러오고 useWebWorker 옵션을 켜는 이유를 UI 반응성과 실제 검증 범위 중심으로 정리합니다.
고정 테스트 자산, 품질값, 출력 바이트, 감소율을 기준으로 결과를 비교하는 기록입니다.
사진, 스크린샷, 투명 그래픽에 같은 포맷 전환을 적용하지 않고, 고정 자산과 인코더 정보를 함께 남긴 img-compressor의 측정 기록을 해석합니다.
사용자가 압축 결과를 판단할 수 있도록 원본 바이트, 출력 바이트, 감소율, 포맷 정보를 함께 표시하는 기준입니다.
img-compressor 프로젝트를 바탕으로 구현 의사결정을 전체 흐름으로 정리한 글입니다.
서버 업로드 없이 이미지를 줄이는 도구에서 리사이즈, 압축, WebP 변환, 다운로드 상태를 어떻게 나눴는지 공개 코드와 측정 자산을 기준으로 기록합니다.
다중 파일 처리, 진행 상태, 결과 목록, 개별 변환 상태를 나누는 화면 설계 기준입니다.
img-compressor에서 여러 이미지를 순서대로 처리하며 진행률, 결과 카드, 개별 변환 상태를 나눈 기준을 실제 컴포넌트 흐름으로 정리합니다.
품질 옵션, 기본값, 포맷 선택처럼 사용자가 이해할 수 있는 도구 정책을 다룹니다.
압축률을 크게 보이게 만드는 대신 품질값, 최대 크기, 포맷 전환 기준을 제한한 이유를 실제 벤치마크와 사용자 판단 흐름으로 정리합니다.
파일 읽기 실패, 이미지 디코딩 실패, 변환 실패를 사용자 흐름에서 안전하게 처리하는 방법입니다.
파일 읽기, 이미지 디코딩, Canvas 변환, 다운로드 URL 정리까지 브라우저 이미지 도구에서 반려하면 안 되는 실패 흐름을 정리합니다.
파일명, 다운로드, 결과 카드처럼 사용자가 압축 결과를 실제로 쓰는 과정을 정리합니다.
브라우저에서 만든 압축 파일을 다운로드할 때 확장자, 원본 이름, WebP 변환 결과를 사용자가 헷갈리지 않게 나누는 기준입니다.
압축 도구 화면이 모바일과 데스크톱에서 깨지지 않도록 배치하는 기준입니다.
파일 입력, 옵션 영역, 결과 카드가 작은 화면에서 겹치지 않도록 구성할 때 확인해야 할 레이아웃 기준을 정리합니다.
파일 입력, 버튼 이름, 처리 중 메시지, 결과 카드의 접근성 점검 항목입니다.
파일 선택 영역, 버튼 라벨, 처리 중 메시지, 결과 카드가 키보드와 스크린리더 흐름에서 이해되는지 확인하는 기준입니다.
클라이언트 이미지 도구 배포 전 확인해야 할 파일 유형, 브라우저, 다운로드 테스트입니다.
파일 형식, 크기, 실패 케이스, 모바일 화면, 다운로드 흐름까지 브라우저 이미지 도구 배포 전 확인할 테스트 계획입니다.
프로젝트 기반 기술 글에서 코드 근거와 한계를 남기는 작성 기준입니다.
프로젝트 기반 기술 글이 단순 요약처럼 보이지 않도록 원본 코드, 테스트 자산, 측정 조건, 한계를 함께 적는 기준입니다.