프로젝트 개요
현장 작업자용 PWA(설치형 모바일 웹앱)와 통합 관리자 웹을 단일 Next.js 15 App Router 코드베이스로 분리·운영하는 시설 점검 SaaS 플랫폼을 실제 구축·납품했습니다. 작업자는 모바일에서 부스·재떨이를 QR로 식별하고 15항목 체크리스트와 현장 사진으로 점검을 기록하며, 관리자는 Kakao Maps 기반 통합 대시보드로 전국 자산을 실시간 모니터링하고 작업자·점검 이력·감사 로그를 한 화면에서 관리합니다. 운영 시스템 구조는 흡연부스에 한정되지 않고, 시설·자산 관리·현장 작업자 SaaS·감사·QA 관제 등 다양한 도메인에 동일한 골격으로 응용할 수 있도록 설계했습니다.
작업 범위
- 기획·UI/UX 디자인: IA 설계서·화면 설계서·기능 정의서 기반 사용자 플로우 정의와 디자인 시스템 토큰(컬러·간격·타이포·radius·shadow) 수립
- 프론트엔드(PWA + 관리자 웹): Next.js 15 App Router의 route group (worker)/(admin)으로 작업자 PWA와 관리자 SPA를 단일 코드베이스에서 분리 구축, Tailwind 4 + shadcn/ui 디자인 시스템 컴포넌트 일관 적용
- 백엔드: Supabase BaaS 기반 RLS 정책·인증·Storage·Auto REST API 구성, Next.js Server Actions와 API Routes로 집계·QR 스캔·웹푸시 로직 구현
- 인프라·DevOps: Vercel 자동 배포 파이프라인(GitHub Actions), Supabase 마이그레이션 관리, Sentry 모니터링, Playwright e2e + vitest 통합 테스트 환경
주요 업무
- 데이터 모델·RLS 권한 시스템 설계: 10여 개 테이블에 다중 역할(ADMIN·REGION_ADMIN·WORKER) 기반 RLS 정책을 적용해 권한 우회 위험을 DB 레벨에서 차단
- 지도 기반 통합 관제 대시보드: Kakao Maps SDK로 전체 부스 위치를 마커로 시각화하고 KPI 카드 4종·주간 점검 추이 차트·최근 점검 테이블을 한 화면에 통합
- 작업자 PWA + 오프라인 큐: Serwist Service Worker와 IndexedDB로 오프라인 큐를 구성해 통신 불안정 현장에서도 점검 결과를 임시 저장 후 복구 시 자동 동기화
- 자산 관리 + QR 추적 + Web Push: 부스·재떨이마다 고유 QR 토큰을 발급해 카메라 스캔으로 즉시 식별하고 VAPID Web Push로 배정 변경·신규 점검 알림 전송
프로젝트 핵심 과제
DB 레벨 권한 제어
모든 테이블에 RLS 정책을 적용해 클라이언트 권한 검사 누락 시에도 DB가 자동 차단하는 다중 방어선을 구축했습니다.
오프라인 큐 안정성
Serwist Service Worker + IndexedDB로 점검 데이터를 큐에 저장하고 네트워크 복구 시 retry·중복 검증 로직으로 동기화 정확성을 확보했습니다.
운영 감사 체계
계정·배정·자산 변경이 발생할 때마다 audit_logs에 자동 기록하여 행위자·시각·메타 정보까지 추적 가능한 컴플라이언스 환경을 마련했습니다.
다양한 도메인 응용 골격
도메인 의존성을 최소화한 자산·작업자·이력·감사 추상 레이어로 시설·매장·물류·이벤트·QA 감사 등으로 확장 가능한 운영 SaaS 골격을 확보했습니다.
핵심 기능 상세
지도 기반 통합 관제 대시보드
Kakao Maps 위에 전체 자산을 마커로 표시하고, KPI 카드·주간 점검 추이 차트·최근 점검 테이블을 한 화면에 통합한 관리자 메인 대시보드를 구현했습니다.
자산 관리 + QR 추적 시스템
부스·재떨이 현장 자산을 등록·수정·재배정하고, 각 자산마다 고유 QR 토큰을 발급해 작업자가 모바일 카메라 스캔으로 즉시 식별하도록 구현했습니다.
PWA 모바일 현장 작업자 앱
Serwist + Web App Manifest로 PWA를 구현해 설치·오프라인 큐·푸시를 지원하고, 통신 두절 현장에서도 점검을 임시 저장 후 복구 시 자동 동기화합니다.
점검 이력 통합 조회 + 사진 갤러리
작업자·자산·기간·상태로 점검 이력을 통합 조회하고, 각 점검의 체크리스트·메모·현장 사진을 사이드패널 라이트박스로 검토하도록 구현했습니다.
프로젝트 진행 단계
요구사항 분석 및 IA·DB 스키마 설계 · 2026.04
기획·디자인·기능 정의서를 기반으로 데이터 모델 10여 개 테이블·RLS 정책·API 명세를 설계하고 Supabase 마이그레이션 SQL로 코드화하여 버전 관리했습니다.
관리자 웹 + 인증·권한 시스템 구축 · 2026.04
Supabase Auth와 RLS 다중 역할(ADMIN·REGION_ADMIN·WORKER) 권한 시스템을 적용하고, 부스·재떨이·작업자 CRUD 화면과 통합 대시보드를 구현했습니다.
작업자 PWA + 오프라인 큐 + Web Push 구현 · 2026.05 / Kakao Maps 관제 + 감사 로그 + 통합 조회 · 2026.05
Serwist Service Worker 기반 PWA 설치, IndexedDB 오프라인 큐, VAPID Web Push 알림, 15항목 체크리스트 입력과 현장 사진 업로드 흐름을 구현했습니다. 전체 부스를 지도에 마커로 시각화하고, audit_logs 자동 기록·사이드패널 점검 이력 조회·사진 라이트박스 갤러리를 구현했습니다.
테스트·자동 배포 파이프라인·운영 인계 · 2026.06
Playwright e2e와 vitest 통합 테스트, GitHub Actions Vercel 자동 배포 파이프라인, Sentry 모니터링을 구성하고 클라이언트 교육·소스코드 인계까지 완료했습니다.
개발 결과
기술적 주안점
- 다양한 도메인 응용 가능한 골격으로 설계 — "현장 작업자 PWA + 관리자 웹 + 자산 + 감사" 구조를 도메인 의존성을 최소화한 RBAC·자산·이력 추상 레이어로 분리해 시설·매장·물류·이벤트·QA 등에 그대로 응용할 수 있게 했습니다
- DB 레벨 권한 제어로 보안 우회 차단 — 모든 테이블에 RLS 정책을 적용하고 클라이언트 코드에서 권한 검사를 누락하더라도 DB가 거부하도록 다중 방어선을 구축했습니다
- 운영 투명성을 위한 감사 로그 자동화 — 계정·배정·자산 변경마다 audit_logs 테이블에 행위자·시각·메타 정보를 자동 기록해 운영 추적이 가능한 컴플라이언스 체계를 갖췄습니다
다양한 도메인 응용
- 시설·자산 관리 SaaS — 매장·창고·이벤트 부스·물류 거점 등 다양한 자산 운영에 동일 골격 적용 가능
- 현장 작업자 모바일 SaaS — 배달·청소·간호·콜센터·점검 등 모바일에서 업무를 수행하는 다수 산업의 PWA 표준 패턴
- 감사·QA·CS 관제 시스템 — 데이터 통합 조회·사진 갤러리·감사 로그 추적이 핵심인 시스템 전반에 응용
- 다중 역할 RBAC가 필요한 B2B SaaS — DB 레벨 RLS 권한 제어가 필요한 모든 엔터프라이즈 SaaS
