오랜만에 다시 글을 쓰게 된 코코넛쌤입니다.

다시 돌아오면서 가지고 온 주제는 구글 제미나이를 활용해서 아주 간단하게 홈페이지를 만드는 방법을 소개하려고 합니다.

홈페이지는 학급 안내용 또는 수업용, 개인용으로 다양하게 만들 수 있는데 개학을 준비하는 학급 안내용으로 만드는 과정을 소개해 보겠습니다.

과정을 먼저 소개해 드린다면

1. 구글 제미니이로 홈페이지를 제작한다.
2. 구글 사이트 페이지를 만든다.
3. 구글 사이트 도구를 활용해 제작한 홈페이지를 공유한다.

입니다.

매우 간단하니까 한 번 쉽게 따라해 보시기 바랍니다.

<aside> 💡

미리보기

2026 우리학급 - 3월 학급인사(기능추가)

</aside>

프롬프트를 작성합니다.

아래는 제가 사용한 프로프트의 예시입니다.

내용만 변경하셔도 됩니다.

# 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 통합 코드

- 코드 수정 방법 안내 (링크 변경 방법 등)

이렇게 html을 제공하며 수정해야할 부분을 함께 설명해 줍니다.