티스토리 스킨에 로딩 이미지 애니메이션 적용하는 방법
티스토리에 이런 저런 연구를 진행하는 중입니다. 현재 친효스킨에는 본문 로딩 중에 제 트라이드 마크인 효자곰이 보이며 그 주변으로 무언가가 뱅글뱅글 돌아가는것을 확인할 수 있습니다. 본문의 모든 데이터를 로드하는동안 이런 애니메이션이 연출되는건데 이건 어떻게 적용시키는건지 알아보도록 합시다.
HTML + Script 세팅하기
먼저 기본 뼈대가 되는 HTML과 애니메이션을 위한 스크립트를 티스토리 스킨 정보에 입력해 봅시다. HTML에 붙여넣기를 진행해야 합니다. 아래의 첨부파일을 다운받고 열어주시기 바랍니다.
열어보시면 점선을 기준으로 위에는 HTML과 스크립트 코트가, 아래에는 CSS 코드가 첨부되어 있습니다.
<script>
$(window).on('load', function() {
$("#loading").hide();
});
</script>
<div id="loading">
<img src="./images/loading.svg" alt="loading">
</div>먼저 이 부분입니다. 해당 코드를 모두 복사합니다. 그리고 자신의 스킨 HTML 정보로 들어갑니다. 그리고 <body>의 바로 아래에 붙여넣기 합니다. 여기까지하면 50%는 끝이났습니다.
CSS 세팅하기
이제 스타일을 만들어야 합니다. 첨부파일의 점선 기준 아래에 있는 코드를 몽땅 복사합니다.
/* 스킨 로딩 */
#loading {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 99;
}
#loading > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
z-index: 100;
}바로 이 부분입니다. 몽땅 복사한다음 자신의 스킨 CSS에 빈 공간을 확보하고 붙여넣기를 해줍니다. CSS는 정해진 위치가 없으니 빈줄을 만들어 붙여넣기 해주시면 됩니다. 주의하실점은 기존 CSS 코드 내부에 붙여넣기를 하는게 아니라 빈공간을 만들고 그곳에 붙여넣기를 해주는 겁니다.
SVG 파일 생성하기
이제 모든 세팅은 끝이났습니다. 마지막으로 할 일은 로딩 애니메이션 파일을 생성하는 것입니다. 스킨 로딩 때 보여지는 파일을 의미합니다. 친효스킨의 경우는 바람개비가 그것입니다. 즉 바람개비와 같은 움직이는 애니메이션 파일이 필요합니다. 확장자는 SVG입니다.
loading.io - Your SVG + GIF + PNG Ajax Loading Icons and Animation Generator
Build Your Ajax Loading Icons, Animated Text and More with SVG / CSS / GIF / PNG !
loading.io
이곳에 방문하시면 매우 간단하게 로딩 이미지를 생성할 수 있습니다. 오른쪽 상단의 Sign in 메뉴를 눌러서 회원 가입부터 진행하시기 바랍니다. 다운로드시 로그인 상태여야 가능하기 때문입니다. 회원 가입은 매우 간단합니다. 인증 절차도 없어요.
먼저 1번 영역의 무료 아이콘 중 마음에 드는 애니메이션을 선택합니다. 그러면 2번의 영역에 고른 아이콘이 적용되는데 하나 하나 직접 수정을 해보면서 어디가 어떻게 변하는지 미리보기로 확인해가면서 편집을 진행합니다. 다 완료되었다면 3번의 SVG 메뉴를 눌러줍니다.
그러면 STATIC과 ANIMATED 항목이 나오는데 당연히 움직여야 하므로 Animated를 선택합니다.
로그인이 되어있는 상태라면 Free Download 버튼이 보일겁니다. 눌러서 파일을 다운로드 받습니다.
한번 더 다운로드창이 뜨는데 Download 버튼을 눌러서 최종 마무리를 진행합니다.
다운로드가 완료되었습니다. 이제 파일명을 loading 이라고 변경해줍니다. 근데 왜 많고 많은 이름 중 하필 loading 이냐구요? 다른 이름으로 지정하고 싶으시다면 HTML의 이 부분도 같이 변경해줘야 합니다.
<div id="loading">
<img src="./images/loading.svg" alt="loading">
</div>이 코드 내용을 보시면 img 태그 대상이 바로 loading.svg로 설정되어 있기 때문입니다. 즉 원하는 이름으로 변경하시려면 svg의 파일명과 이 태그의 파일명을 서로 일치시켜야 한다는 이야기입니다. 이해되시죠?
SVG 파일 업로드하기
이제 파일 업로드로 가서 추가 버튼을 누르고 다운받은 svg 파일을 올려주기만 하면 끝입니다. 생각보다 과정이 어렵지 않습니다. 그러면 멋지게 적용시켜 보시기 바랍니다. 끝.
