프로젝트 주제 ?
본격적으로 개발이 시작되었습니다. 멘토링과 주제 회의를 거듭한 끝에
지하철 부정 승차 탐지를 위한 시스템 개발을 목표로 파이널 프로젝트를 시작했습니다.
유럽 및 북미 그리고 한국에서도 공통적으로 발생하는 문제이기도 했고 CCTV와 임베디드적으로 흥미로운 솔루션이 되리라 기대하고 있습니다.
초기 회의에서 왜?라는 의문을 가지고 해결법에 대한 접근을 이어가다 보니 어느 정도 구현 기능 명세를 완성할 수 있었습니다.
역할 : 디바이스 드라이버 및 시스템 아키텍처
역할 분담을 진행하며 저는 디바이스 드라이버 및 하드웨어 구현을 담당하게 되었습니다.
16주차에는 전체적인 하드웨어 & 소프트웨어 동작 흐름을 설계하고 필요한 부품들을 주문했습니다.
라즈베리 파이 4와 RFID, 스피커 모듈 구성도.
프로젝트 팀 별로 10만원의 부품 구매 비용이 지원되는데 구매에 여러 조건이 별도로 있어 대안을 찾고 가능성을 비교하다 보니 생각보다 주문에 시간이 걸렸습니다 .
( VEDA 4기 부터는 20만원으로 상향 되었다는 소문이 ... 제발 우리도 추가적으로 지원해다오 ... 😭😭)
RFID 모듈을 사용하여 카드의 정보를 파악하고 CCTV에서의 승객의 연령 추정을 통해 부정 승차자를 감지하는 초기 컨셉을 기반으로 개발을 시작했습니다.
하지만 .. 부품 도착 전 디바이스 드라이버 개발자는 무엇을 할 수 있을까..?
를 고민하며 QT UI를 앞서 완성하기로 결정했습니다.
클라이언트 초기 요구 사항을 기반으로 상세 화면들을 만들었습니다.
그렇다면 오늘은 AI를 활용한 Qt 디자인에 대한 내용을 다뤄보겠습니다.
디자이너는 아니지만 가능하다!
AI를 이용한 qt 디자인.
이는 초기 회의에서 도출된 클라이언트 아키텍쳐입니다.( 해당 이미지는 서형철 팀원에 의해 작성되었습니다. professional expert of 그림판. )
그러면 해당 이미지를 바탕으로 client 디자인을 뽑아내보도록 하겠습니다 .
Examples
- 화면 A : 메인 모니터링 대시보드 (Main Monitoring)
실시간 CCTV 영상과 통계 요약을 한눈에 볼 수 있는 메인 화면
- 실시간 스트리밍 뷰
- 영상 조작 : 슬라이더를 이용한 실시간 밝기 조절, 마우스 휠을 이용한 디지털 줌(확대/축소) 기능.
- 오버레이 : 부정 승차 의심자 감지 시 영상 위에 빨간색 바운딩 박스(Bounding Box)와 "Warning" 표시.
- 퀵 통계 배너: 금일 총 태그 수, 부정 승차 적발 건수, 적발률 등을 상단에 배치.
- 화면 B : 부정 승차 로그 및 상세 팝업 (Log & Detail View)
기록된 데이터를 관리하고 검토
- 로그 리스트 (QListView/QTableView)
- `타임스탬프 | 카드 번호 | 카드 구분(노인/장애인 등) | 의심 사유` 형태의 목록.
- 미확인 로그는 굵은 글씨나 배경색으로 강조.
- 상세 정보 팝업 (QDialog): 로그 클릭 시 발생.
- 좌측:적발 당시 캡처된 사진 및 5초 내외의 영상 클립 무한 루프 재생.
-우측: 카드 정보(등록된 나이/성별) vs AI 판독 정보(추정 나이/성별) 비교 표기.
화면 C : 통계 및 분석 (Statistics & Analysis)
데이터를 시각화
- 차트 위젯 (Qt Charts)
- 시간대별 적발 건수: 어느 시간대에 부정 승차가 많은지 라인 차트로 표시.
- 역사별/게이트별 순위: 어느 구역에서 자주 발생하는지 바 차트로 표시.이렇게 간단한 프롬프트와 디자인 컨셉 , 색을 지정해서 디자인을 뽑아내도록 해보겠습니다.
1.AI Design (초안 생성)
Uizard 나 Sitich를 활용하여 1차적으로 디자인을 뽑아냅니다.
- Uizard
- 초기 스케치나 텍스트를 통해 이미지를 생성할 수 있습니다 .
- 장점 : 각 디자인 요소별로 접근 및 수정할 수 있습니다.
- 단점 : Pro plan을 활용해야 svg export 및 figma로 내보내기 등의 기능이 가능합니다.
- Sitich
- 동일하게 스케치나 텍스트 기반의 디자인 생성 가능합니다.
- 단점 : 개별적인 요소에 대한 접근이 다소 어렵습니다.
- 장점 : Google studio를 통해 데모 버전 생성이 빠르고 code 형식의 내보내기가 가능합니다
실제로 뽑아낸 디자인을 확인해보겠습니다.
만족할 만한 디자인을 금방 금방 뽑낼 수 있고 너무 예상외의 퀄리티에 qt로 전환 작업을 하면서 이미 높아져버린 팀원들의 눈높이를 맞추기 위해 꽤나 고생했습니다.. 이것은 예상치 못한 단점 ...쿄쿄..ㅎㅎ
이후에 생성된 이미지를 실제로 웹 기반의 프로그램으로 동작을 확인해볼 수 있습니다.
또한 코드상으로 어떻게 정의되어있는지를 확인해볼 수 있는데요 이 html 기반의 react 코드를 활용해서 qt 클라이언트를 만들어보겠습니다.
1. .ui (Qt Widgets) vs .qml (Qt Quick) 차이점
| 구분 | .ui (Qt Widgets) | .qml (Qt Quick) |
|---|---|---|
| 기반 언어 | C++ / XML | QML (선언적 언어) + JavaScript |
| 렌더링 방식 | CPU 중심 (Raster Paint Engine) | GPU 중심 (Scene Graph) |
| 주요 타겟 | 정적인 데스크톱 애플리케이션 | 동적/애니메이션 중심, 임베디드, 모바일 |
| 디자인 유연성 | 기본 OS 스타일을 따름 (커스텀이 어려움) | 매우 자유로움 (웹처럼 화려한 UI 가능) |
| 데이터 바인딩 | Signal & Slot (수동 연결) | 자동 속성 바인딩 (Property Binding) |
2. 왜 qml을 선택했는가 ?
① 실시간 데이터 시각화의 최적화 (GPU 가속)
QML은 모든 UI 요소를 그래픽 카드(GPU)를 통해 직접 렌더링하므로, 실시간 영상 스트리밍과 3D 맵 오버레이를 동시에 처리해도 시스템 성능에 영향을 거의 주지 않는다.
-> 데스크탑 기반의 클라이언트
② 현대적이고 직관적인 UI 구현 (Web-friendly)
C++의 강력한 연산 능력과 JavaScript의 유연한 UI 처리를 결합할 수 있다.
.ui 방식으로는 구현하기 매우 까다로운 부드러운 화면 전환, 투명도 조절, 입체적인 그래프 등을 단 몇 줄의 코드로 구현할 수 있다.
그래서 qml 기반의 클라이언트 UI 구현을 진행했습니다..
초기에 Qt를 교육 과정에서 배울 때는 Qt creator 내에서 ui 파일로 디자인을 바로 확인할 수 있었습니다. 하지만 qml로 클라이언트 개발을 진행하면서는 미리 확인을 하지 못하고 빌드 후 실행 파일 동작을 통해서 화면을 확인할 수 있었습니다. 단순히 디자인 변경을 확인하기 위해 빌드와 화면 전환을 위한 시퀀스를 진행하는 것은 너무 비효율적이라고 느껴졌고 방안을 찾았습니다 .
qmlscene.exe 을 통한 디자인 확인
탐색 결과 Qt에 내장된 qmlscence.exe를 통해서 디자인을 바로 바로 확인해볼 수 있었습니다.
C:\Qt\6.10.0\mingw_64\bin\qmlscene.exe ..\qt_client_ui\src\Main.qml이렇게 디자인 하나하나씩을 확인해볼 수 있었습니다.
초기 디자인의 퀄리티에는 아직 못 미치지만 추후 기능 구현을 완료한 이후 디자인 디테일을 수정하도록 계획을 세우고 있습니다.
16주차 VEDA기록은 여기서 마무리하며 .
17주차에는 본격적인 디바이스 드라이버 구현 및 문제 해결을 위주로 기록을 이어나가보겠습니다 ..
모두들 새해 복 많이 받으세요~~~
추가적으로 .. 17주차 맛보기
아차차... 부품 구매 실수 ... ㅎㅎㅎ
