QGroundControl(QGC) 개발자 가이드
- for Windows (5/9)
Part 5. User Interface Design (사용자 인터페이스 디자인)
이 파트에서는 Windows 환경에서 QGroundControl(QGC)의 사용자 인터페이스(UI) 구조를 다룹니다. QGC는 Qt/QML 기반으로 설계되어 있으며, FactSystem 및 전용 UI 컨트롤을 활용합니다. 초보자도 QGC의 UI 체계를 이해하고 커스터마이징할 수 있도록 단계별로 설명합니다.
1) QGC UI의 주요 View
Fly View : 드론 실시간 상태 모니터링과 제어
Image source: QGroundControl Documentation (CC BY 4.0, https://creativecommons.org/licenses/by/4.0/)Plan View : 지도 기반 비행 경로 계획 (웨이포인트, Survey)
Image source: QGroundControl Documentation (CC BY 4.0, https://creativecommons.org/licenses/by/4.0/)Analyze View : 로그 분석, MAVLink Inspector, 데이터 시각화
Setup View : 기체 설정, 센서 보정, 펌웨어 업데이트
Image source: QGroundControl Documentation (CC BY 4.0, https://creativecommons.org/licenses/by/4.0/)2) QML 기반 UI 구조
QML(Qt Modeling Language)은 선언형 언어로 UI를 직관적으로 작성할 수 있습니다.
QGC UI는 `qml/` 디렉토리에 있으며, 각 View는 독립적인 QML 파일로 관리됩니다.
QML ↔ C++ 연동 방식:
1. QML: 레이아웃, 지도, 버튼 등 정의
2. C++: Vehicle 상태, MAVLink 데이터 등 제공
Vehicle의 고도 정보가 Fact 객체로 QML에 바인딩되어 Fly View 지도에 표시됩니다.
3) UI 디자인 패턴
QGC는 MVC 변형 패턴을 사용합니다.
QGroundControl 전역 객체를 통해 active Vehicle 및 전역 데이터에 접근합니다.
FactSystem을 사용해 파라미터와 상태 데이터를 관리하며,
FactMetaData 기반으로 유효성 검증 및 UI 생성이 가능합니다.
4) 멀티 디바이스 대응 패턴
QGC는 태블릿 우선 설계이지만, 동일한 QML 코드로 데스크탑, 소형 화면도 지원합니다.
QML 레이아웃의 유연성을 활용해 화면 크기에 따라 UI가 자동 조정됩니다.
Windows의 멀티 모니터 환경에서도 반응형 UI로 동작합니다.
5) 폰트 및 컬러 팔레트
QGC는 라이트/다크 모드를 지원합니다.
QGCPalette와 QGCMapPalette를 사용해 색상을 지정해야 하며,
직접 색상을 지정하지 않는 것이 원칙입니다.
ScreenTools를 사용해 해상도와 DPI에 맞는 글꼴 크기를 자동 조정합니다.
6) QGC 전용 UI 컨트롤
QGC는 전용 QML 컨트롤을 제공합니다:
QGCButton: 표준 버튼
QGCLabel: 라벨 텍스트
QGCComboBox: 드롭다운 선택
DropButton: 메뉴형 버튼
QGCView, QGCViewDialog, SetupPage: 주요 화면 및 대화상자 컨트롤
7) Windows 환경에서의 실행 특징
Windows는 고해상도(HiDPI) 모니터를 많이 사용하므로,
QML UI가 자동으로 스케일링됩니다.
GPU 드라이버(OpenGL 3.2 이상)가 필요하며,
최신 드라이버로 업데이트해야 UI가 정상적으로 표시됩니다.
외부 모니터를 사용할 경우 레이아웃이 깨질 수 있으므로,
QGC 설정에서 화면 비율(Scaling)을 조정할 수 있습니다.
8) UI 커스터마이징 방법
Fly View Toolbar에 버튼 추가
사용자 전용 Dialog 삽입
`resources.qrc`를 수정해 로고/아이콘 교체
새로운 QML 페이지를 추가해 센서 데이터 시각화
9) FactSystem 활용
Fact 객체는 UI와 데이터 바인딩을 지원합니다.
예: 파라미터 화면에서 FactSystem이 FactMetaData를 기반으로 입력 필드,
범위 제한, 단위 등을 자동 생성합니다.
개발자가 FactGroup을 확장하면 새로운 센서나 모듈 데이터도 쉽게 UI에 표시 가능합니다.
10) 초보자 팁
QML 파일을 수정하기 전에 반드시 백업을 권장합니다.
Qt Creator를 사용하면 QML 편집과 UI 미리보기가 가능합니다.
UI 변경 후에는 반드시 Vehicle과의 연동이 정상적으로 동작하는지 확인해야 합니다.
Windows에서는 GPU 호환성 문제가 있을 수 있으므로,
문제가 발생하면 소프트웨어 렌더링 모드로 실행해보세요.
11) 다음 단계
UI 구조와 FactSystem, 팔레트, 전용 컨트롤을 이해했으므로, Part 6에서는 QGC 개발자 도구(Mock Link, MAVLink Inspector 등)를 다룹니다.