프론트엔드 개발 Atomic Design Pattern

Look! there's a flower!·2024년 4월 16일

Atomic Design Pattern

정의

개발하고자 하는 화면을 더 이상 나눌 수 없는 가장 낮은 단위로 나누고 이를 조합하여 복잡한 페이지를 구성하는 개발 방식으로 컴포넌트의 재활용성을 높일 수 있는 방법으로 효과적임

장점

디자이너가 Atomic design pattern을 이해하는 경우 개발자와 디자이너가 같은 용어를 사용하여 소통할 수 있기 때문에 개발에 효율적임. Atom, Molecule, Organism, Template, Page에 이르기까지의 분해를 Figma 등의 디자인 도구와 맞추어 개발하는 것이 가능

  • 적은 인원으로 빠른 개발 가능
  • 디자이너와 개발자간 협업 용이
  • 중복성을 제거할 수 있어 컴포넌트 재사용성 높음
  • 컴포넌트 관리에 용이
  • 디자인 일관성에 용이

단점

모든 사람이 동의하는 개념적 분해 기준이 있는 것이 아니기 때문에 원자 레벨은 그렇다고 하더라도 상위 레벨로 올라가면서 저마다의 관점으로 Molecule, Organism, Template을 나눌 수 있기 때문에 구성원간 개념 통일이 어려울 수 있음

  • 높은 러닝 커브
  • 통일된 기준이 없어 구성원간 의견 충돌 가능
  • 프로젝트 규모가 커질 수록 유지보수와 관리가 어려워짐
profile
Why don't you take a look around for a moment?

0개의 댓글