본문 바로가기
티스토리 Tip

[티스토리 로딩 화면 만들기 1] 로딩 이미지 다운 사이트 모음.

by MadebyAn 2022. 1. 5.
반응형

일반적으로 인터넷 서핑을 하다보면 인터넷 환경에 따라 다양하게 나타나는 로딩화면을 볼 수 있죠.

 

가장 일반적인 로딩화면이 바로 모래시계 로딩화면인데요.

 

수익형 블로그에서 블로그의 글은 모두 떴는데, 정작 필요한 광고가 느리게 뜨는 일이 빈번하게 발생하고 있습니다.

이럴때 로딩 이미지를 넣어 블로그에 방문한 유저가 해당 글의 광고가 모두 뜰때까지 살짝 기다리게 함으로써 광고가 모두 뜬 글을 읽을 수 있도록 해주어야 합니다.

 

그럼 바로 블로그 로딩 화면을 만드는 방법을 알려드리기 전에 로딩 화면에 적용을 할 로딩 이미지를 먼저 만들거나 구해야합니다. 다행히도 인터넷 세상에는 정말 다양한 로딩 이미지들을 무료로 제공해주고 있는 사이트들이 많이 있습니다. 이 말은 내가 힘들게 로딩 이미지를 만들 필요가 없다는 의미입니다.

 

일단 다양하게 존재하는 로딩이미지를 먼저 찾아보고, 맘에 드는 이미지가 있으면 사용하면 됩니다. 하지만, 엄청나게 까다로운 분이시라면 포토샵등을 이용하여 직접 만드는 것을 권장드립니다^^

 

★ 구글 검색창에서 한글로 "로딩이미지" or "loading gif" 검색하면 다양한 로딩이미지를 찾을 수 있습니다.

그래도 좀더 다양한 것들을 얻기 위해서는 "로딩이미지"로 검색을 하는 것 보다는 영문으로 "loading gif"를 입력하는 것이 실제적으로 도움이 되는 다양한 사이트들을 볼 수 있습니다.

 

 

☆ 몇가지 추천 사이트들을 알려드릴께요.^^

 

1. https://icons8.com/preloaders/

 

Preloaders.net - Loading GIF, SVG & APNG (AJAX loaders) generator

More than 1000 free and premium ajax loader (loading animated GIF, SVG and APNG) spinners, bars and 3D animations generator for AJAX and JQuery

icons8.com

다양한 로딩 이미지를 제공하는 사이트입니다. 

당연히 사용가능한 무료 이미지들이 많이 있습니다. 

 

있는 그대로 다운로드도 가능하고, 선택한 이미지를 원하는 대로 사용자가 편집이 가능합니다.

위의 이미지를 보면 알 수 있듯이 전경색, 배경색 변경도 가능하고, 애니메이션 속도, 아이콘 너비와 높이도 조정이 가능합니다. 여러가지 추가 편집을 한 후 수정 및 편집한 사항들을 적용시키기 위해서는 Generate 버튼을 누르면 적용이 된 이미지를 우측화면에 볼 수 있으며, GIF or APNG 파일을 Download 버튼을 누름으로써 다운로드를 할 수 있습니다.

 

2. https://loadingapng.com/

 

Loading APNG free online generator

select animation template

loadingapng.com

이 사이트 역시 다양한 로딩 이미지를 제공하는 사이트입니다.

원형과 막대형등의 다양한 스타일의 로딩이미지를 제공하고 있습니다.

이 사이트 역시 있는 그대로 다운로드가 가능하고, 선택한 이미지를 원하는 대로 사용자가 편집이 가능합니다.

 

형태는 첫번째 사이트와 크게 다르지 않은 모습입니다.

사용자가 원하는 형태의 로딩이미지를 선택하여 편집하여 생성한 이미지를 다운로드하는 방식입니다.

 

 

3. http://www.loadinfo.net/

 

Load Info - gif generator

 

www.loadinfo.net

다양한 종류의 로딩이미지들이 있고 그중에 선택을 하면 전경색과 배경색을 변경할 수 있으며, 이미지의 사이즈도 3가지 종류로 변경이 가능합니다. 또한 프레임 속도도 변경할 수 있 있습니다. 편집 후 GIF 파일로 다운로드가 가능합니다.

 

4. http://ajaxloadingimages.net/

 

AJAX Loading Images - Free Online GIF Icons Generator

Select the indicator above; Set foreground and background colors, select size if available; Click the "Generate Preview" button;

ajaxloadingimages.net

이 사이트 역시 앞에 설명드린 사이트들과 크게 다르지 않은 형태를 나타내고 있습니다.

로딩이미지가 다른 사이트들에 비해 많이 있지 않지만, GIF, SVG, PNG등의 다양한 파일형태를 가지고 있다는 장점이 있습니다. 다른 사이트들과 동일하게 사용자가 원하는 편집이 가능하고 확인 후 다운로드가 가능합니다.

 

5. https://loading.io/

이 사이트 위의 사이트들과 큰 차이가 없는 로딩이미지를 사용자가 편집하여 다운로드 할 수 있는 사이트입니다.

다양한 색감이 가미된 형태의 로딩이미지들이 많이 있고, 무료의 이미지와 유료의 이미지가 같이 있는 사이트입니다.

또한, 이 사이트는 앞에 소개드린 사이트들과 다르게 무료의 이미지를 다운로드 하기 위해서는 "가입 (Sing Up)"을 해야하는 번거로움이 필요합니다. 그래도 가입을 할만한 좋은 로딩이미지들이 있으니 추천해드립니다.

 

이 외에도 Github에 들어가서 loading gif로 검색을 하면 다양한 종류의 로딩 이미지를 구할 수 있습니다.

Github는 함 스스로 들어가서 검색 한 번 해보세요.

 

마음에 드는 로딩 이미지를 다운받은 후에 다음 단계로 넘어가겠습니다.^^

 

감사합니다.

반응형

댓글


loading