[Study] UI 라이브러리와 디자인 시스템

 

안녕하세요, 성조입니다.

저는 be(백엔드) 기반으로 공부를 많이 했지만, 최근에는 fe(프론트엔드)도 필요한 상황이 되면서 공부하고 있던 내용을 정리하고자 포스팅을 진행하게 됐습니다.

 

개인이 학습하고, 개념을 기록하기 위해 작성한 것이므로 100% 완벽한 정답은 아닐 수 있습니다.

혹여나, 잘못된 지식이 전달되고 있다면 언제든지 댓글 남겨주셔서 서로 지식의 중간을 

---

UI(User Interface) 라이브러리

정의 : 재사용 가능한 사용자 인터페이스(UI) 컴포넌트의 집합이다.

이 컴포넌트들은 UI를 구성하는 기본 요소들인데 예를 들면 버튼, 폼, 모달, 탭, 드롭다운 메뉴, 토글, 슬라이더 등이 UI 라이브러리에 해당된다.

 

 

목적 : 주된 목적은 팀 또는 개발자와 디자이너가 일관되고 효율적으로 UI를 구축할 수 있도록 하는 것이다.

코드의 재사용성을 증대시키고, 제품(Product)의 UI를 빠르게 구축하는 목적이 있다.

 

 

사용 방법 : 개발자는 UI 라이브러리를 사용하여 필요한 컴포넌트를 프로젝트에 빠르게 적용하고, 해당 컴포넌트들은 프로젝트의 특정 요구 사항에 맞게 라이브러리를 커스텀하여 맞춤형으로 사용할 수 있다. 이렇게 함으로써, 개발 과정이 더 빨라지고, 디자인의 일관성을 유지시키는 것이 가능하다.

 

 

 

디자인 시스템

정의 : 디자인 시스템은 조직의 디자인과 제품 개발을 위한 포괄적인 가이드라인과 표준을 제공하는, 광범위한 프레임워크이다.

즉, 디자인 시스템은 UI 컴포넌트뿐만 아니라 보다 더 큰 영역에 존재하는 색상 팔레트, 타이포그래피, 그리드 시스템, 브랜드의 톤 앤 매너, 디자인 원칙, 사용성 가이드라인 등을 포함하는 것이다.

 

 

목적 : 디자인 시스템은 조직 전체의 제품(Product)과 서비스에 걸쳐 일관성을 유지하고, 다양한 팀과 개인이 효율적으로 협업할 수 있도록 지원하는 것을 목적으로 둔다.

또한, 효율적인 디자인 및 개발 프로세스를 촉진하고, 브랜드 일관성을 강화하는 데 중점을 두기 때문에 어찌 보면 디자인 시스템은 브랜딩의 핵심이 된다.

 

 

사용 방법 : 디자인 시스템의 경우 조직의 '단일 진리의 원천 or 단일 진실 공급원(Single Source of Truth)'으로 작동한다.

해당 용어를 예를 들면 큰 조직에 다양한 팀과 프로젝트가 존재한다고 가정하면 큰 기업 조직의 모든 팀과 프로젝트는 이 디자인 시스템을 참조하여 일관된 사용자 경험을 제공하고, 브랜드 가이드라인을 준수할 수 있도록 돕는다.

또한, 새로운 디자인 요구 사항이 발생할 때마다 이 시스템을 개선하여 지속적으로 발전해 나아갈 수 있다.

 

 

 

UI(User Interface) 라이브러리와 디자인 시스템의 차이점

둘의 핵심 차이점은 전체적인 UI를 구축하는 것인지 코드의 재사용성을 올리고, 팀 또는 디자이너와 개발자가 빠르게 협업하여 개발하는 것에 목적을 두는 것인지의 차이가 핵심이라 생각된다.

 

핵심 내용을 재정리하면 다음과 같다.

 

범위

- UI 라이브러리 : 주로 구체적인 UI 컴포넌트에 집중되어 있으며, 실제 인터페이스 구축에 사용된다.

- 디자인 시스템 : 기업 전체 조직이 아닌 개별 팀에 대한 개발 또는 디자인과 개발 전반에 걸쳐 광범위한 가이드라인과 표준을 제공한다.

 

목적

- UI 라이브러리 : 인터페이스 구축을 빠르고, 일관되게 만드는 것에 목적을 둔다.

- 디자인 시스템 : 기업 즉, 조직 전체의 디자인 일관성과 효율성을 강화하는 데 목적을 둔다.

 

적용 범위

- UI 라이브러리 : 기업 전체의 모든 프로젝트에 할당되는 것이 아닌 개별 프로젝트나, 팀에 의해 사용된다.

- 디자인 시스템 : 조직 전체의 디자인과 개발 방향을 제시한다.

 

 

 

---

오타나 궁금한 질문 사항이 있는 경우 언제든지 댓글 남겨주시면 확인하고, 답변드릴 수 있도록 노력하겠습니다.

 

다음 포스팅 때 뵙겠습니다.

감사합니다.