여기스터디 - 스마트 온라인 교육 학사 관리 솔루션

스마트 온라인 교육 학사 관리 솔루션

추천합니다! 👍🏻👍🏻👍🏻

ActiveReportJS(액티브리포트JS)의 최고의 장점은 HTML/JavaScript 코드 몇 줄 만으로 웹부터 모바일에 이르기까지 다양한 환경에서 각종 성적증명서, 수료증명서, 경력증명서 등 까다로운 증명서 발급 기능을 구현할 수 있다는 것입니다.

함께 사용한 Wijmo(위즈모)의 최고의 장점은 10만명이 넘는 회원들의 방대한 데이터를 그리드(FlexGrid), 차트(FlexChart) 등의 컨트롤을 이용하여, 어떠한 성능의 저하도 없이 웹 표준에 맞는 정형화된 데이터 뷰를 렌더링 할 수 있다는 것입니다.

두 제품 모두 다양한 크로스플랫폼을 지원하는 유일한 프론트엔드(Front-End) 컨트롤로서 개발자 입장에서 개발 편의성, 확장성, 그리고 성능을 모두 만족하는 완벽한 제품입니다.

- 여기스터디, 이서용 부원장님

웹 기술의 발달과 비디오 편집 및 실시간 스트리밍 기술의 발달로 가장 큰 변화가 이뤄진 곳 중 하나는 단연 교육 분야일 것입니다. 이제 언제 어디서든 데스크톱부터 모바일 기기에 이르기까지 다양한 플랫폼에서 학습할 수 있는 시대가 열렸습니다.

더 이상 온라인 상에서 무언가를 배우고 학습하는 것이 낯설지 않으며, 오히려 익숙한 시대에 살고 있다는 것은 부인할 수 없는 사실일 것입니다. 이렇게 온라인 교육을 위한 플랫폼과 연관 기술 및 방법들은 나날이 발전하고 있지만, 그 이면을 보면, 학생 관리, 수강 관리, 교사 관리 등과 같은 관리 부분에 있어서는 여전히 시스템화되지 못하고 문서 및 파일의 형태로 관리되고 있는 부분이 많습니다.

이에 여기스터디에서는 메시어스의 JavaScript UI 컨트롤을 활용하여, 온라인 교육 사이트 운영 시에 필요한 학사관리, 학생 관리, 교사 관리, 수강 관리 등 온라인 교육 서비스의 전반적인 운영 및 관리를 위한 “여기캠퍼스”라는 솔루션을 개발하였습니다.

이러한 온라인 교육 운영 및 관리 노하우가 담겨 있는, 온라인 학사 관리 솔루션인 “여기캠퍼스”는 현재 여기스터디 온라인 학점은행 뿐만 아니라, 고용노동부 HRD 온라인 교육 시스템 및 보건복지부 요양보호사 보수교육 시스템 등 다양한 교육 분야에서 도입되어 사용되고 있습니다.

이번 포스팅에서는 메시어스의 Wijmo(JavaScript UI 컴포넌트)와 ActiveReportsJS(JavaScript 리포팅 컴포넌트)를 활용하여 개발되어, 국내의 다양한 온라인 교육 시장의 안정적인 운영과 관리를 할 수 있도록 도움을 주고 있는 사례 중 하나인 여기스터디의 “스마트 온라인 학사 관리 솔루션 (여기캠퍼스)”에 대해서 소개합니다.

수강 신청부터 수업까지는 모두 온라인으로 바로 되는데,

증명서 발급은 따로 만들어서 메일로 보내주신다고요?!

온라인 교육 시스템의 장점은 웹 상에서 수강 신청, 결제 그리고 수업에 이르기까지 모든 것이 온라인으로 쉽고 빠르게 이뤄지며, 언제 어디서나, 배움의 길을 걸을 수 있다는 것입니다.

그러나 이러한 장점으로 인해, 교육 시스템을 관리하고 운영하는 직원들은 상대적으로 오프라인보다 더 많은 학생들을 관리하고 다양한 문의 및 요청을 받을 수 밖에 없습니다.

이 중에 특히 긴 시간이 걸리는 업무 중 하나는 각종 증명서 발급 업무일 것입니다.

여전히 많은 학교 및 교육 기관에서는 엑셀(Excel), 워드(Word) 및 한글(HWP) 양식에 관련 데이터를 복사 + 붙여 넣기 하는 방법으로 업무를 진행하는 경우가 많이 있습니다.

학생 및 교사의 요청으로 성적증명서, 수료증명서, 경력증명서, 납입증명서 등 다양한 증명서를 발급하는 것은 쉬운 업무처럼 보이지만, 증명서 발급 요청이 적을 때는 문제가 되지 않으나, 온라인 플랫폼 상의 학생과 교사가 많아질수록 많은 시간을 소요하게 됩니다.

ActiveReportsJS, 실시간으로 증명서를 발급해줘!

코딩 없이 증명서를 만들고, 코드 단 몇 줄로 웹 상에 보여주세요.

이에 여기스터디의 “여기캠퍼스 - 스마트 학사관리 시스템”은 ActiveReportsJS의 리포트 디자이너와 JavaScript 리포팅 뷰어 컨트롤을 이용하여, ActiveX나 별도의 설치 프로그램 없이 웹 페이지에서 실시간으로 증명서를 렌더링하고 발급받을 수 있는 기능을 개발하였습니다.

이를 통해, 원하는 증명서를 PC(데스크톱) 브라우저에서 뿐만 아니라 스마트폰, 태블릿 등 모든 기기에서 바로 조회하고, 리포트 뷰어 자체에서 제공하는 PDF 내보내기 및 인쇄 기능을 통하여 원하는 형태로 빠르게 발급받을 수 있게 되었습니다.

ActiveReportsJS는 개발자를 위한 노코드 기반의 리포트 디자이너를 제공하며, 이를 통해 개발자가 드래그 앤 드롭(Drag & Drop) 방식으로 어떠한 코딩도 필요 없이 각종 증명서 양식을 쉽게 그릴 수 있도록 지원합니다.

이렇게 만들어진 증명서 양식에 필요한 데이터를 JSON 형식으로 바인딩만 하면 ActiveReportsJS의 리포트 뷰어에서 자동으로 웹 및 모바일 브라우저 상에서 증명서를 렌더링(시각화)해주고, PDF 및 인쇄 기능을 자체적으로 제공합니다.

ActiveReportsJS를 통해 개발자는 단 코드 몇 줄만으로, 웹 페이지에서 바로 증명서 생성부터 발급 그리고 PDF 출력 기능까지 구현할 수 있었습니다.

* ActiveReportsJS는 자동으로 화면 크기에 맞추어 리포트 뷰어가 모바일 전용으로 변환되어, 개발자는 별도의 모바일용으로 뷰어 및 증명서/양식 출력 기능을 개발할 필요가 없습니다.

Wijmo로 만든 수강생/교사 관리 대시보드

10만 명의 회원 데이터를 성능 저하 없이 빠르게 시각화

여기스터디는 Wijmo(JavaScript UI 시각화 컴포넌트)에서 제공해 주는 고성능의 데이터그리드(FlexGrid), 차트(FlexChart) 그리고 다양한 입력(Input) 컨트롤을 사용하여 10만 명이 넘는 학생 관리, 교무 관리, 성적 관리 등 대량의 데이터를 빠르게 불러와 직원들이 빠르게 다양한 업무를 처리할 수 있도록 시스템을 개발하였습니다.

초기 개발에는 HTML 테이블(Table)과 오픈소스 기반의 차트(Chart)를 이용했으나, 대량의 고객 정보 데이터를 불러와 그려주려고 할 때마다, 오랜 시간을 기다려야 되거나 심하게는 시스템이 완전히 다운되어 사용이 어려운 경우가 많았습니다.

또한, 시스템을 사용하는 직원과 고객사에서 학생 및 교사 정보에 대한 빠른 검색 및 엑셀(Excel)과 같은 필터링, PDF 및 엑셀 내보내기 그리고 데이터 그리드의 열(Column) 순서를 사용자화 할 수 있는 다양한 고급 기능을 요청함에 따라 오픈소스 및 HTML의 기본 컨트롤만으로는 구현에 어려움을 겪었습니다.

이에 여기 스터디에서는 고성능(High Performance)과 비즈니스 기반의 고급 기능(Advanced Feature)을 모두 만족하는 순수 JavaScript 컨트롤인 Wijmo를 도입하여 시스템의 UI와 UX를 구현하였습니다.

개발자는 코드 단 몇 줄 만으로 Wijmo의 데이터 그리드인 FlexGrid(그리드)와 FlexChart(차트)의 가상화 기술을 통해서 성능의 저하 없이 10만명이 넘는 고객의 정보를 빠르게 렌더링 할 수 있었습니다.

* 실제로 많은 제조 기반의 국내 대기업에서 대량의 실시간 데이터 처리를 위해 Wijmo의 FlexGrid와 FlexChart를 사용하고 있습니다.
(Benchmark 바로가기)

또한, 사용자가 원하는 빠른 검색, 엑셀(Excel)과 같은 필터링, PDF 및 엑셀로 데이터 내보내기, UI 커스터마이징 등의 복잡한 기능들을 별도의 추가 개발 없이 Wijmo 컨트롤들에서 기본 제공하는 API를 통해 개발하여 시간을 크게 단축할 수 있었습니다.

* Wijmo에서 제공하는 모든 JavaScirpt 데이터 그리드(FlexGird), 차트(FlexChart), 피벗(OLAP Pivot), 입력(Input) 등의 컨트롤은 화면 크기에 맞추어 자동으로 모바일 전용으로 변환되어, 개발자는 별도로 모바일용 UI를 고민하고 개발할 필요가 없습니다.

여기스터디는 메시어스의 JavaScript 리포팅(ActiveReportsJS) 및 그리드, 차트 등의 UI(Wijmo) 라이브러리를 통해 한 개의 JSON 데이터만으로 교육 현장에서 필요한 각종 증명서 발급, 조회 및 출력을 위한 뷰어부터, 학사 관련 데이터 조회 및 대시보드 시각화까지 가능한 완전하고 안정적인 학사 관리 시스템 개발을 단 코드 몇 줄만으로 시간 및 비용의 효율화와 함께 이뤄냈습니다.

USE CASE

아래에서는 실제 “여기스터디”의 “스마트 온라인 학사 관리 솔루션 (여기캠퍼스)”에서 ActiveReportsJS(JavaScript 비즈니스 리포팅 컴포넌트)와 Wijmo(JavaScript UI 시각화 컴포넌트)가 어떻게 사용되고 있는지를 보여 줍니다.

1️⃣ 학생 조회 및 수강 관리

여기캠퍼스에서는 Wimo에서 제공하는 다양한 컨트롤 중에 대표 컨트롤인 FlexGrid(데이터그리드)를 사용하여, 10만명이 넘는 학생과 교사 데이터를 웹 화면에 렌더링하고 있습니다.

FlexGrid에서 자체적으로 제공하는 검색(Search), 필터링(Filtering), 페이징(Paging) 등 다양한 기본 기능을 통해, 코드 명령만으로 빠르고 쉽게 데이터 조회 및 관리를 위한 기능을 개발할 수 있습니다.

또한, 위의 이미지와 같이 FlexGrid의 셀 템플릿, 셀 메이커 기능을 이용하여, 버튼, 이미지 등의 다양한 HTML 요소와 컴포넌트 및 사용자 정의 컨텐츠를 그리드의 셀에 추가할 수 있습니다.

여기캠퍼스에서는 사용자 아이콘의 색상을 통해서 각 학생의 성별을 빠르게 확인 가능하게 구현했으며, 관리 및 상담 버튼을 추가하여 해당 메뉴로 바로 이동할 수 있도록 사용 편의성을 확보하였습니다.

또한, 복잡한 데이터의 가독성을 높이기 위해, FlexGrid의 셀 병합, 멀티 헤더, 열 고정, 헤더 고정 기능을 설정하여 제한된 화면에서 다양한 데이터를 확인할 수 있도록 개발하였습니다.

이렇게 조회된 정보를 Excel 또는 PDF로 내려 받을 수 있도록, Wijmo에서 제공해주는 Excel 내보내기, PDF 내보내기 명령어를 통해서 기능을 개발하였습니다.

2️⃣ 다양한 증명서 발급

“여기캠퍼스”에서는 성적증명서, 수료증명서, 경력증명서, 납입증명서 등 다양한 증명서를 온라인에서 이용자가 쉽게 발급 받을 수 있는 기능을 순수 JavaScript 기반의 리포팅 컴포넌트인 ActiveReportsJS를 통해서 개발하였습니다.

개발자는 더 이상 ActiveX나 별도의 뷰어를 위한 프로그램 개발에 의존하지 않고, JSON과 HTML/JavaScirpt 프론트엔드 기술만으로 ActiveReportsJS 디자이너를 통해서 코딩 없이 만들어진 증명서 양식을 JS 뷰어를 통해서 웹 페이지 상에 실시간으로 렌더링하고 이를 PDF로 저장하거나 인쇄하는 기능을 제공할 수 있게 되었습니다.

<실제 ActiveReportsJS 디자이너에서 성적 증명서를 디자인한 화면입니다.>

<실제 ActiveReportsJS 뷰어에서 성적 증명서를 웹 상에 그려준 화면입니다.>

3️⃣ 시스템 모니터링 대시보드

여기캠퍼스 시스템에서는 또한 실시간으로 시스템의 상태를 모니터링 할 수 있는 대시보드 기능을 Wijmo의 고성능 차트를 통해서 시각화하고 있습니다.

10만명의 고객이 수시로 들어오는 웹 시스템의 대용량의 로그와 상태를 실시간으로 한눈에 볼 수 있고 이상 트래픽이나 이슈를 감지할 수 있도록 Wijmo FlexChart의 라인차트(LineChart)와 원형차트(PieChart)를 이용해 아래와 같이 개발하였습니다.

<실제 Wijmo로 구현된 시스템 이슈 및 서버의 상태를 모니터링하는 화면입니다.>

About 여기스터디

여기스터디 홈페이지 바로가기

여기스터디 사이버평생교육원(이하 여기스터디)은 언제, 어디서나, 그리고 누구에게나 열린 학습 기회를 제공하는 교육부 인증 평생교육 기관입니다. 사회복지사, 보육교사, 청소년지도사 등 국가 자격증을 취득하기 위한 90여개 과목이 개설되어 있으며, 빠르게 변화하는 IT 환경에서 학습자의 만족과 최상의 교육 효과를 위하여 다양한 노력을 기울이고 있는 교육 기관입니다.

MESCIUS 제품 자세히 보기

< 이전 게시물

새 게시물 >