← 포트폴리오 목록
HACCP 실시간 위생관제 콘솔
식품 제조공장의 HACCP 모니터링 웹 서비스를 다크테마와 보라색 포인트 컬러, 신호등 상태표시 기반으로 리뉴얼하고, React Native 모바일 앱으로 실시간 온도 알림과 공장 평면도 온도맵을 제공하는 프로젝트입니다.
실시간 신호등 상태 엔진 구현Supabase Realtime 구독 기반 온도 이탈을 신호등 3단계로 즉시 반영하는 상태 머신을 설계합니다
다크 테마 접근성 디자인 시스템 구축보라색 단일 포인트 컬러와 큰글씨 모드를 지원하는 디자인 토큰 체계를 구현합니다
크로스플랫폼 모바일 코어 설계React Native 기반 iOS/Android 공용 코드베이스와 SVG 좌표 매핑 온도맵을 구현합니다
Overview
프로젝트 개요
식품 제조공장의 HACCP 모니터링 웹 서비스를 다크테마와 보라색 포인트 컬러, 신호등 상태표시 기반으로 리뉴얼하고, React Native 모바일 앱으로 실시간 온도 알림과 공장 평면도 온도맵을 제공하는 프로젝트입니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
온도 센서 데이터 실시간 수신과 신호등 상태 갱신 간 지연을 최소화하는 Supabase Realtime 구독 설계가 필요합니다
고령자·외국인 근로자를 고려한 큰글씨·다국어 UI가 정보 밀도를 해치지 않는 균형 잡힌 레이아웃 설계가 필요합니다
타 개발자가 중단한 기존 코드베이스의 데이터 스키마와 상태 관리 패턴을 파악한 뒤 리뉴얼을 진행해야 하는 리스크가 있습니다
React Native 앱의 공장 평면도 온도맵을 다양한 기기 해상도에서 검증해야 하는 과제가 있습니다
핵심 기능 1
실시간 관제 대시보드
다크테마와 보라색 포인트 컬러를 적용한 관제 대시보드에서 전 설비의 온도 상태를 신호등(정상/주의/경보) 3단계로 한눈에 확인합니다
핵심 기능 2
설비 상세 및 온도 트렌드
개별 설비를 선택하면 온도·습도 트렌드 차트와 경보 이력을 상세하게 확인할 수 있는 화면을 리뉴얼합니다. Recharts 기반 시계열 차트와 경보 이력 타임라인을 결합하여 설비별 히스토리를 추적 가능하게 구현합니다
핵심 기능 3
모바일 실시간 알림 및 온도맵
React Native 모바일 앱에서 온도 이탈 시 실시간 푸시 알림을 수신하고, 공장 평면도 위에 설비별 온도를 색상으로 표시하는 온도맵을 제공합니다
핵심 기능 4
설정 및 접근성·리포트
알림 임계값 설정, 사용자 권한 관리와 함께 고령자·외국인 근로자를 위한 큰글씨 모드, 식약처 리포트 PDF 조회·공유 기능을 리뉴얼합니다
구현 과정
프로젝트 진행 단계
STEP 1
기존 코드 분석 및 디자인 시스템 재설계
기존 Next.js/Supabase 코드베이스 구조 분석, 다크테마·보라 포인트 컬러 기반 디자인 토큰 설계
STEP 2
웹 대시보드·설비상세 화면 리뉴얼
Next.js 기반 관제 대시보드·설비 상세 화면 리뉴얼, Supabase Realtime 구독으로 신호등 상태 갱신 구현
STEP 3
모바일 앱 개발 및 푸시 알림 구조 설계
React Native 크로스플랫폼 앱 화면 구현, FCM/APNs 기반 실시간 푸시 알림 연동 구조 설계
STEP 4
접근성 검증 및 통합 테스트
큰글씨·아이콘 중심 접근성 검증, 웹-모바일 Supabase 연동 통합 테스트 및 크로스 디바이스 검증
프로젝트 성과
실시간 신호등 상태 엔진 구현Supabase Realtime 구독 기반 온도 이탈을 신호등 3단계로 즉시 반영하는 상태 머신을 설계합니다
다크 테마 접근성 디자인 시스템 구축보라색 단일 포인트 컬러와 큰글씨 모드를 지원하는 디자인 토큰 체계를 구현합니다
크로스플랫폼 모바일 코어 설계React Native 기반 iOS/Android 공용 코드베이스와 SVG 좌표 매핑 온도맵을 구현합니다
레거시 코드 인수 리팩터링 전략 수립중단된 Next.js/Supabase 코드베이스를 분석해 컴포넌트 단위 점진적 리팩터링 전략을 설계합니다
Review
기술적 주안점
- Supabase Realtime 기반 이벤트 드리븐 상태 갱신으로 설비 이상을 지연 없이 화면에 반영하는 관제 대시보드를 설계합니다
- 시계열 차트와 경보 타임라인을 결합한 설비 상세 뷰로 개별 설비의 이상 패턴을 추적할 수 있는 구조를 구현합니다
- FCM/APNs 기반 실시간 푸시 알림 연동 구조와 SVG 온도맵 시각화를 결합해 현장 이동 중에도 설비 이상을 즉시 인지할 수 있는 모바일 경험을 설계합니다
