Wednesday, March 20, 2013

구글사이트에 애니메이션 효과 슬라이드 추가하기


구글 사이트를 좀 더 멋있게 코딩 없이 애니메이션 효과의 슬라이드를 추가하는 방법을 소개 드립니다.

요즘 유행하는 홈페이지에서 슬라이드를 코딩 없이 몇번의 클릭으로 쉽게 추가할 수 있습니다.

1. 구글 드라이브에 있는 프리젠테이션을 아래의 이미지와 같이 새로 생성합니다.
그리고 전환 시 바뀌는  슬라이드 이미지를 일정 사이즈에 맞게 삽입 합니다.


     

2. 슬라이드 메뉴에서 전환 변경을 클릭합니다.

    




3. 오른쪽에 애니메이션 효과가 나타 납니다. 원하는 애니메이션 효과를 선택합니다.

저희는 페이드 기능( 화면이 밝아졌다 흐려 졌다하는) 효과를 적용 했습니다.

     

4. 해당 슬라이드를 아래와 같이 웹에 게시합니다.

    

5. 아래와 같이 해당 문서 링크 주소를 복사해 놓고(사이트에 추가 시 필요) 과 각각 옵션 설정을 합니다.



6. 사이트 편집 모드에서 슬라이드를 추가하는 위치에 마우스를 옮긴 후 메뉴의 "More gadgets"를 선택합니다.

     

7. Add gadget by URL을 선택해서 아래의 주소를 입력합니다.



8. 아래 입력 창에서 이전 슬라이드에서 copy 한 url을 link to the presentation 입력란에 붙여 넣고 OK 버튼을 클릭합니다.




9. 아래와 같이 이전에 작성해 놓은 슬라이드가 fade 애니메이션 효과를 내면서 추가 되어있음을 확인하실 수 있습니다. 



저희 사이트도 이와 같이 쉽게 구글앱스에서 제공되는 기본 기능으로 구현을 하였습니다.

추후에 HTML, CSS, Script 등의 resource를 구글 드라이브에 저장해 놓고 좀 더 빠르게 클라우드 상에서 웹사이트 구현하는 기능도 안내해 드리겠습니다.

감사합니다.

No comments: