RBT 실습 시험 개발 가이드: HTML, CSS, Vanilla JavaScript 활용
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 웹 개발자: HTML5, CSS3, Vanilla JavaScript를 사용한 인터랙티브 UI 구현에 관심 있는 개발자
- 교육 기술 개발자: 인증 시험 시뮬레이션 애플리케이션 개발에 필요한 기술 습득을 원하는 분
- 난이도: 중급~고급 (동적 상태 관리, 라이브러리 없이 DOM 조작, 리스폰시브 디자인)
핵심 요약
- 기술 스택: HTML5, CSS3, Vanilla JavaScript (ES6+) 사용
- 핵심 기능:
- 100문항 랜덤 섞기, 타이머(기본 90분), 진행률 표시, 정답 확인
- 리스폰시브 디자인 및 SEO 최적화 (메타 태그, 키워드 포함)
- JavaScript 로직: DOMContentLoaded
이벤트, Fisher-Yates 알고리즘, 상태 관리
- 프로젝트 구조:
index.html
,style.css
,script.js
,README.md
구성
섹션별 세부 요약
1. HTML 구조
- 메타 태그:
title
,description
,keywords
포함 → SEO 최적화 - 주요 컨테이너:
- #exam-container
: 전체 애플리케이션 레이아웃
- #quiz-area
: 질문 표시 영역 (#question-text
, #options-list
)
- #navigation-controls
: "이전", "다음", "시험 종료" 버튼
- #progress-bar
: 시험 진행률 시각화
- SEO-Friendly 섹션:
.intro-text
클래스 사용 → BACB® 및 RBT Task List 링크 포함
2. CSS 스타일링
- 레이아웃: Flexbox 사용 → 헤더, 네비게이션 정렬
- 색상 팔레트:
- 기본 액션: #0056b3
(블루)
- 타이머: #d9534f
(빨강)
- 성공 메시지: #28a745
(초록)
- 정답 옵션 스타일링:
- .selected
클래스 → 선택 시 #cce5ff
(라이트 블루) 배경색 적용
- transition
효과 → 호버/선택 시 색상 변화
- 리스폰시브 디자인:
@media (max-width: 600px)
미디어 쿼리 적용 → 모바일 최적화
3. JavaScript 로직
- 초기화 함수:
initQuiz()
- questionBank
배열에서 질문 섞기 (shuffleArray
함수)
- userAnswers
배열 초기화 및 첫 번째 질문 로딩
- 타이머 시작 (startTimer()
)
- 타이머 관리:
- setInterval
을 사용한 60초 단위 감소
- 시간 종료 시 자동 제출 처리
- 정답 처리:
- correctAnswer
인덱스 기반으로 선택된 정답 검증
- userAnswers
배열에 사용자 선택 기록
- Fisher-Yates 알고리즘: 질문 및 옵션 랜덤 섞기
결론
- 핵심 팁:
- DOMContentLoaded
이벤트 사용 → DOM 로딩 완료 후 스크립트 실행
- Fisher-Yates
알고리즘으로 질문/옵션 섞기 → 편향 방지
- 리스폰시브 디자인 적용 → 다양한 화면 크기에서 사용 가능
- GitHub 저장소: https://github.com/rbtpracticeexamus/rbt-practice-exam/
- 실무 적용: Vanilla JavaScript로 복잡한 UI 로직 구현 시, 상태 관리 및 DOM 조작에 주의해야 함