개발 문제점
중복 작업, 일관성 부족, 수정의 어려움 등
Design System
- 어떤 조직이 디지털 인터페이스를 디자인하고 구축하는 방식
- ui 컴포넌트 시스템, 타이포그래피 시스템, 컬러 팔레트 시스템, 레이아웃/ 그리드 시스템 등 여러 하위 시스템 포함
Atomic Design
- 디자인 시스템을 만드는 방법론
- 컴포넌트를 가장 작은 단위로 설정하고 이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화하는 방법론
- 각 단계가 선형적으로 진행되는 것이 아니고 계층으로 구분된 개념
Atomic Design Components
Atoms(원자)
가장 작은 단위의 컴포넌트이다. (디자인과 기능의 최소 단위)
다양한 state 즉 상태, 색상, 폰트, 애니메이션과 같은 추상적인 요소가 포함될 수 있다.
대표적인 컴포넌트는 버튼(Button), 텍스트(Text), 아이콘(Icon) 등이 있다.
Molecules(분자)
2개 이상의 원자로 구성되어 있다.
하나의 단위로 함께 동작하는 UI 컴포넌트들의 단순한 그룹이다.
대표적인 컴포넌트는 입력 폼(Input Form), 내비게이션(Navigation), 카드(Card) 등이 있다.
Organism(유기체)
분자들을 결합하여 유기체를 형성 (분자가 되지 않은 원자도 포함)
인터페이스가 어떻게 보이는지 시작하는 단계
대표적인 컴포넌트는 입력 폼과 함께 헤더를 감싸거나, 카드를 관리하는 그리드 등이 있다.
템플릿(Templetes)
여러 유기체의 집합
디자인을 확인하고 레이아웃이 실제로 구동하는지 확인하는 단계
대표적인 컴포넌트는 여러 카드와 그리드를 묶는 템플릿(헤더, 메인, 푸터) 등이 있다.
Page(페이지)
템플릿을 이용해서 배치를 통해 컴포넌트를 그려서 디스플레이한다.
완성된 하나의 페이지이다.
Atomic Design 장점
- 부분과 전체의 조화
- 구조와 내용의 명확한 분리
- 단일 책임
- 재사용성 및 일관성
- 테스트 용이
- 유지보수 용이
- 디자이너 협업 용이
Atomic Design 단점
- 세분화로 인한 복잡성
- 구축하기 위한 시간과 비용
- 분류 기준의 주관성
'Computer Science > Tech' 카테고리의 다른 글
| vscode 폴더목록 파일목록 안보일때 (0) | 2023.09.12 |
|---|