학습 순환 재설계

01진단

기존 코드를 전부 읽고 확인한 것들입니다. 만듦새 자체는 나쁘지 않았고, 문제는 대부분 ‘다음에 할 일이 없다’는 데서 나왔습니다.

02개선 원칙

원칙 세 가지를 먼저 정했습니다. 나머지는 전부 여기서 갈라져 나왔습니다.

03무엇이 달라졌나

초기 파일과 지금을 나란히 놓은 표입니다.

04새로 들어간 기능

기능마다 무엇을 넣었는지와 왜 넣었는지를 같이 적었습니다.

05정보 구조

탭 하나가 늘었습니다. ‘쌓인 것’을 보는 자리가 없었기 때문입니다.

06디자인 시스템

색·글꼴·모서리 값을 전부 CSS 변수로 뽑아냈습니다. 컴포넌트 CSS에는 하드코딩된 색이 한 개도 없어서, 최상위 태그의 data-skin 값만 바꾸면 앱 전체가 다른 얼굴이 됩니다. 다만 토큰만 바꿔서는 네 안이 비슷해 보였습니다. 그래서 홈 화면의 정보 순서와 통계를 읽는 방식, 선택지 조판까지 안마다 따로 잡았습니다. 경계를 무엇으로 만드는지도 갈라 두었습니다 — 집중은 선을 한 줄도 쓰지 않고 면과 여백으로만 끊고, 시험지는 상자 대신 종이 결을 깔았습니다. 마크업은 한 벌 그대로입니다. 첫 버전을 옮긴 ‘기본’을 포함해 네 방향이고, 기본을 뺀 세 방향은 라이트·다크를 각각 설계했습니다.

네 안을 실제로 눌러 보시려면 디자인 4안 비교 화면으로 가시면 됩니다. 목업이 아니라 같은 앱을 네 벌 띄운 것이라, 화면을 넘기고 문항을 풀어 볼 수 있습니다. 마음에 드는 안 아래의 ‘이 테마로 보기’를 누르면 그 테마가 적용된 앱이 전체 화면으로 열립니다.

07콘텐츠 늘리는 법

지문을 추가할 때 손댈 파일은 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에 적어 두었습니다. 다만 이 방식은 코드를 여는 일이라, 세트를 계속 늘리실 생각이면 지문 제작 도구를 먼저 만드는 편이 낫습니다.

08다음 단계

이번 개편에 들어간 것과, 이어서 하면 좋을 것을 나눠 적었습니다.