Image Format Converter 일지
브라우저 하나로 PNG, ICO, SVG, JPG, WebP 상호 변환. 설치 후 바로 쓰는 오프라인 이미지 변환기를 만들었습니다.
기능개발
ICO 바이너리 인코더
[목표]
Chrome 확장 아이콘 제작 시 매번 외부 사이트에 의존하는 게 불편했음
순수 JS로 ICO 파일을 직접 만들어서 외부 서비스 없이 변환하고 싶었음
[구현 요약]
ICO 포맷 스펙을 분석해 DataView로 ICONDIR + ICONDIRENTRY 헤더를 직접 작성
멀티사이즈 지원: 16/32/48/64/128/256px PNG를 하나의 ICO에 임베딩
Canvas API로 원본 이미지를 각 크기로 리사이즈 후 toBlob('image/png')으로 PNG 데이터 추출
단계적 다운샘플링(step-by-step halving)으로 고화질 유지
[결과]
아무 이미지 → 멀티사이즈 ICO 변환 1초 이내 완료
Chrome/Edge/Firefox 아이콘으로 바로 사용 가능한 ICO 파일 생성 확인
배치 ZIP 변환
[목표]
- 여러 파일을 한 번에 변환하고 ZIP으로 묶어서 다운로드하고 싶음
[구현 요약]
순수 JS로 ZIP 빌더 구현 (외부 라이브러리 없음)
CRC32 테이블 사전 계산, Local File Header + Central Directory + EOCD 레코드 수작업 조립
각 변환은 Promise 병렬 처리 (Promise.allSettled)
실패한 파일은 건너뛰고 성공한 것만 ZIP에 포함
[결과]
10장 이미지 배치 변환 → ZIP 다운로드까지 평균 2-3초
변환 실패 파일은 에러 표시 후 나머지 정상 처리
다국어 지원 (i18n)
[목표]
- Chrome Web Store 전 세계 배포를 위해 영어/한국어 동시 지원
[구현 요약]
Chrome i18n API(chrome.i18n.getMessage()) 적용
locales/en/messages.json, locales/ko/messages.json 작성 (40+ 키)
manifest.json에 default_locale: "en" 설정
HTML에 data-i18n 속성 추가, popup.js 시작 시 applyI18n() 일괄 적용
[결과]
브라우저 언어가 한국어면 한국어, 그 외엔 영어로 자동 전환
스토어 리뷰어도 영어로 정상 확인 가능
BUG
SVG 리사이즈 깨짐
[증상]
SVG를 PNG로 변환할 때 viewBox만 있고 width/height 속성이 없는 파일은 1×1 픽셀로 출력됨
[원인]
new Image()로 SVG를 로드하면 width/height가 0으로 반환됨. Canvas 드로잉 전에 크기를 따로 계산하지 않았음
[해결]
DOMParser로 SVG를 파싱해 viewBox 속성에서 width/height 추출 → Canvas 크기를 명시적으로 지정 후 렌더링
[회고]
SVG 스펙을 과소평가했음. viewBox, width, height, preserveAspectRatio 조합이 생각보다 많음. 엣지 케이스가 더 있을 수 있어서 v2에서 추가 대응 필요
ICO 디코더 — BMP 포맷 미지원
[증상]
일부 .ico 파일을 PNG 변환하면 빈 캔버스가 출력됨
[원인]
오래된 ICO 파일은 PNG 대신 BMP(DIB) 형식으로 이미지 데이터를 저장함. PNG-in-ICO만 처리하는 코드였음
[해결]
ICO 파일 내 이미지 데이터 헤더 확인 → PNG 시그니처(\x89PNG)면 PNG 경로, 아니면 DIB 헤더 파싱(32bpp/24bpp) 후 Canvas에 픽셀 직접 쓰기
[회고]
바이너리 포맷 작업은 스펙 문서를 먼저 완독하고 시작해야 함. 중간에 엣지케이스 발견하면 구조를 뜯어고쳐야 해서 시간이 배로 걸림
#developer #chrome-extension #javascript #opensource #imageconverter
