dekim2/hwacheon-network-viewer
1
0 Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

[UI 개선] 화천 관망 웹 전체 레이아웃·가독성·조작 일관성 개선 #9

New Issue
Closed
opened 2026-10-28 10:04:43 +09:00 by dekim2 · 2 comments
dekim2 commented 2026-10-28 10:04:43 +09:00
Owner
Copy link
Copy source

목적

화천 관망 웹의 전체 화면을 현황 파악과 점검 작업 중심으로 정돈한다. 화면을 꾸미는 것뿐 아니라 정보 우선순위, 가독성과 조작 편의성을 개선한다.

사전 확인

현재 화면을 데스크톱·노트북·좁은 화면에서 확인하고, 잘림·패널 과밀·스크롤·버튼 상태 등 실제 문제를 기록한다. 이를 바탕으로 화면 구성안과 변경 범위를 제시한 후 구현한다.

개선 범위

  • 전체 구성: 상단 제목, 좌측 제어 패널, 중앙 3D 관망, 우측 제원 패널, 하단 상태표시의 배치와 여백을 정돈한다.
  • 좌측: 시설 검색 → 시설 표시 → 점검 → 배율·시점 등 기능을 작업 순서에 맞게 구성하고 긴 패널의 스크롤과 접기 동작을 개선한다.
  • 중앙: 관망이 안내문·범례·도구막대에 과도하게 가려지지 않도록 한다. 현재 시점, 선택 시설, 강조 상태를 명확하게 표시한다.
  • 우측: 시설명, 핵심 제원, 연결 정보, 점검 사유의 우선순위를 정하고 긴 ID·수치·단위·표가 잘리지 않게 한다.
  • 스타일: 글꼴 크기, 간격, 버튼·체크박스·입력창·아이콘, 활성·비활성·선택 상태와 색 대비를 일관되게 맞춘다.
  • 반응형: 노트북과 좁은 화면에서 패널이 관망을 가리지 않도록 접기/전환 방식을 마련하고, 수평 넘침과 접근 불가 버튼을 해결한다.
  • 접근성: 키보드 이동, 포커스 표시, 컨트롤 이름과 설명, 색상 외 상태 구분을 확인한다. 점검 강조의 고정 표시 및 동작 줄이기 설정을 유지한다.
  • 데이터 설명: 실제 입력 제원과 표현용 가정, 점검 필요와 오류 확정을 구분하는 안내를 읽기 쉽게 배치한다.

유지할 사항

  • 원형·사각형 단면의 형상 및 기존 색상 의미.
  • 원본 좌표·표고·관경·련수·연결 관계와 관망 데이터.
  • 검색·선택·확대/회전/이동·평면/입체·배율·레이어·데이터 점검 기능.
  • 별도 페이지를 추가하지 않고 현재 관망 페이지 안에서 개선한다.

관련 작업

점검 목록·필터·위치 이동 기능은 #8에서 구현하며, 이 이슈에서는 그 기능이 전체 레이아웃과 자연스럽게 통합되도록 조정한다. 기능을 중복 구현하지 않는다.

완료 기준 및 검증

  • 변경 전후 화면으로 개선된 배치와 가독성을 비교한다.
  • 예: 1920×1080, 1366×768, 390×844에서 패널·정보·주요 조작에 접근 가능하고 잘림/겹침이 없는지 실제 브라우저로 확인한다.
  • 긴 시설 ID, 긴 점검 사유, 결과 없음, 시설 미선택/선택, 미배치 시설 상태를 확인한다.
  • 기존 자동 검증과 대표 사용자 흐름을 재실행하고, 관망 수량·제원과 선택 정보가 유지되는지 확인한다.
  • 발견한 제한과 결과 화면을 이슈에 기록한다.

현재는 이슈 계획만 등록하며 코드 수정은 별도 진행한다.

## 목적 화천 관망 웹의 전체 화면을 현황 파악과 점검 작업 중심으로 정돈한다. 화면을 꾸미는 것뿐 아니라 정보 우선순위, 가독성과 조작 편의성을 개선한다. ## 사전 확인 현재 화면을 데스크톱·노트북·좁은 화면에서 확인하고, 잘림·패널 과밀·스크롤·버튼 상태 등 실제 문제를 기록한다. 이를 바탕으로 화면 구성안과 변경 범위를 제시한 후 구현한다. ## 개선 범위 - 전체 구성: 상단 제목, 좌측 제어 패널, 중앙 3D 관망, 우측 제원 패널, 하단 상태표시의 배치와 여백을 정돈한다. - 좌측: 시설 검색 → 시설 표시 → 점검 → 배율·시점 등 기능을 작업 순서에 맞게 구성하고 긴 패널의 스크롤과 접기 동작을 개선한다. - 중앙: 관망이 안내문·범례·도구막대에 과도하게 가려지지 않도록 한다. 현재 시점, 선택 시설, 강조 상태를 명확하게 표시한다. - 우측: 시설명, 핵심 제원, 연결 정보, 점검 사유의 우선순위를 정하고 긴 ID·수치·단위·표가 잘리지 않게 한다. - 스타일: 글꼴 크기, 간격, 버튼·체크박스·입력창·아이콘, 활성·비활성·선택 상태와 색 대비를 일관되게 맞춘다. - 반응형: 노트북과 좁은 화면에서 패널이 관망을 가리지 않도록 접기/전환 방식을 마련하고, 수평 넘침과 접근 불가 버튼을 해결한다. - 접근성: 키보드 이동, 포커스 표시, 컨트롤 이름과 설명, 색상 외 상태 구분을 확인한다. 점검 강조의 고정 표시 및 동작 줄이기 설정을 유지한다. - 데이터 설명: 실제 입력 제원과 표현용 가정, 점검 필요와 오류 확정을 구분하는 안내를 읽기 쉽게 배치한다. ## 유지할 사항 - 원형·사각형 단면의 형상 및 기존 색상 의미. - 원본 좌표·표고·관경·련수·연결 관계와 관망 데이터. - 검색·선택·확대/회전/이동·평면/입체·배율·레이어·데이터 점검 기능. - 별도 페이지를 추가하지 않고 현재 관망 페이지 안에서 개선한다. ## 관련 작업 점검 목록·필터·위치 이동 기능은 #8에서 구현하며, 이 이슈에서는 그 기능이 전체 레이아웃과 자연스럽게 통합되도록 조정한다. 기능을 중복 구현하지 않는다. ## 완료 기준 및 검증 - 변경 전후 화면으로 개선된 배치와 가독성을 비교한다. - 예: 1920×1080, 1366×768, 390×844에서 패널·정보·주요 조작에 접근 가능하고 잘림/겹침이 없는지 실제 브라우저로 확인한다. - 긴 시설 ID, 긴 점검 사유, 결과 없음, 시설 미선택/선택, 미배치 시설 상태를 확인한다. - 기존 자동 검증과 대표 사용자 흐름을 재실행하고, 관망 수량·제원과 선택 정보가 유지되는지 확인한다. - 발견한 제한과 결과 화면을 이슈에 기록한다. 현재는 이슈 계획만 등록하며 코드 수정은 별도 진행한다.
dekim2 commented 2026-10-28 10:15:28 +09:00
Author
Owner
Copy link
Copy source

UI 개선 구현과 검증을 완료했습니다. PR #10: #10

확인한 문제: 기존 min-height 750px 때문에 작은 노트북에서 도구가 밀리고, 좌측 소개 영역과 넓은 상단이 작업 공간을 차지했습니다.

개선: 화면 높이에 맞는 관망 영역, 간결한 상단·소개·수량 표시, 시설·점검/시설 제원 패널 접기, 좁은 화면의 단일 패널 전환, 시설 선택 시 제원 표시, Escape 닫기와 포커스 복원, 숨긴 패널 inert 처리, 제원·버튼·범례 가독성을 정리했습니다.

검증: 1920×1080, 1366×768, 390×844 레이아웃·가로 넘침·패널·검색 선택 검사 통과. 기존 1,662개 시설 제원 검사와 207개 점검 관로 강조/색 복원 검사 통과. 노트북·휴대폰·휴대폰 제원 패널 화면 시각 검토 완료. 결과는 validation/issue-9-result.json에 있습니다.

원본 제원·좌표와 형상은 유지했습니다. 이슈 #8의 점검 목록/종류 필터는 별도 작업으로 남습니다. 병합 후 WSL 실행 폴더도 동기화하겠습니다.

UI 개선 구현과 검증을 완료했습니다. PR #10: https://gitea.hmac.kr/dekim2/hwacheon-network-viewer/pulls/10 확인한 문제: 기존 min-height 750px 때문에 작은 노트북에서 도구가 밀리고, 좌측 소개 영역과 넓은 상단이 작업 공간을 차지했습니다. 개선: 화면 높이에 맞는 관망 영역, 간결한 상단·소개·수량 표시, 시설·점검/시설 제원 패널 접기, 좁은 화면의 단일 패널 전환, 시설 선택 시 제원 표시, Escape 닫기와 포커스 복원, 숨긴 패널 inert 처리, 제원·버튼·범례 가독성을 정리했습니다. 검증: 1920×1080, 1366×768, 390×844 레이아웃·가로 넘침·패널·검색 선택 검사 통과. 기존 1,662개 시설 제원 검사와 207개 점검 관로 강조/색 복원 검사 통과. 노트북·휴대폰·휴대폰 제원 패널 화면 시각 검토 완료. 결과는 validation/issue-9-result.json에 있습니다. 원본 제원·좌표와 형상은 유지했습니다. 이슈 #8의 점검 목록/종류 필터는 별도 작업으로 남습니다. 병합 후 WSL 실행 폴더도 동기화하겠습니다.
dekim2 commented 2026-10-28 10:17:16 +09:00
Author
Owner
Copy link
Copy source

PR #10 병합 완료(3fc9cca887). WSL /home/user/hwacheon-network-viewer를 같은 main으로 fast-forward 동기화했습니다. 기존 로컬 작업을 덮어쓰지 않았고 작업 트리는 깨끗합니다.

실제 http://127.0.0.1:8081 서버가 새 UI를 제공하는 것을 확인했으며, 이 서버를 대상으로 1920×1080 / 1366×768 / 390×844 브라우저 레이아웃 검사를 다시 수행해 모두 통과했습니다. WSL Python 회귀 테스트 15개도 통과했습니다.

상단 시설·점검/시설 제원 버튼으로 패널을 전환할 수 있습니다. 브라우저 강력 새로고침 후 확인할 수 있습니다. 점검 목록/필터 이슈 #8은 이번 작업에 포함하지 않았습니다.

PR #10 병합 완료(3fc9cca8871baaed12a2a90aefbfe103b5798c00). WSL /home/user/hwacheon-network-viewer를 같은 main으로 fast-forward 동기화했습니다. 기존 로컬 작업을 덮어쓰지 않았고 작업 트리는 깨끗합니다. 실제 http://127.0.0.1:8081 서버가 새 UI를 제공하는 것을 확인했으며, 이 서버를 대상으로 1920×1080 / 1366×768 / 390×844 브라우저 레이아웃 검사를 다시 수행해 모두 통과했습니다. WSL Python 회귀 테스트 15개도 통과했습니다. 상단 시설·점검/시설 제원 버튼으로 패널을 전환할 수 있습니다. 브라우저 강력 새로고침 후 확인할 수 있습니다. 점검 목록/필터 이슈 #8은 이번 작업에 포함하지 않았습니다.
Sign in to join this conversation.
No Branch/Tag Specified
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
dekim2 (김도언)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: dekim2/hwacheon-network-viewer#9