Atomic design

yeong·2022년 6월 30일
1
post-thumbnail

react를 공부하면서 자주 보이는 용어중 하나는 바로 Atomic design Parttern이다.

Atomic design이란?

Atomic design
일종의디자인 시스템을 만드는 하나의 방법론으로 가장 작은 컴포넌트를 원자 단위로 설정하고이를 바탕으로 상위 컴포넌트를 만들어 재사용을 최대화하는 방법론이다. 컴포넌트는 순서대로 원자, 분자, 유기체, 템플릿, 페이지의 단계로 구분된다.

즉 컴포넌트들을 효율적으로 사용하기 위한 일종의 체계라고 할 수 있다.
각 단계에 대해 좀 더 자세히 살펴보면

Atom(원자)

디자인과 기능의 최소 단위이다. 더 이상 분해할 수 없어야 하며 일반적으로 버튼, 아이콘등이 여기에 해당한다.
원자 단위의 컴포넌트는 그자체로 사용하는 경우가 많이 없으며 atom단위를 서로 결합해서 분자 혹은 유기체 단위로 사용한다

Molecule(분자)

원자보다 큰 단위로 여러개의 atom이 결합되어 형성된다.
예를들어 입력폼 atom단위인 버튼과 input을 결합해서 만들어진다. 이러한 form은 Molecule라고 할 수 있다.

Organism(유기체)

Atom, Molecule 보다는 좀 더 복잡한 구조로 여러개의 atom, molecule이 결합하여 형성된다. 명확하게 그 범위를 정의할 수는 없으나 그 자체로 이미 충분한 기능을 형성하며 상대적으로 재사용성이 낮다.

Template(템플릿)

여러개의 atom, molecule,Organism 이 결합하여 형성된다. 페이지에 가까운 형태이며 일종의 와이어프레임이라고 할 수 있다.

Page(페이지)

실제 유저가 보게되는 화면 , 페이지이다.

아토믹 디자인 패턴의 단점

애플리케이션의 규모가 점점 커질수록 아토믹 디자인패턴의 불편함이 발생한다. 이유는 크게 2가지로 정리할 수 있다.

1. 비용이 높다.

학습비용, 시간적 비용 모두 해당한다. 아토믹 디자인 패턴을 적용한 환경에서 새롭게 page를 구성하기 위해서는 대부분의 작은 단위의 컴포넌트들을 학습하고 알아야한다. 그래야 불필요한 중복을 막고 올바른 아토믹 디자인 패턴을 적용했다고 할 수 있다.

2. 유연성이 부족하다.

작은 컴포넌트 단위이기때문에 자유롭지만 사실 그렇기 때문에 고민이 발생한다.
예를들어 글씨만 있는 버튼 컴포넌트가 존재하는데 버튼에 아이콘을 추가해달라는 새로운 요구사항이 생겼다. 이미 작은 단위이기때문에 이것을 더 작은 단위로 쪼개는 것은 불가능하다.
대신 선택할 수 있는 방법은 여러가지가 있다.

  1. 아이콘이 들어있는 버튼컴포넌트를 새롭게 만든다
  2. 버튼의 props를 추가해 아이콘 지정여부를 결정한다.

모두 간단한 방법이다. 그러나 이렇게 추가적인 요구사항이 증가할 수록 점점 컴포넌트의 갯수 혹은 그 복잡도는 증가하게 된다.
이러한 경우 사용할 수 있는 방법이 복합 컴포넌트이다.

복합컴포넌트란?

복합 컴포넌트란, 구성요소들이 백그라운드에서 서로 통신할 수 있도록 암시적인 상태를 공유하도록 하는 패턴이다.
즉 여러 구성요소가 함께 작동하며 상태를 공유하는 경우, 복합 구성 요소라고한다.

가장 대표적이며 익숙한 복합 구성 요소는 select 와 option이다. 두 구성 요소는 따로 사용하지만 서로 상태를 공유하고 있다.

복합 컵포넌트는 컴포넌트 사이 관계를 표현할 수 있는 매우 좋은 방법이다.
복합 컴포넌트의 중요한 점 중 하나는 암시적인 상태라는 것이다. select는 option의 상태를 저장하고 해당 상태를 하위요소와 공유한다. 그러나 직접적으로 해당 코드에 접근할 수는 없기 때문에 암묵적이라고 할 수 있다.

Ref :
Understanding React compound components
아토믹 디자인을 활용한 디자인 시스템
아토믹 컴포넌트 디자인 개발 패턴

profile
안녕하세요!

0개의 댓글