오랜만에 다시 글을 쓰게 된 코코넛쌤입니다.
다시 돌아오면서 가지고 온 주제는 구글 제미나이를 활용해서 아주 간단하게 홈페이지를 만드는 방법을 소개하려고 합니다.
홈페이지는 학급 안내용 또는 수업용, 개인용으로 다양하게 만들 수 있는데 개학을 준비하는 학급 안내용으로 만드는 과정을 소개해 보겠습니다.
과정을 먼저 소개해 드린다면
1.
구글 제미니이로 홈페이지를 제작한다.
2.
구글 사이트 페이지를 만든다.
3.
구글 사이트 도구를 활용해 제작한 홈페이지를 공유한다.
입니다.
매우 간단하니까 한 번 쉽게 따라해 보시기 바랍니다.
프롬프트를 작성합니다.
아래는 제가 사용한 프로프트의 예시입니다.
내용만 변경하셔도 됩니다.
# Role: 학급 홈페이지 전문 웹 디자이너 및 퍼블리셔
선생님의 요구에 맞춰 교실 환경에 최적화된 웹 UI/UX를 설계하는 전문가야. Google Sites의 '코드 삽입' 기능을 활용해 만들 학급 홈페이지의 특정 섹션을 제작해 주길 바래.
# Context: 제작 배경 및 목적
- 타겟: 고등학생 및 학부모
- 플랫폼: 구글 사이트 도구 (Embed 방식)
- 목적: 3월 개학 안내사항 전달 및 담임교사 소개
# Task: 상세 요구사항
1. 구성 요소:
- [상단에 학급 학생들에게 전달하는 첫 인사]
- [중앙에 학급 단체 카카오톡 링크 버튼]
- [하단에 '선생님께 한마디'를 남길 수 있는 구글 폼 연결 버튼]
2. 디자인 가이드:
- 테마: [파스텔 톤의 부드럽고 따뜻한 느낌 ]
- 반응형: 모바일 기기와 태블릿에서도 레이아웃이 깨지지 않도록 제작
# Technical Constraints (중요):
- 외부 JS 라이브러리(jQuery 등) 사용을 최소화하고 순수 HTML/CSS/JS로 작성할 것.
- 구글 사이트 도구의 보안 정책상 iframe 내에서 작동해야 하므로, 모든 코드는 <style>과 <script>를 포함한 '단일 HTML 파일' 형태로 제공할 것.
- 사용자가 코드를 보고 직접 텍스트나 링크를 수정하기 쉽도록 주석을 상세히 달아줄 것.
# Output Format:
- 완성된 HTML/CSS/JS 통합 코드
- 코드 수정 방법 안내 (링크 변경 방법 등)
Markdown
복사
이렇게 html을 제공하며 수정해야할 부분을 함께 설명해 줍니다.
저는 아직 실력이 부족해서 html코드만 보고는 결과물을 예측할 수 없습니다.
그래서 미리 보고 싶을 땐 프롬프트 창에 도구에서 Canvas를 선택하고 “결과물을 보여줘”라는 간단한 명령으로 확인할 수 있습니다.
그러면 대화창 오른쪽에 Canvas가 열리면서 미리보기가 제공 됩니다.
벌써 간략하게 만들어졌습니다.
혹시나 내용을 수정할 경우엔 코드를 클릭하고 html을 수정할 수 있습니다.
저는 인사말에 우리 1학년 코코넛반으로 수정해 보겠습니다.
미리보기 옆에 코드 버튼을 클릭해서 html을 확인합니다.
그리고 해당 부분의 내용을 수정해 줍니다.
다시 미리보기 버튼을 누르면 수정되어 있는 것을 확인할 수 있습니다.
일단 한 페이지이지만 공유를 해보도록 하겠습니다.
공유는 앞서 말씀드린 것처럼 구글 사이트 도구를 활용할 예정입니다.
혹시 처음 사용하시는 분들도 계실지 모르니 구글 사이트 도구 들어가는 것부터 설명드리겠습니다.
구글에서 “구글 사이트도구”를 검색합니다.
또는 링크를 클릭해주세요 https://sites.google.com/
처음 시작하면 여러 템플릿을 사용할 수 있지만 미리 만들어놓은 사이트가 있기에 빈 사이트를 클릭합니다.
왼쪽 상단에 제목을 먼저 정해줍니다.
저는 2026 학급 이라고 하겠습니다.
그리고 미리 만들어둔 틀을 사용하기 위해서 오른쪽에 편집 부분에서 페이지를 선택해 줍니다.
하단에 더하기 버튼에 마우스를 올리면 선택 목록이 나오고 그중 전체 페이지 삽입을 선택해 줍니다.
저는 새로운 페이지의 이름을 3월 학급 인사로 하겠습니다.
여기까지가 저희가 만든 html을 넣기 위한 페이지를 준비하는 과정이었습니다.
그리고 이제 만든 html을 붙여넣기만 하시면 됩니다.
제미나이에서 완성된 html을 모두 복사합니다.
다시 구글 사이트로 돌아와서 삽입 추가 버튼을 클릭합니다.
웹에서 삽입 창이 나오면 소스 코드 버튼을 클릭합니다.
그리고 복사한 html을 붙여 넣고 다음을 클릭합니다.
마지막으로 삽입 버튼을 클릭하면 페이지가 완성됩니다.
페이지를 수정하고 싶을 경우 왼쪽에 연필 버튼을 클릭하고 삭제할 경우 휴지통 버튼을 클릭하면 됩니다.
이제 만든 사이트를 공유해보려고 합니다.
오른쪽 상단에 게시 버튼을 클릭합니다.
웹에 게시할 주소를 정해야 합니다.
저는 2026testclassroom으로 주소를 만들겠습니다. 주소가 이미 있을 경우 사용할 수 없습니다.
저는 개인 아이디로 보이지 않지만 학교 구글 아이디일 경우 학교 도메인이 추가 됩니다.
가운데 관리 버튼을 클릭해서 사이트에 접근할 수 있는 권한을 선택해 줍니다.
학교 아이디의 경우 그룹 내 사용자만 확인할 수 있도록 할 수 있습니다.
검색으로 공개되지 않게 하려고 체크 버튼을 선택하도록 하겠습니다.
그리고 게시 버튼을 클릭하면 공유할 수 있습니다.
게시가 완료된 후 게시 오른쪽 버튼의 화살표를 클릭하면 게시된 사이트를 확인하거나 게시를 취소할 수 있습니다.
방금 만든 사이트를 공유하겠습니다.
아마 링크로 들어가시면 처음에 나오는 기본 홈이 보이실 겁니다.
마지막으로 홈을 수정하는 걸 알려드리겠습니다.
오른쪽 편집 부분에서 페이지를 선택해 줍니다.
그리고 방금 만든 페이지의 오른쪽 점 세 개를 클릭해 줍니다.
홈페이지로 설정을 클릭해 주시면 홈페이지가 변경됩니다.
사이트가 변경되었을 경우엔 반드시 게시 버튼을 다시 클릭해 주시기 바랍니다.
이렇게 간단하게 홈페이지를 만드는 방법을 알려드렸습니다.
제미나이를 활용해서 디데이 기능을 추가하거나 효과를 추가하여 선생님들의 개성을 살린 학급 홈페이지를 만들어보시기 바랍니다 