giphy, gif를 업로드하고 만들고 찾고 암튼 animated한 gif 공유사이트

giphy라는 사이트가 있다.

gif를 업로드하는 사이트인데, 여느 sns처럼 공유하는 역할도 한다.

gif는 사진 여러 장을 하나의 개체로 묶은 것으로 흔히들 #움짤로 통한다.

요즘은 용량이 큰 동영상, 대표적으로 유튜브가 성행하여 gif는 대개 음성적인 곳에서 활동하게 되었지만 예전에는 홈페이지 제작을 주제로 한 강의에서 주요 주제로서 많이 애용되었었다.

필자는 최근에도 사용하고 있다.

동영상이 아무리 상용화 되었어도 아직까지는 별 다른 내용이 아닌 짧은 컨텐츠를 동영상에 업로드하기에는 어색하다. 또한 동영상은 데이터도 많이 잡아 먹고 일부러 재생해야 된다는 단점을 가지고 있어 자연스럽게 게시글에 썩여 들어 갈 수 있는 gif를 선호한다.

더군다나 티스토리 블로그 같은 경우 업로드 파일 하나 용량을 10mb로 제한하고 있다.

요즘 영상은 주로 스마트폰으로 찍고 그 영상들은 고품질을 자랑하고 있어

(동영상에 대항하기 위해서는 품질을 그에 준하게 유지 해야 한다.)

10mb는 그냥 넘는다.

지난 번에 <img>를 소개한 적이 있다.

이미지 태그의 소스에 외부 url을 기입하면 외부 이미지를 가지고 올 수 있는데,

용량 크기가 큰 gif를 업로드하고 이에 대한 이미지 소스를 쉽게 받을 수 있는 사이트가 giphy다.

2019/04/05 - [각 종 it/티스토리 등 프로그래밍] - 외부 이미지 내 웹페이지에 달기(페이스북 이미지 이용)

물론 페이스북 같은 기타 사이트에 업로드 해도 되지만 소스를 별도로 제공하지 않기 때문에 굳이 사용하려 하면 소스 전체를 살펴봐야한다는 불편함이 있다. 그에 반면

giphy는 각종 링크를 제공 해 주는데, <img>의 src를 이용하기 번거롭다면 embed를 애용하면 된다.

아이프레임 형식으로 밑에 via giphy라는 단어가 붙는 것 빼고는... 뭐 나쁘지 않다. 위의 리스폰시브(on or off)는 아이프레임을 div로 감싸서 가로 크기에 맞게끔 자동으로 이미지 크기를 변경 시켜주는 기능을 한다. 대충 소스를 보니,

<div style="width:100%;height:0;padding-bottom:57%;position:relative;">
<iframe src="https://giphy.com/embed/fVJ0PWMQncZKNfLpSq" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
</div>

<p><a href="https://giphy.com/gifs/fVJ0PWMQncZKNfLpSq">via GIPHY</a></p>