| 컴포넌트
A part or element of a larger whole, especially a part of a machine or vehicle.
=> 전체의 부분
ex )
비행기는 200개의 주요부품으로 이루어지고 비행기 한 대에 대략 200만개 정도의 부품이 필요
비행기를 하나의 덩어리로 본다면 의존성을 분리할 수 없게 된다. > 매번 밑바닥부터 만들어야 함
한번 설계했던 과정이 새로운 디자인의 비행기를 만드는 데에 도움을 주기 힘들고, 실제 비행기와 같은 높은 복잡도의 설계를 구현하기 어렵다는 문제도 있다.
비행기 설계의 큰 문제를 작은 문제로 나눌 필요가 있다.
작은 단위부터 설계한 후 조립하고 각 부분을 독립적으로 구현하면서 효율적인 설계가 가능하다.
컴포넌트 == 전체의 부분
| 프론트엔드 컴포넌트
과거의 웹 사이트는 html 페이지만으로 구성됐었다.
유저의 액션에 대해 매번 새로운 HTML페이지를 서버에서 내려주어야 했음
페이지의 일부만 변경하고 싶어도 전체 페이지를 새로 내려주어야 하는 등 굉장히 비효율적
과거의 웹 페이지는 anchor와 table 태그 위주로 구성되어 있어 매우 정적인 페이지면서 간단한 구조였다.
이 때의 웹은 하나의 덩어리로 만들었던 비행기처럼 비교적 단순하여 컴포넌트 개념이 중요하지 않았음
>> 1990년대 후반 AJAX가 등장하면서 웹의 대변화가 시작됨
필요한 데이터만을 전달받고 화면의 일부분만 다시 그려주면서 웹의 성격이 점점 동적으로 바뀜
자바 스크립트를 통해 사용자와 인터랙션을 늘려갈 수 있게되면서 웹은 기존의 비행기와 같이 복잡도가 높아지기 시작함
웹을 작게 쪼개기
복잡한 웹을 작게 나누면 전체페이지에 대한 문제는 작은 element그룹에 대한 문제로 바뀌게 됨
JavaScript를 통해 element그룹을 효율적으로 관리할 수 있기 때문에 복잡한 웹을 구성하는 프론트엔드의 컴포넌트는 element그룹을 반환하는 자바스크립트 함수라고 정의할 수 있음
컴포넌트를 활용하여 웹을 효율적으로 설계해 나갈 수 있게 됨
| 컴포넌트 분리
Atomic Design
화학적 개념을 이용하여 컴포넌트를 분리하는 방법 중 하나
1) Atoms(원자)
아토믹 디자인에서 유저페이스를 구성하는 최소 단위의 블록을 의미
각 원자는 고유한 특성을 갖고 있어 서로 조합하여 더 넓은 방식으로 사용될 수 있음
ex) 검색창을 구성하는 form, input, button 태그와 같은 html 태그들이 해당
2)Molecules(분자)
원자들을 하나의 단위로 동작시키는 UI 컴포넌트
ex) 어떤 목적과 기능도 가지지 않던 button, input, form들이 결합하여 검색을 하기위한 UI컴포넌트가 됨
>> 다른곳에서 재사용이 가능
3) Organisms(유기체)
하나 이상의 책임을 갖거나 반복적인 원자, 분자 조합
특정 영역을 차지하는 기준에 따라 조합할 수 있음
ex) 메인 로고, 검색창, 내 정보보기 버튼들이 존재하는 헤더영역을 유기체로 구성할 수 있음
4) Templates(템플릿)
원자, 분자, 유기체 단계의 컴포넌트들을 배치하는 레이아웃
5) Pages(페이지)
실제 데이터가 Templates에 전달되면 페이지가 완성
아토믹 디자인의 단점
1) 각 계층으로 어떤 요소를 분리해야할지 기준이 모호
2) 5단계의 계층 때문에 원자 요소 하나의 변화가 끼치는 사이드 이펙트가 커짐
3) 화학적 비유가 적용되지 않은 템플릿과 페이지 단계는 재사용되기가 어려움
4) 5단계로 계층을 만드는 데 많은 시간 소요
컴포넌트의 관리
| 디자인 시스템
컴포넌트와 스타일을 관리하는 시스템
ex) 마이크로소프트
Fluent UI에서는 input, button 등 많은 컴포넌트들을 관리
속성들과 테마에 대한 사용법이 문서에 기록되어 있고 버전관리가 꾸준하게 이루어지고 있음
색상, 아이콘, 레이아웃 등의 스타일도 제공하고 있음
>> 이러한 스타일들을 컴포넌트와 조합하여 다양한 인터페이스를 고객에게 제공할 수 있음
스타일 재사용
색상, 아이콘, Typography, 애니메이션
디자인 시스템의 이점
1) 옵션 등의 제약을 통해 디자인 시스템을 이용하는 사람이 올바른 방식으로 컴포넌트를 사용할 수 있도록 안내해줌
2) 여러 프로덕트에서 고객에게 브랜드에 일관된 인터페이스 제공
3) 컴포넌트들을 통합적으로 관리해줄 수 있는 지속성
'IT Study > YouTube 영상 후기' 카테고리의 다른 글
| 10분 테코톡 - Flex Layout (0) | 2022.12.24 |
|---|---|
| 10분 테코톡 - CSS 방법론 (0) | 2022.12.24 |
| 10분 테코톡 - 웹 접근성 & 표준 (0) | 2022.12.24 |
| 10분 테코톡 - 정규 표현식 (0) | 2022.12.24 |
| 10분 테코톡 - 제네릭 (2) | 2022.12.24 |
댓글