logo

Atomic Design과 BEM (ABEM)

ABEM = Atomic Design + BEM

javascript, react

많은 분들이 소프트웨어에서 아키텍처와 디자인은 늘 중요하다고는 말하지만 잘 간과하곤 합니다. 사실 그렇게 간과하더라도 추상적으로, 그리고 말로만 알고 있는 그 중요성을 새로운 기능 추가 및 수정을 비롯한 다양한 요구사항을 겪으며 여러 프로젝트를 거치다보면 결국에는 알게 됩니다.

거의 모든 것을 아키텍처와 디자인이 좌우한다라는 것을 말입니다.

왜 중요할까?

빨리가는 유일한 방법은 제대로 가는 것이다.

- 로버트 C 마틴

이는 결국 효율성, 그리고 생산성의 이야기입니다. 제대로 된 아키텍처와 디자인일수록 소프트웨어의 복잡도는 줄어들고 변경이나 추가되는 기능들의 개발을 더욱더 수월하게 만듭니다. 뿐만아니라 협업을 하는 당사자들간의 의사소통을 원활하게 해줍니다. 그리고 위험요소를 최소화할 수 있으며 미래의 불확실성 또한 줄일 수 있습니다.

이런 이유로 이번 주제는 Front-end에서 UI 컴포넌트의 시스템 구축에 쓰이는 디자인 방법론을 얘기하고자 합니다.

Atomic Design

Atomic

Atomic Design이란 브래드 프로스트라는 디자이너가 2013년에 제시한 개념이자 방법론입니다. 딱히 소프트웨어를 염두하고 만든 것은 아니나 컴포넌트 단위로 개발되는 Front-end의 UI 계층을 디자인하는데는 안성맞춤이라 널리 퍼지게 되었습니다.

Atomic Design은 Atoms(원자), Molecules(분자), Organisms(유기체), Templates(템플릿), Pages(페이지)로 구성됩니다.

Atoms (원자)

  • UI의 최소 단위
  • 재사용을 위한 최소 단위이니 가장 단순 역할을 담당해야함
  • Button이나 Input, Label과 같은 기초적인 컴포넌트

Atoms

Molecules (분자)

  • 2개 이상의 Atom으로 구성되어 그룹화된 컴포넌트
  • Atom의 결합으로 보다 구체적인 작은 블록 형태
  • InputGroup = Input + Label

Molecules

Organisms (유기체)

  • Molecule과 Atom을 조합하여 하나의 큰 블록 형태
  • 큰 단위의 시작점이라 여기서부터는 재사용성이 다소 떨어짐
  • Header = InputGroup + Menu+ Button

Organisms

Templates (템플릿)

  • 레이아웃으로 하나의 틀이자 설계도
  • 배치되거나 포함된 컴퍼넌트가 없는 페이지의 골격 구조

Templates

Pages (페이지)

  • Template에 Atom, Molecule, Organism을 배치한 완성본
  • Template이라는 일종의 양식이 적용된 최종 산출물

Pages

BEM

BEM (Block Element Modifier)은 CSS를 보다 쉽게 유지 관리 할 수 도와주는 CSS 디자인 방법론입니다. 네이밍 컨벤션이기도 하는 BEM은 CSS를 다루는 것이라 이미 예전부터 많은 곳에서 사용되고 있습니다.

BEM은 단어 구분을 kebab-case로 사용하며 그 이름과 같게 Block, Element, Modifier로 구성되어 있습니다.

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>
.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

Block

  • 독립적인 단위
  • 클래스 첫머리에 위치

Element

  • Block에 일부이며 종속적
  • 독립적인 의미는 없음
  • Block과 Element 사이는 Underscore를 사용

Modifier

  • Block 또는 Element에 대한 플래그, 동작 또는 상태를 변경하는데 사용
  • 속성이라고 할 수 있음
  • Element와 Modifier 사이는 두개의 Hyphen을 사용
  • 클래스 끝머리에 위치

ABEM

ABEM은 Atomic Design과 BEM의 조합입니다. BEM의 단점인 긴 Modifier를 축약형으로 바꾸고 클래스 첫머리를 Atomic일 경우 a-, Molecule일 경우 b- 와 같이 각각의 단위 첫글자를 따서 사용합니다.

그리고 단어 구분을 kebab-case를 사용하는대신 camelCase를 사용합니다.

<!-- BEM -->
<button class="block-name__element-name block-name__element-name--small block-name__element-name--green block-name__element-name--active">
  Submit
</button>

<!-- ABEM -->
<button class="a-blockName__elementName -small -green -active">
  Submit
</button>

정리

빠르게 변화하는 개발 환경 속에 더 나은 방법론이 대두될 수도 혹은 직접 만들 수도 있습니다. 직접 원칙을 정한 설계가 물론 더 좋을 순 있지만 Atomic Design + BEM을 도입함으로써 그 고민의 과정을 좀 더 줄일 수 있습니다.

어떻게 구조를 설계해야 할 지 고민하고 있다면 Atomic Design + BEM을 한번 도입해보는 게 어떨런지요?

참고 자료