69 lines
5.1 KiB
Markdown
69 lines
5.1 KiB
Markdown
---
|
|
name: ui_layout_image
|
|
description: UI 소스코드(예 C# WPF XAML, WinForms, Qt, HTML/CSS, Android/Flutter)를 읽어 화면의 레이아웃 구조를 분석하고, 스크린샷 없이 그리드/컨테이너 구조를 그대로 도식(wireframe mockup) 이미지로 생성해 저장한다. 필요 시 PPT/매뉴얼에 삽입. "화면 구성 이미지로 만들어줘", "XAML 보고 레이아웃 그려줘", "코드 보고 화면 도식/목업 만들어 매뉴얼에 넣어줘", "스크린샷 말고 코드로 화면 그려줘" 요청 시 사용.
|
|
---
|
|
|
|
# ui_layout_image — 코드 기반 화면 레이아웃 도식 생성 스킬
|
|
|
|
**실행 중인 앱 스크린샷이 아니라**, UI 소스코드의 레이아웃 정의(컨테이너/그리드/컨트롤)를 읽어
|
|
화면 구성을 도식(wireframe mockup) 이미지로 렌더링한다. 매뉴얼·산출물·문서에 삽입하기 위함.
|
|
|
|
## 언제 쓰나
|
|
- 앱을 띄울 수 없거나(하드웨어/시뮬 불가), 스크린샷이 부적절할 때
|
|
- 코드만으로 "이 화면이 이렇게 생겼다"를 문서/매뉴얼에 보여줄 때
|
|
- 여러 화면을 일관된 스타일의 도식으로 빠르게 만들 때
|
|
|
|
## 입력(args) 해석
|
|
- 대상 화면(들)의 소스 파일 경로 또는 화면 이름. 비어 있으면 무엇을 그릴지 한 줄로 물어본다.
|
|
- 선택 옵션: 스타일(dark HMI / light), 출력 경로, 삽입 대상(PPTX 경로·슬라이드).
|
|
|
|
## 동작 절차
|
|
|
|
### 1) UI 소스 식별 및 레이아웃 파싱 (프레임워크별)
|
|
대상 언어/프레임워크를 판별하고 **레이아웃 트리**(중첩 컨테이너 + 컨트롤 + 라벨/바인딩)를 추출한다.
|
|
|
|
| 프레임워크 | 읽을 것 | 핵심 레이아웃 단서 |
|
|
|-----------|--------|-------------------|
|
|
| **C# WPF** (이 프로젝트 기본) | `*.xaml` | `Grid`(RowDefinitions/ColumnDefinitions, `*`/`auto`/비율), `GroupBox.Header`, `StackPanel`, `UniformGrid(Rows/Columns)`, `Button.Content`, `TextBlock.Text`, `usercontrols:UCKeyValue KeyText/Unit`, `Grid.Row/Column/ColumnSpan` |
|
|
| C# WinForms | `*.Designer.cs` | `Controls.Add`, `.Location`, `.Size`, `.Dock`, `.Text` |
|
|
| Qt | `*.ui`(XML) | `<layout class="QGridLayout/QVBoxLayout">`, `<widget>`, `<property name="text">` |
|
|
| HTML/CSS | `*.html`/`*.css`/JSX | div 구조, flex/grid, 라벨 텍스트 |
|
|
| Android | `res/layout/*.xml` | `LinearLayout`/`ConstraintLayout`, `android:text` |
|
|
| Flutter | `*.dart` | `Row`/`Column`/`Grid`/`Container`, `Text(...)` |
|
|
|
|
- 비율(`2*:1*` 등), 행/열 수, 헤더 텍스트, 버튼/입력칸/표 컬럼을 **코드에서 그대로** 가져온다. 임의로 지어내지 않는다.
|
|
- 바인딩(`{Binding ...}`)은 라벨/예시값으로 치환(예: "Process Running", "1234")하되 의미를 보존한다.
|
|
|
|
### 2) 도식 이미지 렌더링 (Python · matplotlib)
|
|
- 실행: Windows에선 `py`(파이썬 런처). 라이브러리: `matplotlib`, `Pillow` 사용 가능.
|
|
- 한글 폰트: `C:\Windows\Fonts\malgun.ttf` 를 `font_manager`로 등록.
|
|
- 좌표계: `ax.set_ylim(H, 0)` 로 좌상단 원점(화면 좌표계와 동일).
|
|
- 스타일 기본값 = **dark HMI** (이 프로젝트 UI와 일치):
|
|
- 배경 `#2D2D30`, 패널 `#3E3E42`, 테두리 `#6E6E72`, 헤더바 `#007ACC`, 글자 `#DDDDDD`,
|
|
강조버튼 보라 `#7E57C2`/파랑 `#2D6CA2`, 입력칸 `#252528`.
|
|
- 컴포넌트 헬퍼: `panel(header)`(둥근 박스+헤더바), `kv(key,val)`(키-값 입력칸), `button(text,color)`, `label`.
|
|
- **그리드 구조를 그대로**: 컬럼 비율 → 폭 배분, 행 정의(auto/`*`) → 높이 배분, GroupBox → panel, UniformGrid → 균등 분할.
|
|
- 참고 구현(이 프로젝트 실제 사용): `UnTrackedLocalFiles/`의 `gen_mockups.py`, `gen_menubar.py` 패턴.
|
|
|
|
### 3) 저장
|
|
- 기본 출력: `UnTrackedLocalFiles/hmi_mockups/<screen>.png` (git 제외 위치). 다른 위치 지정 시 그곳에.
|
|
- 생성 후 Read 도구로 PNG를 열어 **시각 검증**(겹침/라벨 누락 확인). 문제 있으면 수정 후 재생성.
|
|
|
|
### 4) (선택) 문서/PPT 삽입
|
|
- PPTX: `python-pptx`로 대상 슬라이드의 기존 스크린샷(PICTURE)·번호 콜아웃(예 "타원*")을 제거하고
|
|
같은 위치/크기에 `add_picture`. 빈 콜아웃 박스도 정리.
|
|
- 검증: LibreOffice(`soffice --headless --convert-to pdf`) → PyMuPDF(`fitz`)로 PNG 렌더 후 Read로 확인.
|
|
|
|
### 5) 보고
|
|
- 생성한 이미지 경로, 반영한 화면/소스, 삽입 위치를 한 줄로 요약. 코드와 다르게 추정한 부분은 명시.
|
|
|
|
## 주의
|
|
- 반드시 **소스코드 기준**. 실제 값이 불명확하면 라벨/예시값으로 두고 "(예시)" 표기.
|
|
- 원본 문서(PPT/Excel) 수정 전 백업(`UnTrackedLocalFiles/...backup`). 서식 보존.
|
|
- 생성 스크립트·중간 렌더는 `UnTrackedLocalFiles/`(커밋 제외)에 둔다. 산출물(이미지가 삽입된 문서)만 커밋.
|
|
|
|
## 호출 예시
|
|
- `/ui_layout_image UCMainAutoRun.xaml 화면 도식 만들어줘`
|
|
- `/ui_layout_image Manual/Calibration 화면들 dark 스타일로 그려서 HMI Manual.pptx 슬라이드에 넣어줘`
|
|
- 자연어: "스크린샷 말고 XAML 그리드 구조 보고 화면 레이아웃 이미지로 만들어서 매뉴얼에 넣어줘"
|