[우아한테크] 브랜 : Component

https://www.youtube.com/watch?v=2C1tXVHu9XQ 

 

 

페이지 소스코드 분석 과제를 앞두어, 추천해주신 영상을 시청하고 내용을 정리할 목적이다. 이 영상에서는 레이아웃보다 조금 더 세부적일 수 있는 기능을 구성하는 단위들에 대한 내용을 다루었다.

 

 

---

 

 

1. 컴포넌트

 

사전적으로 "전체의 부분"이라고 정의되어있다. 하나의 작업물을 구성하는 작은 단위(부분)이며, 이 컴포넌트는 더 작은  단위로 구성되어있다.

해당 개념을 프론트엔드에서도 적용시킬 수 있는데, 의미는 아래와 같다.

 

페이지를 구성하고 있는 하나의 섹션(그룹)단위이며, 이는 더 세세한 element로 구성되어있다.
element그룹을 반환하는 자바스크립트 함수라고 정의한다.

 

 

---

 

 

2. 컴포넌트의 분리

분리 단계에서 접근방법은 다양하게 존재하나, 아토믹 디자인으로 특정하여 해당 방법에 대한 내용으로 정리하였다.

 

1) Atomic Design

인터페이스 설계에 대한 화학적 접근 방법이다. 단계는 총 5단계로 이루어져있다.

 

 

① 원자

최소단위의블록이다. 예시를 들자면, 하나의 검색창을 구성하기위해 form, input, button과 같은 html tag가 필요한데 이때 이 tag들이 원자에 해당된다.

② 분자

원자들을 하나의 단위로 동작시키는 UI컴포넌트이다. 기능에 대한 책임을 갖게 되며 다른곳에서 재사용될 수 있다. 즉, 기능이 없는 여러 원자들을 조합하여 하나의 검색창으로써 기능을 부여하게 되고, 이 검색창이 분자에 해당한다.

③ 유기체

하나 이상의 책임을 갖거나 반복적인 원자, 분자의 조합이다. 특정영역을 차지하는 기준에 따라 조합이 가능하다. header영역에 로고, 검색창, 내정보 보기 버튼 등을 위치시킨다면 이때 header가 유기체에 해당한다.

④ 템플릿

원자, 분자, 유기체 단계의 컴포넌트들을 배치하는 레이아웃이다. 화학적 접근에 대한 내용은 없다.

⑤ 페이지

실제 데이터가 템플릿에 전달되게 되면 하나의 페이지가 완성된다. 마찬가지로 화학적 접근에 대한 내용은 없다.

 

 

 

---

 

2) 단점

 

① 기준

원자들이 결합되어도 반드시 분자가 되는것이 아닐 수 있으며, html, CSS의 요소들이 다르기에 각 계층으로 어떤 요소들을 분리해야할지 기준이 모호하다.

② 소요시간

계층을 5단계로 나누기에 소요시간이 길어질 수 있다.

③ 사이드이펙트

원자요소 하나의 변화가 끼치는 사이드 이펙트가 커지게 된다.

④ 재사용성

화학적 비유가 적용되지 않은 템플릿과 페이지 단계는 재사용되기 어렵다.

 

 

이러한 단점들을 아래에서 설명할 디자인시스템을 통해 완화할 수 있다.

 

 

---

 

3. 디자인 시스템

 

하나의 버튼이 있을때 이 버튼에 기능과 다양한 스타일을 적용하였다. 이 버튼을 재사용하려 하였을때, 해당 스타일을 기술한 코드를 찾아야한다. 또한 재사용시 동일한 기능의 구현이 아닐 수 있다. 디자인시스템은 이러한 문제를 해결해 줄 수 있다.

즉, 컴포넌트와 스타일을 관리하는 시스템이라고 정의할 수 있다. 마이크로소프트의 fluent ui가 그 예시이다.

 

* fluent ui *

① 속성들과 테마에 대한 사용법이 문서에 기록되어있고, 버전관리가 잘 이루어지고 있다.
② 색상, 아이콘, 레이아웃 등등의 스타일도 제공하고 있다.
③ 이런 스타일들을 컴포넌트와 조합하여 다양한 인터페이스를 고객에게 제공할 수 있게 된다.

 

* 장점 *

 

① 제약

옵션 등의 제약을 통해 디자인 시스템을 이용하는 사람이 올바른 방식으로 컴포넌트를 사용할 수 있도록 안내해준다.

 

② 일관된 경험

여러 프로덕트에서 고객에게 브랜드에 일관된 인터페이스를 제공할 수 있다.

 

③ 지속성

수정할 인터페이스들을 모두 찾아 직접 변경할 필요가 없으므로 디자인 시스템을 톻해 컴포넌트를 통합적으로 관리해줄 수 있게 되었다.

 

---