본문 바로가기
Google/Google Sites

구글 포토와 새 사이트 도구를 활용하여 학급 앨범 만들기 2/2 - 구글 사이트 도구 페이지 만들기, 발행하기

by 잇포에듀 2016. 12. 4.
반응형

구글 포토와 새 사이트 도구를 활용하여 학급 앨범 만들기 2/2

- 구글 사이트 도구 페이지 만들기, 발행하기




이전 글에서 구글 포토에 사진을 올리고 앨범을 만들어 공유하는 방법을 알아보았습니다. 



이번 글에서는 이렇게 공유한 앨범과 구글 사이트 도구를 이용하여 학급 앨범 사이트를 만들어 보겠습니다.



 



구글 새 사이트 도구에 접속하기


먼저 구글 사이트에 접속하여 개인 계정으로 로그인을 합니다.


로그인을 하셨으면 구글 사이트 도구(http://sites.google.com)에 접속합니다. 


화면 왼쪽 메뉴에 보면 [ 새로운 Google 사이트 도구 ] 항목이 보입니다. 클릭!


※ 구글 새 사이트 도구는 (http://sites.google.com/new)로 접속이 가능합니다. 단, 구글 새 사이트 도구는 현재 크롬과 파이어폭스만 지원한다고 합니다.



구글 사이트 도구에 성공적으로(?) 접속하였습니다.




구글 사이트 만들기

접속에 성공했으니 이제 사이트를 만들어봅시다.


화면 하단 오른쪽에 + 표시가 보이는 군요. 새로운 사이트를 만들기 위해 클릭해보겠습니다.



가장 기본적인 템플릿이 생성되었습니다.



일단 저는 사이트 제목을 "학급앨범_테스트"라고 입력했습니다. 


그리고 THEMES 탭으로 가서 테마를 바꿔가며 마음에 드는 것을 골랐습니다.


(※ 이건 단지 그냥 제가 테스트 해본 순서일 뿐, 반드시 이 순서로 작업하실 필요는 없습니다.^^)



사진을 캡쳐해놓고 보니 테마를 이것 저것 바꿔보다가 결국 처음 걸 선택했네요^^;;


페이지 타이틀을 "학급 앨범"이라고 적어보았습니다.


화면 오른쪽 메뉴들 중에 [ INSERT ]를 선택했습니다. 이 탭에는 다양한 입력 도구들이 포함되어 있습니다. 일단 간단히 테스트 해볼 겸 [ Text box ]를 넣어 보겠습니다. [ Text box ]를 누르자 빈 텍스트 상자가 생성되었습니다.


※ [ INSERT ] 항목을 보시면 아시겠지만 입력할 수 있는 도구들이 여러 종류가 있습니다. 구글 드라이브, 유튜브, 캘린더, 지도, 문서 등등... 이것들을 잘 응용하면 다양한 활용 방법이 나올 것 같습니다. ^^





저는 일단 월별로 앨범을 정리할 계획이므로 "2016년 5월"이라고 입력했습니다. (이전 글에서 테스트 겸 올렸던 사진들이 2016년 5월 사진들이라서.. ^^;;)



간단하게 텍스트 상자를 넣었습니다. 


다음에는 구글 포토에 업로드 해두었던 앨범들을 불러오겠습니다. (이전글 참고 : 구글 포토와 사이트 도구를 활용하여 학급 앨범 만들기 1 - 구글포토 사진 올리기, 앨범 만들기, 앨범 공유하기



[INSERT] 탭에 있는 [ Embed URL ] 을 눌러봅시다. 새로운 창이 뜨면 URL 입력 부분에 공유한 앨범 주소를 복사해와서 붙여 넣었습니다.



구글 사이트는 기본적으로 모바일 친화적으로 사이트를 구성합니다. 입력된 앨범 링크를 클릭했더니 사이즈를 (어느정도) 자유롭게 조절할 수 있습니다.


아래 사진에서 볼 수 있듯이 사진 사이즈를 조절하려고 하면 12칸의 격자가 나타납니다. 반응형 웹사이트(* 브라우저 사이즈에 따라 사이트 디자인이 변하는 형태)의 그리드 시스템(Grid System)이군요^^



적당히 사이즈를 조절했습니다.


이전에 만들었던 또 다른 앨범도 같은 방법으로 불러왔습니다.



불러온 앨범이 이전에 넣었던 앨범의 아래 쪽에 붙었습니다. 이 때, 두 앨범은 각각 다른 행으로 구분되어 있습니다. 


아래 쪽에 붙어있는 앨범을 마우스로 끌고 오면 자유롭게 위치도 변경할 수 있습니다.



두 앨범을 나란히 붙였습니다. 격자(Grid)가 12개로 나누어져 있으므로 2열로 구분하려면 6개+6개로, 3열로 구분하려면 4개+4개+4개, 4열로 구분하려면 3개+3개+3개 형태로 배치하면 되겠습니다.  



앨범을 다시 클릭해보겠습니다. 앨범 위쪽에 간단한 메뉴 아이콘이 생성됩니다. 가운데 있는 버튼. 뭔지 아시겠죠? 설정을 한 번 눌러보시죠.



링크 제목을 수정할 수 있네요. 이미지를 보여줄 것인지, 제목을 보여줄 것인지, 설명글을 보여줄 것인지를 설정할 수 있습니다.




 



만든 구글 사이트 미리보기

지금까지 만든 사이트가 브라우저에서 어떻게 보일지 궁금합니다.


화면 상단에 보면 눈동자 모양의 아이콘이 있습니다. 이걸 눌러서 미리보기를 실행할 수 있습니다.



미리 보기 화면이 나타났습니다. 


화면 오른쪽 아래에 보면 화면 크기에 따라 어떻게 디자인이 변하는지를 확인 할 수 있는 메뉴가 있습니다.



모바일 버튼을 누르자 아래 사진처럼 미리보기 디자인이 바뀌었습니다. 스마트폰으로 보면 이렇게 나타나겠네요~ 




만든 구글 사이트 공유하기

지금까지 만든 사이트를 이제 외부에 공개해봅시다.


화면 위 쪽에 [ PUBLISH ] 버튼이 있습니다. 과감히 클릭!


Site Location을 입력합니다. 사이트 주소겠지요. 다른 사람들이 쓰지 않는 주소를 잘 만들어보세요~


아래 사진을 잘 보면 주소가 제대로 입력되지 않았다는 오류 메시지가 보입니다. 


Use only lowercase letters, numbers and dashes please.


소문자, 숫자, 대쉬(-)만 사용할 수 있다고 하네요.. 저는 _를 사용해서 에러가 생겼습니다. ㅋ 


고쳐주죠!



주소를 고쳐주고 [ PUBLISH ] 버튼을 누르자 성공 메시지가 나타났습니다. 이렇게 완성된 사이트입니다.


※ 공유할 때, Allow my site to appear in search results 라는 항목이 보입니다. 검색 엔진에서 검색이 가능하게 할 건지에 대한 옵션인데요. 학급 앨범의 경우 외부에 공유되는 것을 원치 않을 수도 있으니 해제 하고 사용하시는 것이 좋을 것 같습니다. 보안(?)에 대한 부분이 아직 고민으로 남아서 대안을 고민해봐야겠습니다.




아래 사진은 제가 개인적으로 만들고 있는 학급 앨범입니다. (아이들의 초상권을 지켜 주기 위해 모자이크를..ㅋ)




생각보다 쉬우시죠? 복잡한 HTML, CSS 문법들을 몰라도 마우스 클릭 몇번 만으로도 아주 간단하게 웹페이지를 만들 수 있습니다. ^^


구글의 다양한 앱들과 구글 사이트 도구를 이용하면 활용도가 높을 것 같습니다.


아쉬운건.. 게시판 기능 같은 것이 없다는 것 정도......?



구독 신청하기

새로 포스팅되는 블로그 정보들을 메일로  받고 싶으시면 아래 링크에 가셔서 이메일 주소를 입력해주세요^^


[ 구독하기 ]



 

 



반응형

댓글