경건생활 · 매일 성경 통독과 QT
갓피아(GODpia) 성경으로 매일 5장씩 성경을 통독하고, 오늘의 QT(날마다 솟는 샘물) 에 바로 들어가는 웹페이지입니다.
서버·빌드 없이 HTML/CSS/JS만으로 동작해서 GitHub Pages에 그대로 배포할 수 있습니다.
기능
메뉴는 통독 → QT → 현황 순서입니다.
로고 바로 옆의 🔥 연속 일수: 통독 화면에서는 연속으로 하루 목표를 채운 날, QT 화면에서는 연속으로 QT를 마친 날을 보여 줍니다. 통독은 그날 읽은 장 수가 계획을 세울 때 정한 하루 장 수(목표) 이상이어야 한 날로 세고, 더 읽은 날은 괜찮지만 목표보다 덜 읽은 날은 세지 않아 연속이 끊깁니다(시편 119편처럼 혼자 읽는 날이나 그 바로 앞의 짧은 Day, 계획 끝의 남은 분량은 그 Day의 크기가 목표). 오늘 아직 안 읽었어도 어제까지 이어졌으면 그대로 보이고, 오늘 목표를 채우면 색이 켜집니다. 관리 화면의 통독 카드 "연속"도 같은 기준입니다.
화면 오른쪽 위의 작은 ↻ 버튼은 앱을 새로 불러옵니다. 브라우저에 남은 예전 화면 파일까지 다시 받은 뒤 새로고침하므로, 업데이트가 안 보일 때 누르면 됩니다. 읽은 기록과 메모는 이 기기에 그대로 있습니다.
1. 통독 (#today)
- 계획 만들기: ① 시작 권·장 ② 끝 권·장("이 권 끝까지", "구약 끝", "요한계시록까지", "성경 전체 1독" 바로 선택 가능) ③ 속도("하루 분량" 또는 "마칠 날짜")를 고르면 Day별 분량과 마치는 날을 미리 보여 줍니다. 끝 장이 시작 장보다 앞이면 요한계시록 다음 창세기로 이어 읽습니다.
- 꽉 찬 읽기 화면: 갓피아 성경 화면이 헤더 아래 전체를 채우고, 갓피아 웹의 로고 막대(휴대폰은 역본 버튼 줄까지)는 잘라냅니다.
- 위쪽: 오늘 분량 제목, 장 버튼(읽은 장은 ✓, 지금 장은 테두리), 읽은 수(2/5), 통독표 버튼, 역본 버튼(누르면 한권/두권·역본을 고르는 보기 설정).
- 읽음 스위치: 장 칸 오른쪽의 전원 스위치 모양 버튼입니다. 안 읽은 장은 꺼진 상태에 "읽었어요", 읽은 장은 켜진 상태(✓)에 "더 읽을래요" 로 보이고, 누르면 옆으로 미끄러지며 바뀝니다. 읽음으로 켜면 다음 안 읽은 장으로 넘어가고, "더 읽을래요"로 끄면 읽음이 취소됩니다. 하루 분량을 다 읽으면 "다음 ›" 버튼이 함께 나옵니다.
- 덜 읽거나 더 읽은 날은 다음 날부터 다시 계산: 어제까지 마지막으로 읽음 체크한 장 다음부터 하루 장 수(예: 5장)씩 Day를 새로 나눕니다. 예를 들어 어제 3장만 읽었으면 오늘은 그다음 장부터 5장, 10장을 읽었으면 그다음부터 5장입니다. 오늘 읽은 장은 오늘 분량을 바꾸지 않고, 중간에 건너뛰고 안 읽은 장은 통독표에 "건너뜀 · 밀림"으로 남습니다. 지난 Day의 날짜는 실제로 읽은 날로 표시하고, 앞으로 Day는 오늘부터 하루씩입니다. 며칠 쉬었어도 밀린 일수가 쌓이지 않고 마지막 읽은 곳에서 이어지며, 처음 계획 대비 차이는 현황의 "계획 대비"에 나옵니다.
- 통독표 패널: 전체 Day 목록(날짜, 분량, 완료 여부)에서 원하는 Day로 이동합니다.
- 요약 패널(✨): 보고 있는 Day의 분량을 읽기 전에 훑어볼 수 있게 한눈에 보기(장마다 한 줄, 1~2장이면 이야기) · 주요 사건(절 범위와 함께 장 순서대로) · 주요 등장 인물 · 인물 관계도(가족·동역·대립을 색과 선으로 구분) · 주요 지역(위치와 그곳에서 일어난 일) · 이 책과 어울리는 찬양 · 주석 참고 링크로 정리해 보여 줍니다.
- 요약은 장마다 미리 써 둔 파일(
data/summary/<책>.json)을 하루 분량만큼 합쳐서 보여 주므로, 시작 장이나 하루 장 수가 사람마다 달라도 그대로 맞습니다. 연구용 성경 해설(스캔본 OCR)과 인물·지명을 대조해 썼고, 화면에 "AI 작성"으로 표시합니다. 쓰는 방법과 검사 도구는 tools/commentary/README.md에 있습니다.
- 아직 파일이 없는 장이 섞인 날은 예전처럼 알림 서버의 Google Gemini가 요약을 만들어 줍니다(
GEMINI_API_KEY 필요, worker/README.md). 이때는 제목 오른쪽의 ↻ 버튼으로 새로 만들 수 있습니다.
- 시편 119편은 길어서 그날은 이 한 편만 읽도록 하루 분량이 나뉩니다(바로 앞날은 하루 장 수보다 짧을 수 있음).
- 메모·도구 패널: 통독 메모(전체 복사 가능), 분량 복사(투두메이트 등에 붙여넣기), 갓피아 새 창 열기.
2. QT (#qt)
- 갓피아 "날마다 솟는 샘물"을 꽉 찬 화면으로 보여 줍니다. 위쪽 날짜를 누르면 달력에서 다른 날을 고를 수 있습니다.
- 본문 · 묵상 화면: 그날 QT 본문의 구절 범위만 보여 주고(역본·글씨 크기는 위에서 고름), 절을 눌러 골라서 📋 복사하거나 노트에 붙이기를 할 수 있습니다(별도의 "구절" 탭은 없습니다). 갓피아의 관찰·묵상 등 질문마다 바로 아래에 내 답을 쓰는 칸이 있고, 쓰는 대로 자동 저장됩니다.
- 통독과 같은 화면 구성: 위쪽 한 줄에 날짜 이동과 오른쪽 위 읽음 스위치(안 읽음 = 꺼짐 "읽었어요", 읽음 = 켜짐 "더 읽을래요")가 있고, 절을 고르면 쓰는 절 선택 막대는 화면 맨 아래에 고정돼 있어 스크롤해도 따라다니지 않습니다. 아래쪽 막대는 없앴습니다. 묵상 노트 탭에는 질문별 내 답(질문과 함께)과 구절 · 기도 메모 칸이 모여 있고, 본문에서 붙인 구절은 구절 · 기도 메모 칸에 들어갑니다. 어느 쪽에서 고쳐도 같은 기록입니다. 노트 전체 복사는 질문별 답과 메모를 이름을 붙여 한 번에 복사하고, 지난 QT 기록과 내보내기에도 모두 들어갑니다. 예전에 쓴 "내용 관찰 · 연구 / 묵상 · 느낀 점" 글은 있으면 그대로 보입니다.
qt.html: 열자마자 갓피아 오늘의 QT로 이동하는 바로가기 주소입니다. 휴대폰 홈 화면이나 북마크에 추가해 두세요.
3. 현황 (#stats)
- 통독 카드: 진행률 원형 그래프, 오늘 읽은 장, 연속 일수, 계획 대비, 마칠 예정일.
- 📊 통독 현황 한눈에 보기(토글): 누르면 펼쳐집니다. 위에는 성경 전체 1,189장 중 읽은 비율을 구약(초록)·신약(주황)으로 나눈 고리 그래프, 아래에는 66권을 구약·신약 순서로 권마다 장 칸 띠(읽은 장은 색칠)와 읽은 장 수·비율, 읽은 기간(처음 읽은 날 ~ 마지막 읽은 날)이 나옵니다. 어느 장을 읽었고 어디를 건너뛰었는지, 전체 진도가 어느 정도인지를 한눈에 볼 수 있습니다. 계획 밖에서 읽은 장도 포함됩니다.
- QT 카드: 오늘 QT 완료 여부, 연속 일수, 이번 달, 누적.
- 달력: 날짜마다 통독(초록 막대: 완료/일부)과 QT(주황 점)를 함께 표시하고, 달마다 넘겨 볼 수 있습니다.
- 최근 기록: 날짜별 통독 범위·메모와 QT 완료·노트를 한 줄기로 보여 줍니다.
- 권별 진행, 계획 바꾸기, 백업 받기/불러오기, 기록 초기화.
4. 통독 리마인드 알림
- 오늘 통독을 마치지 않았으면 한국시간 오전 7시부터 자정 전까지 하루 7번, 5분 단위로 무작위 시각에 푸시 알림이 옵니다. 시각은 사람마다·날마다 다릅니다. 자정부터 오전 7시까지는 울리지 않으며, 다 읽으면 그날은 더 오지 않습니다.
- 문구는 시간대마다 여러 말투와 분위기로 바뀝니다.
sw.js의 MESSAGES에서 고칠 수 있습니다.
- 메시지마다 양이 다른 포즈(쉿, 헉, 다리 꼬기, 누워서 머리 괴기, 피켓 시위 등 20가지)로 그림에 나옵니다(안드로이드·PC 크롬). 문구를 바꾸면
node tools/notify-art/build.mjs로 그림을 다시 굽습니다.
- 휴대폰 홈 화면에 추가한 뒤 현황 → 🔔 통독 리마인드 → 알림 켜기. 아이폰은 iOS 16.4 이상, 홈 화면 앱에서만 됩니다.
- 정해진 시간에 보내려면 작은 알림 서버가 필요합니다. worker/README.md 순서대로 Cloudflare에 배포하고
js/core/config.js에 주소를 넣으세요.
구절 붙여넣기
갓피아 화면에서 구절을 길게 눌러 선택 → 복사한 뒤, 통독·QT 화면 오른쪽 아래의 📋 붙여넣기 버튼을 누르면 패널을 열지 않고 오늘 통독 메모(QT 화면에서는 묵상 노트) 끝에 바로 붙습니다. 갓피아 화면은 다른 사이트라 복사한 순간을 앱이 알 수 없어서, 이 버튼을 항상 띄워 둡니다.
아래 양식으로 들어갑니다. 첫 줄은 권 장:절(여러 절이면 18:10-11), 다음 줄부터 절 번호 + 공백 한 칸 + 구절입니다. 권·장은 지금 보고 있는 장 기준이고, QT 노트에는 첫 줄 없이 구절만 들어갑니다.
민수기 18:10
10 지극히 거룩하게 여김으로 먹으라 이는 네게 성물인즉 남자들이 다 먹을지니라
구절 골라 복사 · 지우기: 메모·도구 패널(QT는 묵상 노트)의 ☑️ 구절 골라 복사 · 지우기를 누르면 메모가 빈 줄 기준 덩어리(붙여넣은 구절 하나, 직접 쓴 글 한 단락)로 나뉘어 체크 목록으로 나옵니다. 전체선택 · 선택해제 · 개별 체크로 고른 뒤 선택 복사로 그 덩어리만 복사하거나, 선택 지우기로 한꺼번에 지울 수 있습니다(지운 직후 되돌리기 가능). 목록은 처음엔 아무것도 선택되어 있지 않습니다.
붙여넣은 메모나 노트를 다른 곳으로 옮기고 싶으면, 메모·도구 패널의 📋 메모 전체 복사(QT는 노트 전체 복사)로 지금까지 쓴 내용을 통째로 복사할 수 있습니다.
어디서 복사했든, 일부만 복사해도 온전한 절로: 갓피아든 다른 사이트·앱이든, 어느 역본이든 구절 일부를 복사해 📋 붙여넣기를 누르면 개역개정4판 + 쉬운성경의 온전한 절로 붙습니다(통독 메모·QT 묵상 노트 모두). 붙일 역본은 js/core/config.js의 QUOTE_VERSIONS에서 바꿉니다.
복사한 글: 행하지 아니하리라
13그러면 누구나 다 이 일에 관
붙는 글: 신명기 17:13
13 그리하면 온 백성이 듣고 두려워하여 다시는 무법하게 행하지 아니하리라
13 그러면 누구나 다 이 일에 관하여 듣고 두려워할 것이며, 다시는 재판관이나 제사장을 업신여기지 않을 것이오."
어느 절인지는 이 순서로 찾습니다.
- 복사한 글에
신명기 17:13(신명기 17장 13절)이 있으면 그 절
신명기 17장 제목 줄이나, 통독 화면에서 지금 보고 있는 장의 본문과 맞대어 봄- 못 찾으면 줄마다 홀리바이블 본문 검색(개역개정 → 새번역 → 현대인 → 개역한글 → 공동번역, 영어면 NIV → KJV → NASB)으로 장을 찾고, 그 장의 갓피아 본문과 맞대어 절을 정확히 잡음
- 갓피아·홀리바이블은 다른 사이트에서 읽지 못하게 막혀 있어서 알림 서버(
worker/)의 /bible·/search가 대신 받아 줍니다. 그래서 알림 서버를 배포하고 js/core/config.js에 주소를 넣어야 동작합니다.
- 쉬운성경은 검색되는 사이트가 없어서, 쉬운성경 줄만 따로 복사하면 통독 화면에서 보고 있는 장이 아닌 한 찾지 못합니다(다른 역본 줄이나
권 장:절이 함께 있으면 됩니다).
- 못 찾거나(예: "여호와"처럼 너무 짧은 글), 서버가 없으면 예전처럼 복사한 그대로 붙습니다.
절 번호가 빠진 첫 줄: 휴대폰에서 길게 눌러 선택하면 첫 절의 번호 칸이 빠지고 본문부터 복사됩니다. 이때는 다음 줄 번호를 보고 채웁니다(두권 보기면 같은 절의 첫 번째 역본, 한권 보기면 앞 절). 한 절의 일부만 번호 없이 복사하면 절을 알 수 없어 첫 줄이 민수기 28장이 됩니다.
절을 묶어 보여주는 역본: 현대인의성경처럼 짧은 절 두 개를 10-11처럼 한 번호로 묶어 보여주는 역본도 그대로 인식해서, 묶인 절은 10-11 ...로 한 줄에, 나머지 역본은 절마다 따로 붙습니다.
오늘의 통독 메모는 처음 열면 [민수기 12–16장]처럼 오늘 읽는 범위가 맨 앞에 자동으로 들어가 있어서, 나중에 메모만 봐도 어느 날짜·어느 범위인지 알 수 있습니다.
두권 보기에서 여러 절을 복사한 경우: 갓피아는 절마다 두 역본을 번갈아 보여 주지만(1 개역 → 1 새번역 → 2 개역 …), 붙여넣을 때는 역본별로 절을 이어서 씁니다. 같은 절 번호가 n번째로 나온 줄을 n번째 역본으로 봅니다.
민수기 18:1-3
1 (개역개정 1절)
2 (개역개정 2절)
3 (개역개정 3절)
1 (새번역 1절)
2 (새번역 2절)
3 (새번역 3절)
기록 내보내기
현황 → 📥 기록 내보내기에서 기간(전체 / 이번 달 / 최근 7일 / 최근 30일 / 직접 선택)을 고르고 받습니다.
- 엑셀(.xlsx): 요약 · 날짜별 기록(통독 범위, 메모, QT, 묵상 노트) · 메모 모아보기 · 읽은 장 시트
- 텍스트(.txt): 날짜별로 읽기 좋게 정리한 기록
- 아이폰 홈 화면 앱에서는 공유 시트가 열리니 "파일에 저장"을 고르세요.
메모는 어디에 저장되나요?
- 앱의 통독 메모 · QT 묵상 노트: 이 기기의 브라우저(또는 홈 화면 앱) 저장소에만 저장됩니다. 서버나 갓피아로 보내지 않습니다. 기기를 바꿀 땐 백업 파일로 옮기세요.
- 갓피아의 형광펜 · 메모 · 좋아요: 갓피아 계정에 저장되는 기능이라 로그인이 필요합니다. 다른 사이트 안에 넣은 갓피아 화면에서는 브라우저 보안상 갓피아 로그인이 유지되지 않아 눌러도 반응이 없습니다. 통독 → 메모·도구의 갓피아에서 열기로 새 창에서 로그인해 사용하세요.
갓피아 연동 방식
| 용도 | 주소 |
|---|
| 한권보기 | https://www.godpia.com/read/reading.asp?ver=gae&vol=gen&chap=1 |
| 두권보기 | https://www.godpia.com/read/reading.asp?ver=gae&ver2=niv&vol=gen&chap=1 |
| 오늘의 QT | https://www.godpia.com/qt/qt.asp |
| 날짜별 QT | https://www.godpia.com/qt/qt.asp?D=2026-09-16 |
역본 코드: gae 개역개정4판 · niv NIV · han 개역한글 · hyun 현대인의성경 · saenew 새번역 · hebrew 히브리어(구약) · greek 헬라어(신약)
권 코드는 js/core/bible.js에 있습니다.
갓피아 화면은 로그인 버튼이 이 앱 탭 전체를 이동시키지 않도록 sandbox로 띄웁니다. 갓피아 로그인이 필요한 기능은 "새 창으로 열기"로 이용하세요.
성경 본문은 복사해 오지 않고 갓피아 페이지를 그대로 띄웁니다(저작권은 갓피아와 각 출판사에 있습니다). 갓피아가 사이트 구조를 바꾸면 위 주소를 수정해야 할 수 있습니다.
기록 저장에 대해
계획과 기록은 이 브라우저의 localStorage에만 저장됩니다. 서버나 로그인이 없어서 간단하지만,
- 다른 기기와 자동으로 동기화되지 않고
- 브라우저 데이터를 지우면 사라집니다.
기기를 옮길 때는 현황 → 백업 파일 받기로 JSON 파일을 받아 새 기기에서 불러오세요.
배포 (GitHub Pages)
- 이 저장소의 Settings → Pages로 이동
- Build and deployment → Source:
Deploy from a branch
- Branch:
main / / (root) 선택 후 Save
- 1~2분 뒤
https://<아이디>.github.io/<저장소이름>/ 에서 열립니다.
수정 후 main에 push하면 자동으로 다시 배포됩니다.
로컬에서 실행
python -m http.server 8000
브라우저에서 http://localhost:8000 을 엽니다.
파일 구조
기능(화면)별로 나눠 두었습니다. 고치고 싶은 기능이 있으면 아래 표에서 해당 파일만 열면 됩니다.
index.html 화면 틀·메뉴, 스크립트 불러오는 순서
qt.html 갓피아 오늘의 QT 바로가기
sw.js 서비스 워커: 푸시를 받아 시간대별 문구로 알림 (알림 문구 MESSAGES)
manifest.webmanifest 홈 화면 추가용 (앱 이름·아이콘)
icons/ 홈 화면·알림 아이콘
css/
base.css 공통: 색(라이트/다크), 글꼴, 상단 메뉴, 카드, 버튼
setup.css 통독 계획 만들기 화면
reader.css 통독·QT 읽기 화면(갓피아 꽉 채우기), 아래/옆 패널
stats.css 현황 화면, 리마인드 알림 카드, 기록 내보내기 카드
js/
core/ 화면과 상관없는 바탕
bible.js 66권·장 수, 역본 목록, 갓피아 주소 만들기
store.js 기록 저장(localStorage), 통독 계획 계산
config.js 알림 서버 주소
shared/ 여러 화면이 함께 쓰는 것
state.js 앱 상태, 날짜·이름 도우미, 진행률·연속 일수 계산
godpia.js 갓피아 화면 띄우기 설정(로그인 이탈 방지), 읽기 주소
ui.js 아래/옆에서 열리는 패널, 토스트 알림
features/ 기능별 화면
setup.js 통독 계획 만들기·바꾸기
reader.js 통독 화면: 장 이동, 읽음 체크, 통독표, 보기 설정, 메모·도구
verses.js 복사한 구절 붙여넣기: 어느 절인지 찾아 개역개정·쉬운성경 온전한 절로
qt.js QT 화면: 날짜 이동, QT 완료, 묵상 노트
stats.js 현황 화면: 요약 카드, 달력, 최근 기록, 권별 진행, 백업
export.js 기록 내보내기 (엑셀·텍스트)
reminder.js 통독 리마인드 알림 켜기/끄기, 완료 여부 서버 동기화
summary.js 요약 패널 화면, 인물 관계도 그리기
summary-data.js 장별 요약 파일을 하루 분량으로 합치기
main.js 시작점: #today / #qt / #stats 에 맞는 화면 그리기
data/summary/ 장별 요약 (권마다 JSON 하나)
tools/commentary/ 장별 요약 작업 도구: 주석 OCR, 장별 주석 보기, 검사, 정리
tools/notify-art/ 리마인드 알림 그림 굽기
worker/ 리마인드 알림 서버 (Cloudflare Worker)
| 이런 걸 바꾸고 싶다면 | 열어 볼 파일 |
|---|
| 역본 목록 | js/core/bible.js |
| 통독 화면의 버튼·동작 | js/features/reader.js, css/reader.css |
| 구절 붙여넣기 양식 | js/features/verses.js |
| QT 화면 | js/features/qt.js |
| 현황·달력 | js/features/stats.js, css/stats.css |
| 엑셀·텍스트 내보내기 | js/features/export.js |
| 알림 시간 | worker/wrangler.toml |
| 알림 문구 | sw.js |
| 장별 요약 내용 | data/summary/<책>.json (고친 뒤 node tools/commentary/check.mjs) |
| 색·글꼴 | css/base.css |
스크립트는 빌드 도구 없이 index.html에서 순서대로 불러옵니다(core → shared → features → main). 새 파일을 추가하면 index.html의 목록에도 넣어 주세요.
관계도 PDF (v9.19.0)
통독 요약과 QT의 관계도 · 설명 PDF 다운로드 버튼으로 현재 보이는 관계도를 저장합니다. 인물 설명, 가운데 정렬된 관계도, 관계별 설명과 구절 풀이 순서입니다. 장·인물 범위와 관계 분류를 선택한 경우 현재 그림의 범위를 사용합니다. 설명은 **굵게**, *기울임*을 지원하며 HTML은 실행하지 않습니다. 새 AI 요약은 쉬운 관계 설명과 구절을 생성합니다. 기존 장별 자료와 저장된 요약은 기존 설명을 사용합니다.
PDF 도구는 js/vendor/html2pdf.bundle.min.js (html2pdf.js 0.10.3, 라이선스 파일 동봉)를 버튼 클릭 시 불러옵니다. 한글과 강조 표현 보존을 위해 페이지를 이미지로 저장하므로 PDF 본문 검색·선택은 지원하지 않습니다.
