Business Website

학원 홈페이지 '단단학원' — 주간 관리 리포트

성적을 약속하는 대신 관리 화면을 보여 주는 입시학원 홈페이지입니다. 학생을 고르면 출결·과제·오답률·학습시간이 그 자리에서 렌더되고, 주간 시간표는 모바일에서 교시별 카드로 펼쳐집니다.

비공개·데모 — AI 가상 데이터로 재구성한 예시입니다

데모 열기 ↗정적 HTML, Tailwind CSS(빌드), 바닐라 JS, SVG 차트, nginx

문제

학원 사이트는 합격 실적으로 승부하는데, 학원법상 성적·합격 보장은 금지다. 레퍼런스 3곳은 합격증을 도배하고 합격자 실명을 티커로 돌린다 — 그대로 이식할 수 없다. 게다가 주간 시간표는 열이 많아 모바일에서 가로 스크롤로 무너지기 쉬운 컴포넌트다.

해결

실적 대신 '어떻게 관리하는가'를 화면으로 증명했다. 학생 카드를 고르면 출결 도트·과제 제출률·단원별 오답률·학습시간 추이가 교체 렌더되는 주간 관리 리포트를 만들었고, 차트는 라이브러리 없이 CSS·SVG로 그려 외부 의존성을 0으로 뒀다. 시간표는 데스크탑에선 그리드, 모바일에선 교시별 카드로 변환해 5개 뷰포트 전수에서 가로 스크롤이 없다. 합격 실적·수강료 금액은 싣지 않았다.

8
페이지: 0
가로 오버플로(5뷰포트 전수): 0
외부 의존성

화면