Woori Design System

프로젝트 시작 배경 및 기획 의도

1. 국내 금융권 디자인 시스템 현황의 불균형

신한은행은 SOLID 디자인 시스템 을 통해 체계적인 디자인 가이드라인을 구축하여 일관된 사용자 경험을 제공하고 있습니다. 반면 우리은행은 CI/BI 가이드 는 있지만, 개발자들이 실제로 활용할 수 있는 공개된 디자인 시스템이 부재한 상황입니다.

2. 우리 FIS 아카데미 교육생들의 실질적 필요

우리 FIS 아카데미 4기 교육생들은 다양한 프로젝트를 진행하면서 일관성 있는 UI 컴포넌트의 필요성을 절감했습니다. 특히 우리은행의 브랜드 아이덴티티를 반영한 컴포넌트 라이브러리가 없어, 매번 처음부터 스타일링 작업을 반복해야 하는 비효율이 발생했습니다.

3. 오픈소스 기여를 통한 개발 생태계 활성화

이러한 문제를 해결하기 위해 우리 FISA 교육생들끼리 직접 디자인 시스템을 개발하기로 결정했습니다. 단순히 우리의 프로젝트만을 위한 것이 아니라, 우리은행의 브랜드를 활용한 프로젝트를 진행하는 모든 개발자들이 활용할 수 있는 오픈소스 디자인 시스템을 목표로 했습니다.

프로젝트 개요

Woori Design System은 우리은행의 브랜드 아이덴티티를 기반으로 한 React 컴포넌트 라이브러리입니다. 2025년 3월부터 개발을 시작하여 현재 NPM을 통해 배포 중이며, 우리 FIS 아카데미 교육생들의 다양한 프로젝트에서 활용되고 있습니다.

핵심 목표

1. 우리은행 브랜드 일관성: 우리은행의 색상 체계와 타이포그래피를 정확히 반영
2. 개발자 친화적 API: 직관적이고 사용하기 쉬운 컴포넌트 인터페이스 제공
3. 높은 재사용성: 다양한 프로젝트에서 즉시 활용 가능한 컴포넌트 세트

디자인 시스템 Figma

프로젝트 링크

• GitHub: github.com/woori-design/Woori-Design-System 
• NPM Package: npmjs.com/package/woori-design 

프로젝트 의의

Woori Design System은 반복되는 UI 작업을 줄이고자 시작한 프로젝트입니다. 우리 FIS 아카데미 교육생들이 다양한 팀 프로젝트를 진행하면서 공통적으로 필요로 했던 UI 컴포넌트들을 체계화하고, 이를 NPM 패키지로 배포하여 실제 사용 가능한 라이브러리로 발전시켰습니다.

이 프로젝트를 통해 단순한 사용자에서 기여자로 성장하는 경험을 했습니다. 오픈소스 생태계에 참여하면서 우리가 만든 것이 다른 사람에게 도움이 된다는 보람을 느낄 수 있었습니다.