3D웹·3D 컨피규레이터 블로그 | Hammergrid Lab
3D웹, 3dweb, WebGPU, Three.js, 3D 컨피규레이터, 3D 제품 뷰어, 앱·웹 개발, AI 통합 — 실제 프로젝트에서 얻은 데이터와 결정 근거를 기록합니다.
· case-study · 2 min
1) 포트폴리오 소개 :
- 일팜 수확 현장에서 FFB(Fresh Fruit Bunch) 수확량, 숙성 상태, Sack 무게, GPS 위치, 운송 상태를 모바일에서 기록하고, YOLOv8 기반 비디오/이미지 감지와 역할별 업무 흐름을 결합한 Flutter Android 앱
2) 작업 범위 :
- 앱: Flutter / Dart
- Android 네이티브: Kotlin, MethodChannel, EventChannel
- AI 추론: YOLOv8, TFLite, `tflite_flutter`, `flutter_vision`
- 객체 추적: IoU 기반 BunchTracker, Motion Vector, 프레임 스킵 보정
- 지도/GPS: Google Maps Flutter, Geolocator/Location, GPS fallback
- 로컬 저장: JSON 파일, SharedPreferences
- 서버 연동: AWS API Gateway 계열 REST API, S3 업로드 URL 방식
- 알림/백그라운드: Firebase Messaging, local notifications, foreground task
- 다국어: Flutter intl, 영어/프랑스어/스페인어/포르투갈어/말레이어/인도네시아어/태국어 중심
3) 주요 기능 :
- FFB 수확 수량
- 수확/검수/운송/공장 도착 상태
- GPS 위치
- 수확 사진과 Sack 무게
- YOLOv8 기반 FFB 감지 결과
- 작업자 역할별 데이터 흐름
· case-study · 2 min
일용직 근로자와 건설사업장을 연결하는 모바일 매칭 플랫폼을 Flutter, Hono, Cloudflare Workers, Supabase, R2, Next.js 관리자 콘솔로 설계한 풀스택 개발 사례.
· case-study · 2 min
전국 단위 GIS 원천 데이터, PNU 중심 데이터 모델, PostGIS 파이프라인, 지도 인터랙션, 캐시와 멤버십 권한을 하나의 부동산 데이터 제품으로 묶은 개발 사례.
· case-study · 2 min
Flutter 앱 안에 Live2D WebView를 넣고, Firebase, FCM, NFC, 백그라운드 타이머, 미디어 콘텐츠, 앱 심사 대응까지 제품 수준으로 정리한 하이브리드 모바일 앱 개발 사례.
· case-study · 1 min
QR 마커 위에 실제 제품 크기 그대로 3D 모델을 증강하고, 버튼 입력으로 모션을 재생하는 모바일 AR 앱 개발 사례.
· case-study · 2 min
작가가 글을 쓰고, 구독자가 읽고, 관리자가 통계를 확인하는 구조를 한 코드베이스로 설계한 웹소설 플랫폼 풀스택 개발 과정.
· case-study · 1 min
스크롤·마우스로 3D 아바타를 움직이고, 모션 블렌딩과 환경 조명 전환까지 설계한 AI 모션 생성 서비스용 3D 인터랙션 웹 제작 과정.
· case-study · 1 min
매장 터치스크린에서 동작하는 언리얼5 3D 컨피규레이터 개발 사례. 색상·재질·조명을 실시간으로 바꾸며 제품을 살펴보는 키오스크형 영업 도구의 제작 과정.
· case-study · 2 min
종이 설명서 기반 블록 조립을 브라우저 안으로 옮긴 풀스택 개발 사례. 그래픽보다 단계 데이터 설계가 더 중요했던 프로젝트.
· case-study · 2 min
신제품이 들어간 박스를 쌓는 3D웹(3dweb) 게임으로 체류와 쇼핑몰 전환을 함께 설계한 브랜드 캠페인 제작 과정.