만물공작소 | 데브파이브

소개

Why?

가이드

포트폴리오

소식

문의하기

카카오톡 실시간 상담

#WEB

#UI/UX

#Next.js

만물공작소

제작 연도0

사용 기술Next.js, TypeScript

ABOUT만물공작소는 축제가 열리는 지역이나 특정 위치에서 드론을 활용해 현재 날씨, 혼잡도, 주차 상황 등을 실시간으로 확인할 수 있는 서비스를 제공합니다. 또한, 드론을 통해 실시간 라이브 방송도 제공하여 현장 상황을 실시간으로 전달합니다.

고객 요구사항1. 드론을 활용한 실시간 지역 정보 제공 시스템 구축 축제, 행사, 혼잡 지역 등 특정 장소의 날씨, 인원 혼잡도, 주차 가능 여부 등을 실시간으로 파악할 수 있는 기능 요청 데이터를 시각화해 사용자들이 직관적으로 정보를 확인할 수 있는 UI 필요 2. 실시간 영상 송출 기능 탑재 드론 카메라를 통해 현장의 상황을 실시간으로 확인할 수 있도록 라이브 스트리밍 기능 요청 여러 지역을 동시에 모니터링할 수 있는 멀티 스트리밍 환경 제공 고려 3. 관리자 및 사용자 모드 분리 관리자 측은 드론 운용, 데이터 등록, 스트리밍 제어 등 제어 기능 필요 사용자 측은 정보 열람 및 실시간 영상 확인에 초점 맞춘 UI 구성 요청

주요 개선 사항✅ 실시간 지역 정보 수집 및 시각화 시스템 개발 - 드론으로 수집된 실시간 데이터를 기반으로 날씨, 혼잡도, 주차 정보 시각화 - 지도 기반 UI 설계로 위치 중심의 정보 확인 가능 - 데이터 수신 지연 최소화를 위한 경량화 프론트엔드 구성 ✅ 실시간 스트리밍 기능 탑재 - 드론 카메라와 연동된 라이브 영상 송출 시스템 구현 (RTMP/웹 스트리밍 프로토콜 활용) - 모바일과 PC 환경 모두에서 라이브 재생 최적화 - 복수 드론을 위한 다채널 스트리밍 환경 설계 ✅ 관리자/사용자 모드 인터페이스 분리 - 관리자 페이지: 드론 제어, 정보 입력/수정, 스트리밍 제어 기능 제공 - 사용자 페이지: 현재 위치 기반 정보 조회, 실시간 영상 확인 기능 제공 - 사용자 편의를 위한 간단한 로그인/접근 구조 구성

OUTPUT