[AI노트 개발기] 퀘스트북 서술형 평가시스템

PM·개발자·디자이너 3인 인터뷰로 풀어본 ‘노트개발’ 비하인드 

안녕하세요, 에디터원입니다! 오늘은 교육 현장의 평가와 학습 방식을 혁신할 퀘스트북 노트 프로젝트의 개발 이야기를 들려드리고자 합니다. 퀘스트북 AI노트는 교사의 평가 업무 효율성을 높이고 학생들의 글쓰기 능력 향상을 도와주고자 제작하였습니다.

퀘스트북은 퀴즈 기반 학습 플랫폼으로 출발했지만, 교사·학습자 커뮤니티가 커질수록 “프로젝트형 과제”·“포트폴리오 작성” 같은 열린 서술 활동에 대한 요구가 늘어났습니다.
퀘스트 노트(Note)는 그 요구를 품은 첫 확장 기능이에요. 텍스트·이미지·체크리스트·미디어 등을 블록 단위로 배치하고, 제출 즉시 AI 평가 리포트를 받아볼 수 있도록 설계됐죠.

웹 통합 노트 저작환경

선생님이 과제를 만들 때나, 학생이 과제를 작성할 때 사용하시도록 노트 저작도구를 먼저 만나보실 수 있어요. 설치 없이 브라우저에서 바로 실행되며, 텍스트 뿐만 아니라 이미지·영상 등 요소를 블록 단위로 드래그 앤 드롭으로 편집할 수 있어요. 

텍스트, 체크리스트, 가이드, 선, 이미지, 외부 미디어를 한 화면에서 삽입·이동·복제·잠금할 수 있어 레이아웃이 자유롭습니다.

 또, 학생이 모바일·태블릿에서도 과제를 할 수 있다는 점은 큰 장점이 될 거 같아요.

AI기반 서술형 첨삭 기능

① 주제 전달력 ② 글의 구조‧흐름 ③ 의도 표현력 ④ 어휘 적절성 ⑤ 문장 정확성 ⑥ 내용 일관성 등 학생 답안을 분석해 여섯 가지 핵심 지표를 자동으로 점수화합니다.

예를 들어 주제 전달력은 키워드 일치도, 문단 간 주제 일관성, 중심 문장-주제 연관성으로 분해해 측정하고 있어요. 교사님이 직접 채점을 위한 평가기준을 입력할 수 있게 한다고 해요.

평가 결과는 육각형 레이더 그래프로 즉시 표시되며, 강‧약점과 개선 방향을 담은 PDF 가이드가 자동 생성되요.

효율적인 과제 배포·제출·리포트

선생님이 노트를 저장하면 즉시 URL과 QR 코드가 생성되어 학생에게 간편하게 과제를 전달할 수 있습니다. 

학생 역시 작성 중 언제든 임시 저장이 가능하고, 발급된 코드로 다시 접속해 이어서 작성할 수 있어요. 학생이 제출하면 몇 초만에 첨삭이 완료되며, 교사는 대시보드에서 제출률·지표별 평균·학생별 상세 평가를 바로 확인할 수 있어요.

이 글은 PM→개발자→디자이너순서로 이어지는 3인 인터뷰와 함께,
노트가 탄생하기까지의 결정적 순간·기술 난제·UX 고민을 한눈에 살펴볼까 합니다.

- PM한마디

Q. 노트 기능이 꼭 필요하다고 판단한 결정적 계기는?

"최근 IB교육이 큰 관심을 받고 있는 때에 퀴즈만으로는 부족하다는 교사 피드백이 많았어요. 그래서 서술형 평가가 가능한 에디터의 개발이 필요하다고 생각했습니다."

Q. 원래 로드맵과 달라진 가장 큰 포인트는?

“처음엔 WYSIWYG를 붙이려 했지만, 블록(JSON) 모델로 갈아타면서 템플릿·루브릭·AI 첨삭까지 자연스럽게 연결할 수 있게 됐죠. 아무래도 노션이나 여타의 노트툴과 비슷한 사용성을 제공해야겠다고 생각했어요.”

- 개발자 한마디

Q. 기존 WYSIWYG와 다른 JSON 블록 구조의 가장 큰 장점은?

"WYSIWYG 에디터의 장점은 사용자가 보는 대로 편집을 할 수 있지만, HTML기반으로 저장되어 재활용·디자인 변경이 불편해요. 반면에 JSON 블록 구조는 텍스트 이미지등을 종류별로 따로 저장해, 디자인과 콘텐츠가 분리되어 프론트엔드 렌더링에 최적화됩니다."

Q. 모바일 드래그 & 스냅에서 가장 고생한 부분은?

"터치 시작 시점에서 touchmove 이벤트가 바로 인식되지 않는 문제가 있었는데요, 브라우저의 기본 스크롤 제스처와 충돌하는 등의 현상이 발생하여, passive:false와 touch-action:none 설정으로 해결했습니다. 그리고 드롭 시의 스냅 처리를 판단하는 기준을 정하는 것이 어려웠습니다. 오브젝트 조각의 중심이 셀의 경계안에 들어왔을 때만 정확히 인식하도록 처리하였고, 오브젝트 영역 안에 놓였는지 여부를 판별하는 것과 그렇지 않을 경우 제자리로 돌리는 로직의 처리가 까다로웠습니다."

Q. AI 첨삭 파이프라인은 어떻게 동작합니까?

"AI 첨삭 파이트 라인은 입력 데이터 전송 ➔ AI 평가 요청 ➔평과 결과 수신 ➔ 결과 처리 및 표시 순으로 동작합니다.

글을 제출하면 백엔드로 전달되어 AI 첨삭 모델을 호출합니다. 그리고 JSON 형식의 결과를 받아 사용자에게 피드백으로 제공되는 형식입니다."

- 디자이너 한마디

Q. 반응형 설계에서 가장 치열했던 지점은?

“노트 저작도구가 PC기반과 모바일 모드를 동시에 지원하려니 모든 기능을 가져가기는 쉽지않았어요. 모바일의 장점을 살리면서 최대한 기능을 덜어서 보여주려니 고민되더라구요.”

Q. 학습 흐름을 어떻게 시각화했나요?

“교사의 출제 → 과제수령(학생) → 과제작성 → 제출 → AI첨삭 → 레포트의 과정을 거치는데요. 출제/작성이 같은 UI를 사용할 수 밖에 없어요. 아직 고민이 많습니다.

“글쓰기 능력을 키우는 도구로 개선하겠습니다.”

AI노트라고 하면 쉽게 떠올릴 수 있는 ‘평가 자동화’만으로는 부족하다고 생각해요. 선생님과 학생이 즐겁게 과제와 피드백을 주고 받을 수 있는 환경도 마련되어야겠죠.

교사는 데이터를 기반으로 더 깊이 있는 피드백을, 학생은 자신의 생각을 텍스트 뿐만 아니라 카메라 같은 다양한 디지털 도구를 활용할 수 있어야겠다... 이런 부분을 반영하고자 했어요.

아직은 베타테스트 중이고 개발과 업데이트를 할 예정이어서 많은 부분에서 부족합니다. 하지만 저희 개발의 방향성에 대해서 일찍 보여드리고 싶어서 살짝 공개해두었으니 한번 사용해보시고 질책과 격려도 부탁드리겠습니다. 꾸-벅

여태까지 에디터 원이었습니다. 또 만나요!

에듀테크 솔루션 전문 회사 코드넛과 소통하고 싶다면?