교육
학원 홈페이지 '단단학원' — 주간 관리 리포트
성적을 약속하는 대신 관리 화면을 보여 주는 입시학원 홈페이지입니다. 학생을 고르면 출결·과제·오답률·학습시간이 그 자리에서 렌더되고, 주간 시간표는 모바일에서 교시별 카드로 펼쳐집니다.
비공개·데모 — AI 가상 데이터로 재구성한 예시입니다
문제
학원 사이트는 합격 실적으로 승부하는데, 학원법상 성적·합격 보장은 금지다. 레퍼런스 3곳은 합격증을 도배하고 합격자 실명을 티커로 돌린다 — 그대로 이식할 수 없다. 게다가 주간 시간표는 열이 많아 모바일에서 가로 스크롤로 무너지기 쉬운 컴포넌트다. 실적을 지우고 나면 남는 질문은 하나다. 보호자가 정말 궁금한 것은 등록한 뒤 아이가 어떻게 관리되고 매주 무엇이 공유되는지인데, 이걸 말로만 적으면 어느 학원이나 하는 약속과 구분되지 않는다. 관리 화면 자체를 보여 주는 편이 낫다고 판단했다. 다만 출결·과제·오답률·학습시간을 그리려면 차트가 필요하고 차트 라이브러리를 들이는 순간 정적 사이트의 가벼움이 깎이는 딜레마가 있었다.
해결
실적 대신 '어떻게 관리하는가'를 화면으로 증명했다. 학생 카드를 고르면 출결 도트·과제 제출률·단원별 오답률·학습시간 추이가 교체 렌더되는 주간 관리 리포트를 만들었고, 차트는 라이브러리 없이 CSS·SVG로 그려 외부 의존성을 0으로 뒀다. 리포트는 가상 학생 네 명을 탭으로 오가며 5주 치 출결 도트와 단원별 오답 막대, 학습시간 꺾은선에 담임 메모까지 한 장에 담기게 짰고 학생 데이터가 연출된 예시라는 고지도 화면 안에 두었다. 시간표는 데스크탑에선 그리드, 모바일에선 교시별 카드로 변환해 5개 뷰포트 전수에서 가로 스크롤이 없다. 합격 실적·수강료 금액은 싣지 않았다.
- 8
- 페이지
- 0
- 가로 오버플로(5뷰포트 전수)
- 0
- 외부 의존성
제작 노트
탭으로 오가는 주간 리포트
가상 학생 네 명이 탭으로 놓여 있고 하나를 고르면 리포트 전체가 그 학생의 데이터로 다시 그려집니다. 출결은 5주×6일 도트가 출석·지각·결석을 색으로 구분하고 과제 제출률은 주별 막대로, 단원별 오답률은 미분법이나 지수·로그함수 같은 단원명이 붙은 가로 바로 나타납니다. 주간 학습시간은 꺾은선으로 추이를 그린 뒤 담임 메모 한 단락이 숫자의 맥락을 답니다. 어떤 단원을 다시 풀렸고 다음 주에 무엇을 배정했는지까지가 리포트 한 장의 범위입니다.
차트 라이브러리 없이 그린다
네 종류 차트를 전부 CSS와 SVG로 직접 그렸습니다. 도트와 막대는 스타일만으로 만들고 꺾은선은 좌표를 계산해 SVG 요소를 하나씩 붙입니다. 차트 라이브러리 하나가 사이트 전체 스크립트보다 무거운 일이 흔해 외부 의존성 없이 가는 쪽을 택했고, 그 결과 여덟 페이지가 정적 HTML과 스크립트 한 파일로 끝납니다. 외부 요청이 없어 회선이 느려도 로딩 편차가 작습니다. 꺾은선 그래프에는 수치를 문장으로 읽어 주는 라벨을 붙여 화면낭독기로도 같은 정보에 닿게 했습니다.
보호자의 질문 순서대로
첫 화면은 무엇을 어떻게 관리하는지에서 시작해 리포트 데모, 반 편성, 시간표, 입학 절차 순으로 내려갑니다. 반은 학년 대신 진도 기준 네 단계로 나눠 개념부터 실전까지 어디에 들어가게 되는지 보여 주고, 입학은 상담 접수에서 레벨 테스트와 반 배정을 거쳐 첫 리포트가 나가기까지 네 걸음으로 정리했습니다. 시간표는 넓은 화면에서 요일 그리드로, 좁은 화면에서는 교시별 카드로 다시 쌓입니다. 자주 묻는 질문에는 보강과 오답 관리, 보호자 공유 방식을 담아 상담 전에 읽고 오게 했습니다.
화면
