행간 · 문맥 어휘 추론 훈련 / 개선 기획서
초기 버전은 ‘한 세트를 풀고 결과를 본다’는 한 줄기만 있었습니다. 이번 개편은 그 줄기를 남긴 채, 틀린 것이 다시 돌아오고 · 익힌 어휘가 쌓이고 · 매일 온 흔적이 보이는 학습 순환을 얹었습니다. 디자인은 하나로 고정하지 않고 세 방향을 만들어, 고르신 뒤 그대로 출시할 수 있게 했습니다.
기존 코드를 전부 읽고 확인한 것들입니다. 만듦새 자체는 나쁘지 않았고, 문제는 대부분 ‘다음에 할 일이 없다’는 데서 나왔습니다.
4세트를 끝내면 앱이 비어 버립니다. 오답노트는 ‘보기’만 되고 다시 풀 수가 없어서, 틀린 문항이 그대로 방치됩니다. 학습 앱에서 가장 중요한 반복 고리가 없었습니다.
공들여 쓴 32개의 어휘 풀이가 문항 안에만 갇혀 있었습니다. 어제 배운 낱말을 다시 찾아보려면 그 지문을 통째로 다시 풀어야 했습니다.
완료 세트·정답률·연속일이 전부라, 며칠을 꾸준히 했는지도, 어느 세트가 약한지도 알 수 없었습니다. 매일 오게 만드는 힘이 여기서 나오는데 비어 있었습니다.
검정 바탕에 흰 글씨, 강조색이 하나도 없어 정답과 오답이 같은 흰색으로 표시됐습니다. 어디를 봐야 하는지 화면이 말해 주지 않았고, 밝은 곳에서는 읽기도 어려웠습니다.
지문을 추가하려면 어디를 어떻게 고쳐야 하는지 아는 사람이 저자여야 했습니다. 폴더 이름은 dsfkjd였고, 압축을 풀며 딸려 온 맥 정크 파일 11개가 그대로 남아 있었습니다.
세 가지만 정하고 나머지는 여기에서 파생시켰습니다.
원칙 1
한 번 틀린 문항은 오답 훈련으로 다시 나오고, 맞히면 그때 목록에서 빠집니다. 끝이 있는 학습이 되도록.
원칙 2
문항을 풀면 그 낱말이 어휘장에 뜻·예문·문맥 단서와 함께 쌓입니다. 지문을 다시 풀지 않아도 찾아볼 수 있게.
원칙 3
정답은 초록, 오답은 붉은색, 지금 볼 곳은 강조색. 숫자를 읽기 전에 색과 형태로 먼저 알 수 있게.
초기 파일과 지금을 나란히 놓은 표입니다.
| 항목 | 초기 버전 | 개편 후 |
|---|---|---|
| 학습 콘텐츠 | 지문 4세트 · 문항 16개 | 지문 8세트 · 문항 32개. 주제도 인문·과학·사회·문학에 예술을 더해 5개 영역으로 |
| 어휘 데이터 | 발문·선택지·해설 | 여기에 표제어·한자·사전 뜻풀이·별도 예문을 더해 어휘장에서 바로 읽힙니다 |
| 오답 | 목록으로 보기만 가능 | 오답 집중 훈련 — 틀린 문항만 모아 다시 풀고, 맞히면 목록에서 사라집니다 |
| 어휘장 | 없음 | 새 탭. 32개 어휘 색인 · 검색 · 별표 · 약한 어휘 필터 · 상세 시트 |
| 기록 | 숫자 3개 | 숫자 3개 + 12주 잔디 히트맵 + 세트별 최고 정답률 막대 |
| 세트 목록 | 전체 나열 | 검색(제목·어휘) + 주제·미완료 필터. 세트가 30개가 되어도 버팁니다 |
| 결과 화면 | 점수 텍스트 + 도장 | 원형 정답률 그래프 · 점수대별 다른 문구 · 다음 세트로 바로 잇는 버튼 |
| 디자인 | 검정 고정 1종 | 3개 방향 × 라이트/다크. 색은 전부 토큰이라 data-skin 한 글자로 전환 |
| 정·오답 표시 | 둘 다 흰색 | 의미색 분리 — 정답 초록 · 오답 붉은색. 강조색과도 따로 관리 |
| 접근성 | 고정 글자 크기 | 글자 크기 4단계 · 키보드 단축키 · 포커스 링 · 모션 최소화 설정 존중 |
| 설치 | 브라우저 페이지 | PWA — 홈 화면에 설치되고 비행기 모드에서도 열립니다 |
| 데이터 보관 | 기기 안에만 | JSON 내보내기·가져오기로 기기를 바꿔도 기록이 따라갑니다 |
| 파일 | dsfkjd/ + 맥 정크 11개 |
haenggan/으로 정리, 정크 삭제, README에 지문 추가 절차 문서화 |
기능마다 ‘무엇을’보다 ‘왜’를 함께 적었습니다.
학습 순환
왜: 오답노트는 다시 풀 수 있을 때만 오답노트입니다. 읽기만 하는 목록은 두 번 열리지 않습니다.
축적
왜: 이미 써 둔 32개의 풀이가 문항 안에 갇혀 있었습니다. 꺼내 놓기만 해도 앱의 쓸모가 두 배가 됩니다.
동기
왜: 매일 오게 만드는 것은 점수가 아니라 끊기 아까운 줄입니다. 눈에 보여야 아깝습니다.
완성도
1–4 Enter Esc B왜: 답 위치를 외워 버리는 문제, 기기를 바꾸면 기록이 날아가는 문제를 실제로 막아 줍니다.
탭 하나가 늘었습니다. ‘쌓인 것’을 보는 자리가 없었기 때문입니다.
색·글꼴·모서리 값을 전부 CSS 변수로 뽑아냈습니다. 컴포넌트 CSS에는 하드코딩된 색이 한 개도 없어서,
최상위 태그의 data-skin 값만 바꾸면 앱 전체가 다른 얼굴이 됩니다. 세 방향 모두 라이트·다크를 각각 설계했습니다.
흰 지면과 남색. 그림자 없이 1px 괘선과 여백만으로 나눕니다. 모서리 4~8px.
보라와 두툼한 하드 섀도. 카드가 떠 있다가 누르면 내려앉습니다. 모서리 14~26px.
미색 종이에 UI 전부가 명조. 지문은 상자 없이 원고지 괘선 위에 얹힙니다. 모서리 2px.
세 안을 실제로 눌러 보시려면 디자인 3안 비교 화면으로 가시면 됩니다. 목업이 아니라 같은 앱을 세 벌 띄운 것이라, 화면을 넘기고 문항을 풀어 볼 수 있습니다.
지문을 추가할 때 손댈 파일은 data.js 하나뿐입니다. 앱 코드는 건드리지 않습니다.
배열 끝에 아래 모양의 덩어리를 붙이면 목록·어휘장·통계·필터에 자동으로 반영됩니다.
{
id: "p9", // 한 번 정하면 바꾸지 마세요 (진도 저장 키)
number: "09",
title: "지문 제목",
topic: "인문", // 인문 | 사회 | 과학 | 예술 | 문학
difficulty: 2, // 1~3
body: "…앞 문장 {{어휘::p9q1}} 뒷 문장…",
questions: [
{
id: "p9q1", // body의 마커 뒷부분과 반드시 일치
word: "어휘", hanja: "語彙",
prompt: "밑줄 친 '어휘'의 문맥적 의미로 가장 적절한 것은?",
choices: ["…", "…", "…", "…"],
answer: 2, // 0부터 세는 정답 번호
explanation: "문맥의 어느 단서로 풀리는지",
meaning: "사전적 뜻풀이", // 어휘장에 실립니다
example: "지문 밖의 다른 예문" // 어휘장에 실립니다
}
]
}
새 주제를 만들 때만 같은 파일 맨 아래 TOPICS 배열에 한 줄 추가하면, 필터 버튼이 저절로 생깁니다.
자세한 규칙은 README.md에 적어 두었습니다.
이번 개편에 들어간 것과, 이어서 하면 좋을 것을 나눠 적었습니다.
오답 집중 훈련 · 어휘장 · 기록 대시보드 · 디자인 3안 · PWA · 지문 8세트.
8세트는 일주일이면 끝납니다. 매주 2세트씩 쌓아 30세트를 만드는 것이 다음 우선순위입니다. 구조는 이미 준비되어 있어 글만 쓰면 됩니다.
맞힌 어휘도 1일·3일·7일 뒤에 다시 물어보는 간격 반복. 이미 어휘별 정오답 횟수를 저장하고 있어 여기에 날짜만 얹으면 됩니다.
지금은 기기 안에만 저장되고 JSON으로 옮깁니다. 계정을 붙이면 자동 동기화와 ‘학부모가 보는 주간 리포트’까지 열립니다.
현재 쿠팡 파트너스 링크는 쿠팡 메인으로 걸려 있습니다(app.js의 COUPANG_URL). 실제 파트너스 딥링크로 교체하고, 광고 없는 24시간 혜택의 노출 위치를 정해야 합니다.