내용만 적으면 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 |
🎡 학급 롤링페이퍼 (아래 별도 설명) |
bg1-clover.png … bg6-heart.png |
(선택) 행운 페이지의 "🖼️ 클로버 그림(내 이미지)" 템플릿용 이미지 6장 |
8개 메이커 페이지는 엔진이 100% 동일하고, 파일마다 딱 한 줄
var ACTIVE = "...";만 다릅니다. (luck / birthday / thanks / anniversary / welcome / farewell / xmas / future)
인원수만큼 카드가 자동 생성되고, 구글폼·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번 내용 전체 복사: 반 전체에 같은 글을 보낼 때 한 번에
- 글씨체 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 |
카테고리별로 분리 저장되어, 서로의 작성 내용에 영향을 주지 않습니다.
제작 · 해누리중학교 조승재