[HTML/CSS/JS] 1만 시간의 법칙

프로젝트 소개

GitHub URL

https://github.com/chdev-kr/2025-project-10000hours-rule
배포 URL

https://chdev-kr.github.io/2025-project-10000hours-rule/

구현 화면 및 기능

데스크톱 버전
모바일 버전

프로젝트명

1만 시간의 법칙

사용 기술 및 기술 스택

HTML
- 시맨틱 마크업(header, main, section, article, footer)
- 접근성 속성: aria-labelledby, aria-label, 스크린리더 전용 클래스(.a11y-hidden)
- 네이티브 모달 요소: dialog
CSS
- 레이아웃: CSS Grid, Flexbox
- CSS Custom Properties(디자인 토큰) 사용
- 반응형: Media Queries, clamp() 기반 폰트·간격 스케일링
- 컨테이너 패턴: max-width + width: 100%
- 고해상도 대응: 2x 이미지(레티나 대응)
JavaScript
- DOM 조작, 이벤트 처리, 입력값 검증
- 모달 열기/닫기 로직 분리(modal.js)
- 계산기 로직 및 실시간 결과 표시(script.js)
- 키보드 접근성(Enter 키 처리), 숫자 포맷(toLocaleString)
- 네이밍 규칙: camelCase
빌드/배포
- 정적 사이트 구조(HTML/CSS/JS)
- GitHub Pages 배포
품질
- Lighthouse 기준 모바일/데스크톱 95점(기록 기반)

주요 특징

1만 시간 계산기: 분야/일일 훈련 시간을 입력하면 총 소요일수 산출(올림 처리, 천 단위 포맷)
접근성 중심 설계: 시맨틱 태그, ARIA 연결, 스크린리더 전용 텍스트, 키보드 네비게이션 지원
반응형 UI: 데스크톱·모바일 최적화, clamp()로 폰트/여백 자동 스케일
모달 시스템: 네이티브 dialog 기반 응원 메시지 모달(스크린리더 호환)
성능·가독성 최적화
- 로컬 폰트 사용으로 외부 의존성 최소화 및 초기 렌더 향상
- 저빈도 텍스트는 이미지 처리로 불필요한 폰트 로딩 제거(레티나 2x 지원)
- CSS 변수로 일관된 색상·타이포 스케일 관리
에러 예방 및 UX 개선
- 실시간 입력 검증과 버튼 활성/비활성 제어
- 로딩 상태/시각적 피드백 제공
구조적 분리: UI(HTML/CSS)와 동작(JS) 모듈 분리로 유지보수성 확보

개발 배경

모두의연구소 프론트엔드스쿨 1차 프로젝트로, HTML과 CSS, JS를 활용해 1만 시간의 법칙을 테마로 반응형 웹을 구현했습니다. 1만 시간의 법칙은 어떤 분야의 전문가가 되기 위해서는 최소한 1만 시간의 훈련이 필요하다는 법칙을 바탕으로, 사용자가 원하는 분야와 하루 훈련 시간을 입력하면 1만 시간 달성까지 필요한 일수를 계산해주는 웹입니다.