목차
WebP란 무엇인가?
WebP는 구글에서 개발한 고성능 이미지 포맷입니다. 웹 페이지에서 이미지를 빠르게 로드하기 위해서 개발되었습니다. 기존의 JPG보다 압축률을 향상시켰습니다. WebP로 변환하면 페이지 로딩 속도가 빨라져서 방문자 성과를 높이는데 도움이 됩니다. 실제로 유튜브에서 이미지 미리보기를 WebP로 변환하면 페이지 로딩 속도가 10% 증가한다고 합니다.
WebP는 2010년에 발표되어 현재 대부분의 브라우저에서 지원을 합니다. 즉 부담없이 사용하셔도 됩니다.
WebP 변환 단계별 가이드
맥OS에서 명령 줄 인터페이스 (CLI)를 사용하여 이미지를 webP 이미지로 변경할 수 있습니다. CLI를 사용하면 작업시간을 크게 단축시킬 수 있고, 여러가지 자동화를 할 수 있습니다. 따라서, CLI를 이용하여 맥OS에서 어떻게 webP를 변환하는지 단계별로 알아보겠습니다.
Homebrew 설치
brew는 맥을 사용하는 사람이라면 반드시 설치해야 하는 필수 도구 입니다. Terminal 에서 간단한 명령어로 설치할 수 있습니다.
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
WebP CLI 도구 설치
Homebrew 설치가 완료되었다면, brew 를 이용하여 webp 도구를 설치할 수 있습니다. 다음 명령어를 실행하여 설치합니다.
brew install webp
설치가 완료되면, cwebp 라는 명령어가 설치됩니다. which 명령어로 설치된 것을 확인할 수 있습니다.
which cwebp
이미지 변환 명령어
모든 준비가 끝났습니다. 사용방법은 매우 간단합니다. 원본 이미지를 준비하고, 다음과 같이 사용하면 됩니다.
cwebp [source.jpg] -o [dest.webp]
예를 들어, image.jpg 를 image.webp로 변환하고자 할때 아래와 같이 입력합니다. 명령어는 webp 가 아니라, cwebp 입니다. ‘convert to webp’를 나타내는 말인 것 같습니다.
cwebp image.jpg -o image.webp
실제로, 1280 x 1280 이미지의 jpg 를 webp 로 변환했을때 파일 변화입니다. 180KB 에서 44KB로 바뀐 것을 확인할 수 있습니다.
꿀팁: 이미지에서 마우스 우클릭으로 실행하기
webp 도구가 설치되었다면, 매번 Terminal에서 명령어를 입력하는 것이 아니라, 이미지 파일 위에서 마우스 우클릭으로 이미지를 변환한다면, 작업 속도도 훨씬 빨라질 것 같습니다.
Automator를 이용하면 마우스 우클릭을 이용하여 간단히 변환할 수 있도록 할 수 있습니다.
cwebp 설치가 완료되었나요? 아래 절차를 따라 Context Menu에 추가하세요.
Automator 실행
Spotlight 에서 automator라고 입력하면 실행이됩니다.
Quick Action 선택
automator 실행후, Quick Actions을 선택합니다.
Workflow를 설정합니다.
상기 그림과 같은 모양이고, 우측 상단의 선택은 아래와 같습니다.
image files , Finder.app , Action
좌측의 Actions중 Utilities > Run Shell Script 를 Drag&Drop 합니다.
대략 아래와 같은 그림이 됩니다. Shell 부분에 해당 명령어를 입력해야 합니다.
Pass input 옵션을 아래와 같이 되어 있는지 확인합니다. (as arguments)
위의 그림에서 나온 코드는 아래와 같습니다. 아래 코드에서 cwebp의 위치는 설치된 위치의 절대경로입니다. which cwebp로 위치를 확인할 수 있습니다.
for FILE in "$@" do echo "converting file: $FILE" /opt/homebrew/bin/cwebp "$FILE" -o "$FILE.webp" done
위의 Shell은 어떤 파일에서 변환되었는지를 확장자에 남깁니다. 예를 들면, image.jpg 를 변환하면, 파일명이 image.jpg.webp 처럼 됩니다. 만약 이전 확장자를 남길 필요가 없다면, 아래 Shell을 이용하세요.
for FILE in "$@"
do
echo "converting file: $FILE"
/opt/homebrew/bin/cwebp "$FILE" -o "${FILE%.*}.webp"
done
저장합니다.
Context Menu에 나올 이름으로 저장하면 됩니다.
테스트합니다.
이제 이미지 위에서 마우스 우측 버튼을 누르면, Quick Actions 하위에 Convert to WebP 라는 메뉴가 생성된 것을 볼 수 있습니다.
이미지를 여러개 선택해서 클릭해도 한번에 변환이 됩니다.
이로써, 웹 스피드도 잡고, 생산성도 잡았습니다.
이것 저것 다 귀찮다면?
이렇게 brew 설치도 귀찮고, Automator 세팅도 귀찮은 경우, 게다가 맥 컴퓨터가 아닌 경우는 어떻게 할까요?
온라인에서 drag&drop으로 바로 변경할 수 있는 방법이 있습니다.
지속적으로 업데이트하여 개선할 예정입니다.
버전 정보는 이 곳에서 확인하실 수 있습니다.
