2026학년도 2학기 1차고사 시험 일정 시간표 웹앱

학교 전자칠판에 띄워 두고 현재 시간에 따라 시험 준비 시간, 시험 시간, 쉬는 시간, 자율학습, 시험 종료 상태를 안내하는 정적 웹앱입니다. 교실마다 전자칠판 1대에 띄우고, 감독 교사가 시험 직전에 조작하는 것을 기준으로 설계했습니다.

파일 설명

• index.html: 화면 구조와 기본 요소
• style.css: 전자칠판용 어두운 화면 디자인과 안전 영역 레이아웃
• script.js: 날짜/학년별 과목 데이터, 시간 계산, 구간 판정, 화면 갱신 로직
• README.md: 실행 방법, 수정 방법, 테스트 체크리스트

사용 방법

1. index.html을 브라우저에서 엽니다.
2. 시험일이면 오늘 날짜가 자동으로 선택되어 있습니다(오늘 표시). 시험일이 아니면 날짜를 직접 고릅니다.
3. 학년을 고르고 시작을 누릅니다.

별도 설치나 빌드 과정은 없습니다. HTML, CSS, JavaScript만 사용하므로 GitHub Pages에 올릴 수 있는 정적 파일 구조입니다.

화면 구성

시작 화면

• 제목과 전체 화면 버튼
• 날짜 4개, 학년 2개, 테스트 시간(기본은 접힘), 시작 버튼
• 테스트 시간 >를 누르면 입력칸이 펼쳐지고 꺽쇠가 ∨로 바뀝니다. 다시 누르면 접힙니다.

시험 진행 화면

• 위쪽 두 줄: 첫 줄 왼쪽 끝 이전 화면, 오른쪽 끝 전체 화면 버튼(두 버튼 폭 동일). 둘째 줄 왼쪽 현재 시각 09시 40분(옅은 주황색), 오른쪽 날짜·학년. 둘째 줄 글자는 버튼 폭에 맞춰 최대 크기입니다.
• 가운데: 큰 남은 시간(분:초). 맨 위부터 시간표 위까지 좌우 열 사이를 꽉 채웁니다.
• 남은 시간 양옆(남은 시간의 세로 가운데 높이): 왼쪽에 상태 문구, 오른쪽에 안내 문구 실제 시종과 / 차이가 날 수 / 있습니다(세 줄). 안내 문구는 '보통' 크기('차이가 날 수 있습니다'가 버튼 폭에 맞는 크기)이고, 상태 문구는 그 1.2배(style.css의 --status-scale)이고, 그 안에서 과목명과 자율학습 줄은 다른 줄의 2배(--side-big)입니다. 버튼 폭을 넘는 줄이 있으면 상태 문구만 버튼 폭에 맞게 조금 줄어듭니다.
  • 상태 문구 예: 1교시 / 준비까지, 국어 / 준비, 국어 / 시험 중, 자율학습 / 진행 중, 다음 과목 / 국어, 다음 시간 / 자율학습. - 오늘 시험이 끝나면 안내 문구는 숨기고 오늘 시험 종료를 남은 시간 자리에 크게 표시합니다.
• 아래쪽: 오늘의 시간표. 3등분된 칸 사이가 세모로 잘록하게 파여 있고, 현재 교시는 파란 둥근 상자로 강조됩니다.
• 시험 종료 10분 전부터 남은 시간이 빨간색으로 바뀝니다. 자율학습·쉬는 시간·준비 시간에는 빨간색이 적용되지 않습니다.

테스트 사용법

시작 화면에서 테스트 시간 >를 눌러 펼친 뒤 시각을 입력하면 실제 현재 시각 대신 해당 시각을 기준으로 화면이 계산됩니다. 비워 두면 현재 시각을 사용합니다.

다음 형식을 모두 사용할 수 있습니다: 09:40, 9:40, 0940, 940, 09.40, 9.40

새로고침하거나 앱을 새로 열 때, 그리고 이전 화면으로 돌아올 때 테스트 시간은 항상 빈 칸입니다. (주소 뒤에 ?test=...를 붙이는 방식은 더 이상 쓰지 않습니다.)

테스트 모드 표시: 선택한 날짜가 오늘과 다르거나 테스트 시간을 입력했으면 남은 시간이 파란색으로 표시됩니다. (마지막 10분은 실제 시험처럼 빨간색)

전체 화면 버튼 사용법

• 두 화면 모두 오른쪽 위에 전체 화면 버튼이 있습니다.
• 누르면 전체 화면으로 바뀌고 버튼 문구가 전체 화면 해제로 바뀝니다.
• 전체 화면 해제 버튼이나 Esc 키로 해제합니다.
• 브라우저나 기기 정책에 따라 전체 화면 전환이 제한될 수 있습니다. 이 경우에도 시간표 기능은 그대로 동작합니다.

스크롤 없는 화면

• 시작 화면과 시험 진행 화면 모두 스크롤이 생기지 않도록 화면 높이에 고정되어 있습니다.
• 모든 내용은 전자칠판에서 가려지는 영역(위 10%, 양옆 10%, 아래 20%) 안쪽에만 배치됩니다. 이 값은 style.css의 --safe-top, --safe-side, --safe-bottom에서 바꿀 수 있습니다.
• 해상도가 낮아 내용이 들어가지 않으면, 시작 화면·위 줄·가운데 영역·시간표가 비율을 유지한 채 자동으로 작아집니다.
• 창 크기를 바꾸거나 전체 화면으로 전환하면 즉시 다시 맞춰집니다.

글꼴

• 글꼴은 학교안심 알림장체(보통·굵게)입니다. fonts 폴더의 HakgyoansimAllimjang-R.otf, HakgyoansimAllimjang-B.otf를 사용하므로 인터넷 없이도 표시됩니다.
• 글꼴 파일이 없으면 맑은 고딕으로 표시됩니다.
• GitHub Pages에 올릴 때는 fonts 폴더도 함께 올립니다.

화면 꺼짐 방지

• 시험 진행 화면에 들어가면 화면이 자동으로 꺼지지 않도록 설정합니다(Screen Wake Lock API).
• 시작 화면으로 돌아가면 해제됩니다. 다른 탭이나 창으로 갔다가 돌아오면 다시 설정됩니다.
• 지원하지 않는 브라우저나 file://로 연 경우에는 동작하지 않을 수 있습니다. 이때도 시간표 기능은 그대로 동작합니다.

시간표 수정 방법

새 시험마다 아래 세 곳을 바꿉니다. 날짜·학년 버튼은 개수에 맞춰 한 줄에 자동으로 나뉩니다.

1. index.html의 <title>과 <h1>: 시험 이름(예: 2026학년도 2학기 1차고사)
2. script.js의 EXAM_DAYS: 날짜, 학년별 교시 과목
3. script.js의 GRADES: 대상 학년

날짜 키(2026-10-12)는 오늘 날짜 자동 선택과 상단의 10/12(월) 표시에 그대로 쓰이므로 실제 날짜와 정확히 맞아야 합니다.

const EXAM_DAYS = {
  "2026-10-12": {
    label: "10월 12일 월요일",
    grades: {
      "1": ["자율", "국어", "수학"],
      "2": ["국어", "수학", "자율"],
      "3": ["국어", "자율", "수학"],
    },
  },
};

const GRADES = {
  "1": "1학년",
  "2": "2학년",
  "3": "3학년",
};

자율은 시험 과목이 아니라 자율학습으로 처리됩니다. 화면에는 자율학습으로 표시되고, 시험 종료 10분 전 빨간색 강조가 적용되지 않습니다.

시간 구조 수정 방법

script.js의 PERIODS 상수를 수정합니다. 하루는 항상 3교시입니다.

const PERIODS = [
  {
    period: 1,
    prepStart: "09:00",
    prepEnd: "09:05",
    examStart: "09:05",
    examEnd: "09:50",
  },
];

쉬는 시간은 BREAKS 상수에서 수정합니다. 각 시간은 HH:MM 형식을 사용합니다.

GitHub Pages 배포 방법 개요

1. GitHub 저장소를 만듭니다.
2. index.html, style.css, script.js, README.md를 저장소 루트에 올립니다.
3. 저장소의 Settings에서 Pages 메뉴로 이동합니다.
4. 배포 소스를 Deploy from a branch로 선택합니다.
5. 브랜치와 루트 폴더를 선택한 뒤 저장합니다.
6. GitHub Pages 주소가 생성되면 브라우저에서 접속해 동작을 확인합니다.
7. 파일을 고쳐 다시 올릴 때는 index.html의 style.css?v=..., script.js?v=... 숫자를 함께 바꿉니다. 그래야 전자칠판 브라우저가 예전 파일을 쓰지 않고 새 파일을 받습니다. 세 파일(index.html, style.css, script.js)과 fonts 폴더는 항상 함께 올립니다.

테스트 체크리스트

아래 시간은 테스트 시간 입력칸에 넣어 확인합니다.

• 08:40 → 1교시 준비까지
• 09:02 → 과목 준비(예: 국어 준비), 시간표에서 1교시 강조
• 09:06 → 과목명만(예: 국어) 또는 자율학습
• 09:39 → 시험 중, 남은 시간 기본색
• 09:40 → 시험 종료 10분 전, 시험 과목이면 남은 시간 빨간색
• 09:49 → 시험 종료 직전, 시험 과목이면 남은 시간 빨간색
• 09:50 → 쉬는 시간, 다음 시간이 자율학습이면 다음 시간 / 자율학습 두 줄 표시, 시간표 강조 없음
• 10:06 → 2교시 준비 시간
• 10:46 → 2교시 시험 종료 10분 전, 시험 과목이면 남은 시간 빨간색
• 10:55 → 쉬는 시간, 다음 시간이 시험 과목이면 다음 과목 / 과목명 두 줄 표시
• 11:12 → 3교시 준비 시간
• 11:50 → 3교시 시험 종료 10분 전, 시험 과목이면 남은 시간 빨간색
• 12:00 → 오늘 시험 종료를 가운데에 크게, 남은 시간과 안내 문구 숨김
• 09:40, 9:40, 0940, 940, 09.40, 9.40이 모두 09시 40분으로 처리되는지 확인
• 2460, 1265, 99:99, abcd는 시작되지 않고 안내 문구가 나오는지 확인

사용자 직접 점검 절차

전자칠판에 실제로 띄우기 전 아래 순서대로 확인합니다.

1. 브라우저에서 index.html을 엽니다.
2. 테스트 시간 >를 눌러 펼치고 09:40을 입력한 뒤 10월 12일 월요일, 3학년을 고른 뒤 시작을 누릅니다.
3. 위쪽 첫 줄 왼쪽에 이전 화면, 오른쪽에 전체 화면이 같은 크기로, 둘째 줄 왼쪽에 현재 시각 09시 40분, 오른쪽에 10/12(월) 3학년이 보이는지 확인합니다.
4. 가운데에 빨간색 10:00, 그 왼쪽에 국어, 오른쪽에 안내 문구가 보이고, 아래 시간표에서 1교시가 강조되는지 확인합니다.
5. 이전 화면을 눌러 시작 화면으로 돌아오고, 날짜·학년 선택은 그대로이며 테스트 시간은 비어 있는지 확인합니다.
6. 1학년으로 시작해 중앙 문구가 자율학습이고 남은 시간이 빨간색이 아닌지 확인합니다.
7. 테스트 시간 10:55, 1학년으로 시작해 왼쪽에 다음 과목 / 수학이 두 줄로 보이는지 확인합니다.
8. 테스트 시간 12:00으로 시작해 오늘 시험 종료만 보이는지 확인합니다.
9. 전체 화면을 눌러 전환되고 버튼이 전체 화면 해제로 바뀌는지, 다시 누르거나 Esc로 해제되는지 확인합니다.
10. 전자칠판에서 화면 위쪽, 양옆, 아래쪽이 가려져도 모든 내용이 보이고, 위아래 스크롤이 생기지 않는지 확인합니다.

수정 요청 템플릿

다음 사항을 수정해 주세요.

1. 문제가 발생한 화면:
2. 선택한 날짜/학년:
3. 테스트 시간:
4. 기대한 표시:
5. 실제 표시:
6. 수정하고 싶은 내용: