React Custom Component 개요

UI 컴포넌트의 필요성

 

UI를 개발해 본 개발자라면 UI 개발은 다른 분야의 개발보다 복잡하고 까다롭다는 사실을 알 것이다.

 

UI 개발은 도대체 왜 까다로운 걸까?

• 프로젝트의 상황에서 절대적으로 많은 수의 화면과 복잡한 화면이 문제이다.
• 웹사이트의 모든 화면들을 분석해 보면 몇 가지 패턴들을 발견할 수 있다.
• 즉, 화면이 아무리 복잡하고 다양해도 기본적인 레이아웃 구성 내부에서 사용되는 UI들은 반복적으로 재사용되는 경우가 많다.

[그림] 프로젝트 내부에서 자주 사용되는 UI들의 모음

 

그렇다면 개발자들은 반복되는 UI들을 어떻게 재사용하고 있었을까?

• 누군가 먼저 코드를 설계해 놓으면 그 코드를 비슷하게 쓰거나,
• 해당 UI가 어느 화면에 개발되어 있는지 알 수 없을 땐 새로 개발하기도 했다.
• 이런 크고 작은 불편함이 쌓여, 자연스럽게 UI 컴포넌트 개발에 대한 논의가 시작되었다.

 

개발팀들은 UI 컴포넌트를 도입함으로써 절대적인 코드량을 줄일 수 있었다.

더불어 화면이 절대적으로 많고 복잡도가 있는 프로젝트에서는 개발 기간 단축에 절대적으로 기여할 수 있는 장점이 있다.

 

디자인 시스템이란?

 

이러한 UI 컴포넌트들의 모음을 구조화하는 방법으로 디자인 시스템이라는 용어도 등장한다.

 

[디자인 시스템이란]

서비스를 만드는 데 사용한 공통 컬러, 서체, 인터랙션, 각종 정책 및 규정에 관한 모든 컴포넌트를 정리해 놓은 것이며 불필요한 커뮤니케이션을 없애기 위해 체계적으로 정리한 시스템을 말한다.

 

Airbnb와 같은 거대 기술 기업부터 신생 스타트업까지, 회사들은 시간과 비용을 절약하기 위해 UI 패턴을 재사용하는 방식을 도입하고 있다.

• 재사용이 가능한 사용자 인터페이스는 새로운 개념이 아니다.
• 스타일 가이드, UI 키트 및 공유 가능한 위젯은 수십 년 동안 존재해 왔다.
• 오늘날 디자이너와 개발자들은 UI 컴포넌트 구조화를 위해 노력하고 있다.
• UI 컴포넌트는 레고(LEGO) 블록처럼 사용자 인터페이스를 이루는 조각들의 시각적이고 기능적인 속성을 캡슐화한다.

 

최근에 등장한 UI들은 다양한 사용자 경험을 제공하기 위해 수백 개의 모듈식 UI 컴포넌트가 재배열된 구조로 이루어져 있다.

• 디자인 시스템은 재사용이 가능한 UI 컴포넌트들로 이루어져,
• 복잡하고 견고하며 사용자가 접근하기에 용이한 사용자 인터페이스를 구축할 수 있다.
• 디자이너와 개발자 모두 UI 컴포넌트를 다루기 때문에, 디자인 시스템은 두 분야를 연결하는 다리이기도 하다.
• 또한 조직의 공용 컴포넌트에 대한 "진실의 근원(source of truth)"이기도 하다.

 

빌드 컴포넌트

 

Uber, Airbnb, IBM, GitHub을 비롯한 수백 개가 넘는 기업의 디자인 시스템에서 스토리북이 사용되고 있다. 아래 목록은 그중 가장 우수한 팀에서 사용되고 있는 Tool들이다.

 

• 📚 스토리북(Storybook): UI 컴포넌트 개발과 자동으로 문서를 생성할 때 사용 
• ⚛️ 리액트(React): 선언 중심 컴포넌트 UI(create-react-app)를 사용 
• 💅 스타일 컴포넌트(Styled-components): 컴포넌트 단위의 스타일링에 사용 
• ✨ 프리티어(Prettier): 자동화된 코드 포맷팅에 사용