[디자인 시스템] Atomic Design 활용하여 효율적인 디자인하기

갈수록 재사용, 확장 가능한 구조가 대두되는 가운데 이를 도와주는 것 중 하나가 컴포넌트일 것이다.

하지만 컴포넌트 설계 시 따라오는 문제로는 각자가 생각하는 규칙이 다르고 그로 인해 오히려 재사용이 불가하게 되는 경우도 생긴다.

 

이런 문제를 해결하기 위해 디자인 시스템을 도입하는 회사가 많아졌다.

 

 

---

1. 디자인 시스템이란?

디자인 시스템은 디자인 원칙과 규격, 재사용할 수 있는 UI 패턴과 컴포넌트, 코드를 포괄하는 시스템을 의미한다.

쉽게 말해 코드 상의 재사용을 위해 컴포넌트를 만들었듯이 디자인에서도 재사용이 가능한 디자인 부품을 먼저 만들어서 조립하는 방법이라고 생각하면 좋다.

 

2. Atomic Design이란?

Atomic Design은 화학 상의 원자와 같이 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)로 효과적인 인터페이스 시스템을 만든다.

2-1. Atoms - 원자

• 가장 작은 단위의 컴포넌트이다.
• 다양한 state(상태, 색상, 폰트 등)가 포함될 수 있다.
• 보통 추상적인 개념을 표현할 수 있기에 단일 컴포넌트로의 사용에 어려움이 있다.
• 대표적으로 버튼, 텍스트, 아이콘 등이 있다.

 

2-2. Molecules - 분자

• 2개 이상의 atom으로 구성되어 있다.
• 분자의 특징처럼 원자끼리의 구성으로, 특정 행동을 한다.
• 대표적으로 입력 폼, 내비게이션 등이 있다.

 

2-3. Organisms - 유기체

• 분자들의 결합으로 구성되어 있다.
• 앞단계보다 보타 명확한 영역과 특정 컨텍스트를 가진다.
• 그렇기에 상대적으로 재사용성이 낮아지는 특성이 있다.

 

2-4. Templates - 템플릿

• 여러개의 유기체의 결합으로 구성되어 있다.
• 실제 컴포넌트를 레이아웃에 배치하고 구조를 잡는 단계이다.
• 즉, 실제 콘텐츠만 없을 뿐인 스켈레톤 상태이다.

 

2-5. Pages - 페이지

• 템플릿 배치를 통해 완성된 하나의 페이지이다.
• 유저가 볼 수 있는 실제 콘텐츠가 담겨 있다.

 

※주의※

이렇게 단계별로 설명하니 하나의 프로세스로 진행되는 것처럼 보이지만 사실은 멘탈 모델(정신적 모델)이다.

---

 

3. 장/단점

Atomic Design을 도입한 사례들의 장/단점을 취합해보았다.

 

3-1. 장점

• 자주 사용하는 단위의 컴포넌트 제작을 통한 재사용성 극대화 => 디자인 통일성 증가
• Storybook을 활용한 UI/UX 확인 및 테스트 가능
• 협업 시 원활한 소통 (ex. "Primary Button"과 같이 컴포넌트의 네임만으로 소통 가능)

 

3-2. 단점

• 각 step의 명확한 기준 규정의 어려움
• 계층 구조로 인한 props drilling의 우려

 

---

 

4. 재사용의 극대화

대부분의 컴포넌트는 재사용을 위해 제작되지만 스타일적인 측면에서 재사용성은 미흡한 경우가 많다.

주로 공통 컴포넌트와 함께 공통 스타일이 선언되기에 이에 대한 가변적인 스타일 적용 시 스타일을 덮어씌우는 등의 작업을 하기도 한다.

 

이를 방지하고 재사용을 극대화하기 위해 margin, padding과 같은 스타일을 컴포넌트에서 정의하지 않고 컴포넌트를 사용하면서 주입하는 방법이 있다.

아래 예시는 레퍼런스 페이지에서 가져온 것이다.

// organism/Comment.tsx
interface CommentProps extends HTMLAttributes<HTMLDivElement> {
  name: string;
}

function Comment({ name, children, ...props }: CommentProps) {
  return (
    <div {...props}>
    	<Text>{name}</Text>
      <Text>{children}</Text>
    </div>
  )
}

// pages/Product.tsx
function ProductPage ({
  commentList,
  ...
}) {
  return (
    <div>
      ...
      {
        commentList.map(comment => <Comment style={{margin: '20px 40px', flex: 1}}/>)
      }
    </div>
  )
}

// pages/Comment.tsx
function CommentPage({
  ...
}) {
  return (
    <div>
      ...
      <Comment style={{ width: '80%', margin: '0 auto'}}>
    </div>
  )
}

 

 

---

 

현재 프로젝트에서 Atomic Design을 도입하고자 하는데 더욱 효율적인 방법/규칙에 대해 고민해봐야겠다.

 

 

[레퍼런스]

https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/

아토믹 디자인을 활용한 디자인 시스템 도입기 | 카카오엔터테인먼트 FE 기술블로그