Atomic Design Pattern (아토믹 디자인 패턴)

디자인 패턴

써치킴 2024. 10. 7. 13:04

컴포넌트를 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)의 레벨로 나누어 관리하는 방법론이다.

컴포넌트를 5개의 레벨에 나누어 잘게 쪼개고 결합함으로써 컴포넌트의 재사용성을 향상시킨다.

Atomic Design Pattern에서 가장 작은 컴포넌트 단위 (더 이상 쪼갤 수 없는 최소 단위)

대표적인 원자 컴포넌트로는 Label, Text, Input Field, Button, Icon 등이 있다.

원자 컴포넌트 다음 단계로 하나의 단위로 동작하는 컴포넌트들의 단순한 그룹.

원자가 모여서 만들어지며, 최소 1가지 기능을 수행한다.

Input Form, Navigation, Card, Search Component (Field + Search Button) 등이 있다.

원자와 분자들을 모아 만들어지고, 사용자에게 의미와 역할이 존재하는 단위.

개별적인 인터페이스 영역을 차지한다.

LoginInput, LoginStatusToggle, button을 합친 LoginComponent

유기체가 모여 만들어지고, 실제 데이터가 포함되기 전의 컨텐츠의 최종 레이아웃.

컴포넌트를 어떻게 배치할 것인지에 대한 설계를 보여준다.

템플릿은 속한 element들의 배치만을 지정한다.

즉, styling, coloring 등의 작업은 템플릿의 하위 레벨에서 개별 컴포넌트가 알아서 처리한다.

템플릿을 사용하여 구체적인 내용을 그려 최종적으로 사용자에게 완성된 페이지.

어플리케이션과 분리된 컴포넌트 개발이 가능하다.
컴포넌트 재사용성이 높아진다. 컴포넌트 재사용성이 높아진다는 것은 수정 혹은 확장에 유연하다는 의미, 그리고 디자인에서 일관성을 가질 수 있다.