성경 타임라인 (bible-is-fact)
구약과 신약의 사건·인물을 연대순으로 살펴보는 인터랙티브 웹 타임라인입니다.
빌드 과정 없이 index.html을 브라우저로 열면 바로 동작하는 정적 웹사이트입니다. Vercel로 배포합니다 (아래 "배포" 참고).
구성
구약과 신약을 하나의 타임라인(원역사 ~ AD 100)으로 보여 줍니다. 여러 줄(레인)로 같은 시기를 나란히 비교합니다.
- 줄: 시대·세계사 / 주요 사건 / 인물 / 왕·통치자 / 선지자 / 예수 그리스도 / 예수의 기적 / 사도·초대교회 / 바울 / 신약 기록
- 맨 위 '시대·세계사' 줄은 위쪽 행에 시대 구분, 그 아래에 주변 제국·로마 황제·역사 사건이 놓입니다
- 타임라인은 AD 110에서 끝나며 (마지막 항목인 AD 100 이후 여유 공간), 그 뒤로 이어지는 기간(트라야누스 등)은 끝이 흐려지는 막대와 →로 표시합니다
- 예수의 기적·공생애 (접기/펼치기): 사복음서의 기적 35가지와 공생애 보충 사역 9가지(니고데모, 사마리아 여인, 열두 제자 선택·파송, 최후의 만찬 등)는
기본으로 접혀 있습니다. 가로 보기에서는 줄 이름 아래
▸ 펼치기 버튼이나 요약 막대를, 세로 보기에서는 예수 그리스도 시대 첫 구간의 버튼을 누르면 펼쳐집니다.
검색·이전/다음으로 접힌 항목을 고르면 자동으로 펼쳐집니다. (기적의 시기는 복음서 조화 순서에 따른 대략적 위치입니다)
- 맨 앞 빗금 구간: 연대를 특정할 수 없는 원역사 (창 1–11장, 22개 항목), 연도는
?로 표시하고 성경 순서대로 놓음
- 상단
구약 / 신약 버튼: 구약 시대(BC 4), 신약 시대(BC 40AD 110)로 바로 이동·확대
- 데이터는
js/data.js에서 구약(ot)·신약(nt) 부분으로 나눠 관리하고, 화면에서 합칩니다.
구약의 주변 세계, 신약의 로마 황제·유대·로마 사건은 '시대·세계사' 줄로, 신약의 유대 통치자는 '왕·통치자' 줄로 옮겨지며 원래 색을 유지합니다.
보기 방식 (가로형 / 카드형 / 세로형)
상단 버튼으로 세 가지 보기를 고를 수 있습니다. 선택은 그 브라우저에 기억됩니다.
- 가로형 (데스크톱 기본): 왼쪽→오른쪽이 시간, 줄(레인)이 위아래로 쌓임. 모바일에서는 버튼이 숨겨짐
- 항목이 몰린 신약 시대(BC 40~)는 축척을 10배로 키워 그리며, 연도 축에 "신약 시대부터 축척 10배" 표시가 있음
- 가로형 (데스크톱 기본): 왼쪽→오른쪽이 시간, 줄(레인)이 위아래로 쌓임. 모바일에서는 버튼이 숨겨짐
- 카드형: 시대별(신약 시대는 10년 단위) 목록. 구간 제목이 위에 고정되고, 신약 구간 제목 옆에 그 시기 통치자가 나옴
- 세로형 (모바일 기본): 가로형을 90도 돌린 연표. 맨 위에 열 제목(시대 / 주요 사건 / 인물 / … / 세계사)이 고정되고,
왼쪽에 연도 축이 고정됨. 위아래로 움직이면 시간이, 좌우로 움직이면 열이 바뀜
- 시대는 연도 축 옆의 좁은 띠(세로 글씨), 주변 세계·역사는 맨 오른쪽 '세계사' 열
- 항목이 몰린 신약 시대(BC 40~)는 축척을 10배로 키워 그리며, 그 지점에 표시가 있음
- 긴 기간 막대의 이름은 스크롤을 따라 내려옴
- −/+ 버튼이나 두 손가락으로 확대·축소
모바일(세로형·카드형)에서는 하단 안내(기호 설명·주의사항)를 숨기고, 위쪽 설명 버튼을 누르면 위에 펼쳐집니다 (아래쪽 앵커 광고와 겹치지 않게).
항목을 누르면 아래(데스크톱은 오른쪽)에서 설명 패널이 열리고, 같은 시기가 아닌 항목은 흐려집니다.
사용법
| 동작 | 방법 |
|---|
| 이동 | 마우스 드래그, 스크롤, 터치 스와이프 |
| 확대·축소 | Ctrl(⌘)+휠, 트랙패드 핀치, 두 손가락 핀치, + / - 키, 상단 버튼 |
| 항목 보기 | 클릭 → 오른쪽(모바일은 아래) 패널에 설명·성경 구절·같은 시기 항목 목록 |
| 같은 시기 | 항목을 선택하면 세로 기준선이 생기고 같은 시기 항목만 강조됨 |
| 이전/다음 | ← → 키 또는 패널의 버튼 |
| 검색 | 상단 검색창 (/ 키), Enter로 결과 사이 이동. 초성 검색 가능 (ㅇㅂㄹ → 아브람) |
| 성경 구절 | 설명 패널의 구절(예: 창 12:1–4)을 누르면 대한성서공회 개역한글 본문(YouVersion bible.com)으로 이동 (주소는 js/bible-ref.js의 BIBLE_URL) |
| 공유 | 설명 패널의 공유 버튼: 연도·제목·구절·요약을 지금 테마(기본/iOS, 밝게/어둡게) 그대로 이미지로 만들어 공유 (공유를 지원하지 않는 브라우저는 이미지 파일로 저장) |
| 홈 화면에 추가 | 브라우저 메뉴의 '홈 화면에 추가'로 앱처럼 설치, 한 번 연 뒤에는 오프라인에서도 열림 (sw.js, manifest.webmanifest) |
| 필터 | 상단 필터 버튼을 누르면 줄 목록이 펼쳐지고, 눌러서 줄 켜기/끄기 (숨긴 줄 수 표시, ‘모두 보기’) |
| 테마 | 오른쪽 위 ◐ 버튼: 스타일 기본 / iOS, 화면 자동 / 밝게 / 어둡게 (선택은 브라우저에 기억, 처음에는 Apple 기기면 iOS 스타일). 메뉴·패널·줄 켜기/끄기·접기/펼치기에 애니메이션 — 기본은 짧은 페이드, iOS는 스프링·시트 곡선 (기기에서 '동작 줄이기'를 켜면 없음) |
| 연대 학설 비교 | 출애굽·여리고·예수 탄생·십자가 등 학설이 갈리는 항목은 설명 패널에 학설별 연대·근거·출처, 타임라인에 다른 학설 연대를 점선으로 표시 (js/chronology.js) |
| 성경 기록 | '성경 기록' 줄에 구약 각 권(전통적 견해 기준, 학계 견해는 설명에)과 신약 각 권의 기록 시기 |
| 족보·발견 연표 | /era/genealogy 아담→예수 족보(js/genealogy.js), /era/discoveries 성경 밖 자료가 발견된 순서 |
| 링크 | 주소가 #council 처럼 바뀌므로 그대로 링크 공유 가능 |
데이터 수정
모든 내용은 js/data.js에 있습니다.
{ id: "exodus", lane: "event", start: -1446, title: "열 재앙과 출애굽", ref: "출 7–14장", desc: "..." }
{ id: "journey1", lane: "paul", start: 47, end: 48.5, approx: true, title: "1차 전도여행", ref: "행 13–14장", desc: "..." }
start / end: 연도 (음수 = 기원전). end가 있으면 기간 막대, 없으면 점으로 표시approx: true: 추정 연대 (속이 빈 점, 점선 막대, "약" 표시)lane: 표시할 줄 (각 타임라인의 lanes 참고)fold: "jesus": 접기/펼치기 묶음에 넣을 항목- 구약의
periods는 '시대' 줄, prologue는 연대 미상 구간에 순서대로 놓입니다
연대는 보수적 전통 연대(출애굽 BC 1446, 왕상 6:1 기준)를 따르며, 학자에 따라 차이가 있습니다.
⚠ 이 사이트의 내용(연대·설명·출처)은 AI의 도움으로 작성되어 틀린 부분이 있을 수 있습니다. 사이트 하단에도 같은 안내가 표시됩니다.
사실 확인 표시 (출처 포함)
항목을 누르면 상세 패널에 아래 세 가지가 구분되어 나오며, 모든 내용에 출처 링크가 붙습니다.
| 표시 | 파일 | 의미 |
|---|
파란 史 | js/history.js | 역사 기록으로 잘 알려진 사실 (로마 황제, 헤롯 왕가, 주변 제국, 유대 전쟁 등) |
초록 ✓ | js/evidence.js | 성경 내용을 뒷받침하는 성경 밖 자료 (고고학 발견·당대 비문·고대 문헌), 발견 전 회의적 견해가 있었으면 함께 표기 |
주황 ○ | js/research.js | 진행 중인 연구·논쟁 중인 주장 (미확인). 상태: 진행 중 / 논쟁 중 / 가설 / 해석 제기 / 미확인 |
빨간 ▲ | js/research.js | 상태에 논란 많음·논문 철회가 들어간 주장. 상세 패널에서도 빨간 상자로 따로 모아 보여 줌 |
- 논란이 많은 주장(방주 발견 주장, 예수 가족 무덤, 야고보 유골함 등)도 빼지 않고
논란 많음으로 표시해, 학계의 평가와 함께 적습니다.
research.js의 기준 시점은 TIMELINE_RESEARCH_DATE(현재 2026년 10월)이며, 내용을 갱신할 때 함께 바꿉니다.- 출처 형식:
sources: [{ label, url }] — 위키백과 링크는 W("문서_제목") 도우미를 씁니다.
배포 (Vercel)
빌드가 없는 정적 사이트라 저장소를 연결하기만 하면 됩니다.
- vercel.com에 GitHub 계정으로 로그인
- Add New… → Project →
bible-is-fact 저장소 Import
- 설정은 기본값 그대로 둡니다
- Framework Preset: Other
- Root Directory:
./
- Build Command / Output Directory: 비워 둠
- Deploy →
https://<프로젝트이름>.vercel.app 주소가 생깁니다
이후 main에 푸시할 때마다 자동으로 다시 배포됩니다 (다른 브랜치는 미리보기 주소로 배포).
도메인을 연결하려면 Vercel 프로젝트의 Settings → Domains에서 추가합니다.
광고 (Google AdSense)
광고 설정은 js/ads.js 한 곳에 모여 있으며, 게시자 ID가 비어 있으면 광고 스크립트를 불러오지 않습니다.
- 광고 위치: 항목을 눌렀을 때 열리는 설명 패널 아래 (처음 열 때 한 번 만들고 계속 재사용 — 항목마다 새로 띄우지 않음)
- 게시자 ID
ca-pub-4099065432031117이 다음 세 곳에 들어 있습니다 (바꿀 때는 함께 맞출 것)
index.html <head>: google-adsense-account 메타 태그와 애드센스 스크립트 (사이트 확인용)js/ads.js의 client — 설명 패널 광고를 켜려면 detailSlot에 디스플레이 광고 단위 슬롯 ID를 넣음- 루트의
ads.txt
- 개인정보처리방침:
privacy.html (쿠키·광고 고지 포함, 하단에 링크)
- 타임라인 화면은 고정 레이아웃이라 애드센스 자동 광고의 본문 내 광고는 끄고, 필요하면 앵커 광고만 켜는 것을 권장합니다.
시대별 읽기 페이지 (검색엔진·애드센스용)
타임라인 화면은 JavaScript로 그려져 검색 봇에는 내용이 거의 보이지 않으므로, 같은 내용을 글로 읽는 페이지로도 내보냅니다.
/era(시대 목록)와 /era/patriarchs 같은 시대별 페이지에 각 항목의 설명·성경 구절·역사 기록·성경 밖 자료·연구·출처가 들어갑니다.
데이터를 고친 뒤에는 다시 생성해서 함께 커밋하세요:
node tools/build-pages.js
배포 주소가 바뀌면 tools/build-pages.js의 SITE와 index.html의 og:url·og:image·canonical도 바꿉니다.
Google Search Console에 사이트를 등록하고 sitemap.xml을 제출하면 검색 노출이 빨라집니다.
파일
index.html 페이지
css/style.css 스타일 (라이트/다크 모드)
css/apple.css iOS 스타일 (HIG 시스템 색 + Liquid Glass 재질 + iOS식 애니메이션)
js/theme-init.js 테마를 화면 그리기 전에 적용 (<head>에서 불러옴)
css/page.css 시대별 읽기 페이지 스타일
era/ 시대별 읽기 페이지 (자동 생성 — 직접 고치지 말 것)
tools/build-pages.js era/·sitemap.xml·robots.txt 생성기
img/og.png 링크 공유 미리보기 이미지 (1200×630)
img/icon-*.png 홈 화면 아이콘
js/bible-ref.js 성경 구절 → 본문 링크
js/chronology.js 연대 학설 비교
js/genealogy.js 족보 (아담→예수)
manifest.webmanifest, sw.js 홈 화면에 추가·오프라인
sitemap.xml, robots.txt 검색엔진용
js/data.js 타임라인 데이터
js/history.js 역사 기록 (史)
js/evidence.js 성경 밖 자료로 확인된 내용 (✓)
js/research.js 진행 중인 연구·논쟁 (○, 미확인)
js/ads.js Google AdSense 설정 (게시자 ID·광고 단위)
privacy.html 개인정보처리방침
img/favicon.svg 브라우저 탭 아이콘
vercel.json Vercel 배포 설정
js/app.js 렌더링·인터랙션
