소개
토요일에 있었던 오프라인 모임에서 배운 내용을 실제로 적용해보고 싶었습니다. 마침 제가 참여한 마인크래프트 교재 개정판이 출판 예정이라, 독자들이 편하게 책을 소개받고 추가 자료를 받을 수 있는 독자 전용 페이지를 만들면 좋겠다고 생각했습니다.
진행 방법
러버블(Lovable) 로 독자 전용 웹페이지 제작
러버블(Lovable) 로 독자 전용 웹페이지 제작
책 소개, 교재 특징, 장점 정리
시크릿 자료 받기" 버튼 추가 → 구글 설문 연결
구글 설문으로 독자 이메일 수집
이메일 주소를 필수 항목으로 설정
응답을 자동으로 스프레드시트에 기록되도록 설정
구글 앱스 스크립트 활용
스프레드시트에 새로운 응답이 들어오면 자동 이메일 발송
시크릿 자료 다운로드 링크 포함
📌 지피티를 통해 러버블 프롬프트 생성
Create a modern and clean landing page for the upcoming book **"마인크래프트 교재 (가칭)"**.
This landing page should include the following sections:
1. **책 소개 (Book Introduction)**
- 간단하고 흥미롭게 책을 소개하는 단락.
- "마인크래프트로 배우는 창의적 문제 해결과 디지털 리터러시" 같은 문구 포함.
- 시각적으로 매력적인 마인크래프트 스타일 일러스트나 블록 이미지를 배경에 사용.
2. **교재 특징 & 장점 (Key Features & Benefits)**
- 블록 형태의 카드 디자인으로 3~4개의 특징 강조.
- 예:
- "실습 중심 학습" → 학생이 직접 따라하며 이해
- "최신 개정판 반영" → 새 기능과 수업 아이디어 업데이트
- "교사와 학생을 위한 맞춤형 활동" → 다양한 난이도 조절 가능
- "창의적 프로젝트 확장" → 수업 외 활동으로도 활용 가능
3. **독자 혜택 (Reader Bonus)**
- "이메일을 남기시면 시크릿 자료를 드립니다!"라는 강조 문구.
- 버튼 디자인: 크고 선명한 초록색(마인크래프트 잔디블록 느낌).
- 버튼 클릭 시 구글 설문지로 연결되도록. (버튼 텍스트: "시크릿 자료 받기")
4. **푸터 (Footer)**
- 간단한 문구: “© 2025 마인크래프트 교재 제작팀. All rights reserved.”
스타일 가이드:
- 마인크래프트의 블록/픽셀 느낌을 살리되, 너무 게임스럽지 않고 깔끔하게.
- 따뜻하고 친근한 톤과 차분한 레이아웃.
- 반응형 웹으로 모바일에서도 보기 좋게. 시크릿 자료 받기 버튼 누르면 구글설문으로 이동하도록 연결 함.
생성된 페이지
https://mine-craft-learn-page.lovable.app
구글 설문 통해 이메일 수집
응답 스프레드시트 > 앱스스크립트 설정
자동응답 메일 결과
결과와 배운 점
독자 페이지와 자동화 시스템이 잘 연결되어, 설문 작성 → 이메일 수신 흐름이 매끄럽게 작동하게 되었습니다.
앱스 스크립트 자동 메일 발송 코드 생성시 지피티가 방향을 잘 잡지못해 어려움이 있었습니다. 테크권님께서 알려주셨던 코드전문을 지피티에게 알려주고 반복하니 문제가 해결되었습니다. 작은 자동화라도 실제로 구현해내는 과정에서 많은 것을 배울 수 있었습니다.
이번 경험을 통해 앞으로도 교재와 학습 자료를 온라인과 연결해 활용할 수 있는 여지가 많다는 것을 느꼈습니다.
앞으로의 계획
여러 부분을 업그레이드 하고 추가하여 실제 사용 활용 가능하도록 해보고 싶습니다.
도움 받은 글 (옵션)
테크권님 에듀테크 스터디 오프라인 모임
