4.4 전체 레이아웃 개요

화면 구성

editor default

영역	위치	아이콘	역할
상단 내비게이션 바	전체 폭 상단	홈, 조이스틱, 배터리 등	홈 이동, 연결 상태, 배터리·게임패드 인디케이터
좌측 사이드바	좌측	박스, 카메라	뷰 모드(3D/영상) 전환, 상태 카드
메인 뷰포트	중앙		LiDAR 포인트 클라우드 및 로봇 모델 렌더링
우측 패널	우측	레이더, 태그, 격자, 회전, 로봇 등	Display·Controls 토글
하단 퀵-액션	좌·우 하단	지우개, 지도+ 등	노드 추가·맵 생성·맵 지우개·위치 추정 등

⏱ 디자인 의도
작업 효율: 3D 조작 시 이동 동선을 최소화.
시각 집중: 어두운 배경 속에 원색 아이콘을 배치해 즉각적인 기능 식별.

다크 테마 색상

용도	색상(HEX)	의미
배경	`#333333`	눈부심 최소화, 포인트 클라우드 대비 확보
포인트 클라우드 – 장애물	`#f5355f`	이동 경로 상 위험 구간
포인트 클라우드 – 환경	`#82ff4f` (연두)	참고용 Static Object
노드 - 목적지	`#f7a502` (주황)	로봇의 목적지
노드 - 경유지	`6495ed` (사파이어)	로봇의 경유지

위 구성을 토대로 **“어두운 환경에서도 장시간 작업할 수 있는 편안한 UI”**를 목표로 하였습니다.
다음 절에서는 각 요소의 세부 기능과 인터랙션 흐름을 살펴봅니다.