내용만 적으면 A4 한 장으로 예쁘게 인쇄·PDF 저장되는 편지지 메이커. 허브 페이지 하나에서 행운 · 생일 · 감사 · 기념일 · 새 학기 환영 · 마무리/졸업 · 크리스마스/연말 · 미래의 나에게 8개 카테고리로 나뉘고, 여기에 학급 롤링페이퍼가 더해집니다. 모든 페이지는 단일 HTML 파일(외부 이미지·서버 불필요)이며, 배경은 코드로 그리는 SVG라 어디서나 깨지지 않습니다.
배포: https://scienceisjo.github.io/lettermaker/
| 파일 | 설명 |
|---|---|
index.html |
허브(편지 만들기 시작 페이지). 카테고리 카드 목록 |
lucky.html |
🍀 행운 편지 — 시험·발표·도전 응원 |
birthday.html |
🎂 생일 축하 |
thanks.html |
💌 감사 편지 |
anniversary.html |
🎗️ 기념일 |
welcome.html |
🌱 새 학기 환영 — 처음 만나는 아이들에게 |
farewell.html |
🎓 마무리·졸업 — 한 해를 함께한 아이들에게 |
christmas.html |
🎄 크리스마스·연말 |
future.html |
⏳ 미래의 나에게 — 학기 초에 써서 학기말에 여는 타임캡슐 |
rollingpaper.html |
🎡 학급 롤링페이퍼 (아래 별도 설명) |
stats.html |
📊 방문 통계 (교사용, 관리 키 필요 — 아래 설명) |
bg1-clover.png … bg6-heart.png |
(선택) 행운 페이지의 "🖼️ 클로버 그림(내 이미지)" 템플릿용 이미지 6장 |
8개 메이커 페이지는 엔진이 100% 동일하고, 파일마다 딱 한 줄
var ACTIVE = "...";만 다릅니다. (luck / birthday / thanks / anniversary / welcome / farewell / xmas / future)
학부모·학생에게 구글폼 / MS Forms로 편지를 받아 두고, 응답 표를 한 번만 붙여넣어 반 전체 편지를 자동으로 채웁니다. (한 명씩 복사·붙여넣기 하지 않습니다)
쓰는 순서
- 폼 문항을 받는 사람 · 보내는 사람 · 하고 싶은 말 3개로 만들어 응답을 받습니다.
- 받는 사람은 동명이인·오타 대비로 반·번호까지 받는 걸 권합니다. (예:
2학년 3반 7번 김민준)
- 받는 사람은 동명이인·오타 대비로 반·번호까지 받는 걸 권합니다. (예:
- 응답을 엑셀·구글시트로 열어 제목 줄을 포함해 표 전체를 복사합니다.
- 편지 메이커 → 📋 폼 응답으로 채우기 → 붙여넣기 → 📥 편지 칸에 채우기.
- 탭 구분(엑셀 복사)과 쉼표(CSV) 모두 인식하고, 받는 사람 / 보내는 사람 / 편지 내용 열을 자동으로 찾아냅니다. (헤더 이름이 특이하면 드롭다운에서 직접 지정)
- ◀ 이전 / 다음 ▶ 또는 쪽 드롭다운으로 넘겨보며 확인하고, 🖨️ 전체 연속 인쇄로 모든 응답을 한 번에 출력합니다.
알아둘 점
- 편지 배치가 곧 한 쪽에 들어가는 사람 수입니다.
1장= 1명당 1쪽(긴 편지에 적합),6칸= 6명이 1쪽(짧은 쪽지에 적합). - 채워진 뒤에도 편지 칸에서 그대로 고칠 수 있고, 고친 내용은 응답 목록에도 저장돼 쪽을 넘겼다 돌아와도 유지됩니다. (오타 수정·문장 다듬기)
- 응답마다 보내는 사람(From.)이 따로 붙습니다. (위쪽
보내는 사람칸은 수합을 안 쓸 때의 기본값) - 응답 수가 칸 수보다 적어 남는 칸은 빈 편지지로 인쇄됩니다. (안내 문구가 찍히지 않습니다)
- 붙여넣은 응답도 자동 저장되어, 브라우저를 닫았다 열어도 이어서 작업할 수 있습니다.
⚠️ 응답은 이 브라우저 안에만 저장됩니다. 편지 내용·이름은 서버로 보내지 않으니 다른 기기·다른 사람에게는 보이지 않습니다. (서버로 가는 건 아래 「방문 통계」의 익명 방문 기록뿐)
인원수만큼 카드가 자동 생성되고, 구글폼·MS Forms 응답을 붙여넣어 한 장으로 조립하는 별도 엔진.
- 직접 입력: 인원수(예: 26)를 넣으면 그만큼 카드 생성. 이름 목록(
지민, 서준, …)으로 한 번에 만들 수도 있음 - 붙여넣기 수합: 폼 응답을 엑셀/구글시트로 열어 표 전체(제목 줄 포함)를 복사 → 붙여넣기. 탭 구분(엑셀 복사)과 CSV(쉼표) 모두 인식
- 문항은 받는 사람 / 이름 / 하고 싶은 말 3개로 만들면 열이 자동 인식됨 (익명은 '이름' 문항 생략)
전체 한 장(모든 메시지) 또는○○에게(대상별 한 장) 선택 → 반 전체를 한 명씩 인쇄 가능
- 🖨️ 전체 연속 인쇄: 대상 전원을 한 번의 인쇄로 한 장씩 출력. (대상을 하나씩 골라 인쇄를 반복하지 않아도 됩니다. '받는 사람 열'을 지정하면 버튼이 나타납니다)
- 색 테마 6종 · 글씨체 5종 · A4/A3 세로·가로 · 한 줄 카드 수 조절 · 자동 저장
- 위 파일들을 저장소(repo) 한 폴더에 함께 둡니다. (서로 같은 폴더여야 링크가 연결됩니다)
bg1-clover.png등 이미지 템플릿을 쓸 경우, 그 이미지들도 같은 폴더에 올립니다.- 커밋 → 푸시 → GitHub → Settings → Pages에서 브랜치 지정.
.../index.html로 접속하면 허브가 뜨고, 카드를 누르면 각 메이커로 이동합니다.
이미지를 안 올려도 괜찮아요. 행운 페이지 기본 템플릿은 코드로 그리는 클로버 편지지라 이미지 없이도 잘 보입니다. (이미지 템플릿은 선택지로만 존재)
- 편지 배치: 6칸(쪽지) · 4칸 · 2칸(큰 편지) · 1장(긴 손편지) — 한 엔진으로 상황에 맞게
- 편지지 템플릿: 카테고리마다 4종(코드 생성 SVG + 심플 무늬없음). 색·배경이 통째로 바뀜
- 배경 이미지 업로드 + 투명도: 사진을 올리고 슬라이더로 연하게 만들어 그 위에 편지 작성 (업로드한 사진은 저장되지 않음 / 새로고침 시 사라짐)
- 용지 크기(캔바 스타일): A4 세로/가로 · A3 세로 · A5 세로 · 레터 · 엽서 · 정사각. 미리보기·인쇄(@page)·배치(가로면 6칸이 3열 2행)·글자 크기가 모두 용지에 맞춰 자동 조정
- 편지지 꾸미기: 미리보기 위에서 ✏️펜으로 그리기, 🧽지우개, 도형·이모지 스티커 붙이기(이동·크기조절·삭제), 되돌리기/전체지움. 꾸민 내용은 저장되며 인쇄에도 그대로 반영 (좌표는 0~1 정규화라 용지 크기를 바꿔도 비율 유지)
- 인쇄·저장 화질(PDF 용량 제어): 배경 사진(업로드/'내 이미지' 템플릿)을 자동으로 축소+JPEG 압축해 PDF 용량을 낮춤. 가벼움·표준(권장)·고화질·원본 선택. 고화질/원본은 프린터 '메모리 부족'이 날 수 있다는 경고를 함께 표시
- 전체 뒷배경(카드 뒤 무늬) 토글: 페이지 전체를 덮는 시트 배경 무늬는 인쇄 시 페이지 전체를 고해상도로 래스터화해 용량을 크게 키움. 기본 꺼짐(인쇄 가벼움), 켜면 '인쇄가 안 될 수 있다'는 경고 표시. 카드 배경(개별 칸)과는 독립된 별도 스위치
- 랜덤 추신(🎲): 카테고리별 응원/축하/감사 메시지 풀(각 30개 내외)에서 자동 입력 ("추신 전체 랜덤"은 한 번에 채움)
- 보내는 사람(From) · 날짜: 선택 입력
- 1번 내용 전체 복사: 반 전체에 같은 글을 보낼 때 한 번에
- 폼 응답 수합: 구글폼·MS Forms 응답 표를 붙여넣어 반 전체 편지를 자동으로 채우고, 전체 연속 인쇄로 한 번에 출력 (위 별도 설명)
- 글씨체 5종, 만든 사람 표기, 배경 그림 on/off
- 자동 저장(localStorage), A4 인쇄 / PDF 저장
인쇄 시 배경이 안 나오면, 인쇄 창에서 "배경 그래픽" 옵션을 켜세요.
각 페이지 상단 CONFIGS 안, 해당 카테고리의 templates 배열에 한 줄 추가:
{ id:"myid", name:"🌟 내 템플릿", accent:"#3a9d23",
motifs:["star","heart","dot"], // 아래 모티프 중에서
palette:["#ffd166","#ff9ec4","#9bd1ff"] } // 파스텔 색 2~5개- 사용 가능한 모티프:
clover, heart, star, sparkle, dot, balloon, cupcake, gift, flower, ribbon,tree, snow, sprout, sun, envelope, clock, cap motifs:[]로 두면 심플(무늬 없음, 테두리만) 템플릿이 됩니다.- 직접 만든 이미지 6장을 쓰려면
images:["a1.png", ... 6장]을 넣으세요. (같은 폴더에 업로드)
상단 Q_LUCK / Q_BIRTHDAY / Q_THANKS / Q_ANNIV / Q_WELCOME / Q_FAREWELL / Q_XMAS / Q_FUTURE 배열에 문구를 추가·수정.
CONFIGS에 새 카테고리 객체 추가(brand/sub/storageKey/defaultHeader/heart/quotes/templates).- 새 HTML 파일을 만들고
var ACTIVE = "새카테고리";로 지정. (기존 메이커 파일 복사 후 그 한 줄만 변경) index.html의CATEGORIES배열에 카드 한 개 추가(또는 기존 카드status:"ready").
CONFIGS 는 8개 메이커 파일에 동일하게 들어있습니다. 한 파일에서 수정한 뒤 나머지에 복사하면 일관성이 유지됩니다.
| 카테고리 | 키 |
|---|---|
| 행운 | lucky_letter_maker_v1 |
| 생일 | birthday_letter_v1 |
| 감사 | thanks_letter_v1 |
| 기념일 | anniversary_letter_v1 |
| 새 학기 환영 | welcome_letter_v1 |
| 마무리·졸업 | farewell_letter_v1 |
| 크리스마스·연말 | xmas_letter_v1 |
| 미래의 나에게 | future_letter_v1 |
| 학급 롤링페이퍼 | class_rollingpaper_v1 |
카테고리별로 분리 저장되어, 서로의 작성 내용에 영향을 주지 않습니다.
얼마나 많은 선생님이 다녀갔는지 보는 교사용 페이지. Supabase(과학이조선생 프로젝트)에 익명 방문 기록만 쌓고, stats.html 에서 관리 키로 집계를 봅니다.
처음 한 번
- Supabase 프로젝트 A → SQL Editor →
수업HTML/_템플릿/편지메이커_방문기록_SETUP.sql전체를 붙여넣고 Run. - 결과창에 나오는 관리 키(10자리) 를 적어 둡니다. (잃어버리면 같은 SQL 을 다시 Run — 같은 키가 또 나옵니다)
- https://scienceisjo.github.io/lettermaker/stats.html 에 키를 넣으면 전체·오늘·7일 방문자, 날짜별 막대, 페이지별, 유입 경로, 기기, 시간대가 보입니다.
어떻게 세나
- 모든 페이지 맨 아래
<script id="lm-visit">가 열릴 때 한 번letter_visitRPC 를 부릅니다. 보내는 것은 페이지 이름 · 임의 방문자 ID(브라우저마다 하나) · 유입 경로 · 기기 종류 뿐이고, 편지 내용·받는 사람·보내는 사람은 절대 보내지 않습니다. - 같은 사람이 같은 페이지를 30분 안에 다시 열면 한 번으로 칩니다.
file://로 열거나localhost개발 서버에서 연 것은 세지 않습니다. - 링크에
?from=kakao처럼 붙여 나누면 「유입 경로」에 그 이름으로 잡힙니다. (예: 오픈톡 =?from=kakao, 카페 =?from=cafe) 없으면 보낸 사이트 주소, 그것도 없으면direct. - 표는 RLS 로 잠겨 있어 anon key 로는 직접 읽거나 쓸 수 없고, 쓰기·읽기 모두 SECURITY DEFINER RPC 로만 됩니다. 읽기는 관리 키가 맞아야 합니다.
- 8개 메이커는 lucky.html 을 고쳐 재생성하므로, 스니펫도 lucky.html 에서 고친 뒤 전파합니다.
제작 · 해누리중학교 조승재