[TIL] Atomic Design Pattern

이번 프로젝트는 Atomic Design Pattern으로 해보자고 하셔서 하기로 했다!

들어보긴 했지만 정확히 어떤 건지 몰라 블로그를 쓰면서 정리해보겠다.

그리고 이번 프로젝트는 깔끔하게 나올 거 같아서 기대된다! 🤩

 

Atomic Design Pattern

컴포넌트 관리 방법론

Atom(원자)

• 가장 작은 단위의 컴포넌트이다.
• 원자는 마진이나 위치값을 가지고 있지 않는다.
• Label, Text, Container, Button, Icon

Molecule(분자)

• 원자들로 분자를 만든다.
• 분자가 원자의 위치 값을 지정한다.
• 입력 폼(Input forms), 내비게이션(Navigation), 카드(Card)

Organism(유기체)

• 분자들로 유기체를 만든다.

Template(템플릿)

• 여러 개의 유기체들로 페이지보다는 낮은 단위이다.
• layout이자 하나의 틀이다.

Page(페이지)

• 실제 페이지를 구성한다.

 

프로젝트가 끝난 결과

처음 해봐서 맞게 사용했는지는 확실히 모르겠지만 최대한 규칙에 맞게 하려고 노력했다.

작업 내용에 중복되는 부분이 많아서 단순히 components로 하는 것보다 효율적이었다. 

 

아토믹 디자인 관련 잘 정리된 자료

https://kciter.so/posts/effective-atomic-design