기존 학원에서 사용하는 단어 시험 프로그램이 있었으나 기존 시판 책들을 이용하는 것이라 학원 자체 제작 단어장에는 맞지 않는 문제가 있었습니다.
그래서 선생님들이 필요로 하는 기능과 학원 자체 단어장을 조합한 프로그램을 만들게 되었습니다.
단어장 관리 소개
단어장을 책별로 관리할 수 있어야 했습니다. 그리고 단어장 하위에는 챕터가 존재하고 챕터 안에 단어가 관리되는 형태로 구성했습니다.
단어 테스트 제작하는 부분에서 소개하겠지만, 선생님들이 학생마다 교육 진행 단계에 따라 문제를 출제할 수 있어야 합니다.
단어를 하나하나 홈페이지에 등록하는 것은 매우 힘든 작업이 될 수 있기에 일괄 등록 기능을 제공했습니다.
샘플이나 빈 xlsx을 다운로드하여 설명에 따라 엑셀을 작성 후 csv로 저장해 업로드하면 이걸 읽어 API에 전달할 수 있는 형태로 변경해 뿌려줍니다.
샘플 엑셀에는 자세한 설명과 메모를 붙여 헷갈릴 수 있는 부분을 풀어서 설명해 두었습니다.
단어를 낱개로 추가하고 싶다면 "새 단어 추가" 버튼을 눌러 아래와 같이 입력 폼을 생성할 수 있습니다.
CSV로 일괄 등록하는 경우와 낱개로 등록하는 경우 모두 입력값 검증을 해 빈 값이 있거나 잘못된 값이 있다면 해당 값으로 이동해 등록자가 직접 수정할 수 있도록 했습니다.
이렇게 관리자 선생님이 단어를 등록하면 학생을 가르치시는 선생님은 단어장 테스트 출제 페이지에서 시험지를 생성할 수 있습니다.
단어장 테스트 출제 소개
단어장 선택 페이지에서 출제를 원하는 단어장을 고를 수 있습니다.
단어장은 이름을 해시한 결과를 이용해 책의 색상, 디자인이 달라져 익숙한 책을 고르기 좋습니다.
또한 책갈피 모양의 북마크 버튼을 넣어두어 원하는 책을 상단에 노출할 수 있습니다.
원하는 단어장 내에서 출제를 원하는 챕터를 골라 문제를 출제할 수 있습니다.
기본적으로 모든 챕터가 선택되어 있고 상단에는 선택된 챕터들의 통계를 확인할 수 있습니다.
출제하기 전 해당 챕터에 포함된 단어가 궁금하다면 단어보기를 클릭해 아래와 같은 모달에서 단어 정보를 확인할 수 있습니다.
원하는 단어를 모두 선택했다면 출제할 문제를 선택할 수 있습니다. 뜻과 단어를 맞추는 것 외에도 유/반의어 관계에 대한 문제를 출제할 수도 있으며 예문에 들어갈 단어를 맞추거나 예문을 조합하는 등의 문제를 출제할 수도 있습니다.
문제별로 옵션을 골라 출제를 다르게 할 수도 있습니다.
상단에는 총 문제 수를 확인할 수 있으며, 펼쳐서 자세한 문제 수량을 확인할 수도 있습니다.
시험지 출력 설정을 수정해 헤더나 레이아웃(여백 등)을 수정할 수 있습니다.
출력 설정을 하지 않고 기본값으로 바로 출제하는 것도 가능합니다.
출제하기를 누르면 문제 풀에서 랜덤으로 단어를 선정해 시험지가 생성됩니다.
"출제하기"를 누르는 시점에 결정되어 모달을 닫으면 다시 생성됩니다.
출제하기를 누르면 아래 단계를 통해 PDF를 생성합니다.
- 출제 단어 정보 + 목록 정보를 이용해 랜덤으로 출제 목록 생성
- 출제 목록 + 출력 설정을 이용해 눈에 보이지 않는 DOM을 생성합니다.
- html2pdf.js를 이용해 PDF 문서를 생성한 뒤 Blob으로 추출합니다.
- Blob으로 추출된 데이터를 createObjectURL를 이용해 url로 만들어줍니다.
- embed태그에 해당 url을 이용해 pdf를 노출합니다.
시험지와 답지가 따로 생성됩니다. 브라우저의 pdf뷰어를 통해 보여 바로 출력하거나 PDF를 저장할 수 있습니다.
후기
방학 시작 전에 완성이 되었으면 좋겠다고 요청이 들어왔지만...
인프라와 풀스택을 1인 개발하는 입장이라 퇴근 후와 주말에도 틈틈이 작업해도 그건 어려웠네요.
제작 중 고민을 많이 한건 지금 소개한 부분보다도 DB 설계를 어떻게 할지와 엑셀을 어떻게 해야 입력하는 사람도 쉽고 파싱에도 용이할지였습니다. 이 두 부분은 작업하면서 두 번 세 번 새로 갈아엎기도 했었네요. 프로그램을 소개하는 글을 쓰다 보니 이런 고민한 내용을 담지는 못한 건 아쉽네요
그래도 만들고 나니 뿌듯하고 선생님들께서 잘 써주셨으면 좋겠습니다. 읽어주셔서 감사합니다!