기존 솔루션 UI/UX 개선 및 프론트엔드 기능 추가 개발

이 공과대학 산학협력단은 연구과제 관리, 기업 협력 현황 추적 등 내부 업무를 위한 웹 솔루션을 오래전부터 사용하고 있었습니다. 그러나 수년간 부분적인 기능 추가만 이루어지면서 UI가 노후화되어 전반적인 사용성이 크게 떨어진 상태였습니다. 직관적이지 않은 인터페이스로 인해 신규 직원의 업무 적응에 불필요한 시간이 소요되고 있었습니다. 기존 코드 구조의 한계로 새로운 기능을 추가하는 것도 점점 어려워지고 있었습니다. 업무 효율 향상과 사용자 만족도 개선을 위해 현대적인 UI/UX로의 전면 개선이 필요한 시점이었습니다.

기존 데이터 구조와 백엔드 API를 그대로 유지하면서 프론트엔드만 전면 교체해야 하는 제약 조건이 있었습니다. 백엔드 변경 없이 프론트엔드만으로 사용자 경험을 극적으로 개선하는 것이 기술적 도전 과제였습니다. 오랜 기간 기존 시스템에 익숙해진 사용자들의 교육 비용을 최소화하기 위해 핵심 워크플로우는 유지하면서 직관성을 높여야 했습니다. 30개 이상의 화면을 짧은 기간 내에 모두 개선해야 하는 일정 압박도 존재했습니다. 다양한 브라우저 환경에서 안정적으로 동작하는 크로스 브라우저 호환성 확보도 필요했습니다.

기존 화면의 사용성 문제를 화면별로 분석하고, 실제 사용자 인터뷰를 통해 불편 사항과 개선 요구를 체계적으로 수집했습니다. 수집된 피드백을 기반으로 화면별 개선 우선순위를 정하고 핵심 개선 포인트를 도출했습니다. 현대적인 디자인 시스템을 정의하여 색상, 타이포그래피, 간격 등의 시각적 표준을 수립했습니다. 주요 화면에 대한 UI 프로토타입을 제작하여 실사용자 대상 사전 검증을 진행하고 피드백을 반영했습니다. 기존 백엔드 API와의 호환성을 프론트엔드 설계 단계에서 미리 검증하여 개발 리스크를 최소화했습니다.

30개 이상의 화면을 현대적인 컴포넌트 기반 UI 프레임워크로 전면 재구축했습니다. 연구과제 현황과 기업 협력 실적을 한눈에 파악할 수 있는 데이터 시각화 대시보드를 새롭게 추가했습니다. 고급 검색과 다중 필터링 기능을 구현하여 대량의 데이터에서 원하는 정보를 빠르게 찾을 수 있게 했습니다. 반복되는 UI 패턴을 재사용 가능한 컴포넌트로 구성하여 향후 유지보수와 기능 확장이 용이한 구조를 마련했습니다. 기존 백엔드 API와의 완벽한 호환을 유지하면서 프론트엔드 성능을 최적화하여 페이지 로딩 속도도 개선했습니다.

30개 이상의 화면을 직관적인 현대적 UI로 리뉴얼하고, 데이터 시각화와 고급 검색 등 신규 기능을 추가하여 사용자 만족도가 45% 이상 향상되었습니다. 기존 워크플로우를 유지한 덕분에 별도의 사용자 교육 없이도 즉시 업무에 활용할 수 있었습니다. 1개월이라는 짧은 기간 내에 전체 화면 리뉴얼과 신규 기능 개발을 동시에 완료하여 일정 목표를 달성했습니다. 컴포넌트 기반 아키텍처 도입으로 향후 추가 기능 개발 시 개발 속도가 빨라질 것으로 기대됩니다. 산학협력단 내부에서의 성공 사례를 바탕으로 대학 내 다른 부서의 시스템 개선 프로젝트로도 확대 검토 중입니다.