logologo
#WEB
#UI/UX
#Next.js
만물공작소
만물공작소
portfolio-top-image/file/2025_05_12/1747036535592_만물공작소-1.webp
제작 연도0
사용 기술Next.js, TypeScript
ABOUT

본 프로젝트는 만물공작소에서 축제가 열리는 지역이나 특정 위치에서 드론을 활용해 현재 날씨, 혼잡도, 주차 상황 등을 실시간으로 확인할 수 있는 서비스 개발을 의뢰받아 제작한 작업입니다. 드론에 탑재된 다양한 센서로부터 수집되는 날씨 정보, 인원 혼잡도, 주차 가능 공간 등의 핵심 데이터를 실시간으로 처리하여 사용자들이 직관적으로 이해할 수 있는 시각적 형태로 변환하는 데이터 시각화 엔진을 개발했으며, 지도 기반 사용자 인터페이스를 설계하여 사용자들이 특정 위치를 중심으로 해당 지역의 상세 정보를 즉시 확인할 수 있도록 했습니다. 또한 드론 카메라와 완전히 연동된 고품질 라이브 영상 송출 시스템을 구현하여 RTMP 프로토콜과 웹 스트리밍 프로토콜을 활용한 안정적인 실시간 방송 서비스를 제공하며, 시스템을 운영하는 관리자와 정보를 이용하는 일반 사용자의 서로 다른 요구사항을 완벽하게 반영한 분리형 인터페이스를 구축하여 현장 상황을 실시간으로 전달하는 종합적인 드론 기반 정보 서비스 플랫폼을 성공적으로 완성했습니다.

고객 요구사항

1️⃣드론을 활용한 실시간 지역 정보 제공 시스템 구축 요청 축제, 행사, 혼잡 지역 등 특정 장소에서 발생하는 다양한 현장 정보를 실시간으로 수집하고 제공할 수 있는 드론 기반 정보 시스템 개발이 요청되었습니다. 드론에 탑재된 각종 센서와 카메라를 통해 해당 지역의 날씨 상태, 인원 혼잡도, 주차장 가용 공간 등의 핵심 정보를 실시간으로 파악하고 분석할 수 있는 종합적인 데이터 수집 기능이 필요했습니다. 특히 대규모 축제나 공공 행사가 열리는 장소에서 방문객들이 현장 상황을 미리 파악하여 효율적인 방문 계획을 세울 수 있도록 지원하는 것이 주요 목적이었습니다. 수집된 데이터는 단순한 수치 나열이 아닌 사용자들이 한눈에 이해할 수 있는 직관적인 형태로 시각화하여 제공해야 했으며, 복잡한 정보를 간단하고 명확한 그래픽과 차트로 변환하여 누구나 쉽게 현장 상황을 파악할 수 있는 사용자 인터페이스 구현이 요구되었습니다. 실시간 데이터 업데이트를 통해 시시각각 변화하는 현장 상황을 정확하게 반영하여 사용자들에게 최신 정보를 지속적으로 제공하는 것도 중요한 요구사항이었습니다. 2️⃣실시간 영상 송출 기능 탑재 요청 드론에 장착된 고화질 카메라를 통해 현장의 실제 상황을 실시간으로 확인할 수 있는 라이브 스트리밍 기능 구현이 요청되었습니다. 단순한 데이터 제공을 넘어서 실제 현장의 모습을 생생하게 전달하여 사용자들이 보다 정확한 판단을 내릴 수 있도록 지원하는 것이 핵심 목표였습니다. 특히 여러 지역에서 동시에 진행되는 행사나 다수의 관심 지점을 효율적으로 모니터링할 수 있도록 멀티 스트리밍 환경 제공이 고려되었습니다. 각 드론별로 독립적인 영상 스트림을 생성하되 하나의 통합 플랫폼에서 모든 영상을 동시에 관리하고 시청할 수 있는 시스템 구축이 필요했습니다. 네트워크 상황이나 기술적 제약으로 인한 영상 끊김이나 지연을 최소화하여 안정적인 실시간 영상 서비스를 제공하는 것도 중요한 요구사항이었습니다. 사용자들이 관심 있는 특정 지역의 영상을 선택적으로 시청하거나 여러 영상을 동시에 비교할 수 있는 유연한 시청 환경 구성도 함께 요청되었습니다. 3️⃣관리자 및 사용자 모드 분리 구현 요청 시스템을 운영하는 관리자와 정보를 이용하는 일반 사용자의 서로 다른 요구사항을 반영하여 각각에 최적화된 별도의 인터페이스 구성이 요청되었습니다. 관리자 모드에서는 드론의 운용 계획 수립부터 실제 비행 제어, 수집된 데이터의 등록 및 관리, 실시간 스트리밍의 시작과 종료 등 전체 시스템을 총괄할 수 있는 포괄적인 제어 기능이 필요했습니다. 드론별 배터리 상태, 비행 경로, 데이터 수집 상태 등의 운영 현황을 실시간으로 모니터링하고 필요시 즉시 조치할 수 있는 관리 도구 제공이 요구되었습니다. 반면 일반 사용자 모드에서는 복잡한 제어 기능보다는 필요한 정보를 빠르고 쉽게 찾아볼 수 있는 직관적인 정보 열람 기능과 실시간 영상 확인에 초점을 맞춘 사용자 인터페이스 구성이 요청되었습니다. 사용자들이 별도의 학습 과정 없이도 자연스럽게 원하는 정보에 접근할 수 있도록 하는 심플하고 명확한 UI 설계가 핵심 요구사항이었습니다.

주요 개발 사항

💡실시간 지역 정보 수집 및 시각화 시스템 개발 완료 드론을 통해 수집되는 실시간 데이터를 기반으로 한 종합적인 지역 정보 시각화 시스템을 성공적으로 구축했습니다. 드론에 탑재된 다양한 센서로부터 수집되는 날씨 정보, 인원 혼잡도, 주차 가능 공간 등의 핵심 데이터를 실시간으로 처리하여 사용자들이 직관적으로 이해할 수 있는 시각적 형태로 변환하는 데이터 시각화 엔진을 개발했습니다. 특히 지도 기반 사용자 인터페이스를 설계하여 사용자들이 특정 위치를 중심으로 해당 지역의 상세 정보를 즉시 확인할 수 있도록 했으며, 지도상의 각 지점을 클릭하거나 터치하면 해당 위치의 실시간 상황이 팝업 형태로 표시되는 직관적인 정보 제공 방식을 구현했습니다. 데이터 수신 과정에서 발생할 수 있는 지연을 최소화하기 위해 불필요한 기능을 제거하고 핵심 기능에만 집중한 경량화 프론트엔드를 구성했으며, 이를 통해 실시간 데이터가 수집되는 즉시 사용자 화면에 반영되는 빠른 응답성을 확보했습니다. 다양한 데이터 유형별로 최적화된 차트와 그래프를 제공하여 복잡한 수치 정보도 한눈에 파악할 수 있도록 했습니다. 💡실시간 스트리밍 기능 탑재 완료 드론 카메라와 완전히 연동된 고품질 라이브 영상 송출 시스템을 성공적으로 구현했습니다. RTMP 프로토콜과 웹 스트리밍 프로토콜을 모두 활용하여 다양한 네트워크 환경과 디바이스에서 안정적인 실시간 영상 서비스를 제공할 수 있도록 했으며, 네트워크 상태에 따라 자동으로 최적의 스트리밍 프로토콜을 선택하는 적응형 스트리밍 기술을 적용했습니다. 모바일 환경과 PC 환경 각각의 특성을 고려하여 화면 크기, 해상도, 데이터 사용량 등을 최적화한 맞춤형 라이브 재생 환경을 구축했으며, 사용자의 디바이스와 네트워크 상황에 관계없이 끊김 없는 실시간 영상 시청이 가능하도록 했습니다. 복수의 드론이 동시에 운영되는 상황을 대비하여 각 드론별로 독립적인 스트리밍 채널을 할당하고 관리하는 다채널 스트리밍 환경을 설계했으며, 사용자들이 원하는 드론의 영상을 선택적으로 시청하거나 여러 드론의 영상을 동시에 모니터링할 수 있는 유연한 시청 환경을 제공했습니다. 💡관리자 및 사용자 모드 인터페이스 분리 구현 완료 시스템을 운영하는 관리자와 정보를 이용하는 일반 사용자의 서로 다른 요구사항을 완벽하게 반영한 분리형 인터페이스를 구축했습니다. 관리자 페이지에서는 드론의 비행 경로 설정, 실시간 제어, 데이터 수집 상태 모니터링 등의 포괄적인 드론 제어 기능과 수집된 정보의 입력, 수정, 삭제가 가능한 데이터 관리 기능, 그리고 각 드론별 스트리밍 시작과 종료를 제어할 수 있는 스트리밍 제어 기능을 통합적으로 제공했습니다. 관리자들이 전체 시스템의 운영 상황을 한눈에 파악하고 필요시 즉시 대응할 수 있도록 실시간 대시보드 형태의 관리 인터페이스를 구성했습니다. 반면 사용자 페이지에서는 복잡한 관리 기능은 제외하고 현재 위치를 기반으로 한 맞춤형 정보 조회 기능과 관심 지역의 실시간 영상 확인 기능에 집중한 심플하고 직관적인 인터페이스를 제공했습니다. 사용자들의 편의성을 최대한 고려하여 복잡한 회원가입 절차나 인증 과정 없이도 간단한 로그인만으로 모든 서비스에 접근할 수 있는 사용자 친화적인 접근 구조를 구성했습니다.

OUTPUT
portfolio-image/file/2024_11_27/1732690240345_1728972220291_image 13.webp
wave-imagewave-image
Contact US
프로젝트 시작을 고민중 이신가요?
데브파이브와 함께 당신의 프로젝트를 완벽하게 시작해보세요.
/images/main/contact_us/guide-icon.webp
가이드 라인처음 프로젝트를 준비 중이신가요? 데브파이브의 가이드를 참고해 개발 프로세스부터 기술 스택까지 한눈에 파악해보세요.
/images/main/contact_us/inquiry-icon.webp
견적 및 문의빠르고 쉬운 견적으로 데브파이브와 함께 프로젝트를 시작해보세요.