@koast/ui
사내 React UI 라이브러리로, 개발 러닝커브를 낮추고 일관된 디자인 아이덴티티를 제공합니다.
Period 2025.03 ~ 2025.04 (2개월) Role Frontend / DevOps Team KOAST
React.js TypeScript Tailwind CSS Vite Storybook Git Github Actions
프로젝트 개요
React 기반 UI 개발의 러닝커브를 낮추기 위해 자발적으로 사내 공용 UI 라이브러리를 개발했습니다.Github Pages로 Storybook Docs를 제작하고 NPM에 배포했으며,지도(map)용 Time slider, Legend 등 사내 특화 컴포넌트를 제공합니다.백엔드 개발자의 UI 구현 속도 향상 및 서비스 전반에 일관된 디자인 아이덴티티를 부여했습니다.
프로젝트 이미지
도전 과제
다양한 해양 데이터 형식을 일관되게 처리하고 시각화하는 것이 가장 큰 도전이었습니다.
또한 대용량 데이터를 효율적으로 렌더링하면서도 성능을 유지하는 것이 중요했습니다.
해결 방법
데이터 정규화 및 캐싱 전략을 도입하여 다양한 데이터 소스를 효율적으로 처리했습니다.
또한 가상화 기법과 WebGL 기반 렌더링을 활용하여 대용량 데이터도 원활하게 시각화할 수 있도록 했습니다.
결과
해양 관련 애플리케이션 개발 시간이 50% 단축되었으며, 일관된 사용자 경험을 제공할 수 있게 되었습니다.
현재 여러 해양 관련 프로젝트에서 핵심 라이브러리로 사용되고 있습니다.