AI가 생성한 문제는 ‘자동 완성된 시험지’가 아니라 ‘빠른 초안’이므로, 사람이 직접 검토하고 다듬는 웹 기반 문항 편집기 UI가 에듀테크 서비스의 성패를 가릅니다. 온유 리본은 복잡하고 무거운 위지윅(WYSIWYG) 서식 대신 문항별 카드 단위 검수, 발문·정답 중심 인라인 편집, 교사용/학생용 보기 원천 분리, /api/export-pdf 서버 렌더링, 문항 은행 보관 및 시험지 스냅샷 편성에 집중한 실전형 웹 기반 문항 편집기 UI를 구현했습니다.

1. AI 문항에 왜 검수 중심의 웹 기반 문항 편집기 UI가 필요한가?

AI가 생성한 문항은 아무리 품질 검증을 거쳤더라도 최종적으로 수업을 이끄는 교사의 검토가 필요합니다. 지문 원문에 근거한 모범 답안인지, 발문과 제약 조건이 의도한 학습 목표에 부합하는지 확인해야 합니다.

따라서 웹 기반 문항 편집기 UI의 최우선 과제는 AI 생성 결과와 교사의 검수 피드백을 한 화면에서 빠르고 유기적으로 연결하는 것입니다.

문항별 독립 카드 구조와 3단계 검수 피드백

온유 리본의 미리보기 화면(SubjectivePreviewPage)은 각 문항을 독립된 카드로 캡슐화합니다. 교사는 각 카드 안에서 발문, 제시어, 조건, 모범 답안, 해설을 개별적으로 확인하며 다음과 같은 3단계 검수 액션을 즉시 실행할 수 있습니다.

이 피드백 데이터는 /api/subjective-jobs/${jobId}/feedback 엔드포인트를 통해 즉시 저장되며, 이후 문항 은행 보관 및 시험지 편성 시 신뢰할 수 있는 필터링 기준으로 활용됩니다. 이렇게 데이터 출처와 변경 이력이 투명하게 유지되는 것이 웹 기반 문항 편집기 UI의 핵심 가치입니다.

2. 인라인 편집 범위를 작게 유지하여 조판 안정성 확보하기

모든 요소를 자유롭게 편집할 수 있는 복잡한 서식 에디터는 정형화된 시험지 조판 환경에서는 오히려 문제를 유발할 수 있습니다. 교사가 시험지 전체의 마크업 구조를 직접 수정하게 되면 문항 번호 체계, 밑줄 어노테이션, 박스형 조건 서식, 인쇄 페이지 여백이 서로 어긋나기 쉽습니다.

온유 리본은 웹 기반 문항 편집기 UI의 복잡성을 낮추고 최종 출력물의 조판 안정성을 확보하기 위해 편집 범위를 의도적으로 좁혔습니다.

수정 대상과 구조적 보호 대상의 명확한 분리

이러한 설계는 웹 기반 문항 편집기 UI의 로딩 속도를 가볍게 유지하면서도, 인쇄용 PDF 생성 시 레이아웃 깨짐을 원천적으로 방어합니다.

3. 교사용 검수 보기와 학생용 시험지 보기의 완전한 데이터 분리

교사용 검수 화면에는 정답과 상세 해설, 배점 기준이 명확히 보여야 하지만, 학생용 시험지 화면에는 이러한 정보가 절대 포함되어서는 안 됩니다.

온유 리본의 웹 기반 문항 편집기 UI는 동일한 문항 데이터셋을 기반으로 상단 토글 버튼을 통해 [교사용 검수 보기]와 [학생용 시험지 보기]를 실시간 전환할 수 있도록 구성했습니다.

컴포넌트 레벨 격리와 실시간 시험지 렌더링

단순히 CSS(display: none)로 정답을 가리는 방식은 개발자 도구를 통해 답안이 유출될 위험이 있습니다. 온유 리본은 웹 기반 문항 편집기 UI 렌더링 시 학생용 뷰 컴포넌트에 정답 데이터 바인딩을 원천 격리합니다.

• 교사용 검수 모드: 지문 변형 이력(Paraphrase Snapshot), 문항 발문, 모범 답안, 해설 및 루브릭, 3단계 검수 버튼, 문항 은행 보관 버튼 노출
• 학생용 시험지 모드: 헤더(이름·반·번호), 지문 어노테이션 본문, 제시어 박스, 조건 박스, getResponseLayout 기반 서술형 답안 작성란(밑줄 수정쌍, 기호 선택 수정, 답안선) 렌더링

텍스트 입력 때마다 무거운 렌더링 엔진을 호출하지 않고 표준 브라우저 HTML/CSS로 전환하므로, 교사는 지연 없이 쾌적한 웹 기반 문항 편집기 UI를 경험할 수 있습니다.

4. /api/export-pdf: @react-pdf/renderer 기반 서버 사이드 인쇄물 출력

브라우저 화면에서 문항을 보는 것과 실제 A4 용지에 인쇄되는 파일의 레이아웃 규격은 완전히 다릅니다. 화면 해상도에 따른 줄바꿈 왜곡, 서술형 작성란의 페이지 넘어감, 학교명 및 시험지 헤더 배치는 고정된 인쇄 레이아웃 엔진이 필수적입니다.

온유 리본의 웹 기반 문항 편집기 UI는 검수가 완료된 문항 데이터를 /api/export-pdf 엔드포인트로 전송하여 서버 사이드에서 고품질 PDF 바이너리 스트림으로 변환합니다.

// @react-pdf/renderer 기반 서버 렌더링 엔드포인트
import { NextResponse } from 'next/server';
import { renderToBuffer } from '@react-pdf/renderer';
import { createElement, type ReactElement } from 'react';
import { supabaseAdmin } from '@/services/supabase';
import { ExamDocument } from '@/lib/pdf/examTemplate';

export async function POST(req: Request) {
  const { jobId, examPaperId, schoolName, includeAnswerKey } = await req.json();

  // 1. 작업 ID 또는 시험지 ID 기준 스냅샷 데이터 조회
  const questions = await fetchQuestions(jobId, examPaperId);

  // 2. 서버 사이드 버퍼 렌더링 (@react-pdf/renderer)
  const pdfBuffer = await renderToBuffer(
    createElement(ExamDocument, {
      schoolName: schoolName.trim(),
      questions,
      includeAnswerKey: includeAnswerKey ?? true,
      generatedAt: new Date().toLocaleString('ko-KR'),
    }) as ReactElement
  );

  // 3. 인쇄용 PDF 바이너리 스트림 응답 반환
  return new Response(new Uint8Array(pdfBuffer), {
    headers: {
      'Content-Type': 'application/pdf',
      'Content-Disposition': `attachment; filename="exam_${Date.now()}.pdf"`,
    },
  });
}

컴포넌트 기반 조판 템플릿은 React PDF 공식 문서의 아키텍처를 참고하여 한글 폰트(Noto Sans KR) 및 한국 내신 시험지 2단 조판 양식에 최적화했습니다. 교사는 웹 기반 문항 편집기 UI 상단 버튼을 클릭하는 즉시 인쇄용 PDF를 다운로드할 수 있습니다.

5. 문항 은행과 시험지 편성으로 콘텐츠 자산 재사용성 높이기

교사가 정성껏 검수한 문항이 일회성 파일 다운로드로 소모되면 다음 시험 기간에 다시 생성 비용과 검수 시간을 들여야 합니다. 온유 리본은 웹 기반 문항 편집기 UI를 단순한 편집 화면에 그치지 않고 **교사의 문항 자산 관리 플랫폼**으로 확장했습니다.

문항 은행 저장과 시험지 스냅샷(Snapshot) 불변성

1. 문항 은행(Item Bank) 보관: 검수 완료된 개별 문항 카드를 교사의 개인 문항 저장소(/api/question-bank)에 저장합니다.
2. 시험지 편성 화면: 시험 기간에 문항 은행 목록에서 출제하려는 문항들을 선택하여 시험지(Exam Paper)를 구성합니다.
3. 시험지 스냅샷 고정: 시험지 편성 시점의 문항 데이터(question_snapshot)를 통째로 고정 저장하여, 문항 은행 원본이 추후 변경되더라도 이미 출제된 시험지의 데이터 무결성을 완벽하게 보장합니다.

이러한 스냅샷 아키텍처 덕분에 웹 기반 문항 편집기 UI는 단순한 텍스트 수정을 넘어 에듀테크 콘텐츠의 영구적인 재사용성을 확보합니다.

6. 현재 구현 완료 기능과 향후 확장 로드맵의 투명한 구분

기술 블로그의 신뢰성을 위해 온유 리본의 웹 기반 문항 편집기 UI에서 현재 정상 작동하는 기능과 향후 고도화 예정인 로드맵을 투명하게 정리합니다.

상상 속의 기능이 아닌 실제 동작하는 웹 기반 문항 편집기 UI의 범위를 명확히 하는 것은 교사 사용자에게 예측 가능하고 안정적인 도구를 제공하는 첫걸음입니다.

7. 자주 묻는 질문 (FAQ)