UI Component Library

blue·2023년 2월 21일

1. UI Component Library

1.1 UI Component Library란?

　UI Component Library를 설명하기 위해서 UI Component를 먼저 이해해야 한다.

　Component는 쉽게 말해서 어떤 기능을 가지고 있는 '블럭'이라고 생각하면 된다. 어떤 인터페이스를 만들 때, 만들 때마다 분명 겹치는 비슷한 기능, 디자인의 요소가 존재한다. 그런데 이렇게 비슷한 걸 반복적으로 만들다보면 개발자 입장에서는 귀찮고, 시간이 낭비된다. 그렇기 때문에 겹치고 자주 사용되는 기능, 디자인을 가진 요소를 만들어 두고 이걸 재활용하면 좋을거고, 컴포넌트로 이를 구현하는 것이다. 그래서 UI Component는 UI에 대한 컴포넌트이니까 UI를 독립적이고, 다시 사용한 조각으로 나누어놓은 것을 말한다. Library는 직역하면 도서관이라는 뜻이니까, 여러 UI 컴포넌트를 모아놓은 콜렉션이라고 생각하면 된다.

　이미 유명한 ui 컴포넌트 라이브러리가 여러 개 존재하고, 대표적으로 Semantic UI, React Bootstrap, Ant design 등이 있다.

Ant design

React Bootstrap

위 사이트들을 들어가보면 실제로 기능과 디자인에 따른 적절한 컴포넌트들이 정리되어 있고, 이 중 사용하고 싶은 것만 가져와서 사용하면 된다.

1.2. 장점 - Atomic Design

　그렇다면 왜 굳이 UI Component Library를 사용할까?

　가장 먼저 디자인 시스템이 존재하게 된다는 점이 장점이다. 디자인 시스템이란 웹이나 서비스 디자인에 적용된 스타일의 규칙이나 가이드라인이다. 하나의 UI 컴포넌트 라이브러리를 사용하지 않으면, 같은 기능의 컴포넌트라도 만드는 사람에 따라 미묘한 차이가 존재하게 될 것이고, 이는 일관적인 디자인을 하지 못하게 된다.

　조금 더 자세히 말하자면, 디자인 시스템 중에서도 Atomic design이 존재한다. Atomic이라는 이름에서 유추할 수 있듯이, 화학적인 개념에서 아이디어를 얻은 디자인 시스템이다. 다음과 같이 다섯가지의 레벨로 컴포넌트가 나뉜다. 높은 단계일수록 더 구체적이다. 이러한 디자인 시스템이 존재한다면, 디자이너와 개발자들의 동시 협업이 가능하다.

Atomic Design

　다음은 아토믹 디자인의 사례이다. 어떤 인터페이스를 만든다고 할 때, Atom이 가장 기본적인 컴포넌트이다. 라벨, 인풋, 버튼 등과 같이 기본적인 HTML 태그들이 포함될 수 있다. 그렇지만 가장 낮은 단계이고, 추상적이다보니 혼자로는 잘 쓰이지 않는다.

　이런 아톰들이 모여 만들어진 것이 Molecule입니다. 여러 atom이 결합하여 고유한 특성을 가지게 된다. Atom 단계의 라벨, 인풋, 버튼이 합쳐져서 하나의 검색창 컴포넌트가 된다.

　Molecule들이 모여 더 복잡한 컨텍스트를 가지게 된 걸 Organism이라고 한다. 다음은 헤더 부분의 컴포넌트인데, molecule 단계의 검색창 컴포넌트가 속해있는 것을 볼 수 있다.

　Organism이 모여 만들어진 것을 Template이라고 한다. 아까 사용되었던 헤더 부분 컴포넌트가 속해있는 걸 볼 수 있다.

　마지막으로 page는 실제 콘텐츠를 담고 있는데, 템플릿의 인스턴스라고 할 수 있다. 점점 높은 단계로 갈 수록 구체적이지만, 재사용은 점점 힘들다는 것을 느끼실 수 있을 거예요. 따라서 사용하고자 하는 컴포넌트가 어떤 기능이고, 얼마나 사용될지에 따라 단계를 알맞게 골라야한다.

　다시 UI 컴포넌트 라이브러리의 장점으로 돌아와서, 아무래도 재사용이 가능하다보니 그냥 개발하는 것보다 기능성이 높다. 또한 라이브러리에 이미 사용할 컴포넌트들이 디자인까지 구현되어 있으니 디자이너의 필요성이 줄어든다. 마지막으로 라이브러리에서 컴포넌트를 가져오기만 하면 되니 속도도 훨씬 빠르고, 이러한 컴포넌트들이 라이브러리로 모여 있기 때문에 다른 장치에서도 사용하기 편하므로 호환성도 장점이다.

1.3. 단점

　그렇다고 해서 장점만 존재하는 것은 아니다. 이미 만들어져있는 것을 가져와서 사용하는 것이기 때문에 직접 만들 때보다 유연성은 떨어진다.

　또한 유명한 라이브러리의 컴포넌트를 쓴다면 당연히 독창성은 적을 거고, 다른 사람들의 디자인과 유사하다는 단점이 있다.

　그렇기 때문에 이미 존재하는 UI 컴포넌트 라이브러리를 수정하거나, 내가 직접 만든다면 본인만의 독창성도 있고 여러번 재사용이 가능할 것이다.

2. UI Component Library 개발

위의 단점을 해결하고자 직접 라이브러리를 개발하거나, 존재하는 라이브러리를 수정할 수 있다. 가장 먼저, 어떻게 만들건지 계획을 세워야 하고, 계획에 맞춰 개발하기 위한 환경을 설정해야 하고, 마지막으로 준비가 다 되었으니 컴포넌트를 만들면 된다.

2.1. Creating a plan

Interface Inventory
디자인과 기능이 비슷한 컴포넌트들을 모아보고, 해당 컴포넌트에 대한 UI Component Library를 만들 가치가 있는지 확인한다.
Choose javascript framework
개발에 사용할 프레임워크를 선택한다. (React, Angular, Vue 등)

2.2. Development environment

bundle
번들에 사용할 툴을 결정한다. (parcel, webpack, rollup 등)
type checking
타입 체킹에 사용할 툴을 결정한다. (PropTypes, TypeScript 등)
CSS
CSS에 사용할 툴을 결정한다. (styled-components, emotion 등)
test
개발한 컴포넌트를 확인할 툴을 결정한다. (Storybook 등)

2.3. Creating UI Components

Add static assets
assets 폴더를 만들어 fonts, images, svg 폴더에 static 파일들을 정리한다.
Set global styles
전체적인 스타일을 설정한다.

Create a theme
폰트, 색상 등 세부 사항을 결정하여 하나의 테마를 만든다.

Build the components
Atomic design을 활용하여 컴포넌트를 생성한다.
뉴스레터 섹션을 만든다고 할 때, title, description, email input, submit button 등이 필요할 것이다. 이를 컴포넌트로 정리할 수 있다.
먼저 가장 기본적인 atom 단계의 컴포넌트는 input, button, typography 컴포넌트를 생성한다.
그리고 이 컴포넌트들을 합쳐 newsletterform이라는 molecule 단계의 컴포넌트를 생성한다.
마지막으로 다른 molecule 단계의 컴포넌트들을 합쳐 NewsletterSection이라는 Organism 단계의 컴포넌트를 생성한다.