Skip to content

Superseded case-study restructure draft #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
yun-dev-cmd wants to merge 1 commit into from
Closed

Superseded case-study restructure draft #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 28 additions & 88 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,106 +1,46 @@
# Government Admin UI/UX Modernization Example
# Government Admin UI/UX Modernization Examples

[한국어 README](README_KOR.md)

[![Java](https://img.shields.io/badge/Java-ED8B00?style=flat-square)](https://www.java.com/)
[![Maven](https://img.shields.io/badge/Maven-C71A36?style=flat-square&logo=apachemaven&logoColor=white)](https://maven.apache.org/)
[![OpenLayers](https://img.shields.io/badge/OpenLayers-1F6B75?style=flat-square&logo=openlayers&logoColor=white)](https://openlayers.org/)
[![UI/UX](https://img.shields.io/badge/UI%2FUX-modernization-2563EB?style=flat-square)](https://github.com/yungi0816/gov-admin-uiux-example)
This repository documents UI/UX improvement work for legacy public-sector administration systems. It does not expose the original production system. Each case keeps the workflow, design decisions, and sanitized implementation structure while removing internal table names, API names, organization identifiers, and real operational data.

This repository is a practical before/after example for modernizing a 10+ year-old public-sector admin system.
The goal is not a full visual redesign. These examples show how to improve task accuracy and reviewability inside strict constraints: JSP/Java screens, shared legacy CSS, audit logging, authorization rules, existing map components, and fixed business procedures.

The goal is not to redesign everything at once. The focus is to reduce user resistance, preserve familiar work patterns, and improve consultation management and map-based selection flows for real business users.
## Cases

## Summary
| Case | Topic | Improvement Focus | Document |
| --- | --- | --- | --- |
| 01 | Consultation management and map selection | Reorganized consultation flow and strengthened map-based selection | [cases/consult-management](cases/consult-management/README.md) |
| 02 | Boundary adjustment file and parcel review | Registers files with linked parcels and visualizes adjustment counts on the map | [cases/boundary-adjustment](cases/boundary-adjustment/README.md) |

- Target: legacy admin consultation and map-based workflow screens
- Main users: field operators and public-sector staff, especially users in their 40s to 60s
- Goal: reduce friction, improve task efficiency, and lower input errors
- Core methods: conversational consultation UI, OpenLayers map selection, report automation
## Documentation

## Who This Is For
| Area | Document |
| --- | --- |
| Documentation index | [docs/README.md](docs/README.md) |
| Review framework | [docs/review-framework.md](docs/review-framework.md) |
| Security redaction policy | [docs/security-redaction.md](docs/security-redaction.md) |

- Developers modernizing old Java/JSP admin systems
- Teams looking for UI/UX examples that respect existing user habits
- Portfolio builders who want to explain a practical before/after redesign
## Repository Structure

## Features

- Conversational consultation management UI
- Map-based parcel selection to reduce manual input errors
- Automated operation report flow
- Performance notes for PL/SQL and query optimization examples

## Quick Start

1. Install Java 11+ and Maven.
2. Build from the project root.

```bash
mvn clean package
```text
.
|-- README.md
|-- README_KOR.md
|-- docs/
`-- cases/
|-- consult-management/
`-- boundary-adjustment/
```

3. Check sample DB/config files under `resources/` when available.

## Before & After

The gallery below shows how the interface changes from dense legacy screens to more guided task flows.
## Redaction Standard

<table>
<tr>
<th align="center">Before</th>
<th align="center">After</th>
</tr>
<tr>
<td align="center" valign="top">
<img src="images/before_1.png" alt="Before 1" width="320"/><br/>
<small>Dense text and table-based screen</small>
<br/><br/>
<img src="images/before_2.png" alt="Before 2" width="320"/><br/>
<small>Nested forms and long lists</small>
<br/><br/>
<img src="images/before_3.png" alt="Before 3" width="320"/><br/>
<small>Map flow not integrated</small>
</td>
<td align="center" valign="top">
<img src="images/after_1.png" alt="After 1" width="320"/><br/>
<small>Conversational consultation with key summary</small>
<br/><br/>
<img src="images/after_2.png" alt="After 2" width="320"/><br/>
<small>Simplified filters and shortcut actions</small>
<br/><br/>
<img src="images/after_3.png" alt="After 3" width="320"/><br/>
<small>Direct map-based selection</small>
</td>
</tr>
</table>

## Design Principles

- Keep base text around 16px to 18px for readability.
- Use 44px to 48px minimum control heights to reduce click mistakes.
- Use explicit labels and step-by-step progressive disclosure.
- Preserve enough contrast between text and backgrounds.
- Explain both the cause and next action in error messages.

## Suggested Design Tokens

```css
:root {
--font-size-base: 18px;
--line-height: 1.4;
--button-min-height: 48px;
--space-section: 24px;
--accent-color: #2b7cff;
}
```
Production table names, API paths, work codes, schema names, package names, organization names, user identifiers, parcel identifiers, and internal map utilities are replaced with role-based sample names. The sanitized source files are intended to explain architecture and review decisions, not to run against a real environment.

## Contributing
## Image Workflow

- Report bugs or setup problems in [Issues](https://github.com/yungi0816/gov-admin-uiux-example/issues).
- Share public-sector or legacy UI improvement ideas in [Discussions](https://github.com/yungi0816/gov-admin-uiux-example/discussions).
- Documentation, accessibility, and screenshot explanation improvements are welcome as pull requests.
Each case owns its screenshots under `cases/<case-name>/assets/`. Add images using the filenames documented in each case README and the gallery will render directly from the README.

## License

No explicit license is currently provided. If this project is intended for open reuse, adding MIT or Apache-2.0 is recommended.
No explicit license is currently provided. Treat the repository as a portfolio-style documentation example unless a license is added.
138 changes: 68 additions & 70 deletions README_KOR.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,83 +1,81 @@
# 국가 행정 시스템 UI/UX 개선 예시
# 국가 행정 시스템 UI/UX 개선 사례

[English README](README.md)

10년 이상 운영된 레거시 행정 시스템의 화면을 실사용자 중심으로 재설계한 사례입니다.

핵심 목표는 기존 업무 흐름을 갑자기 뒤집지 않으면서, 상담 관리와 지도 기반 선택 작업의 사용성을 높이는 것입니다.
운영 중인 공공 행정 시스템에서 실제 제약을 전제로 진행한 UI/UX 개선 사례를 정리한 저장소입니다. 이 저장소는 원본 업무 시스템을 공개하지 않고, 화면 구조, 사용자 흐름, 설계 판단, 익명화된 코드 흐름만 남깁니다.

핵심 관점은 전면 재설계가 아닙니다. 기존 JSP/Java 기반 화면, 공통 CSS, 권한/감사 로그, 지도 컴포넌트, 업무 절차를 유지해야 하는 조건에서 사용자가 더 정확하게 확인하고 덜 실수하도록 개선한 기록입니다.

## 사례 목록

| Case | 주제 | 핵심 개선 | 자료 |
| --- | --- | --- | --- |
| 01 | 상담관리 및 지도 선택 흐름 | 상담 화면을 업무 맥락 중심으로 재정리하고 지도 기반 선택 흐름을 보강 | [cases/consult-management](cases/consult-management/README.md) |
| 02 | 경계조정 파일-필지 연계 검증 | 파일과 필지를 함께 등록하고 조정 횟수를 도면 위에서 확인 | [cases/boundary-adjustment](cases/boundary-adjustment/README.md) |

## 공개 기준

국가/공공 시스템 성격상 아래 항목은 공개 저장소에 남기지 않습니다.

| 구분 | 공개 저장소 처리 방식 |
| --- | --- |
| 실제 테이블, 뷰, 스키마명 | `EXAMPLE_*` 또는 역할 중심 명칭으로 치환 |
| 실제 API 경로, 업무 코드 | `/example/...` 형태의 샘플 경로로 치환 |
| 실제 패키지명, 시스템 약어 | `gov.example` 계열 샘플 패키지로 치환 |
| 기관명, 사용자명, 필지 고유번호 | 샘플 데이터 또는 설명 문장으로 대체 |
| 내부 지도/공통 유틸 구현 | 호출 목적만 남기고 구현 세부는 제거 |

자세한 기준은 [docs/security-redaction.md](docs/security-redaction.md)를 기준으로 관리합니다.

## 저장소 구조

```text
.
|-- README.md
|-- README_KOR.md
|-- docs/
| |-- README.md
| |-- review-framework.md
| `-- security-redaction.md
`-- cases/
|-- consult-management/
| |-- README.md
| |-- assets/
| `-- source-sanitized/
`-- boundary-adjustment/
|-- README.md
|-- assets/
`-- source-sanitized/
```

## 핵심 요약
## 리뷰 방식

- 대상: 레거시 행정 시스템의 상담관리 및 지도 기반 기능
- 주요 사용자: 40대 ~ 60대 현업 담당자
- 목적: 사용성 저항 최소화, 업무 효율화, 입력 오류 감소
- 핵심 기법: 대화형 상담 UI, OpenLayers 지도 선택, 운영 리포트 자동화
각 사례는 단순 화면 캡처가 아니라 아래 순서로 정리합니다.

## 이런 분에게 유용합니다
1. 업무 문제와 사용자 리스크
2. 변경이 금지되거나 제한된 시스템 조건
3. 그 제약 안에서 선택한 UI/UX 판단
4. 프론트엔드, 서버, 데이터 흐름의 역할 분리
5. 공개 가능한 코드 구조와 비공개 처리 기준
6. 앞으로 제약이 풀릴 때 개선할 수 있는 후속 과제

- 오래된 JSP/Java 기반 행정 시스템을 점진적으로 개선해야 하는 분
- 현업 사용자의 거부감을 낮추는 UI/UX 설계 사례가 필요한 분
- Before/After 스크린샷과 함께 포트폴리오형 개선 사례를 정리하고 싶은 분
이 기준은 [docs/review-framework.md](docs/review-framework.md)에 정리되어 있습니다.

## 주요 기능
## 이미지 추가 규칙

- 대화형 상담관리 UI: 간단한 문장 입력으로 업무 흐름 유도
- 지도 기반 필지 선택: 시각적 선택으로 오류 감소
- 운영 리포트 자동 생성: 반복 업무 자동화로 시간 절감
- 성능 가이드: PL/SQL 튜닝 및 쿼리 최적화 예시
각 사례의 `assets/` 폴더에 지정된 파일명으로 이미지를 추가하면 README의 갤러리에서 바로 확인할 수 있습니다.

## 빠른 시작
경계조정 사례는 다음 파일명을 사용합니다.

1. Java 11+ 및 Maven을 설치합니다.
2. 프로젝트 루트에서 빌드합니다.
| 파일명 | 용도 |
| --- | --- |
| `01-boundary-overview.png` | 파일 등록, 도면, 선택 필지 목록이 함께 보이는 전체 화면 |
| `02-adjustment-legend.png` | 경계조정 횟수 색상 범례와 투명도 조정 |
| `03-linked-parcels.png` | 등록 파일 선택 후 연결 필지가 도면과 목록에 표시되는 상태 |
| `04-edit-mode.png` | 조회 상태에서 수정 모드로 전환해 필지 목록을 갱신하는 상태 |

```bash
mvn clean package
```
## 현재 상태

3. 샘플 DB/설정은 `resources/`의 샘플 파일을 확인하세요.

## Before & After

<table>
<tr>
<th align="center">Before</th>
<th align="center">After</th>
</tr>
<tr>
<td align="center" valign="top">
<img src="images/before_1.png" alt="Before 1" width="320"/><br/>
<small>텍스트와 표 중심의 복잡 화면</small>
<br/><br/>
<img src="images/before_2.png" alt="Before 2" width="320"/><br/>
<small>중첩 폼과 긴 목록</small>
<br/><br/>
<img src="images/before_3.png" alt="Before 3" width="320"/><br/>
<small>지도 미연동 상태</small>
</td>
<td align="center" valign="top">
<img src="images/after_1.png" alt="After 1" width="320"/><br/>
<small>대화형 상담 + 핵심 정보 요약</small>
<br/><br/>
<img src="images/after_2.png" alt="After 2" width="320"/><br/>
<small>간결한 필터와 단축 액션</small>
<br/><br/>
<img src="images/after_3.png" alt="After 3" width="320"/><br/>
<small>지도 기반 직접 선택</small>
</td>
</tr>
</table>

## 디자인 원칙

- 기본 텍스트는 16~18px 이상으로 유지
- 버튼과 컨트롤은 최소 44~48px 높이로 설계
- 명확한 레이블과 단계적 흐름 제공
- 텍스트와 배경 대비 확보
- 오류 메시지는 원인과 다음 행동을 함께 안내

## 의견과 기여

- 버그나 실행 문제는 [Issues](https://github.com/yungi0816/gov-admin-uiux-example/issues)에 남겨주세요.
- 공공/레거시 UI 개선 아이디어나 화면 설계 피드백은 [Discussions](https://github.com/yungi0816/gov-admin-uiux-example/discussions)에 남겨주세요.
- 문서, 접근성, 스크린샷 설명 개선 PR은 환영합니다.
- 상담관리 사례: 기존 Before/After 이미지와 공개용 구조 정리 완료
- 경계조정 사례: 리뷰 문서와 익명화 코드 구조 추가 완료
- 실제 업무 데이터, 운영 테이블명, 내부 API명은 포함하지 않음
15 changes: 15 additions & 0 deletions cases/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# Case Studies

공개 가능한 UI/UX 개선 사례를 기능 테마 단위로 관리합니다.

| Case | 문서 | 상태 |
| --- | --- | --- |
| 01. 상담관리 및 지도 선택 흐름 | [consult-management](consult-management/README.md) | 이미지 및 구조 정리 완료 |
| 02. 경계조정 파일-필지 연계 검증 | [boundary-adjustment](boundary-adjustment/README.md) | 리뷰 문서와 익명화 코드 추가, 스크린샷 추가 대기 |

## 추가 규칙

- 새 기능은 `cases/<case-name>/README.md`를 먼저 작성합니다.
- 화면 이미지는 해당 사례의 `assets/` 폴더에 둡니다.
- 공개용 코드는 `source-sanitized/`에만 둡니다.
- 원본 업무 시스템 식별자는 사례 문서와 코드에 남기지 않습니다.
Loading