넥스트스텝 수학과학학원 — 데이터로 설명하는 학원 사이트

중2~고3 수학·과학 전문 학원을 위한 사이트입니다. 학원 사이트의 실제 방문자는 학생이 아니라 결제 결정을 내리는 학부모이고, 그들이 확인하려는 것은 단 두 가지입니다. 여기 보내면 성적이 오르는가, 우리 아이 시간표에 맞는가.

과제

대부분의 학원 사이트는 원장 인사말과 배너 슬라이드로 시작해, 정작 시간표와 상담 신청은 가장 아래에 둡니다. 그래서 이 사이트는 순서를 뒤집었습니다. 성적 데이터 → 커리큘럼 → 학습 시스템 → 시간표 → 상담 신청으로, 의사결정에 필요한 근거를 먼저 쌓아 올립니다.

디자인 접근

딥 네이비에 시그널 라임 포인트를 쓰고, 숫자는 전부 tabular 정렬로 조판했습니다. 학원업 특유의 촌스러운 장식을 걷어내고 SaaS 제품 페이지 수준의 정보 밀도를 목표로 했습니다. 학생 얼굴 사진은 초상권 문제로 일절 쓰지 않고, 강사 카드는 이니셜 모노그램과 담당 과목 정보로 구성했습니다.

핵심 인터랙션

• 스크롤에 그려지는 성적 차트 — 내신 등급 변화 막대 차트와 12주 오답률 추이 라인 차트를 인라인 SVG로 직접 작성했습니다. 모든 수치에 "데모 데이터" 캡션을 붙여 실제 실적으로 오해될 소지를 없앴습니다.
• 학년별 커리큘럼 탭 — 중2부터 고3까지 5개 탭을 role=tablist로 구현하고 좌우 화살표 키로 이동합니다. 각 탭에 주 수업 횟수·교재·평가 방식을 표로 정리했습니다.
• 반응형 시간표 — 데스크톱에서는 요일×시간 표, 모바일에서는 카드 리스트로 재배치합니다. 학년 필터로 해당 학년 수업만 강조합니다.
• KPI 카운트업 — 상단 지표가 스크롤 진입 시 숫자를 세며 올라가고, reduced-motion에서는 최종값으로 즉시 표시됩니다.
• 상담 신청 폼 — 학년·과목·희망 상담 시간을 받는 구조로, 인라인 오류 메시지를 aria-describedby로 연결했습니다.

전환 설계

헤더의 상담 신청 버튼은 스크롤 전 구간에서 고정되고, 히어로 우측에는 "이번 달 상담 가능 시간" 카드를 두어 문의 문턱을 낮췄습니다. 모바일에서는 전체화면 오버레이 내비게이션에 포커스 트랩을 적용했습니다.

기술 · 성능 · 접근성

• 빌드 없는 정적 사이트 — HTML · CSS · 바닐라 JS만으로 구성했습니다. 프레임워크·번들러가 없어 배포 산출물이 그대로 소스이고, 유지보수 시점에 의존성이 깨질 여지가 없습니다.
• Cloudflare Pages 배포 — 전 세계 엣지에서 서빙하며, _headers로 보안 헤더(X-Content-Type-Options, Referrer-Policy, X-Frame-Options, Permissions-Policy)와 정적 에셋 1년 immutable 캐시를 적용했습니다. 존재하지 않는 경로는 브랜드 404 페이지가 올바른 404 상태로 응답합니다.
• 이미지 — 전량 WebP로 변환하고 모든 img에 width/height를 명시해 레이아웃 이동(CLS)을 제거했습니다. 히어로는 우선 로딩, 나머지는 지연 로딩입니다.
• 모션 — 애니메이션은 transform/opacity만 사용해 컴포지터에서 처리하고, prefers-reduced-motion에서는 모든 자동 재생 모션이 정지합니다.
• 접근성 — 본문 바로가기 링크, 시맨틱 랜드마크, 키보드로 조작 가능한 탭·라이트박스·모바일 내비, 포커스 링, 스크린리더용 라이브 영역, WCAG AA 명도 대비를 지켰습니다.
• SEO — 타이틀·설명·canonical·Open Graph·트위터 카드·업종별 JSON-LD 구조화 데이터를 포함합니다.

결과물

라이브 데모: ononc-nextstep-academy.pages.dev

본 사이트는 ononc가 제작 역량을 보여주기 위해 만든 가상 브랜드 데모입니다. 실제 사업장이 아니며, 문의 폼은 전송되지 않습니다. 사진은 Wikimedia Commons의 자유 이용 라이선스 이미지를 사용했고 출처를 사이트 하단에 표기했습니다.