IT
[TIL] Atomic Design Pattern
솔B
2022. 3. 2. 23:01
이번 프로젝트는 Atomic Design Pattern으로 해보자고 하셔서 하기로 했다!
들어보긴 했지만 정확히 어떤 건지 몰라 블로그를 쓰면서 정리해보겠다.
그리고 이번 프로젝트는 깔끔하게 나올 거 같아서 기대된다! 🤩
Atomic Design Pattern
컴포넌트 관리 방법론
Atom(원자)
- 가장 작은 단위의 컴포넌트이다.
- 원자는 마진이나 위치값을 가지고 있지 않는다.
- Label, Text, Container, Button, Icon
Molecule(분자)
- 원자들로 분자를 만든다.
- 분자가 원자의 위치 값을 지정한다.
- 입력 폼(Input forms), 내비게이션(Navigation), 카드(Card)
Organism(유기체)
- 분자들로 유기체를 만든다.
Template(템플릿)
- 여러 개의 유기체들로 페이지보다는 낮은 단위이다.
- layout이자 하나의 틀이다.
Page(페이지)
- 실제 페이지를 구성한다.
프로젝트가 끝난 결과
처음 해봐서 맞게 사용했는지는 확실히 모르겠지만 최대한 규칙에 맞게 하려고 노력했다.
작업 내용에 중복되는 부분이 많아서 단순히 components로 하는 것보다 효율적이었다.
아토믹 디자인 관련 잘 정리된 자료