네 열 격자 위에 크기가 다른 위젯 카드들이 끼워져 있다. 막대 차트, 도넛 차트, 게시판, 인사 카드, 숫자 카드, 진행률 바다. 카드 하나를 손가락이 끌어 빈 칸으로 옮기고 있다. 아래에 위젯 유형 10 이상, 다양한 차트, 4×n 격자라고 적혀 있다. 맨 아래는 5240 로고가 땅처럼 받치고 있다.

5240 MODULE 13 — WIDGET

위젯 대시보드

주요 인사·근태 지표와 업무 메뉴를 위젯으로 구성합니다. 드래그로 위젯을 배치하고, 위젯 배치를 저장해 다른 기기에서도 동일한 대시보드를 사용할 수 있습니다. 5240 위젯 대시보드가 일하는 방식을 바꿉니다.

들어가며

왜 위젯입니까?

팀장과 팀원의 화면은 달라야 하기 때문입니다.
5240은 직무·권한·역할에 맞게 화면을 조립하는 방식으로 HR을 설계합니다.

같은 격자 판 둘이 나란히 있다. 왼쪽 팀장 판에는 조직 근태현황, KPI, 결재 대기 위젯이, 오른쪽 팀원 판에는 내 근무 상태, 남은 연차, 바로가기 위젯이 끼워져 있다. 두 판 아래 같은 위젯 상자에서 화살표가 각각 올라간다.

01

역할에 맞춘 화면

대시보드마다 권한과 위젯 구성이 나뉘어 있어, 누가 열어도 그 사람에게 맞는 정보만 보입니다.

왼쪽에 대시보드 셋이 있다. 경영진, 팀장, 팀원이다. 대시보드마다 권한 자물쇠와 위젯 목록이 붙어 있다. 오른쪽에서 세 사람이 각자 자기 대시보드만 열어 보고 있다.

02

정보 조회와 업무 메뉴 이동을 지원하는 대시보드

KPI 숫자를 누르면 상세로, 게시물 제목을 누르면 그 메뉴로 갑니다. 위젯에서 상세정보를 조회하거나 관련 업무 메뉴로 이동할 수 있습니다.

근태현황 위젯에서 근무예외자 칸을 누른 모습이다. 상세 구분에 휴가 14, 출장 0, 교육 0이 나오고, 아래 대상자 14명 목록에 사람마다 사번, 성명, 직위, 직책, 조직, 출근·퇴근, 근무판정 휴가가 적혀 있다.

근태현황 위젯에서 출퇴근 특이자 칸을 누른 모습이다. 상세 구분에 지각 4, 조퇴 63, 결근 7, 출퇴근 누락 1이 나오고, 아래 대상자 75명 목록에 결근과 출퇴근 누락 판정이 붙어 있다.

근태현황 위젯이다. 조직 기준 요약으로 전체 278명 가운데 정상 출퇴근 203명, 출퇴근 특이자 75명, 근무예외자 14명, 연장근로 12명 네 칸이 있고, 정상 출퇴근 칸을 누르자 아래에 대상자 203명 목록이 사번, 성명, 직위, 직책, 조직, 출근·퇴근 시각, 근무상태, 근무판정과 함께 나온다.

근태현황 위젯: 칸을 누르면 아래 대상자 목록이 바뀝니다

03

DB에 저장되는 레이아웃

배치와 크기는 서버 DB에 저장됩니다. 사무실·재택·외근, 어디서 열어도 같은 화면입니다.

가운데 서버 DB 원통이 있고 위젯 배치가 행으로 저장되어 있다. 원통에서 세 갈래로 사무실 PC, 집 노트북, 외근 중 태블릿으로 같은 배치가 내려간다. 세 화면의 위젯 위치가 똑같다.

위젯 종류

열 가지 이상의 위젯으로 내 대시보드를 완성합니다.

차트, 인사 카드, 게시판, 근태 바, 바로가기까지
필요한 조합으로 구성하고 필요에 따라 넓힙니다.

위젯 여덟 칸이 두 줄로 놓여 있다. 차트, 게시·일정, 근태 차트, 인사 카드, 근무 상태 바, 바로가기 메뉴, KPI 숫자, 확장 iframe 이다.

04

차트 위젯

막대·선·파이·도넛·레이더·영역·게이지 등 다양한 차트를 지원합니다(Chart.js · ApexCharts). 조회한 KPI 데이터를 차트로 표시하며, 색상은 5240의 공통 색상 기준에 맞춰 자동 적용됩니다.

차트 위젯 다섯이 두 줄로 놓여 있다. 재직인원 도넛, 연도별 남녀인원 쌓은 막대, 평균근속 가로 막대, 평균나이 선, 남녀 평균연봉 막대다. 모두 2024년부터 2026년까지를 보여 준다.

차트 위젯: 재직인원·남녀인원·평균근속·평균나이·평균연봉

05

게시·일정 위젯

공지·일정·문서를 구분 코드로 묶습니다. 웹과 모바일에서 각각 맞는 레이아웃으로 자동으로 나뉩니다.

게시판 위젯이다. 구분 꼬리표 기타, 행사, 교육, 업무가 붙은 글이 한 줄씩 놓여 있다. 근로기준법령 게시, 취업규칙 게시, 산업안전보건법령의 요지, 작업공정별 관리요령, 사내기숙사 운영 규정, 위임전결 규정 게시이고, 줄마다 게시일과 첨부파일 칸이 있다.

게시 위젯: 구분 꼬리표와 게시 기간

06

근태 차트 위젯

주간 근무계획·근무 이력·출퇴근 현황을 탭으로 묶은 복합 차트입니다. 출근·퇴근·초과를 한눈에 봅니다.

근태 차트 위젯이다. 위에 주간근무계획, 근무이력(금일), 출퇴근현황 탭이 있고 주간근무계획이 골라져 있다. 4월 27일부터 30일까지 날마다 가로 막대 하나가 PC ON 가능, 근무, PC OFF 구간으로 나뉘어 오전 9시부터 오후 4시까지 이어진다.

근태 차트 위젯: 날마다 PC ON·근무·PC OFF

07

인사 카드·근무 상태·바로가기·KPI 위젯

인사 카드·근무 상태·바로가기·KPI 위젯을 원하는 위치에 배치합니다. 사진·근무상태·사번·부서를 한 카드에, 연차와 초과근무는 진행률 바로, 자주 쓰는 메뉴는 바로가기로(개인별 즐겨찾기와 부서 공통 메뉴를 한 위젯에), 숫자 하나는 크게.

인사 카드 위젯이다. 4월 27일 월요일, 기본교육1(빅데이터 전문가 과정) 꼬리표 아래 오사공(20070133), 인사팀 본사, 육아단축근무(1조) 09:00~16:00 이 적혀 있다. 출근시간과 퇴근시간, 시간 막대, 출근·퇴근 단추가 있다. — 인사 카드

월별 근무현황 위젯이다. 총 근무계획 157.4시간에 222시간 상한, 근무이력 157.4시간이 진행률 막대로 그려져 있고 기준선 171시간과 144시간이 표시되어 있다. — 근무 상태 바

바로가기 메뉴 위젯이다. 근태신청서 아래에 출퇴근변경신청, 연장근무신청, 조퇴·외출신청 세 링크가 카드처럼 놓여 있다. — 바로가기 메뉴

숫자 위젯이다. 잔여연차 22일이 크게 적혀 있고 그 아래 발생 23, 사용 0(반차 1)이 작게 적혀 있다. — KPI 숫자

08

확장 iframe 위젯

별도로 개발한 화면을 iframe 위젯으로 연결할 수 있습니다. 따로 만든 전용 JSP 화면을 위젯으로 붙여 채용·교육·평가 같은 조직 고유의 업무 흐름을 담습니다.

격자 판의 한 칸이 점선 틀로 비어 있고 iframe 이라고 적혀 있다. 왼쪽에서 채용, 교육, 평가 전용 화면 세 장이 화살표를 따라 그 틀에 끼워진다. 틀 아래에 프로그램 맵과 연결이라고 적혀 있다.

도입 과정

나의 대시보드는 어떻게 만들어집니까?

관리자가 정의하고, 위젯을 조립하고, 사용자에게 배정하고,
배치까지 관리자가 정합니다.

네 칸이 차례로 이어진다. 대시보드 정의, 위젯 조립, 사용자 지정, 레이아웃 배치다. 네 칸 모두 위에 관리자라는 띠가 걸쳐 있다.

09

네 단계로 완성되는 나의 대시보드

대시보드 설정을 저장하고, 템플릿을 복사해 적용할 수 있습니다. 관리자는 미리보기로 화면 구성을 확인합니다.

네 칸이 두 줄로 놓여 있다. 첫째 대시보드 정의는 대시보드 관리에서 마스터 행을 등록하고 권한과 보안 레벨을 정하며 복사로 템플릿을 펼친다. 둘째 위젯 조립은 SQL, 그래프 종류, 링크 URL, iframe URL 을 넣어 위젯 하나를 만든다. 셋째 사용자 지정은 대시보드를 사용자와 부서에 배정해 로그인하면 홈으로 바로 연결되고 관리자 미리보기로 먼저 본다. 넷째 레이아웃 배치는 관리자가 드래그와 크기 조절로 배치를 저장하고 기기가 달라도 그대로 복원된다.

주요 기능

대시보드 설정과 활용을 지원하는 6가지 기능입니다.

기준일 재조회, 복사, 권한 제어까지
관리자와 사용자 모두를 위한 기능을 갖추었습니다.

여섯 칸이 두 줄로 놓여 있다. 드래그 앤 드롭 빌더, DB 저장 레이아웃, 대시보드 복사·전개, 기준일 재조회, 필드·팝업·메뉴 링크, 권한·보안 레벨이다.

10

드래그 앤 드롭 빌더와 DB 저장

4열 격자 위에서 위젯을 자유롭게 배치하고 크기를 바꿉니다(IBLEADERS DASHBUILDER · GRIDSTACK). 관리자가 정한 배치가 저장되어 사용자는 어느 기기에서든 같은 화면을 봅니다.

네 열 격자 위에 위젯 카드들이 있다. 손가락이 카드 하나를 끌어 옆 칸으로 옮기고, 다른 카드의 귀퉁이를 끌어 두 칸 넓이로 늘린다. 격자 아래에서 화살표가 서버 원통으로 내려가 위치, 크기, 순서가 행으로 저장된다.

11

대시보드 복사·전개와 기준일 재조회

기준 대시보드를 템플릿으로 여러 부서에 펼쳐 도입 초기 설정을 한 번으로 끝냅니다. 위쪽 기준일을 바꾸면 모든 위젯이 그 시점의 데이터로 한꺼번에 다시 조회됩니다.

왼쪽에 기준 대시보드 한 장이 있고 복사 화살표 셋이 인사팀, 영업팀, 생산팀 대시보드로 뻗는다. 오른쪽에는 기준일 칸 하나가 있고 거기서 아래로 위젯 넷에 동시에 새로고침 표시가 내려간다.

12

링크로 이어지는 업무와 권한·보안 레벨

숫자를 누르면 상세로, 인사 카드를 누르면 팝업으로, 제목을 누르면 그 탭이 열립니다. 권한 패턴과 보안 등급으로 위젯 접근과 민감정보 수준을 대시보드마다 나누어 제어합니다.

왼쪽 위젯 셋에서 화살표가 나간다. 숫자 위젯은 상세 화면으로, 인사 카드 위젯은 팝업으로, 게시판 제목은 메뉴 탭으로 이어진다. 오른쪽에는 대시보드 둘이 있고 하나는 보안 등급 높음으로 민감정보가 보이고 다른 하나는 낮음으로 민감정보가 가려져 있다.

13

다양한 그래프

Chart.js와 ApexCharts를 함께 실어 정적인 막대부터 움직이는 게이지까지 그립니다. 5240 블루 팔레트로 색이 자동으로 맞춰집니다.

작은 그래프들이 두 줄로 놓여 있다. 가로 막대, 파이, 도넛, 라인, 레이더, 세로 막대, 영역, Line(Apex), Bar(Apex), Radial Bar, Stacked Bar, 숫자 카드, 사용자 정의, iframe 확장이다.

맺으며

다양한 HR 인사이트를 한 화면에 조립합니다

네 열 격자 판이 위젯으로 가득 차 있다. 판 위에 역할에 맞춘 화면, 실행 화면, 어디서나 같은 화면 세 꼬리표가 붙어 있다.

보는 화면이 아니라 실행 화면으로 일하는 방식을 바꾸십시오.
5240의 다른 모듈도 살펴보십시오.

소개를 확인해 주셔서 감사합니다.

다른 모듈 보기

5240 MODULE 13 — 위젯 대시보드