컴포넌트

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

 

컴포넌트는 간단하게 말해서 전체의 부분입니다.

예를 들어 덩어리가 있다고 할때 덩어리의 단점은 반복할수없고 재사용도 불가능하고

규모가 큰 설계를 하지못합니다.

이 덩어리를 잘개 나누어 부분으로 나누어 설계한다면 각 부분을 독립적으로 구현함으로써

효율적인 설계가 가능합니다.

 

프론트엔드에서 컴포넌트란

프론트엔드에서 컴포넌트라는 개념이 익숙해진지는 그렇게 오래되지 않았습니다.

과거의 웹 사이트는 HTML페이지만으로 구성되었습니다.

유저의 액션에 대해 매번 새로운 HTML페이지를 서버에서 내려주어야 했습니다.

페이지의 일부만 변경하고 싶어도 전체 페이지를 새로 내려주어야 한다는 점에서 굉장히 비효율적이였습니다.

과거의 웹

 

 

1990년대 네이버 메인 페이지입니다.

anchor와 table태그 위주로 구성되어있습니다.

매우 정적인 페이지이면서 간단한 구조임을 확인할 수 있습니다.

이 웹은 하나의 덩어리라고 표현할 수 있습니다.

 

1990년댜 후반에 AJAX가 등장하면서 웹의 대변화가 시작되었습니다.

필요한 데이터만을 전달받고 화면에 일부분만 다시 그려줄 수 있게되면서

웹의 성격이 점점 더 동적으로 바뀌게 되었습니다.

 

자바스크립트를 통해 사용자와 인터랙션을 늘려나갈 수 있게되면서

웹은 복잡도가 높아지기 시작했습니다.

 

복잡한 웹을 작은 문제로 나누기 시작했습니다.

복잡한 웹을 작게 나누면 전체 페이지에 대한 문제는 작은 element그룹에 대한 문제로 바뀌게 됩니다.

자바스크립트를 통해 element 그룹을 효율적으로 관리할 수 있기 때문에

복잡한 웹을 구성하는 프론트엔드의 컴포넌트는 element그룹을 반환하는 자바스크립트 함수를 정의할 수 있습니다.

컴포넌트를 통해 웹을 효율적으로 설계해 나갈 수 있게 되었습니다.

 

 

컴포넌트를 어떻게 분리해야 할까?

Atomic design에 대해 간단히 살펴보겠습니다.

아토믹 디자인은 화학적 개념을 이용하여 컴포넌트를 분리하는 방법론 중 하나입니다.

 

총 5단계로 구성됩니다.

첫 번째 원자입니다.

원자는 물질을 구성하는 최소단위의 입자라는 의미를 갖고 있습니다.

아토믹 디자인에서는 유저 인터페이스를 구성하는 최소 단위의 블록을 의미합니다.

각 원자들은 고유한 특성을 갖고 있기 때문에

서로 조합하여 더 넓은 방식으로 사용될 수있습니다.

 

예를 들어, 검색창을 구성하는 form, input, button 태그와 같은 HTML tag들이 원자에 해당됩니다.

 

분자는 원자들을 하나의 단위로 동작시키는 컴포넌트입니다.

어떤 목적과 기능도 가지지 않았던 button,input, form 들이 결합하여

검색을 하기 위한 UI 컴포넌트가 되었습니다.

이 검색창은 검색에 대한 책임을 갖게 되고, 다른 곳에서 재사용될 수 있습니다.

 

유기체는 원자, 분자 또는 유기체들의 조합입니다.

분자들이 하나의 책임을 갖는다고 말씀드렸는데요

유기체는 하나 이상의 책임을 갖을 수 있고 

특정 영역을 차지하는 기준에 따라 조합할 수 있습니다.

메인 로고와, 검색창, 내 정보보기 버튼들이 존재하는 해더 영역을 유기체로 구성할 수 있습니다.

 

이전까지는 화학적인 비유를 통해 컴포넌트 단위로 구분하였는데

템플릿과 페이지에서는 화학적 비유가 없습니다.

템플릿은 원자, 분자, 유기체 단계의 컴포넌트들을 배치하는 레이아웃이 됩니다.

 

아토믹 디자인에 대해 간단히 살펴 보았습니다.

하지만 아토믹 디자인에는 몇 가지 문제점들이 있다고 생각합니다.

원자요소에는 태그들 뿐만아니라 스타일 요소들도 포함될 수 있습니다.

원자들이 결합되어도 반드시 분자가 되는 것은 아닐 수 있습니다.

또한 각 계층으로 어떤 요소들을 분리해야 할지 기준이 모호합니다.

또 계층을 5단계로 구성하려다 보면 많은 시간이 소요될 수 있고 5단계나되는 계층 때문에

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

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

 

 

컴포넌트를 어떻게 관리할 수 있을까?

버튼에는 배경, border , 폰트, 크기 등등 많은 스타일이 있고 hover되었을때 ,

다크 모드가 되었을 때 등등 여러 상황에 따라 스타일이 변하게 됩니다.

컴포넌트와 스타일을 관리하는 시스템

디자인 시스템이란 컴포넌트와 스타일을 관리하는 시스템입니다.

디자인 시스템을 통해 얻을 수 있는 이점

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

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

 

만약 디자인 시스템이 없다면 기존에 만들어 온 프로덕트에서 수정할 인터페이스들을 모두 찾아 직접 변경해야 하지만 

디자인 시스템을 통해 컴포넌트들을 통합적으로 관리해줄 수 있습니다.