QuestionRenderer

학습/평가 SaaS 의 문제 렌더링 인프라 — 카드/온라인/프린트 3-mode 통합 + RenderTemplate Registry + Filament Template Gallery

상태

항목	값
Layer	foundation
Tier	L0
Status	released
Version	1.4.0
가격	Free (free)
**카�
�고리**	Learning

개요

개요

QuestionRenderer 는 multi-saas-kit 의 학습/평가 도메인 Foundation Plugin � 니다.

문제(Question) 데이터의 출처(template_logic 자동 생성 / AI 생성 / 사람 제작)에 무관하게 카드/온라인/프린트 3 모드 로 일관 렌더링하는 인프라를 제공합니다.

핵심 개�

�

Question (도메인 데이터, 출처 무관)
  └─ render_template_key: 'math.fraction-line' 같은 식별자
     └─ QuestionRenderer (Interface 구현)
        └─ supportedModes: [online, print, card]
        └─ renderOnline() / renderPrint() / renderCard()

RenderTemplateRegistry 가 render_template_key → QuestionRenderer 인스턴스 매핑. SaaS 측은 Question 모델이 QuestionInterface 만 구현하면 자동으로 모든 모드 렌더링 사용 가능.

기능 (Phase A — Foundation)

Renderer 추상화

• QuestionInterface: SaaS 측 모델 (App\Modules\Content\Models\Question 등) 이 구현하는 추상
• QuestionRendererInterface: render_template_key 당 1개 Renderer (renderOnline/renderPrint/renderCard)
• RenderTemplateRegistry: render_template_key → Renderer 매핑 + DB 자동 디스커버리

3 Mode 통합

• Online: 학습자 인터랙티브 풀이 (Livewire/Alpine — 답 선택, drag/drop, 채점 feedback)
• Print: A4 인쇄 (정렬, 여백, 페이지 분리 방지)
• Card: 모바일 단일 문제 (카드 높이, 터치 영역, 한 문제 집중)

각 모드는 별도 검수 — online (인터랙� �), print (출력), card (모바일).

Mode Toggle UI

<x-question-renderer::mode-toggle :question :current-mode="$mode" />
<x-question-renderer::render :question :mode="$mode" />

어느 SaaS / 어느 페이지에서나 동일 컴포넌트 사용 = 일관 UX.

Filament Template Gallery (운영자 카탈로그)

• 등록된 RenderTemplate 목록 + status 필터 (ready / template_missing / needs_mapping)
• scope 필터 (common / subject / course / grade_band / grade / profile)
• 미리보기 — 3 모드 인라인 표시
• template_missing 항목 = Render Template Workshop 작� backlog

Example Renderer 카탈로그 (1.2.0 — 7개)

Common scope (모든 학�

�/과목)

• common.multiple-choice — 범용 객관식 (4지선다)
• common.short-answer — 단답형 (1.2.0 신규)
• common.true-false — OX 진위형 (1.2.0 신규)
• common.fill-blank — 빈칸 채우기 (1.2.0 신규, body 의 ____ 토큰 자동 input 치환)
• common.essay — 서술형 (1.2.0 신규, online textarea + read-only 모범답안)

Subject scope

• math.fraction-line — 분수 수직선
• english.dialogue-fill — 영어 대화 빈칸

분리선 (ADR-051)

QuestionRenderer (Foundation) � 임:

• Renderer Interface + Registry + Mode Toggle UI
• render_templates 카탈로그 관리 (Filament Gallery)
• template_missing 검출

Composite Plugin � 임 (Phase D):

• QuestionAuthoring — 사람 제작 Form + 검수 워크플로우 (ai_draft → final_review)
• QuestionLogic — template_logic + generator_definitions
• QuestionWorkshop — 디자이너용 layout/UX 검수 UI

SaaS � 임:

• Question 모델이 QuestionInterface 구현
• render_template_key 부여 (또는 자동 분류)
• 모드별 라우� (/worksheet/{id}?mode=...)

적용 SaaS (잠재)

SaaS	사용 사례
exam.how	수학/영어 worksheet (online/print/card)
edutech.how	학원 단원평가 + 진단 �
�스트
academy.how	LMS 퀴즈 (수�
후 확인)
native.how	언어학습 (vocab/dialogue)
scripture.how	성경 빈칸/매칭 퀴즈
quiz.how / cert.how (향후)	일반 퀴즈 / 자격증

신규 기능 (1.4.0 — Phase H Card mode 일괄 채점)

<x-question-renderer::quiz-card-batch /> 신규 component

<x-question-renderer::quiz-card-batch
    :questions="$questions"
    :meta="$meta"
    :back-url="'/browse/' . $meta->id"
    :auto-advance-default="false"
    :mode-toggle-urls="['card' => $cardUrl, 'online' => $onlineUrl, 'print' => $printUrl]"
/>

호스트 SaaS 가 1줄 호출로 chrome (header / progress / nav-bar) + 슬라이더 + 일괄 채점 + 결과 화면 + 자동 다음 토글 모두 사용. quiz/card.blade.php 가 100 LOC → ~25 LOC.

신규 mode card-batch (4 모드 째)

• 기존 card mode 는 BC 유지 (즉시 채점)
• card-batch 는 외부 wrapper 가 채점 시점 control (모두 풀고 한 번에 채점)
• 7 example renderer 모두 card-batch view 신규 (즉시 채점 X, $dispatch + $root 패턴)

AnswerComparator Service

• 5� type 통합 답 비교 (multiple-choice / short-answer / true-false / fill-blank / essay) + math.fraction-line / english.dialogue-fill
• render_template_key suffix 기반 dispatch (도메인성 0 — ADR-039 정합)
• requiresManualGrading() helper (essay 자동 채점 X)
• JS port (cardBatch._compare) 동일 로직 — 클라이언트 측 채점

의존성

• core: >=1.18.0
• 외부 라이브러리: 0 (라이선스 민감 의존성 0)

관련 ADR

• ADR-051 QuestionRenderer Plugin Scope (본 Plugin — 1.4.0 mode 확장 update)
• ADR-039 Plugin Scope Principle (적격성 검증)
• ADR-024 SaaS Module Standard
• ADR-045 Plugin Activation Matrix
• ADR-046 Permissive License

라이선스

MIT

---

🛒 Plugin Store에서 보기: store.codebase.how/plugins/question-renderer