코딩 공부를 시작하면서 뭔가 직접 쓸 수 있는 걸 하나 만들어보고 싶어서 위 도구를 만들었습니다. 사진 포맷을 바꾸거나 용량을 줄여야 할 때마다 매번 다른 사이트를 찾아 들어가는 게 번거로웠는데, 막상 만들고 보니 저부터 자주 쓰게 되네요. 아직 다듬을 부분이 많지만, 쓰시는 데 참고하시라고 사용법과 이미지 포맷 관련해서 알아두면 좋은 내용을 간단히 정리해봤습니다.
참고로 업로드한 사진은 어디로도 전송되지 않습니다. 변환, 리사이즈, 압축 모두 방문하신 분의
브라우저 안에서 바로 처리되고, 그 결과물만 다운로드로 받아가시는 구조라 서버 같은 곳에
따로 저장되는 파일은 없습니다. 개인적으로 이것저것 배우면서 만드는 중이라 완벽하지는 않을 수
있는데, 문제가 있으면 계속 고쳐나갈 생각입니다.
사용하는 방법
위쪽 탭에서 포맷 변환 / 리사이즈 / 용량 줄이기 중 하나를 먼저 고르고,
그다음 사진을 올리는 순서로 쓰시면 됩니다. 탭에 따라 아래 옵션이 조금씩 달라져요.
- 포맷 변환을 골랐다면 원하는 출력 포맷(JPG, PNG, WebP)만 고르면 끝입니다. 아이폰에서 찍은 HEIC 사진도 그대로 올리면 자동으로 인식해서 처리해요.
- 리사이즈는 가로/세로 최대 길이를 직접 입력하거나, 자주 쓰는 1920 / 1280 / 800px 버튼을 눌러도 됩니다. 원본보다 작은 사진을 올리면 억지로 늘리지 않고 원본 크기를 그대로 유지하도록 만들어뒀습니다.
- 용량 줄이기는 화질 슬라이더로 직접 조절하거나, "이 용량(KB) 안으로 맞춰줘"라고 목표치를 입력하면 그 아래로 떨어질 때까지 자동으로 화질을 조정합니다. PNG 사진을 올리면 WebP로 바꿔서 압축할지 물어보는데, PNG는 무손실 포맷이라 그냥 압축해서는 용량이 잘 안 줄기 때문이에요.
옵션을 다 정했으면 변환하기 버튼을 누르고, 결과가 마음에 들면 다운로드 버튼으로 저장하시면 됩니다.
사진이 큰 경우엔 처리하는 데 몇 초 정도 걸릴 수 있어요.
이미지 포맷, 뭐가 다른가요
변환할 포맷을 고를 때 이 차이를 알면 훨씬 도움이 됩니다. 제가 공부하면서 정리해본 내용이라
전문적인 설명은 아니지만, 실제로 쓸 때 판단 기준 정도로 참고하시면 좋을 것 같습니다.
JPG (JPEG)
사진 파일 하면 가장 먼저 떠오르는 그 포맷입니다. 색을 조금씩 손해 보는 대신 용량을 크게 줄이는 방식(손실 압축)이라, 사람 눈에는 큰 차이가 없으면서도 파일 크기는 훨씬 작아집니다. 배경이 투명해야 하는 로고나 아이콘이 아니라면, 일반적인 사진 용도로는 지금도 가장 무난한 선택입니다.
PNG
화질 손실이 전혀 없는 무손실 포맷이고, 배경을 투명하게 저장할 수 있다는 게 가장 큰 특징입니다. 로고, 캡처 화면, 글씨가 선명해야 하는 이미지에 잘 맞습니다. 다만 무손실이다 보니 사진처럼 색이 복잡한 이미지에서는 JPG나 WebP보다 파일이 훨씬 커지는 편이라, 일반 사진을 PNG로 들고 있다면 용량만 아깝게 차지하고 있는 경우가 많습니다.
WebP
구글이 만든 비교적 최근 포맷인데, 같은 화질 기준으로 JPG나 PNG보다 파일 크기가 작게 나옵니다. 투명 배경도 지원해서 PNG 역할까지 어느 정도 대신할 수 있어요. 블로그처럼 이미지를 많이 올리는 곳에서는 페이지 로딩 속도에 꽤 도움이 되는 포맷이라, 요즘은 이걸로 바꿔서 쓰는 경우가 늘고 있습니다.
GIF
움직이는 이미지로 익숙한 포맷이죠. 다만 표현할 수 있는 색의 개수가 256가지로 제한돼 있어서, 색이 풍부한 사진에는 잘 안 맞고 단순한 그림이나 짧은 애니메이션에 어울립니다. 이 도구에서는 GIF를 올리면 정지된 한 장면만 가져와서 변환하도록 되어 있고, 움직이는 GIF를 그대로 만들어주는 기능은 아직 없습니다.
HEIC
아이폰으로 사진을 찍으면 기본으로 저장되는 포맷입니다. 같은 화질이어도 JPG보다 용량이 훨씬 작아서 애플 기기 안에서는 효율적인데, 문제는 안드로이드나 일부 웹사이트, 오래된 프로그램에서는 아예 열리지 않는 경우가 많다는 점이에요. 그래서 아이폰 사진을 다른 곳에 올리거나 공유하기 전에 JPG나 PNG로 한 번 바꿔주는 경우가 많은데, 이 도구도 그 용도로 쓰시면 됩니다.
0 댓글