시선을 사로잡는 웹페이지 로딩 GIF 이미지

 

움직이는 애니메이션 로딩 GIF 모음

 

 

프로그램을 설치하거나 웹페이지를 불러올 때 우리는 로딩바 또는 프로그레스 바를 보게 됩니다. 로딩바는 정보를 제공하기 위한 처리시간을 그래픽으로 보여주는 것을 말하는데요. 로딩바가 있을 때에 사용자는 더 빠르게 진행되고 있다고 심리적으로 느껴지고 웹페이지가 멈추거나 오류가 난 게 아니라 처리되고 있음을 알 수 있습니다.

 

보통 로빙바의 형태는 진행과정을 1~100으로 수치로 보여주거나 시계, 사각형, 원형 등 으로 일반화 되어 있습니다. 하지만 굳이 이런식으로 표현할 필요는 없죠. 좀더 자유로운 이미지를 통해 기다리는 시간을 재밋고 집중할수 있게 하면 이탈자를 줄일수 있지 않을까요?

 

오늘은 움직이는 애니메이션으로 제작된 로딩 GIF를 소개해 드리겠습니다. 움직이는 GIF 특성상 방문자의 시선을 사로잡고 오랜시간 모니터를 응시할수 있도록 도와줍니다. 각 GIF 테마에 맞게 홈페이지에 사용하거나 블로그, 쇼핑몰에도 활용이 가능합니다.

움직이는 로딩 GIF로 흥미로운 로딩 페이지를 만들어 보세요.

 

 

 

 

 

 

 

 

 

Calming cat loading gif

 

귀여운 고양이 케릭터로 만들어진 로딩 이미지입니다.  웹사이트 또는 응용프로그램의 로딩 시간을 표현할때 유용한 자료입니다.

 

 

 

 

 

 

Stylish loading gif

 

매우 세련된 디자인으로 만들어진 로딩 gif로 화면전환과 움직이는 구름으로 재밋는 로딩 페이지를 제작할수 있습니다.

 

 

 

 

 

Shape changing loading gif

 

계속 변화되는 쉐이프 이미지로 오랜시간 시선을 사로잡을수 있는 로딩 gif입니다.

 

 

 

 

 

 

Loading gif for ecommerce

 

쇼핑백 모양의 로딩 이미지로 쇼핑몰에 관련된 웹사이트 제작에 유용한 소스입니다.

 

 

 

 

Flipping book loading gif

 

빠르게 책장을 넘기는 움직이는 gif로 서점 또는 전자책 회사에 적합한 자료입니다.

 

 

 

 

Pretty cool loading gif

 

조금 산만해 보이지만 다른 자료에 비해 역동적인 움직임으로 방문자의 시선을 사로잡을수 있는 gif입니다.

 

 

 

 

 

Bear climbing loading gif

 

곰이 반복적으로 계단을 올라가는 재밋는 로딩화면입니다.

 

 

 

 

 

 

Structure loading gif

 

도형을 분해했다가 다시 결합되는걸 반복적으로 보여주는 로딩화면입니다.

 

 

 

 

 

Hand draw loading gif

 

손으로 직접 그린것같이 자연스러운 움직임의 gif입니다.

 

 

 

 

 

 

Flat design loading gif

 

요즘 유행하는 플랫디자인 형태의 홈페이지에 유용한 로딩 이미지입니다.

 

 

 

 

<관련글>

2014/09/03 - 놀라운 인터랙티브 홈페이지 제작을 위한 HTML5 애니메이션 제작 도구

2014/08/28 - 홈페이지 사용자 인터페이스 제작에 유용한 포토샵 아이콘 모음

2014/08/20 - 웹제작에 유용한 홈페이지 버튼 디자인

2014/08/11 - 홈페이지 제작 비용을 절감시켜주는 무료 포토샵 소스 모음

2014/05/19 - 홈페이지 제작에 유용한 브라우저 도구 모음

 

이 글을 공유하기

댓글(14)

  • 2014.10.01 21:42 신고

    아주 잘 보고 갑니당! 가을의 기운을 얻어서 오늘도 즐거운 하루 되시길 바래요!

  • ㅇㅇ
    2014.11.04 18:54

    좋은 자료 감사합니다 근데;이거 다운로드는 어떻게 하는건가요?

  • angie
    2015.03.06 09:33

    좋은 자료네요~ 궁금한 것이 보통 이런 움직이는 gif는 어떤 툴로 만드는 건가요?

    • 2015.03.06 14:41 신고

      ^^ GIF는 보통 포토샵에서 만들지만 다른도구를 사용하셔도 됩니다.
      얼마전에 관련글을 썻는데요. 도움되셨으며 좋겠습니다.
      http://modangs.tistory.com/559

  • 김주환
    2016.06.08 14:51

    제가 디자인을 못해서..
    사용해도 괜찮을까요?

  • 개발자
    2016.06.17 10:19

    마우스 오른쪽 버튼 안 먹는데요?? ㅜㅜ
    아~~ 가져가고 싶다~~~

    • 2016.06.17 10:46 신고

      ^^ 마우스 우클릭 해제방법입니다. 참고하시면 원하시는 이미지 다운 받으실수 있으실꺼에요.

      http://modangs.tistory.com/729

  • 2017.01.22 14:02 신고

    좋은자료 감사합니다~
    혹시 상업적인 용도로 사용하면 안되나요??

  • 윤하
    2017.08.14 11:42

    출처 알 수 있을까요? 상업적으로 사용하고 싶은데 정확한 라이센서 확인하고 싶어서요 !

    • 2017.08.14 14:40 신고

      흠 너무 오래된 자료라 정확한 출처는 알수가 없네요. 웹에 떠도는 자료라 딱히 라이센스가 없는걸로 알고있습니다.

Designed by JB FACTORY