수색구조 시스템
해양경찰청 수색구조 시스템 UI/UX 개선 프로젝트를 주도하여 긴급 상황 대응 효율을 향상시켰습니다.
Period 2024.03 ~ 2024.05 (2개월) Role UI/UX · Frontend Team Koast
프로젝트 개요
해양경찰청 수색구조 시스템의 지도 시각화 개선을 위해 UI/UX 재설계 프로젝트를 진행했습니다.주요 활동:
- 데이터 우선순위 기반 색상 체계 재정의 (20개 → 7개 핵심 Color Set)
- 공공기관 상황실 환경 고려한 UI 재설계
- 3,000라인 이상 레거시 코드 기능 단위 모듈화 주도
- 이벤트 기반 인터랙션 구조 재설계
- 긴급 상황 정보 파악 속도 개선
- 해경 상황실 정보 가독성 및 지도 사용성 개선 피드백 확보
- UI 수정/기능 개선 작업 시간 4시간 → 30분 단축 (87% 개선)
프로젝트 이미지
프로젝트 회고
하이라이트
1.
사고 위치, 구조 장비, 이동 경로가 지도에 동시 표출되어 데이터 구분과 긴급도 파악이 어려운 UI 구조
Task
긴급 상황에서 정보 우선순위를 즉시 식별할 수 있는 시각화 규칙 재정의 필요
Action
데이터 우선순위 기준으로 20여 개 색상을 7개 핵심 Color Set으로 재정의하고 지도 시각화 기준 정리
Result
사고·구조 정보 시각 계층 명확화로 긴급 상황 정보 파악 속도 개선
2.
지도 UI 복잡도와 다크 패턴 요소로 핵심 정보 인지 속도 저하
Task
공공기관 상황실 업무 맥락에 맞는 안정적 정보 구조와 시각 톤 재설계 필요
Action
공공기관 상황실 환경을 고려해 차분한 색상 체계와 명확한 정보 구조로 UI 재설계
Result
해경 상황실 기준 정보 가독성과 지도 사용성 개선 피드백 확보
3.
단일 JavaScript 파일 3,000라인 이상 구조로 UI 수정 및 기능 개선 난이도 높음
Task
유지보수 가능한 구조로 전환하기 위해 UI/인터랙션/데이터 로직 분리 필요
Action
UI 제어, 지도 인터랙션, 데이터 처리 로직을 기능 단위 모듈로 분리
Result
UI 수정 및 기능 개선 작업 시간 4시간 → 30분 수준 단축
4.
다중 UI 이벤트 간 상호 영향으로 예측하기 어려운 인터랙션 오류 발생
Task
기능 간 간섭을 줄이고 동작 일관성을 확보할 이벤트 구조 재설계 필요
Action
각 기능이 독립 동작하도록 이벤트 기반 인터랙션 흐름 재설계
Result
UI 동작 안정성과 사용자 인터랙션 일관성 확보