1. 앱 시작하기
WorkTimeChecker 앱은 별도의 회원가입 없이, 관리자가 부여한 '근무자 코드'만으로 즉시 사용할 수 있습니다.
앱 최초 실행 시 카메라 접근 권한을 '허용'해 주세요. 본인 인증을 위한 사진 촬영 시에만 사용됩니다.
2. 출퇴근 체크 (Check-In / Out)
앱 메인 화면에서 간편하게 출퇴근을 기록할 수 있습니다.
(좌우로 스와이프하여 사용 흐름을 확인하세요)
출근하기
- 메인 화면 중앙에 본인의 근무자 코드(3자리 숫자)를 입력합니다.
- [출근] 버튼을 누르고, 표시되는 본인의 이름이 맞는지 확인합니다.
- 카메라가 실행되면 얼굴이 나오게 사진을 촬영하고 [저장]을 누릅니다.
퇴근하기
- 출근 때와 동일하게 코드를 입력하고 [퇴근] 버튼을 누릅니다.
- 시스템이 당일의 출근 기록을 확인한 후, 퇴근 처리를 진행합니다.
출근 기록이 없는 상태에서는 퇴근 처리가 불가능합니다. 실수로 출근 체크를 놓쳤다면 관리자에게 수동 등록을 요청하세요.
1. 관리자 모드 진입
일반 사용자의 접근을 막기 위해 숨겨진 메뉴를 통해 진입합니다.
- 앱 메인 화면 좌측 상단의 설정 아이콘()을 터치합니다.
- PIN 번호 입력창이 나타나면 관리자 암호를 입력합니다.
* 보안을 위해 정식 버전에서는 변경 기능이 제공될 예정입니다.
2. 현장 관리 기능
근무자 등록
신규 근무자가 입사했을 때, [근무자 관리] 메뉴에서 이름과 코드를 등록합니다. 코드는 중복될 수 없습니다.
기록 조회
앱 내에서도 최근 출퇴근 기록을 조회할 수 있습니다. 단, 상세한 급여 계산이나 엑셀 다운로드는 웹 관리자 페이지를 이용해야 합니다.
웹 관리자 페이지는 Chrome, Edge 등 PC 브라우저에서 가장 잘 작동합니다. 많은 데이터를 다루는 급여 정산 업무는 반드시 PC에서 진행해 주세요.
1. 대시보드 (Dashboard)
로그인 후 첫 화면에서 매장의 현재 상황을 한눈에 파악할 수 있습니다.
- 📊 방문자 통계: 오늘 및 누적 시스템 접속자 수
- ✅ 실시간 근태: 오늘 출근한 인원과 퇴근한 인원 현황 (예: 3 / 1)
2. 근태 관리 및 캘린더 NEW
출퇴근 기록 조회
모든 근무자의 출퇴근 로그를 리스트 형태로 확인합니다. [사진] 컬럼의 썸네일을 클릭하면 원본 인증샷을 확인할 수 있습니다.
근태 캘린더 (Calendar)
월별 근무 현황을 달력 형태로 시각화하여 제공합니다.
- 🌤 날씨 연동: 과거 날짜의 실제 날씨와 미래의 예보를 아이콘으로 표시합니다.
- 📅 공휴일 표시: 대한민국의 공휴일 정보가 자동으로 표시됩니다.
- 💾 이미지 저장: 캘린더 화면을 이미지 파일(.png)로 저장하여 보고용으로 활용할 수 있습니다.
3. 급여 정산 (Wage Settlement) UPGRADE
가장 중요한 기능으로, 출퇴근 기록을 기반으로 시급과 수당을 계산하고 명세서를 발급합니다.
🧮 정산 프로세스
- 상단 메뉴에서 [인사/급여] > [급여 정산]을 선택합니다.
- 대상 월과 기본 시급을 입력하고 [계산하기]를 클릭합니다.
- 시스템이 자동으로 근무 시간을 집계하고 주휴수당을 산출합니다.
💸 공제 계산 로직 (Deduction)
근무자별 설정 또는 전역 설정에 따라 아래 두 가지 방식 중 하나로 세금을 공제합니다.
| 구분 | 상세 요율 (2025년 기준 적용) |
|---|---|
| 4대 보험 (총 9.395% + a) |
• 국민연금: 4.5% • 건강보험: 3.545% • 장기요양: 건보료의 12.95% (약 0.45%) • 고용보험: 0.9% |
| 사업소득세 (프리랜서 등) |
• 원천징수세율: 3.3% (단일 적용) |
📄 명세서 발급 기능 HOT
계산된 결과를 근무자에게 전달하기 위한 두 가지 형태의 이미지 저장 기능을 제공합니다.
- 명세서 이미지 저장: A4 용지 규격의 깔끔한 요약 명세서를 생성합니다. (지급/공제 2단 레이아웃)
- 세부 내역서 저장: 일자별 상세 근무 기록과 주휴수당 산출 근거가 모두 포함된 상세 리포트입니다.
4. 기타 편의 기능
🗓 일정 공유 (Schedule)
매장 전체의 일정(회식, 물류 입고, 머신 점검 등)을 등록하고 공유합니다. 범례(Legend)를 클릭하여 원하는 카테고리만 필터링할 수 있습니다.
⚙️ 환경 설정
- 바탕화면 바로가기: 웹 관리자 페이지 접속 아이콘을 PC 바탕화면에 생성합니다. (.url 파일 다운로드)
- 이메일 알림 설정: 출퇴근 알림을 받을 관리자 이메일 주소를 등록/수정합니다. (콤마로 구분하여 다수 등록 가능)
주요 화면 미리보기 (Gallery)
좌우로 넘겨보며 관리자 페이지의 실제 모습을 확인하세요. 이미지를 클릭하면 크게 볼 수 있습니다.
본 시스템은 안정성(Stability)과 비용 효율성(Cost-efficiency)을 최우선으로 설계되었습니다.
모바일 앱은 오프라인 환경을 완벽하게 지원하며, 웹 관리자는 별도의 서버 구축 없이 운영 가능한 Serverless 구조를 채택했습니다.
Mobile Application (Android/iOS)
현장 근무자가 사용하는 모바일 앱은 Flutter로 개발되어 단일 코드베이스로 양대 마켓을 지원합니다.
Core Framework Flutter 3.x
Google의 UI 툴킷을 사용하여 네이티브 수준의 퍼포먼스를 제공하며, Material Design 3 가이드라인을 준수합니다.
Local Database SQLite (sqflite)
[Offline First] 네트워크가 불안정한 환경에서도 출퇴근 기록이 유실되지 않도록 기기 내부에 데이터를 우선 저장합니다.
State Management Provider
복잡한 상태 관리 패턴을 지양하고, 직관적이고 가벼운 Provider 패턴을 사용하여 앱의 반응 속도를 최적화했습니다.
Image Engine Compressor
[Data Optimization] flutter_image_compress 라이브러리를 통해 촬영된 사진을 200px/20KB 이하로 자동 압축하여 데이터 요금을 절감합니다.
Notification SMTP Mailer
별도의 푸시 서버 구축 비용 없이, Naver SMTP 서버와 직접 통신하여 실시간 출퇴근 알림 메일을 발송합니다.
Web Admin Dashboard
관리자가 사용하는 웹 페이지는 무거운 프레임워크를 걷어내고 표준 웹 기술로 경량화했습니다.
Frontend Core Vanilla JS
React나 Vue 같은 무거운 라이브러리 없이 순수 JavaScript(ES6+)와 HTML5로 구현하여 로딩 속도가 매우 빠릅니다.
Backend & Auth Firebase
[Realtime Sync] Firestore(NoSQL)를 통해 앱에서 생성된 기록이 1초 이내에 관리자 화면에 동기화됩니다.
Schedule UI FullCalendar v6
강력한 일정 관리 라이브러리를 커스터마이징하여, 드래그 앤 드롭 일정 수정과 카테고리 필터링 기능을 구현했습니다.
Client Reporting html2canvas / SheetJS
서버 부하 없이 사용자 브라우저에서 직접 고해상도 명세서 이미지(.png)와 엑셀 리포트(.xlsx)를 생성합니다.
Open API Weather / Holiday
OpenWeatherMap 및 Open-Meteo API(날씨), Nager.Date API(공휴일)를 매시업하여 캘린더에 부가 정보를 제공합니다.