오늘은 webp로 움짤을 만들어 보는 것을 한번 소개해 보려고 합니다.
현재 이 게시물도 크롬으로 보시면 움직이는 webp를 보실 수 있습니다.
그리고 비교를 위해 gif를 첨부했습니다.
용량은 각각 webp가 452kb, gif가 1.8메가 입니다.
(gif를 webp와 동등한 해상도로 할 때는 도저히 용량이 커버가 안되어서 어쩔 수 없이 팍 줄였습니다.)
보시는 것 처럼 gif가 훨씬 용량이 크지만 =_= 화질은 훨씬 떨어지는 것을 알 수가 있습니다.
이런 고퀄의 webp 움짤을 만들어 보려고 하는 것입니다.
물론 시중에 webp움짤을 만들어주는 웹사이트가 있긴 하지만,
보통 gif 를 주면 webp 로 변환해주는 형태라서, webp 의 무지막지한 압축률이라는 장점은 누릴 수 있지만.
이미 심하게 열화된 gif 의 화질을 어찌할 수는 없기 때문에 webp 움짤만의 장점인,
고퀄 움짤은 포기할 수 밖에 없게 됩니다.
저 머나먼 인터넷 세상 저편 어디엔가 동영상을 webp 움짤로 바로 만들어주는 도구가 있을법은 한데,
애석하게도 제 지식이 짧아 그런 도구를 발견하지 못한 관계로 그런 도구를 아시는 분은 댓글로 "제보"부탁 드립니다.
그리하여 오늘 소개하려는 webp 움짤 만들기는 아주 기초적인 webp 저작도구를 이용하는 방법입니다.
webp는 구글에서 내세우고 있는 차세대 이미지 포멧인데, 아직 까지는 실험용으로써의 성격이 강해서 크롬을 비롯한 일부 브라우저에만 적용되어 있고.
그 중에서도 "webp 움짤"은 최신 크롬 브라우저에서만 지원되고 있습니다.
(다행히 모바일 크롬에서도 chrome://flags 에서 #enable-experimental-web-platform-features 를 켜면 사용 가능합니다.)
그러다 보니 멋지구리한 저작도구가 존재하는게 아닌 콘솔에서 사용하는 "이렇게 하면 만들 수 있다!"수준의 툴을 제공하고 있습니다.
자 우선 그 툴을 다운 받아 봅시다.
여기에서 자신의 운영체제에 맞춰서 골라잡아야 합니다.
윈도유저라면,
libwebp-0.4.0-windows-x64.zip 혹은 libwebp-0.4.0-windows-x86.zip 를 다운 받으시면 되고,
맥유저라면,
libwebp-0.4.0-mac-10.8.tar.gz 혹은 libwebp-0.4.0-mac-10.7.tar.gz 를 다운 받으시면 됩니다.
그리고 압축을 풀어보면 bin 이라는 폴더가 그 안에 있는데.
필요한건 그 안에 다 있습니다.
레알 우리에게 주어지는 것은 이게 다입니다. -0-
자 여기서 다른 녀석들은 볼 필요 없고,
우리는 cwebp와 webpmux라는 녀석을 봐야합니다.
cwebp 는 jpg 이미지를 webp로 변환해주는 프로그램이고,
webpmux 는 webp 파일을 묶어서 움짤로 만들어 주는 프로그램입니다.
(윈도유저라면 cwebp.exe 와 webpmux.exe 겠죠)
아무런 이쁘장한 툴이 없기 때문에 맥/리눅스라면 터미널에서,
윈도 유저라면 일명 "도스창"이라는 녀석으로 작업을 해야 합니다.
그 전에!!!
먼저 움짤을 만들기 위한 이미지 부터 준비해야겠죠?
gif 가 아닌 동영상에 바로 뽑아내는 고퀄의 움짤을 만들려고 하는 것이니,
1. 먼저 동영상을 준비합니다.
: 전 그래서 엘사 여왕의 머리 푸는 씬을 준비했습니다.
2. 그리고 움짤로 만들려는 씬을 잘라냅니다.
3. 움짤로 만들려는 신에서 이미지를 추출해 냅니다.
윈도에서는 다음팟의 연속영상캡쳐를 쓰실 수 있습니다.
이렇게 해서, 만약 20프레임 짜리 움짤이라고 하면,
ani1.jpg
ani2.jpg
ani3.jpg
ani4.jpg
...
ani20.jpg
이런식으로 이미지가 준비를 하면 됩니다.
적절한 해상도로 바꾸거나 JPEGCrops등으로 배경등을 크롭하면,
화질에 손상을 줄이면서 용량은 적게 가져갈 수 있으니,
(클리앙 업로드에는 용량제한이 있습닏.. OTL...)
적당히 편집하는 것도 좋습니다.
자 이제 이것을 webp로 바꾸시면 됩니다.
이건 상대적으로 간단합니다.
cwebp [jpg파일이름] [webp파일이름]
으로 하면 webp 파일이 만들어집니다.
즉,
cwebp ani1.jpg ani1.webp
cwebp ani2.jpg ani2.webp
cwebp ani3.jpg ani3.webp
...
cwebp ani20.jpg ani20.webp
를 통해서
ani1.webp
...
ani20.webp
를 만들어 낼 수 있습니다.
자 이제, 20장의 움짤용 프레임이 준비되었으니, 움짤을 만들차례입니다.
아... 그런데 이게 참 거시기 합니다.
webpmux 가 바로 각 프레임을 합쳐서 움짤로 맹글어 주는 녀석인데,
webpmux -frame ani1.webp +55+0+0 -frame ani2.webp +55+0+0 -frame
ani3.webp +55+0+0 .... -frame ani20.webp +55+0+0 -loop 0 -o ani.webp
이런식으로 무지막지하게 길게 frame을 나열해 주어야합니다.
각 옵션에 대해서 설명을 듣리자면
-frame 이라고 주면 하나의 프레임에 대해서 설정을 추가하겠다는 의미입니다.
고로 -frame 이 프레임 개수 만큼 주어지게 됩니다.
각 프레임의 설정은,
-frame [webp파일명] +[시간]+[x]+[y]
이 되는건데 프레임이 지나가면서 =_= 위치가 자꾸 바뀔거 아니라면 x축 y축은 그냥 0으로 두면 됩니다.
옛날에는 순서가 틀렸던건지 잘못 설명한건지 =_= 어디에서는 시간축을 맨뒤로 설명한 게시물이 있더군요;
어쨌든 +55+0+0 이란 것은 프레임간 시간 간격이 55인 움짤을 만들 겠다는 의미가 됩니다.
즉 움짤의 속도를 조절하는 부분이 55인데, 이걸 너무 짧게 잡으면 아얘 옵션자체가 무시되어서...
프레임이 뚝뚝 끊기는 움짤이 되므로 적정 속도를 유지해주어야 합니다.
-loop 0 이라는 것은 무한반복을 의미하고,
-o ani.webp 는 각 프레임을 다 합쳐서 ani.webp 라는 파일을 만들겠다는 의미가 되죠,
그런데 =_= 이걸 수작업으로 하기에는 너무너무 곤욕인 관계로 아래처럼 스크립트를 짰습니다.
쉘스크립트인 관계로 윈도에서라면 cygwin을 써야 합니다.
ㅠㅠ 이거 때문에, 이 강좌를 올릴까 말까 갈등을 때렸습니다.
(아니!! 윈도 기준이라면서 쉘스크립트라니!!!)
덕분에 맥이나 리눅스에서는 오히려 편하실 겁니다;;;
---------------------------------------------------
animake.sh
---------------------------------------------------
# avi에서 jpg 추출은 AVI decomposer로
jpg_name="ani"
webp_name="animate"
start=8
end=87
# convert
idx=$start
c=""
while [ $idx -le $end ]
do
cfile=${file%_*}
c="../cwebp "$jpg_name$idx".jpg -o f"$idx".webp"
$c
(( idx++ ))
done
# combine
idx=$start
c="../webpmux"
while [ $idx -le $end ]
do
cfile=${file%_*}
c+=" -frame f"$idx".webp +55+0+0"
(( idx++ ))
done
c+=" -loop 0 -o "$webp_name".webp"
$c
-----------------------------------------------------
jpg_name에는 원본 jpg의 이름 앞부분을 설정해 주고,
webp_name에는 최종 webp의 이름을 설정해 주면 됩니다.
즉 위 처럼 ani, animate로 설정되어 있으면
ani8.jpg ani9.jpg .... ani87.jpg 를 묶어서 움짤 animate.webp 를 만들어줍니다.
중간 산출물로 움직이지 않는 f8.webp f9.webp .... webp87.webp 가 생성되고요.
start와 end에 설정해주는 것이 몇번 부터 몇번 이미지 까지를 합쳐서 움짤을 생성할 것인가를 조정해 주는 부분입니다.
스크립트 내용을 보시면 아시겠지만,
bin 폴더에 cwebp, webpmux 가 있다면, 이미지 폴더는
bin/image/ 처럼 bin 하위 폴더가 되는거고...
이미 폴더에서 위 스크립트를 실행하면 바로 상위의 cwebp와 webpmux를 실행해서 움짤을 만들어 줍니다.
마지막 팁으로,
그렇게 생성한 webp를 클리앙에 올릴 때는,
ani.webp.jpg 라고 뒤에 .jpg 확장자를 붙여서 올리면,
클리앙 사이트에서 이미지로 인식해서 이미지 태그로 올려주기 때문에 다시 본문을 고치는 뻘짓을 안해도 됩니다;;;
--
출처 : https://www.clien.net/cs2/bbs/board.php?bo_table=lecture&wr_id=209676