중간고사를 준비하면서 틀린 문제를 노트에 적고 다시 푸는 방식으로 공부했다. 한두 문제일 때는 괜찮았지만 오답이 쌓일수록 문제와 보기를 다시 옮겨 적는 시간이 아까웠다. 공부를 하려고 만든 오답 노트가 오히려 공부 시간을 잡아먹고 있었다.
대신 사용할 앱과 웹 서비스를 찾아봤지만 마음에 드는 것이 없었다. 시험 기간이라 오래 비교하고 있을 여유도 없었다. 필요한 기능을 정리한 뒤 HTML, CSS와 JavaScript로 직접 만들기 시작했다. 처음부터 완성도 높은 서비스를 만들려던 프로젝트가 아니라, 그날 공부에 바로 쓸 수 있는 도구가 필요해서 시작한 바이브 코딩이었다.
문제는 컴퓨터구조 책에서 가져왔다
문제 은행은 중간고사 범위였던 김종현의 『컴퓨터구조』 개정 6판 예제를 바탕으로 만들었다. ch4 10문제, ch5 39문제, ch6 21문제, ch7 17문제로 모두 87문제였다. 문제는 별도 서버가 아니라 data.js 안에 배열로 저장했다.
4월 18일, 필요한 기능부터 붙였다
GitHub 기록에는 첫 README부터 2.0 업데이트까지 같은 날의 커밋으로 남아 있다. 시험 기간에는 구조를 오래 고민하는 것보다 실제 문제를 풀 수 있는 상태를 빨리 만드는 것이 중요했다.
첫 실행 화면과 관리 페이지
문제 풀이 화면, 문제 데이터, 관리 페이지와 스타일을 한 번에 올렸다. 과목을 선택하고 문제를 푼 뒤 점수를 확인하는 최소 흐름부터 만들었다.
이미 아는 문제를 끄는 기능
사용해 보니 이미 알고 있거나 맞힌 문제도 계속 다시 풀어야 했다. 문제마다 활성화 스위치를 두고, 지금 다시 풀 필요가 없는 문제는 목록에서 잠시 제외할 수 있게 바꿨다. 문제를 무조건 반복하는 대신 남겨 둔 문제에 시간을 쓰기 위한 기능이었다.
관리 화면을 두 차례 수정
문제가 87개까지 늘어나자 단순 목록만으로는 관리하기 어려웠다. 과목별로 묶고, 문제 순서를 바꾸고, 객관식과 단답형 문제를 추가하거나 수정할 수 있도록 UI를 두 차례 손봤다.
Smart Quiz 2.0
순서대로 풀기와 랜덤 풀이를 나누고, 풀이 결과와 오답을 확인하는 화면을 정리했다. 오후에 시작한 도구가 그날 밤 실제 시험공부에 사용할 수 있는 2.0 버전이 됐다.
맞힌 횟수와 틀린 횟수는 브라우저에 남겼다
문제를 풀 때마다 맞힌 횟수와 틀린 횟수를 localStorage에 저장했다. 관리 센터에서는 전체 정답률, 과목별 정답률과 가장 많이 틀린 문제를 확인할 수 있다. 서버 계정이 없어도 같은 노트북과 브라우저에서는 공부 기록이 계속 남는다.
문제를 고칠 때마다 코드를 찾고 싶지 않았다
관리 센터에서는 과목별로 문제를 펼쳐 보고, 문제를 끄거나 순서를 바꾸고, 수정·삭제할 수 있다. 새 문제를 추가할 때는 객관식과 단답형을 선택하고 보기와 정답을 입력한다. 문제 데이터를 직접 배열에서 찾아 고치는 시간을 줄이기 위한 화면이었다.
데이터베이스 대신 data.js를 선택했다
처음에는 데이터베이스 연결과 서버 배포도 생각했다. 하지만 목표는 서비스를 운영하는 것이 아니라 중간고사 공부에 당장 사용하는 것이었다. 서버를 준비하는 동안 시험 범위는 기다려 주지 않았다.
그래서 앱은 노트북에서 정적 파일로 실행했다. 관리 화면에서 바꾼 문제는 메모리에 반영되고, 최종 결과를 새 data.js 파일로 내려받아 기존 파일과 교체한다. 화면의 버튼에는 아직 “데이터베이스에 저장 (임시)”이라는 흔적이 남아 있지만 실제 데이터베이스는 연결되어 있지 않다. 통계도 브라우저별로 저장되므로 다른 기기와 동기화되지 않는다.
혼자 쓰려고 시작했지만 혼자만 쓰지는 않았다
완성한 도구는 내가 중간고사 공부에 사용했고, 같은 과 동기와 당시 여자친구에게도 공유했다. 거창한 학습 플랫폼은 아니었지만 문제를 다시 적는 시간을 줄이고, 틀린 문제를 화면에서 바로 골라 반복한다는 처음 목적은 해결했다.
HTML 파일로 바로 실행할 수 있다는 선택은 이 프로젝트의 장점이자 한계였다. 설치와 서버 없이 빠르게 쓸 수 있었지만 데이터는 노트북 안에 머물렀다. Smart Quiz는 완성도를 오래 다듬은 서비스보다, 필요한 날에 필요한 만큼 만들어 실제로 사용한 도구에 가깝다.
Smart Quiz 시연 영상 보기