배움의 날개 2기 · 초등 심화 · 8~9차시 참고 자료

반짝 교실판, 같은 기능 두 그릇

전자칠판에 하루 종일 켜 두는 학급 대시보드예요. 기능은 똑같고, 오른쪽은 왼쪽 파일을 복사해 Codex CLI에게 디자인만 다듬게 했어요. 둘 다 열어 보고 무엇이 달라졌는지 찾아보세요.

원본 · Claude Code

반짝 교실판

프롬프트로 기능을 하나씩 더해 만든 원본이에요.

열어 보기 → 사본 · Codex CLI 디자인

반짝 교실판 · 다듬은 판

같은 파일을 복사해 디자인만 맡겼어요. 바뀐 점은 아래에 있어요.

열어 보기 →

들어 있는 기능

  • 지금 몇 교시인지 저절로 보여 주고, 쉬는 시간엔 "과학실로 이동"처럼 알려 줘요
  • 우유·숙제·준비물 체크판: 아직 안 한 번호가 바로 보이고, 우유 안 마시는 학생처럼 매일 빠지는 번호를 정해 둘 수 있어요
  • 출결(결석·지각·조퇴)과 이번 달 결석 요약
  • 집중 타이머, 번호 뽑기, 모둠 편성, 소음 신호등, 알림장 칠판, 기분 날씨, 칭찬 구슬병
  • 시간표 설정 창: 교시 시각 한 번에 채우기, 주간 시간표, 과목별 이동 장소

Codex가 바꾼 점

방향: 자연스러운 숲빛과 따뜻한 종이색을 바탕으로, 교실 뒤에서도 현재 수업과 체크 현황이 또렷한 차분한 대시보드로 정리했습니다.

  • 전체 배경·표면·글자·상태 색을 재조정해 밝은 테마의 대비를 높이고, 자동·수동 어두운 테마를 깊은 녹색 팔레트로 정리했습니다.
  • 현재 교시 카드를 짙은 녹색 강조 패널로 바꾸고 진행 막대와 대비를 높여 지금 수업이 먼저 보이게 했습니다.
  • 시간표의 현재 교시를 금빛 배경, 왼쪽 강조선, 진행 표시로 구분하고 지난 교시도 읽기 쉽게 다듬었습니다.
  • 체크판 번호 칸에 완료·미완료·제외·결석·지각·조퇴 상태별 대비와 테두리를 적용했습니다.
  • 카드·탭·버튼·입력창의 테두리와 그림자 강도를 역할에 맞게 나누고 포커스 표시를 분명히 했습니다.
  • 하단 도구 막대를 한 덩어리의 정돈된 바 형태로 다듬고 각 도구 버튼을 구분했습니다.
  • 모둠·신호등·기분·구슬병·알림장·시간표 설정 등 창의 표면, 모서리, 그림자 언어를 통일했습니다.
  • 주요 버튼과 선택 칸의 최소 높이를 48px로 맞추고 작은 화면에서도 여백과 배치를 이어가게 조정했습니다.
  • 기존 반응형 구간과 prefers-reduced-motion 지원을 유지했습니다.

Codex CLI(gpt-6-luna)가 CSS만 고쳤어요. 스크립트·저장 방식·id는 그대로예요. 두 판이 기록을 섞지 않도록 저장 이름 한 줄만 Claude가 바꿨어요.

내 교실에서 쓰기 · 9차시 루트 C

  • 링크를 그냥 열면 기록은 그 기기 브라우저에만 저장돼요. 학생 이름 없이 번호만 써요.
  • 구글 시트에 날짜별로 남기려면: 시트 → 확장 프로그램 → Apps Script → 아래 두 파일 붙여 넣기 → 배포 → 웹 앱(실행: 나 · 액세스: 나만)
  • 시트에 '체크 기록 · 출결 · 기분 날씨 · 알림장' 탭이 생기고 날마다 한 줄씩 쌓여요. 출결은 NEIS 입력 전 보조 메모용이에요.
Code.gs 보기 index 파일 보기 (원본) index 파일 보기 (다듬은 판)

처음 만들 때 쓴 뼈대 프롬프트

펼쳐서 보기 · 복사해서 제미나이 캔버스에 붙여 넣기 
아래 기획서대로 한 파일짜리 웹앱(HTML 하나)을 만들어 줘.

[누가·언제] 초등 5학년 교실 전자칠판(가로 대형 화면)에 아침부터 하교까지 켜 두는 '우리 반 대시보드'. 교사와 학생이 손가락으로 누른다. 교실 맨 뒤에서도 글자가 읽혀야 한다.

[무엇을 - 핵심 기능 셋]
1. 지금 몇 교시: 큰 디지털시계(초 포함)와 날짜·요일. 월~금 주간 시간표와 교시별 시작·끝 시각을 한 번 입력해 두면 오늘 요일 시간표가 저절로 뜨고, 지금 교시가 강조된다. 쉬는 시간·점심에는 "다음 3교시 과학까지 7분"처럼 보여 준다.
2. 오늘 체크판 3개: 기본 이름은 우유·숙제·준비물, 판 이름은 눌러서 바꿀 수 있다. 판마다 오늘 내용을 적는 한 줄 칸이 있다. 번호 칸을 누르면 초록 체크로 바뀌고 "완료 18/25명"과 "아직: 3, 7, 12번"을 함께 보여 준다. 날짜가 바뀌면 체크는 자동으로 비워진다.
3. 수업 도구: 큰 원형 진행바 타이머(3·5·10분 빠른 버튼, 시작·멈춤·처음으로, 끝나면 부드러운 알림음)와 번호 뽑기(숫자가 굴러가다 멈추는 효과, '뽑힌 번호 빼기' 켜고 끄기).

[화면 흐름] 첫 화면 한 장에 위 셋이 스크롤 없이 모두 보인다. 오른쪽 위에 전체화면 버튼, 다크 모드 버튼, ⚙ 설정. 설정에서 학생 수(기본 25), 주간 시간표, 교시 시각, 오늘 결석 번호를 바꾼다. 결석 번호는 체크판 집계와 뽑기에서 빠진다.

[디자인] 파스텔 카드형, 큰 글씨, 넉넉한 여백. 버튼은 손가락으로 누르기 편하게 크게.

[하지 않을 것] 학생 이름·사진·연락처 칸은 만들지 않는다(번호만). 로그인, 서버, 외부 전송은 없다. 입력과 체크는 이 기기 브라우저(localStorage)에만 저장하고, 저장을 쓸 수 없는 환경에서도 오류 없이 돌아가게 한다.

뼈대가 나오면 "다른 데는 그대로 두고 ○○만 추가해 줘"로 하나씩 더해요. 출결, 빼는 번호, 이동 장소도 그렇게 더한 거예요.

학생 이름·사진은 넣지 않아요. 이 페이지와 두 교실판은 어떤 기록도 서버로 보내지 않아요.