소소한 블로그 개편(로딩이미지 삽입)

모바일에서는 로딩이 빨라서 훅 지나가니까 별로 티는 안 나는데 나중에 광고 집어넣으면 제법 유용해지지 않을까 싶어서 손봤다.

---

1. 이미지 작업

간단하게 커스터마이징하려면
https://loading.io 여기서 작업하면 편하다. 다만 텍스트 넣는 기능이 없는 점은 아쉽다. 떼잉쯧

☑️Color: 로딩이미지 베이스 색상 선택. Multi Color 선택하면 두개 색상을 쓸 수 있다.

☑️Bar Width/Height: 가로와 높이 조절.
높이가 고정된 상태에서, Width를 줄일수록 선에 가까워지고 넓히면 원- 부채춤 추는 모양이 나온다. 재밌으니까 한번 조절해 보는 걸 추천
Height의 경우도 줄이면 선에 가까워지는데 원형을 그리는 느낌. 넓히면 과하게 큰 꽃모양이 나온다.

☑️Bar Count: 바의 숫자. 적을수록 심플해진다.
Radius: 원의 반경(반지름). 전반적인 크기를 조절.

☑️Transparent 요소는 배경을 투명하게 저장할 것이냐 여부. 디폴트는 Off 상태이므로 투명배경을 원하면 ON으로 바꿔야 한다.

그 외 스피드와 사이즈, 프레임비율이 있는데 한번씩 조절해보는 걸 추천. 스피드는 기본값에서 조금 더 빠르게 설정해도 좋을 것이다. Frame Rate는 클수록 프레임 장수가 많아져서 수정할때 좀더 귀찮아질 수 있다.

초안(이땐 텍스트 없음)

다운로드 확장자는 gif,svg,png,css가 있다. 티스토리 스킨파일에 업로드할 거라면 gif로 다운받자. 텍스트 작업 등 부가적인 작업이 필요하면 png sequence로 저장하도록 한다.(zip 파일로 전체 프레임 이미지가 저장된다)

이미지 추가작업

1. png sequence로 저장한 후,
2. 포토스케이프 프로그램 일괄편집 기능으로 이미지 30장 불러와서
3. 텍스트 일괄추가(“로딩중입니다”)
4. 사진 일괄저장
5. Gif애니메이션 기능에서 다시 편집한 사진 30장 불러오기
6. 속도 조절 후(기본 5초인데 너무 느려서 2초로 함) 저장해서 이미지 완성

완성본 이미지

 

만약 커스터마이징도 귀찮다면 구글에서 loading transparent free 이런식으로 이미지 검색해서 png 파일 저장하면 됩니다.

여기도 추천하던데 개인적으로 그닥... 대충 크롭만 했는지 흰배경 뒤에 투명배경 깔려 나오는 이미지들 있으니 확인 필요. 뭐 구글도 투명배경 png라고 해놓는 낚시들이 있으니 상관없으려나.
https://icons8.com/preloaders/

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

2. 코드 삽입

아무튼 이미지를 만들었다면 코드 삽입을 해서 넣어야 하는데, 아래 블로그 보고 소스코드 html창에 복붙해서 넣었다. 솔직히 구글이 최고의 선생님 아닌가 ㅋㅋ

https://welcomestock.tistory.com/65

티스토리 로딩 이미지 넣는 방법 (소스코드 있음) ✿˘◡˘✿

cf) 해당 블로그에서는 반드시 파일명을 loading.gif로 저장하라고 하지만, 실제로는 img src=“./images/파일명.gif 여기만 업로드한 파일명과 일치시키면 된다.

아무튼 위 Html 코드에서는 opacity(불투명도)나 background(배경; 보통 흰색을 많이 쓴다만 배경에 따라 그레이톤도 괜찮다) 정도 살짝 손봐서 쓰면 적당하다.

---

~추신(아무말)~

- 스킨은 기본 제공되는 티스토리 북클럽 스킨 기반으로 커스터마이징해서 쓰고 있습니다. 네이버 안쓰고 티스토리 쓰는건 역시 자유도 아니겠어요?
나중에 어떻게 뒤집어엎었는지도 다 써야하는데 음 귀찮고 쓰려면 시리즈가 나올 것 같네요. ㅋㅋ
- 지금 이 글을 올리는 이유는 공부빼고 모든게 재밌기 때문입니다 자격증 꺼지세요 진짜
- 추후 소소하게 야간모드도 추가해보려고 합니다.