Skip to content

Restructure case studies for public admin GIS modernization #3

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

Draft
yun-dev-cmd wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Restructure case studies for public admin GIS modernization #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5d487fb
Organize UIUX cases and add boundary adjustment review
yun-dev-cmd May 20, 2026
4820117
Strengthen public admin GIS case presentation
yun-dev-cmd May 21, 2026
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
26 changes: 26 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# Changelog

All notable portfolio documentation changes are recorded here.

## 0.1.0 - 2026-05-21

### Added

- Added the `Public Admin GIS Modernization` project title.
- Added a case-study structure under `cases/`.
- Added the consultation-management case with before/after screenshots.
- Added the boundary-adjustment case for file-parcel registration and map-based adjustment-count review.
- Added sanitized Java, JSP, and SQL mapper examples for the boundary-adjustment flow.
- Added public redaction rules for production table names, API paths, work codes, parcel identifiers, and internal system names.
- Added placeholder image slots for masked boundary-adjustment screenshots.
- Added a portfolio review license.

### Changed

- Moved existing sample source and images out of the repository root into case-specific folders.
- Reworked the root README into a navigation and evidence summary layer.

### Security

- Removed production-identifying names from public example code and documentation.
- Documented the repository's redaction checklist before publishing additional screenshots.
14 changes: 14 additions & 0 deletions LICENSE
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
Portfolio Review License

Copyright (c) 2026 yungi0816

This repository is published for portfolio review and technical evaluation.

You may view the documentation, screenshots, and sanitized source examples for
review purposes.

You may not copy, redistribute, republish, or use the materials in another
project without written permission.

The repository intentionally excludes production system identifiers, real
operational data, internal API names, and protected public-sector information.
125 changes: 38 additions & 87 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,106 +1,57 @@
# Government Admin UI/UX Modernization Example
# Public Admin GIS Modernization

[한국어 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)
Case-study repository for improving map-based work flows and legacy UI structure in public-sector administration systems.

This repository is a practical before/after example for modernizing a 10+ year-old public-sector admin system.
The repository does not expose the original production system. Each case keeps the workflow, design decisions, review notes, and sanitized implementation structure while removing internal table names, API names, organization identifiers, work codes, parcel identifiers, and real operational data.

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.
## Technical Evidence

## Summary
| Area | Evidence |
| --- | --- |
| Legacy Java/JSP modernization | UI improvements are documented within JSP, jQuery, Java controller/service/repository, and mapper constraints |
| GIS-enabled admin workflow | OpenLayers-based parcel selection and boundary review flows are documented as separate case studies |
| Public-sector system constraints | Audit logging, authorization, fixed business procedures, and shared UI rules are treated as design constraints |
| User-centered operation design | Before/after screenshots and review notes explain how the work reduces confirmation cost and input mistakes |
| Security-aware documentation | Sanitized source and redaction rules prevent production identifiers from being published |

- 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
## Cases

## Who This Is For
| 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) |

- 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
## Documentation

## Features
| 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) |
| Changelog | [CHANGELOG.md](CHANGELOG.md) |

- 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
## Repository Structure

## 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.

<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;
}
```
## Redaction Standard

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.
This repository is published for portfolio review. See [LICENSE](LICENSE).
159 changes: 89 additions & 70 deletions README_KOR.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,83 +1,102 @@
# 국가 행정 시스템 UI/UX 개선 예시
# Public Admin GIS Modernization

[English README](README.md)

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

핵심 목표는 기존 업무 흐름을 갑자기 뒤집지 않으면서, 상담 관리와 지도 기반 선택 작업의 사용성을 높이는 것입니다.
공공 행정 업무시스템의 지도 기반 업무 흐름 개선과 레거시 UI 현대화 사례를 정리한 저장소입니다.

원본 운영 시스템을 공개하지 않고, 화면 구조, 사용자 흐름, 설계 판단, 리뷰 문서, 익명화된 코드 흐름만 남깁니다. 실제 테이블명, API명, 기관명, 업무 코드, 필지 식별자, 운영 데이터는 제거했습니다.

## 기술 근거

| 영역 | 근거 |
| --- | --- |
| Java/JSP 레거시 개선 | JSP, jQuery, Java Controller/Service/Repository, SQL Mapper 제약 안에서 개선 구조를 문서화 |
| GIS 기반 업무 흐름 | OpenLayers 기반 필지 선택, 도면 확인, 경계조정 검증 흐름을 별도 사례로 정리 |
| 공공/행정 시스템 이해 | 권한, 감사 로그, 기존 공통 UI, 고정 업무 절차를 설계 제약으로 다룸 |
| 실사용자 중심 UX | Before/After 이미지와 리뷰 문서로 확인 비용, 입력 오류, 업무 흐름 단절을 설명 |
| 보안 의식 | 원본 식별자를 제거한 공개용 소스와 익명화 기준 문서 포함 |

## 사례 목록

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

## 기술 검토 포인트

| 영역 | 설명 |
| --- | --- |
| 업무 흐름 분석 | 현업 담당자가 실제로 확인해야 하는 정보와 오류 가능성이 높은 지점을 기준으로 화면 재배치 |
| 지도/GIS 연계 | 도면, 필지 목록, 등록 파일 상태를 연결해 시각적 검증 흐름 구성 |
| 레거시 호환 | 기존 JSP 화면, 공통 CSS, 테이블 UI, 권한 처리, 파일 저장 흐름을 유지하며 개선 |
| 계층 분리 | 화면, 컨트롤러, 서비스, 데이터 접근 계층의 책임을 공개용 코드로 분리해 설명 |
| 공개 보안 | 운영 테이블명, API 경로, 업무 코드, 필지번호를 익명화 |

## 공개 기준

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

| 구분 | 공개 저장소 처리 방식 |
| --- | --- |
| 실제 테이블, 뷰, 스키마명 | `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