Atomic Design Pattern

Atomic Design Pattern

<aside> 💡 효과적인 디자인 시스템을 만드는 것은 모든 것은 진정으로 서로 협력하고 의사 소통하는 사람들에게 달려 있습니다. !!!!

</aside>

디자인 시스템은 하루를 절약합니다. vue, react 모두 컴포넌트 단위로 개발을 진행하여 컴포넌트 중심 설계 패턴이 주목 받게 되었다.

아토믹 패턴은 2013년 6월에 Brad Frost에 의해 처음으로 제시된 디자인 패턴이며, 패턴을 소개할 때 디자인 시스템을 위한 것이라는 점을 소개한다.

아토믹 패턴은 프론트엔드 시스템을 구성하는 컴포넌트들을 논리 구조 단위로 나누어 효율적으로 재사용하고 불필요한 코드 중복을 제거하여 클린한 아키텍처를 유지할 수 있도록 한다. 한마디로 컴포넌트를 재사용성이 강하고, 단단하게 잘 설계함으로서 점진적으로 지속적으로 개발하기 용이하다.

방법론

아토믹 디자인 패턴은 Atoms(원자), Molecules(분자), Organisms(유기체), Templates(템플릿)으로 구성되어지고 최종적으로는 Pages단위가 된다.

• Atoms(원자)
  • 원자는 모든 사용자 인터페이스를 구성하는 기본 빌딩 블록 역할한다 . 이러한 원자에는 양식 레이블, 입력, 버튼 및 기능을 중단하지 않고는 더 이상 분류할 수 없는 기타 요소와 같은 기본 html 요소 포함
• Molecules(분자)
  • 인터페이스에서 분자는 하나의 단위로 함께 작동하는 UI 요소의 비교적 단순한 그룹입니다 . 예를 들어 양식 레이블, 검색 입력 및 버튼을 함께 결합하여 검색 양식 분자를 만들 수 있습니다.
  • 간단한 UI 분자를 만들면 테스트가 더 쉬워지고 재사용이 가능하며 인터페이스 전체에서 일관성이 향상됩니다.
  • ex)검색 형태의 분자는 레이블 원자, 입력 원자 및 버튼 원자로 구성됩니다.
• Organisms(유기체)
  • 유기체는 분자 및/또는 원자 및/또는 기타 유기체 그룹으로 구성된 비교적 복잡한 UI 구성요소입니다 . 이 유기체는 인터페이스의 별개 섹션을 형성합니다.
  • ex) header, 분자들의 모음집
• Templates(템플릿)
  • 템플릿은 구성 요소를 레이아웃에 배치하고 디자인의 기본 콘텐츠 구조를 명확하게 표현하는 페이지 수준 개체입니다.
• Page
  • 페이지는 실제 대표 콘텐츠가 있는 UI가 어떻게 보이는지 보여주는 템플릿의 특정 인스턴스입니다

장점

• Atomic Design은 시간이 많이 소요될 수 있지만 전체 팀이 이점을 활용할 수 있다.
• props 를 이용한 다양한 UI 를 사용할 수 있어 편리
• 이해도가 많이 필요하며, 러닝커브가 높음
• UI 변화에 유연하지 않다. → 유연하게 하려면, 많은 props 가 필요 ..
• 직관적인 네이밍으로 컴포넌트로 짜여진 구조 파악이 좋음

단점

• 초반 설계에 시간이 많이 소요된다.
• 디자이너, 기획자와 많은 커뮤니케이션이 필요하다 ...
• 방대한 양의 컴포넌트를 만들시 네이밍 및 파악이 어려울 수 있음.
• 부모로 부터 하위 컴포넌트에게 스타일을 지정하는 방법이 제한적

라인 적용기 - https://www.youtube.com/watch?v=33yj-Q5v8mQ