e-NIE — 신문을 읽고 생각을 나누는 디지털 교실
한국언론진흥재단(KOREA PRESS FOUNDATION)이 운영하는 NIE(Newspaper In Education) 디지털 교육 플랫폼입니다. 전국 초·중·고 학생과 교사가 온라인/지면 뉴스를 읽고, 기사를 스크랩하여 캔버스에서 자유롭게 편집·메모·텍스트 추가한 뒤, 완성된 스크랩북을 공유할 수 있습니다.
(주)민트기술은 이 플랫폼의 사용자 웹(학생/교사용), 관리자 백오피스, 백엔드 API 서버, Elasticsearch 검색 엔진을 포함한 전체 시스템을 설계·개발·운영하였습니다.
프로젝트 개요
e-NIE는 “신문을 읽고, 생각을 나누는 교실”이라는 슬로건 아래, 뉴스 리터러시 교육을 디지털로 전환한 플랫폼입니다. 학생들은 실제 신문사/방송사의 뉴스를 열람하고, 원하는 기사를 스크랩하여 자신만의 스크랩북을 만들며, 캔버스 위에서 하이라이트·메모·텍스트·이미지 등을 자유롭게 추가하여 편집할 수 있습니다. 완성된 스크랩북은 수업 과제로 제출하거나 다른 학생들과 공유합니다.
교사는 수업을 개설하고 학생을 초대하여 과제를 배포·관리하며, 활동지 템플릿과 교육자료를 자료실에서 활용할 수 있습니다. 학생들의 참여를 독려하기 위해 미션 게임(레벨·경험치 시스템)도 탑재되어 있습니다.
시스템 구조
e-NIE는 3개의 독립적인 서비스로 구성됩니다.
| 구성 요소 | 기술 스택 | 역할 |
|---|---|---|
| Web Frontend | Vue 3, TypeScript, Vite, Pinia, Tiptap, V3Whiteboard | 사용자/관리자 UI, 캔버스 편집기, 스크랩북 시스템 |
| Backend API | Spring Boot 3.4, Java 21, JPA, QueryDSL, Spring Security | REST API, 인증/인가, 비즈니스 로직, 배치 처리 |
| Search Engine | Elasticsearch 8.13, Nori 한글 형태소 분석기 | 뉴스 기사 전문 검색, 한글 형태소 분석 |
| Database | PostgreSQL, Liquibase | 사용자·기사·스크랩·수업·과제 데이터 관리 |
주요 기능
1. 뉴스 열람 — 온라인 뉴스 + 지면 뉴스
전국 주요 신문사와 방송사의 뉴스를 온라인 뉴스(웹 기사 형태)와 지면 뉴스(실제 신문 지면 이미지) 두 가지 방식으로 열람할 수 있습니다. 지면 뉴스에서는 실제 신문 지면을 그대로 보여주며, 기사를 클릭하면 텍스트 기사로 전환됩니다. 지면 비교 보기 기능으로 두 개의 지면을 나란히 놓고 비교할 수 있으며, 우측에 메모 패널을 열어 메모를 작성할 수 있습니다.
2. 뉴스 스크랩 → 캔버스 편집 → 스크랩북 공유
e-NIE의 핵심 기능입니다. 뉴스 기사를 스크랩하면 캔버스(화이트보드) 편집기에서 자유롭게 편집할 수 있습니다. 캔버스 위에 뉴스 콘텐츠를 배치하고, 하이라이트로 핵심 문장을 강조하고, 메모로 자신의 생각을 적고, 텍스트·이미지·도형·화살표를 추가하여 자신만의 뉴스 분석 자료를 만듭니다.
캔버스에는 다양한 객체를 배치할 수 있습니다: 뉴스 콘텐츠, 자유 텍스트, 메모 스티커, 이미지, 도형, 화살표, YouTube 동영상, URL 링크, 리치 텍스트 에디터(Tiptap/Toast UI Editor) 등. 완성된 스크랩북 페이지는 PNG/PDF로 내보내기하거나 수업 과제로 제출할 수 있습니다.
3. 기사 검색 — Elasticsearch + Nori 한글 형태소 분석
Elasticsearch와 Nori 한글 형태소 분석기를 사용하여 수만 건의 뉴스 기사에서 키워드를 빠르게 검색합니다. 검색 결과는 좌측에 기사 목록, 우측에 선택한 기사의 상세 내용을 표시하는 분할 화면(Split View)으로 제공됩니다. 검색어에 해당하는 부분이 하이라이트로 강조 표시됩니다.
4. 자료실 — 교사 교육자료 + 활동지 템플릿
교사를 위한 교육자료와 활동지 템플릿을 제공합니다. 각 자료는 주제별 태그(#환경교육, #기후변화교육, #대설 등)로 분류되며, 활동지 PDF를 미리보기하거나 다운로드할 수 있습니다. 또한 활동지를 바로 스크랩북에 추가하여 수업에 활용할 수 있습니다.
5. 회원 시스템 — 학생·교사·일반·튜터
회원 유형을 4가지로 구분합니다: 14세 미만 학생, 14세 이상 학생, 교사(각급 학교 교사·교직원), 일반(학교 소속 외 회원·미디어 강사). 첫 가입 시 1개월 무료 체험이 제공되며, 구독하는 신문사를 선택할 수 있습니다. 이메일 초대 기반 회원 가입과 JWT 토큰 인증을 적용했습니다.
6. 관리자 백오피스
운영을 위한 종합 관리 시스템입니다. 회원 관리(교사·학생·일반·튜터, 권한 변경 요청 처리), 조직 관리(학교), 계약 관리(학교 계약·튜터 계약), 메인 콘텐츠 관리(활동 우수사례, 이달의 교육자료, 월간 미션, 미션 아이템), 자료실 관리(활용사례, 활동지 템플릿, 교사 자료실), 공지/약관 관리, 접속 통계(일별/교육청별/사용자별 그래프) 등을 포함합니다.
V3Whiteboard — 자체 개발 캔버스 편집 엔진
e-NIE의 스크랩북 편집기는 외부 라이브러리에 의존하지 않고 자체 설계·개발한 화이트보드 엔진(V3Whiteboard)으로 구현했습니다. HTML5 Canvas API와 DOM을 혼합한 하이브리드 렌더링 아키텍처로, 65개 이상의 TypeScript 모듈(총 6,000줄 이상)로 구성됩니다. 드로잉, 텍스트, 도형, 이미지, 뉴스 콘텐츠, 리치 텍스트 에디터 등 다양한 객체를 캔버스 위에 자유롭게 배치·편집할 수 있으며, 무한 줌/패닝, Undo/Redo, 다중 사용자 편집 표시까지 지원합니다.
전체 아키텍처
V3Whiteboard는 계층화된 컨트롤러 패턴으로 설계되어 있습니다. 최상위 WhiteboardViewController가 전체 생명주기를 관리하고, WhiteboardCanvasController가 3개의 Canvas 레이어와 DOM 컨테이너를 조율합니다.
Lifecycle, Init, Dispose
BG Pattern
Normal Objs
Editing Objs
FG: Editing
BG: Normal
Mouse / Touch / Wheel
Cursor Management
Tool State (Vue Ref)
Zoom / Pan / Coordinate Transform
Undo / Redo (max 1000)
Line, Text, Arrow, Dom…
하이브리드 렌더링 — Canvas + DOM
V3Whiteboard의 가장 큰 특징은 Canvas 렌더링과 DOM 렌더링을 혼합한다는 점입니다. 선, 도형, 텍스트 등 고성능이 필요한 객체는 HTML5 Canvas 2D API로 직접 그리고, 리치 텍스트 에디터, 뉴스 콘텐츠, IFrame 등 인터랙티브 요소는 Vue 컴포넌트를 DOM에 마운트하여 Canvas 위에 정확히 겹쳐 놓습니다.
| 렌더링 방식 | 객체 타입 | 특징 |
|---|---|---|
| Canvas 2D | Line (자유 드로잉), Text/Memo, Arrow (화살표), Shape (도형) | 고성능, 베지어 곡선, SVG 도형 렌더링 |
| DOM (Vue) | NewsContent, ToastEditor, Document, IFrame, LinkContent, YouTube, VOD | 인터랙티브 편집, iframe 임베딩, 리치 텍스트 |
Canvas에는 3개의 레이어가 겹쳐 있습니다: Pattern(배경 점 무늬), BG(일반 객체), FG(현재 편집 중인 객체). 편집 중인 객체만 FG에 그려 불필요한 재렌더링을 최소화합니다. DOM 객체도 마찬가지로 domObjectParentBack(일반)과 domObjectParent(편집 중) 두 컨테이너로 분리하여 z-order를 관리합니다.
객체 시스템
캔버스 위의 모든 요소는 통일된 객체 모델을 기반으로 합니다. 각 객체는 위치·크기·회전·스케일 정보를 가지며, 렌더링 방식에 따라 두 계열로 나뉩니다.
모든 객체는 이동·리사이즈·회전을 지원하며, 타입별 전용 편집기(7종)가 활성화됩니다. 텍스트는 인라인 편집, 이미지는 크롭, 화살표는 끝점 드래그 등 객체 특성에 맞는 조작 방식을 제공합니다.
무한 캔버스 — 좌표 변환과 뷰포트
캔버스는 무한한 2D 공간 위에 존재합니다. 사용자의 화면은 이 공간의 일부를 비추는 “카메라”와 같습니다.
마우스/터치 위치
줌·패닝 반영
이동·회전 역변환
줌(0.5배~15배)은 마우스 포인터 위치를 기준점으로 수행되어 자연스럽게 확대/축소됩니다. 패닝은 Spacebar + 드래그로 캔버스를 자유롭게 이동합니다. 이 좌표 변환은 이벤트 처리(클릭 위치 → 어떤 객체?)와 렌더링(객체 위치 → 화면 어디?) 양쪽에서 핵심 역할을 합니다.
렌더링과 성능 최적화
렌더링에서 제외
편집 중 → FG
DOM: CSS 위치 동기화
매 프레임마다 전체 씬을 다시 그리되, 가시 영역 컬링으로 화면 밖 객체를 건너뛰고, 편집 중인 객체만 FG 레이어에서 갱신하여 불필요한 재렌더링을 최소화합니다. 자유 드로잉 선은 경로 최적화 알고리즘(Ramer-Douglas-Peucker)으로 점 개수를 줄여 렌더링 부하를 낮추고, 베지어 곡선 보간으로 부드러운 곡선을 유지합니다.
도구와 인터랙션
모든 마우스·터치·휠 이벤트는 중앙 이벤트 처리기를 통해 좌표 변환 → 도구별 분기 → 객체 조작 → 히스토리 기록의 일관된 흐름으로 처리됩니다. Undo/Redo는 최대 1,000단계까지 지원하며, 모든 사용자 액션의 스냅샷을 스택으로 관리합니다.
기술 스택 상세
| 영역 | 기술 |
|---|---|
| Frontend | Vue 3.4, TypeScript 5.4, Vite 5.3, Vue Router 4, Pinia 3 (상태 관리) |
| 캔버스 편집기 | V3Whiteboard (자체 개발), Tiptap 2 (리치 텍스트), Toast UI Editor 3 (마크다운) |
| 문서/미디어 | html2canvas, jsPDF (PDF 생성), pdfjs-dist (PDF 뷰어), ExcelJS (엑셀), QRCode.vue |
| UI/UX | SASS, Swiper (캐러셀), Vue Draggable (드래그 앤 드롭), Chart.js (차트), Vue Masonry Wall |
| Backend | Spring Boot 3.4.4, Java 21, Spring Security, Spring Batch, OAuth2 Client |
| 데이터 접근 | Spring Data JPA, QueryDSL 5.1, Liquibase (DB 마이그레이션) |
| 검색 엔진 | Elasticsearch 8.13, Spring Data Elasticsearch, Nori 한글 형태소 분석기 |
| 인증/보안 | JWT (jjwt 0.12), Spring Security, OWASP HTML Sanitizer, CryptoJS |
| 캐싱/성능 | Caffeine Cache, Spring Cache, WebFlux (비동기) |
| Database | PostgreSQL, Liquibase (스키마 버전 관리) |
| 기타 | JSoup (URL 프리뷰), PDFBox (PDF 처리), Spring Mail, Logstash (로깅), Docker |
이 프로젝트가 보여주는 우리의 역량
e-NIE 개발을 통해, (주)민트기술은 대규모 교육 플랫폼을 풀스택으로 설계·구현할 수 있는 역량을 보유하고 있음을 보여줍니다. 특히 다음과 같은 과제를 수행할 수 있습니다:
- 캔버스 기반 콘텐츠 편집 시스템 — 화이트보드 위에 텍스트·이미지·도형·미디어를 자유롭게 배치·편집하는 인터랙티브 에디터 개발
- Elasticsearch 기반 대규모 검색 시스템 — 수만 건의 한글 문서를 Nori 형태소 분석기로 색인하고 빠르게 검색
- 교육 도메인 SaaS 플랫폼 — 학생·교사·관리자 역할 분리, 수업·과제·자료실·미션 게임 등 교육 워크플로우 구현
- Vue 3 + Spring Boot 풀스택 웹 애플리케이션 — 모던 프론트엔드와 엔터프라이즈급 백엔드의 통합
- 관리자 백오피스 시스템 — 회원·조직·계약·콘텐츠·통계 등 운영에 필요한 전체 관리 기능 구현
- 공공기관 프로젝트 수행 — 한국언론진흥재단(문화체육관광부 산하)의 요구사항에 맞는 품질과 보안 기준 충족
교육 플랫폼, 캔버스 편집기, 대규모 검색 시스템 등 관련 과제가 있으시면 언제든 연락 주세요.