프로젝트 개요
|프로젝트명

WorkNetWork

|개발 기간

2023.03.15 - 2023.06.08

|팀 규모

김영주, 김하영, 백진욱, 이광호 [4인]

|프로젝트 요약

근무 시간을 QR코드로 간편하게 기록하고, 노동 관련 정보와 뉴스를 통해 기업과 근로자 간 신뢰를 높이는 동시에 투명한 인사관리를 지원하는 서비스입니다.

사용자는 QR코드를 찍어 자신의 근로 시간을 간편하게 측정할 수 있으며, 근로와 관련된 다양한 정보(뉴스, 노동법, 통계 자료)를 얻고 커뮤니티를 통해 정보를 공유할 수 있습니다.

전체 서비스 흐름
|메인 페이지

메인 페이지에서 통계 자료 수치(나이대별 총 근로시간, 회사 규모별 총 근무시간, 산업 대분류별 출생아 부모의 육아 휴직 사용률)를 그래프로 바로 확인할 수 있으며, 모든 페이지로 쉽게 이동할 수 있게 설계되었습니다. 또한 페이지의 상단에 뉴스 검색바와 노동법 FAQ 검색바를 배치하여 사용자가 쉽고 빠르게 원하는 기사 및 질문을 검색할 수 있습니다. 더 나아가 로그인 시, 나의 요일별/월별/연간 근로 시간을 그래프 및 수치로 한 눈에 확인할 수 있습니다.

|나의 근무 시간

근무 시작/중지/퇴근(근무시간 저장) 세 개의 버튼을 누르고, 미리 발급된 QR코드(추후 회사 사원증으로 대체 가능)를 인식시켜 근무 시간을 측정/정지/저장 합니다. 사용자는 주간/연간/월별 근무 시간 통계 수치를 그래프 및 평균 수치로 간편하게 확인할 수 있습니다.

|뉴스 검색

노동과 관련된 모든 기사들을 최신 순서로 정렬하여 확인할 수 있습니다. 또한, 게시 기간과 관심 키워드 선택 및 직접 입력을 통해 원하는 기사를 필터링 해서 확인할 수 있습니다.

|노동법 FAQ

대분류(해고, 임금 등), 중분류(해고일반, 통상임금 등), 제목 키워드를 입력하여 노동법 관련 질문과 답을 FAQ로 쉽게 받아볼 수 있습니다.

|게시판

자유게시판으로, 사용자는 게시글을 작성하고 다른 사람들과 상호작용할 수 있습니다.

|로그인/로그아웃

이메일과 비밀번호를 이용해 로그인/로그아웃을 할 수 있습니다. 만약 로그인을 하지 않을 경우, 근무 시간 측정 및 근무 시간 통계 수치 확인을 할 수 없습니다.

핵심 기능
|QR 스캔을 통한 인증 시스템

근무 시작/중지/퇴근(근무시간 저장) 세 개의 버튼을 누르고, 미리 발급된 QR코드(추후 회사 사원증으로 대체 가능)를 인식시켜 인식이 완료된 경우 근무 시간을 측정/정지/저장 합니다.

  • JavaScript, AJAX 활용

|수치를 그래프로 가시화

수치를 부트스트랩의 그래프 기능을 이용해 그래프로 가시화하여, 사용자가 데이터의 흐름을 쉽게 파악할 수 있게 설계했습니다.

  • Bootstrap - Chart.js 활용
  • 평균값 계산 로직

|게시판 기능

자유게시판으로, 사용자는 타인과 질문과 답변을 주고받으며 상호작용할 수 있습니다.

  • 게시글 CRUD: MyBatis를 활용한 MySQL DB 연동
  • 페이징 처리
  • 검색 기능

|검색 기능

사용자가 원하는 조건에 맞는 정보(뉴스, 노동법 FAQ)를 신속하게 찾을 수 있습니다. 사용자는 기간, 키워드, 대/중분류 등 다양한 조건을 기준으로 필터링한 정보를 직관적인 UI를 통해 얻을 수 있습니다.

  • 검색 조건 필터링 및 결과 정렬 기능: 모듈화
  • MyBatis를 활용한 MySQL DB 연동

맡은 역할
|프론트엔드
  • 메인 페이지 전체
  • 나의 근무 시간 페이지
  • 뉴스 검색 페이지
|백엔드
  • QR코드 인증 시스템
  • 근무 시간 측정 로직
  • 뉴스 검색 기능
  • 게시판 기능
개발 과정에서 발생한 문제 및 해결 방안
|QR 인증 완료되지 않아도 근무 시간 측정/정지/퇴근(근무 시간 저장)이 진행되는 문제

QR 인증이 완료되지 않아도 근무 시작/중지/퇴근(근무 시간 저장) 동작이 실행되어, 비정상적으로 근무 시간이 기록되는 오류가 발생했습니다. 이는 popup() 함수 내부에서 QR 인증 여부 확인 로직 없이 근무 상태를 변경하는 함수(startClock(), stopClock(), resetClock())가 실행되었고, 이미 localStorage에 ID/PWD가 저장된 상태라 인증 과정을 거치지 않아도 로직이 진행되어 발생한 문제였습니다. 이는 아래의 과정을 통해 해결할 수 있었습니다.

  1. popup() 함수 실행 시, QR 인증 완료 여부를 확인하는 플래그(isVerified) 추가
  2. QR 인증 성공 시에만 startClock(), stopClock(), resetClock() 및 AJAX 호출 실행
  3. 인증 실패 시에는 알림을 띄우고, 상태 변경 로직 실행을 차단
추가된 로직
popup() 내부에 QR 인증 여부 확인
localStorage.setItem('isVerified', 'false');
QR 인증 플래그
var isVerified = localStorage.getItem('isVerified') === 'true';
if (!isVerified) {
    alert("QR 인증이 완료되지 않았습니다. 인증 후 이용해주세요.");
    return;
}

프로젝트 성과 및 느낀점
|결과

근로자가 QR 코드를 통해 직접 근무 시간을 측정하고, 최신 노동법 및 뉴스 관련 정보를 검색 및 공유하는 기능을 제공하는 웹 플랫폼을 완성했습니다. UI는 직관적으로 구성해 누구나 쉽게 이용 가능하며, 근무 시간 기록 및 데이터 저장 과정에서 QR 인증 시스템을 도입하여 보안성 및 객관성을 확보했습니다. 또한 Spring과 MyBatis 기반으로 백엔드-프론트엔드 연동을 최적화해 안정적인 서비스 운영이 가능하도록 구현했습니다.

|배운점 및 성장한 역량

이번 프로젝트를 통해 Spring과 MyBatis를 활용한 백엔드와 프론트엔드 상호작용을 확실하게 체화할 수 있었습니다. 특히, QR 인증 로직을 구현하며 인증 절차와 상태 플래그를 통한 클라이언트-서버 간 데이터 검증 방식을 학습하여, 근무 시간 기록 기능을 비정상적인 동작 없이 안정적으로 운영할 수 있는 구조 설계 능력이 향상되었습니다. 또한, UI/UX 측면에서 사용자 친화적 동작(경고 메시지, 직관적 색상 변화 등)을 적용해 서비스 품질과 사용성 개선 역량을 강화할 수 있었습니다.

|다음 개선 과제

  • 실시간 데이터 반영 - 지금은 각종 검색 포털에서 수집한 노동 테마의 뉴스 데이터와 공공데이터 포털의 API(각종 통계 자료, 법무부 생활법률지식, 백문백답)를 수동으로 DB에 저장해 정적으로 관리하고 있으나, 추후에는 API 연동을 자동화하여 실시간 병상 정보, 진료 가능 여부 등 최신 상태를 반영할 수 있는 구조로 개선하고자 합니다.
  • 제휴한 회사에 대한 광고 게시 로직 추가로 포털의 수익 창출 - 추후에는 제휴 기업에 대한 광고 게시 시스템을 추가해 수익 구조를 마련하고, API 자동화를 통해 포털의 규모를 확장해보고 싶습니다.
  • 사원증 인증 절차 추가 - 현재는 QR 코드 인증만으로 근무 시간을 측정하고 있으나, 추후에는 사원증 기반 인증 시스템을 구현해 보안성 및 객관성을 높이고, 클라우드 환경에 배포하여 실제 기업 환경에서도 안정적으로 운영할 수 있도록 확장하고 싶습니다.

프로젝트 실행 영상