1. 프로젝트 소개
Answer Grid Generator란?
Answer Grid는 OMR 답안지처럼 사용할 수 있는, 연습용 정오표 생성 도구입니다.
기존에 인터넷에서 찾을 수 있는 정오표들은 대부분 5지선다에 고정되어 있거나, 문항 수 조절 / 크기 조정 / 출력 최적화가 불편한 경우가 많았습니다.
특히 기능사, 기사필기, JLPT, HSK, 공무원 시험등 문항 수가 시험마다 다르고, 아이패드나 노트에 컴팩트하게 옮겨 적기 좋은 형태가 필요했지만 그 요구를 충족하는 템플릿을 찾기 어려웠습니다.
그래서 옵션을 사용자가 직접 조절해서
자신에게 맞는 연습용 답안지를 바로 생성할 수 있는 도구를 만들었습니다.
2. 주요 기능
1번 문항 수 선택 (10~100)
2번 번호 동그라미 표시 ON/OFF
3번 외곽 테두리 옵션
4번 PDF 다운로드
5번 컴팩트한 프린트 대응
3. 사용 방법
초기 사용자 테스트 단계에서는,
PDF로 저장 → 굿노트에 불러오기 → 스티커처럼 잘라 사용
이런 방식으로 활용해 보았습니다.
특히 아이패드에서는 작은 사이즈의 답안지가 더 편해서,
생성한 정오표를 굿노트의 스티커 패널에 등록해두고
필요할 때마다 붙여서 사용하는 식으로 쓰면 가장 효율적입니다.
4. 기술 구현
전체 파일 구조
AnswerGridPack/
│── index.html # 메인 UI
│── style.css # 화면용 스타일
│── print.css # PDF/인쇄 전용 스타일
│── generate.js # 정오표 동적 생성 로직
│
└── backup/ # 초기 버전 백업
└── (초기 템플릿 파일)
초기 템플릿 그리드는 이렇게 만들었습니다.
동적 셀 생성 로직
고정된 HTML이 아니라, 사용자가 선택한 문항 수에 맞추어 JavaScript로 동적으로 생성합니다.
각 문항은 번호 셀 + 답 칸 셀(2칸)으로 구성
N문항이라면 2 * N개의 셀을 한 번에 자동 렌더링
DOM에 추가하는 구조
<div class="cell num", <div class="cell ans">번호 원형 렌더링 (Circle Number Rendering)
번호는 이미지가 아니라 CSS만으로 원형을 구현.
border-radius: 50%;
aspect-ratio: 1 / 1;
counter-increment;➡️ 브라우저 환경에 따라 계란형이 되는 문제를
aspect-ratio와 box-sizing으로 해결해서, 기기마다 완전한 원형을 유지
ETC...
옵션 변경 → DOM 업데이트 방식
(문항 수, 번호 표시 여부, 외곽 테두리 표시 여부) generateBtn click 이벤트에서 실시간 반영되게.
print.css와 display.css 분리 설계
출력(PDF/프린트)과 화면 UI는 목적이 달라서 스타일을 완전히 분리
저가 코드 한페이지에 200줄넘어가면 화가나서 못참겠더라고요...
초기에 제작한 페이지를 backup/폴더로 만들어둠
실험 단계의 코드를 남겨두고, 메인 버전은 깔끔한 구조로 유지하기 위해 따로 저장해둠.
5. 배포 고려
배포까지는 생각하지 않았고, 저가 쓰려고 만든 개인 실습 프로젝트입니다.
필요하면 GitHub Pages로 가볍게 공개하는 정도만 고려하고 있습니다.
6. 개선 방향
아직 사용자 테스트가 충분하지 않아서, 후기도 살펴봐야합니다만...
초기 목표는 단순히 “내가 편하게 쓰는 답안지”였지만, 이후에는 다양한 굿즈나 팬시 형태의 디자인 템플릿 확장도 고려하고 있습니다.
자동 채점 기능 역시 검토했으나, 사용자가 답을 다시 입력해야 하는 이중 입력 구조 때문에, 실사용성을 떨어뜨린다고 판단해 기각.
7. 회고
HTML, CSS, JavaScript 같은 기본기를 복습하고, 단순한 디자인 툴보다 웹 기술이 vscode가 훨씬 유연한 도구라는 점도 체감했습니다.
아쉬운 점은 아직 배포 경험이 부족해 실제 사용자에게 어떻게 도달할지가 명확하지 않다는 것입니다.
하지만 일단은 “내가 사용할 도구를 직접 만들었다”는 과정 자체가 큰 의미였습니다.
마음의 소리=> 그리고 어느정도 자격증치고 만들었는데, 한창 공부중에 만들었다면 더 편하게 공부할 수 있었을 텐데 싶은 개인적인 아쉬움이 있습니다. 다른 자격증 공부시에(언젠가)사용할 수 있겠죠!^^
License
Personal / Non-commercial use only.
이 프로젝트는 개인 학습 및 비상업적 용도에 한해 사용 가능합니다.