175
웹 기술의 발달과 비디오 편집 및 실시간 스트리밍 기술의 발달로 가장 큰 변화가 이뤄진 곳 중 하나는 단연 교육 분야 일 것입니다. 이제 언제 어디서든 데스크톱부터 모바일 기기에 이르기까지 다양한 플랫폼에서 학습할 수 있는 시대가 열렸습니다.
더 이상 온라인 상에서 무언가를 배우고 학습하는 것이 낯설지 않으며, 오히려 익숙한 시대에 살고 있다는 것은 부인할 수 없는 사실일 것입니다. 이렇게 온라인 교육을 위한 플랫폼과 연관 기술 및 방법들은 나날이 발전하고 있지만, 그 이면을 보면, 학생 관리, 수강 관리, 교사 관리 등과 같은 관리 부분에 있어서는 여전히 시스템화되지 못하고 문서 및 파일의 형태로 관리되고 있는 부분이 많습니다.
이에 여기스터디에서는 메시어스의 JavaScript UI 컨트롤을 활용하여, 온라인 교육 사이트 운영 시에 필요한 학사관리, 학생 관리, 교사 관리, 수강 관리 등 온라인 교육 서비스의 전반적인 운영 및 관리를 위한 “여기캠퍼스”라는 솔루션을 개발하였습니다.
이러한 온라인 교육 운영 및 관리 노하우가 담겨 있는, 온라인 학사 관리 솔루션인 “여기캠퍼스”는 현재 여기스터디 온라인 학점은행 뿐만 아니라, 고용노동부 HRD 온라인 교육 시스템 및 보건복지부 요양보호사 보수교육 시스템 등 다양한 교육 분야에서 도입되어 사용되고 있습니다.
이번 포스팅에서는 메시어스의 Wijmo(JavaScript UI 컴포넌트)와 ActiveReportsJS(JavaScript 리포팅 컴포넌트)를 활용하여 개발되어, 국내의 다양한 온라인 교육 시장의 안정적인 운영과 관리를 할 수 있도록 도움을 주고 있는 사례 중 하나인 여기스터디의 “스마트 온라인 학사 관리 솔루션 (여기캠퍼스)”에 대해서 소개합니다.
수강 신청부터 수업까지는 모두 온라인으로 바로 되는데,
증명서 발급은 따로 만들어서 메일로 보내주신다고요?!
온라인 교육 시스템의 장점은 웹 상에서 수강 신청, 결제 그리고 수업에 이르기까지 모든 것이 온라인으로 쉽고 빠르게 이뤄지며, 언제 어디서나, 배움의 길을 걸을 수 있다는 것입니다.
그러나 이러한 장점으로 인해, 교육 시스템을 관리하고 운영하는 직원들은 상대적으로 오프라인보다 더 많은 학생들을 관리하고 다양한 문의 및 요청을 받을 수 밖에 없습니다.
이 중에 특히 긴 시간이 걸리는 업무 중 하나는 각종 증명서 발급 업무일 것입니다.
여전히 많은 학교 및 교육 기관에서는 엑셀(Excel), 워드(Word) 및 한글(HWP) 양식에 관련 데이터를 복사 + 붙여 넣기 하는 방법으로 업무를 진행하는 경우가 많이 있습니다.
학생 및 교사의 요청으로 성적증명서, 수료증명서, 경력증명서, 납입증명서 등 다양한 증명서를 발급하는 것은 쉬운 업무처럼 보이지만, 증명서 발급 요청이 적을 때는 문제가 되지 않으나, 온라인 플랫폼 상의 학생과 교사가 많아질수록 많은 시간을 소요하게 됩니다.
ActiveReportsJS | JavaScript 리포팅 컴포넌트
코딩 없이 증명서를 만들고, 코드 단 몇 줄로 웹 상에 실시간으로 보여주세요.
이에 여기스터디의 “여기캠퍼스 - 스마트 학사관리 시스템”은 ActiveReportsJS의 리포트 디자이너와 JavaScript 리포팅 뷰어 컨트롤을 이용하여, ActiveX나 별도의 설치 프로그램 없이 웹 페이지에서 실시간으로 증명서를 렌더링하고 발급받을 수 있는 기능을 개발하였습니다.
이를 통해, 원하는 증명서를 PC(데스크톱) 브라우저에서 뿐만 아니라 스마트폰, 태블릿 등 모든 기기에서 바로 조회하고, 리포트 뷰어 자체에서 제공하는 PDF 내보내기 및 인쇄 기능을 통하여 원하는 형태로 빠르게 발급받을 수 있게 되었습니다.
ActiveReportsJS는 개발자를 위한 노코드 기반의 리포트 디자이너를 제공하며, 이를 통해 개발자가 드래그 앤 드롭(Drag & Drop) 방식으로 어떠한 코딩도 필요 없이 각종 증명서 양식을 쉽게 그릴 수 있도록 지원합니다.
이렇게 만들어진 증명서 양식에 필요한 데이터를 JSON 형식으로 바인딩만 하면 ActiveReportsJS의 리포트 뷰어에서 자동으로 웹 및 모바일 브라우저 상에서 증명서를 렌더링(시각화)해주고, PDF 및 인쇄 기능을 자체적으로 제공합니다.
ActiveReportsJS를 통해 개발자는 단 코드 몇 줄만으로, 웹 페이지에서 바로 증명서 생성부터 발급 그리고 PDF 출력 기능까지 구현할 수 있었습니다.
* ActiveReportsJS는 자동으로 화면 크기에 맞추어 리포트 뷰어가 모바일 전용으로 변환되어, 개발자는 별도의 모바일용으로 뷰어 및 증명서/양식 출력 기능을 개발할 필요가 없습니다.
Wijmo | JavaScript 그리드, 차트, 입력 UI 컴포넌트
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) 등 다양한 기본 기능을 통해, 코드 명령만으로 빠르고 쉽게 데이터 조회 및 관리를 위한 기능을 개발할 수 있습니다.
<Wijmo FlexGrid에 대량의 고객 정보를 불러오고 버튼 및 이미지를 셀 안에 추가하여 기능을 확장한 실제 화면입니다.>
또한, 위의 이미지와 같이 FlexGrid의 셀 템플릿, 셀 메이커 기능을 이용하여, 버튼, 이미지 등의 다양한 HTML 요소와 컴포넌트 및 사용자 정의 컨텐츠를 그리드의 셀에 추가할 수 있습니다.
여기캠퍼스에서는 사용자 아이콘의 색상을 통해서 각 학생의 성별을 빠르게 확인 가능하게 구현했으며, 관리 및 상담 버튼을 추가하여 해당 메뉴로 바로 이동할 수 있도록 사용 편의성을 확보하였습니다.
또한, 복잡한 데이터의 가독성을 높이기 위해, FlexGrid의 셀 병합, 멀티 헤더, 열 고정, 헤더 고정 기능을 설정하여 제한된 화면에서 다양한 데이터를 확인할 수 있도록 개발하였습니다.
<Wijmo 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로 구현된 시스템 이슈 및 서버의 상태를 모니터링하는 화면입니다.>
No1. JavaScript 개발자 컴포넌트
메시어스(MESCIUS)에서는 전세계 개발자분들의 쉽고 빠른 개발을 지원하기 위해 닷넷(.NET), 자바스크립트(JavaScript), 자바(JAVA) 등 다양한 언어 & 플랫폼에서 사용 가능한 개발자 전용 API 라이브러리 및 UI 컴포넌트를 제공해오고 있습니다.
비즈니스 리포팅 UI 컴포넌트
개발하기 까다롭고 어려운 리포팅(Reporting) 솔루션을 쉽게 개발할 수 있도록, 리포트 디자이너 부터 뷰어, 그리고 각종 API와 라이브러리를 모두 제공합니다. 이제 최종 사용자에게 원하는 방식의 리포팅 및 양식 출력 서비스를 제공할 수 있습니다.
그리드, 차트, 입력 등 시각화 UI 컴포넌트
대시보드 및 시각화 솔루션 개발을 위한 대용량 데이터 컨트롤에 특화된 데이터 그리드, 차트, OLAP/Pivot, 입력 컨트롤 등 개발자가 필요한 모든 UI 컨트롤을 지원합니다.
1
0