워드프레스에 애니메이션 넣는 법

👇워플 추천 영상👇

1. 가장 대중적인 – GIF

1-1 GIF 란?

예전부터 가장 일반적으로 쓰이는 애니메이션 파일형식 입니다. Graphics Interchange Format의 약자로, 흔히 ‘움짤’이라는 단어로 많이 불립니다.

TV 애니메이션 처럼 각 움직임마다 이미지 프레임이 있고, 프레임을 빠르게 재생시켜 움직이지는 것처럼 보이게 하는 방식입니다. 프레임이 많을 수록 재생시간이 길수록 용량이 늘어납니다.

이미지를 업로드할 수 있는 곳에는 어디든 웬만하면 GIF 애니메이션을 보여줄 수 있습니다. 가장 대중적인 애니메이션 파일형식인 만큼, 온라인에서 구할 수 있는 자료의 양도 많습니다.

1-2 워드프레스에 GIF 넣기

워드프레스에 GIF 업로드하는 방법은 아주 간단합니다. 이미지를 올리는 방법과 똑같습니다. 이미지 블록을 이용해서 이미지 대신 GIF 파일을 업로드 하면 끝입니다.

Image(Adv)

워드프레스 카덴스 테마 이미지 넣는 법 완벽 정리.zip
이미지 첨부를 해본적이 없으신 분은 위에 링크를 보고 따라하시면 쉽습니다.

1-3 무료 GIF 공유 사이트

8462개 이상 무료 애니메이션 GIF및 스티커 다운로드 – Pixabay

상업적 사용을 위한 무료 애니메이션 GIF

Gif 이미지 – Freepik에서 무료 다운로드

1-4 GIF 장단점

장점

– 가장 많이 쓰이는 애니메이션 파일형식인 만큼, 직접 만들지 않더라도 구할 수 있는 소스의 양이 어마어머함.

– 이미지 업로드가 가능한 곳이면 대부분 호환이 된다.

단점

– 재생길이나 화질에 비례해서 용량이 늘어나고 로딩속도가 길어짐

– 위의 용량문제 때문에 프레임을 최대한 적게, 작은 크기로 제작 해야함

– 용량 문제로 고퀄리티의 부드러운 애니메이션 용도로는 부적합함

2. 다소 생소한 – 로티 애니메이션

2-1 로티 애니메이션

일반인들에겐 잘 쓰이지 않는 애니메이션 형식입니다. 주로 전문 디자이너나 기업에서 씁니다. GIF 보다는 접근성이 떨어지지만, 그 만큼 전문적이고 질이 좋은 애니메이션 입니다. 전문가들이 선호하는 이유가 있답니다.

Lottie 로티는 숙박업 기업으로 유명한 Airbnb에서 개발한 오픈소스입니다. json기반의 벡터 이미지 애니메이션 입니다. 로티 애니메이션은 모르는 사람은 많아도 본적이 없는 사람은 없을겁니다. 토스, 카카오톡, 넷플릭스 등 수 많은 앱에서 볼 수 있는 애니메이션 효과들은 로티 애니메이션 입니다. 로티 애니메이션은 수 많은 기업과 프로그램에서 널리 쓰이고 있습니다.

2-2 로티 애니메이션의 강점

선명한 화질, 크기조절에도 유지되는 해상도

: 로티 애니메이션은 벡터 방식입니다. 디지털 화면에서 보는 일반적인 이미지들은 무수히 많은 점 같은 픽셀 조각들이 모자이크 그림처럼 모여서 보여주는 비트맵 방식을 씁니다. 픽셀 1개마다 데이터를 가지고 있어서 이미지가 크기가 클수록 해상도가 높을 수록 용량도 비례해서 커집니다.

벡터 방식은 수학적 방정식을 사용해서 이미지를 보여주는 방식입니다. 모자이크처럼 픽셀을 모아서 이미지를 나타내는 것이 아니라 좌표, 각도 등 수학적 데이터가 이미지를 구성합니다. 이미지 크기를 늘리더라도 늘어난 크기에 비례해 이미지를 구성하는 수학 데이터가 자동으로 계산되어 늘어난 크기 만큼 해상도가 깨지지 않고 선명하게 그대로 유지 됩니다.

로티 애니메이션은 벡터 기반의 애니메이션이기 때문에 이런 벡터의 이점을 그대로 받습니다. GIF

작은 파일 크기

: 벡터 방식은 위에서 설명한 수학적 방정식 데이터 기반이기 때문에 비트맵 방식에 비해 용량이 월등작습니다. 비트맵 이미지에 비해 더 선명하고, 용량은 더 작습니다.

GIF (1,113 kb)

Lottie (63 kb)

부드러운 프레임 움직임

: GIF에서 부드러운 움직임을 표현하려면 그만큼 촘촘한 프레임이 있어야 합니다. 프레임 갯수에 비례해 용량이 늘어나기 때문에 부드러울 수록 용량도 그 만큼 커집니다.

하지만 로티는 그렇지 않습니다. 벡터 방식이기 때문에 A좌표에서 B좌표로 이동한다는 명령어 하나만 있다면 프레임 갯수와 관계 없이 이동 명령 데이터 하나로 부드러운 움직임을 표현합니다. 벡터 이미지의 이점으로 애니메이션 동작을 이질감 없이 아주 수월하고 부드럽게 표현할 수 있습니다.