Atomic Design Pattern이란 무엇인가

서론

입사 후 온보딩을 진행하며 과제를 수행하고 있습니다. 과제 요구 사항 중 하나는 Atomic Design Pattern을 반드시 따라야 한다는 점이었습니다. 지금까지 개인적인 프로젝트를 진행하면서 디자인 원칙이나 디자인 시스템을 고려 해야겠다고 생각했지만, 실제로 적용해 본 경험은 없었습니다. 이번 기회에 간단한 디자인 시스템을 구축해보며 Atomic Design Pattern을 실제로 이해해보고 실습하는 시간을 가져보고자 합니다.

Atomic Design Pattern 이란

원문 참고

Atomic Design은 웹 및 애플리케이션 디자인에 사용하는 디자인 패턴으로 원자, 분자, 유기체, 템플릿, 페이지라는 5개의 계층으로 사용자 인터페이스 단계를 분리하여 보다 효과적이고 일관성 있는 디자인을 만드는 데 도움을 줍니다. 또한 사용자 인터페이스를 일관성 있고 재사용 가능한 구성 요소로 나눠 작업 효율성을 높일 수 있습니다.

현실 세계의 모든 것들은 더 이상 쪼개지지 않는 Atom으로 이루어져 있고, 그 Atom들이 모여 molecule이 되고, 다시 그 molecule들이 모여 organism이 되는데 이러한 개념을 가져와 디자인 시스템에 접목 시켰다고 이해하시면 됩니다. 간단하게는 위와 같은 사진으로 표현할 수 있습니다, 아래는 Atomic Design 요소에 대한 설명입니다.

• 원자(Atoms) : 원자는 더 이상 쪼개지지 않는 가장 기본적인 블록입니다. 주로 HTML 태그, 즉 UI의 가장 작은 구성 요소로 이루어집니다. 버튼, 입력 필드 등의 기본적인 HTML 태그를 생각하면 됩니다.

• 분자(Molecules) : 분자는 여러 원자가 결합해 좀 더 복잡한 구성 요소를 형성합니다. 예를 들어, 검색 폼은 '레이블' 원자와 '입력 필드' 원자, 그리고 '버튼' 원자가 결합하여 생성될 수 있습니다. 분자는 독립적으로 사용할 수 있으며 더 복잡한 구조를 만드는 데 사용될 수 있습니다.

• 유기체(Organisms) : 유기체는 여러 분자와 원자가 결합하여 구성됩니다. 이렇게 만든 유기체는 높은 수준의 구성 요소를 이룹니다. 예를 들어, 헤더는 로고 원자, 메뉴 분자, 검색 입력 분자 등이 결합하여 형성될 수 있습니다. 기본적으로 유기체는 독립적인 부분, 즉 원자와 분자로 이루어진 복잡한 UI 요소입니다.

• 템플릿(Templates) : 템플릿은 이러한 유기체, 분자, 원자가 결합하여 전체 페이지 레이아웃을 형성합니다. 이 단계에서는 콘텐츠나 데이터를 레이아웃에 적용하지 않고 웹 페이지의 구조를 결정합니다.

• 페이지(Pages) : 페이지는 템플릿에 실제 콘텐츠와 데이터가 적용되어 완성된 디자인입니다. 이 단계에서 웹사이트의 실제 외형이 결정됩니다.

이렇게 Atomic Design 패턴을 적용하면 개별 구성 요소가 어떻게 결합하여 완전한 디자인을 형성하는지 명확하게 이해할 수 있습니다. 또한 일관된 사용자 경험을 제공하고, 재사용 가능한 컴포넌트를 만들어 작업 효율성을 높일 수 있으며, 개발과 디자인 팀 간의 커뮤니케이션 또한 개선될 수 있습니다.

설계

이제 Atomic Design Pattern 원리를 머릿속에 의식하며 StoryBook을 이용해 실습해봅시다. StoryBook은 사용자 인터페이스를 구성하는 각 컴포넌트를 독립적으로 개발하고 테스트해 볼 수 있는 도구입니다. Atomic Design Pattern으로 디자인 시스템을 구축함에 있어서, 스토리북은 각 컴포넌트들을 재사용 가능하게 만드는데 있어 중요한 역할을 합니다.

Atomic Design Pattern은 일종의 구성 원리로 하나의 큰 디자인을 작은 단위로 분리하고 그 단위들을 적절하게 조합하여 복잡한 디자인 시스템을 만들어내는 방법론입니다. 그러나, 이렇게 분리된 각 기능 단위들을 어떻게 관리하고 효과적으로 재사용할 수 있을지에 대한 고민이 생깁니다.

여기서 스토리북이 필요한 이유가 나오게 됩니다. 스토리북은 각 기능 단위, 즉 원자, 분자, 유기체 등 각각의 컴포넌트를 독립적으로 관리하고 테스트할 수 있게 만들어줍니다. 각 컴포넌트들을 스토리북에서 독립적으로 실행하며 그 동작을 검사해 볼 수 있어, 컴포넌트 구조가 복잡해질수록 기능 검증에 효과적이며, 작은 단위로 개발할 수 있으므로 관점을 점진적으로 확대하여 원자부터 유기체까지 개발할 수 있습니다.

Atomic Design에서는 특정 컴포넌트가 한 곳에서만 사용되기보다는, 여러 곳에서 공통적으로 사용될 때 더 큰 효율을 발휘합니다. 이를 위해, 구현하려는 프로젝트에서 공통적으로 사용되는 요소들을 구분하는 UI 인벤토리 작업을 진행했습니다. 이를 바탕으로 다음과 같은 컴포넌트를 설계하려고 합니다.

컴포넌트 #1

특징

• 모든 아이템의 크기(size)는 동일합니다.
• props로 카테고리 이름을 전달받습니다.
• 클릭 시 배경색이 빨강색으로 변하는 onClick 이벤트 역시 props 형태로 전달받아 처리합니다.

구성

• Text 원자 컴포넌트와 이를 감싸는 Box를 결합한 분자 단위로 제작합니다.

컴포넌트 #2

특징

• props로 가격, 제목, 부제목, 이미지를 전달받습니다.
• 각 아이템은 분자 단위로 제작되며, 이를 감싸는 외부 Box는 유기체 단위로 구성할 예정입니다.

실습

코드

const meta = {
  title: 'Components/Text',
  component: Text,
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text' },
    className: { control: 'text' },
    type: {
      control: 'select',
      options: Object.keys(TextType),
      mapping: TextType,
    },
  },
} satisfies Meta<typeof Text>
 
export default meta
type Story = StoryObj<typeof meta>
 
export const TextStory: Story = {
  args: {
    label: '가나다라바마사',
  },
}

export enum TextType {
  TITLE = 'TITLE',
  SUBTITLE = 'SUBTITLE',
  GRAY_DESC = 'GRAY_DESC',
  DESC = 'DESC',
}
 
export const TextTypeStyle: { [key in TextType]: string } = {
  [TextType.TITLE]: 'text-xl md:text-2xl font-semibold',
  [TextType.SUBTITLE]: 'text-lg font-semibold md:text-xl',
  [TextType.DESC]: 'text-xs md:text-sm',
  [TextType.GRAY_DESC]: 'text-xs md:text-sm text-gray-500',
}

interface TextProps {
  type?: TextType
  label: string
  className?: string
}
 
export const Text = ({ type = TextType.DESC, label, className }: TextProps) => {
  const TextTypeClass = useMemo(() => {
    if (type) {
      return TextTypeStyle[type]
    }
    return ''
  }, [type])
 
  return <div className={cn(className, TextTypeClass)}>{label}</div>
}

학습 후기

스토리북과 Atomic Design 패턴을 사용하면서 가장 큰 이점은 복잡한 코드를 빠르게 파악하고 테스트할 수 있다는 것 입니다. 다양한 계층의 컴포넌트를 스토리북을 통해 한눈에 파악하고, 실시간으로 작동확인이 가능하기 때문에 개별 컴포넌트를 더 신중하게 작성하게 되고, 이렇게 작성된 컴포넌트들이 잘 작동되는지 검증하는데 유용할 것 같다고 생각합니다.

또한 컴포넌트에 대한 이해도가 높아졌습니다. 원자에서 유기체까지 각 컴포넌트 단계를 만들어가면서 어떤 프로퍼티를 사용하면 재사용성이 높아지고, 전체 시스템에서 안정성을 유지할 수 있는지 고민하고 적용해 볼 수 있었던 시간이었습니다.

다만, 아쉬운 점은 처음 Atomic Design 패턴을 적용하고 스토리북을 설정하면서 시간이 많이 소요되었다는 점입니다. 하지만 설계와 작은 단위(원자) 컴포넌트 제작 이후에는 시간을 크게 절약해주고 코드의 품질 또한 높여주었기 때문에, 결과적으로는 시간 들인만큼 결국 좋은 결과를 가져다주었다고 생각합니다.

@banhogu

안녕하세요 배움을 나누며 함께 전진하는 1년차 주니어 개발자 방호진입니다.