# Atomic Design

## 1. Background of Atomic Design

* Providing consistent user experience becomes more important as web environments are provided across various devices
* As project scale grows, the importance of managing design elements and maintaining UI consistency emerges
* A frontend development methodology emerged by web designer Brad Frost, aiming to build a consistent design system by breaking down UI into the smallest units like atoms (the smallest unit of matter), combining them, and gradually expanding them

\


## 2. Components of Atomic Design

### Atoms

* Refers to the most basic design elements that cannot be broken down further
* Examples include inputs, labels, icons, buttons, etc.

### Molecules

* Collections of UI where atoms come together to work as a single unit
* Molecules are intermediate stages where atoms combine to form more complex structures
* Just as the purpose (input value) of a molecule changes according to its title, molecules can be reused according to their function

### Organisms

* Unlike molecules composed of atoms, organisms are slightly more complex UI components that can be composed of atoms, molecules, and even other organisms
* Generally specific sections of pages, e.g., headers and sidebars

### Templates

* Elements that constitute page-level layouts
* If you've created elements to go into pages using atoms, molecules, and organisms, templates define the arrangement of these elements and the overall structure of the page to provide a consistent user experience
* In other words, you can define how elements are arranged and interact

### Pages

* In atomic design, separation of data and design is important, so pages are distinguished from templates as elements where data and design are combined, with templates being simple collections of UI elements without data
* Therefore, pages contain the completed UI appearance as elements where actual content is filled into copied templates
* Thus, pages in atomic design can be seen as the most concrete stage and allow confirmation of the final result shown to users

\


## 3. Advantages of Atomic Design

* Modularity and reusability
* Convenience of maintenance
* Scalability
