<div id="readability-page-1" class="page"><div data-astro-cid-4eu74nwj=""> <article data-astro-cid-4eu74nwj=""> <header data-astro-cid-4eu74nwj=""> <h2 data-astro-cid-4eu74nwj="">ABEM = Atomic Design + BEM</h2> <a href="/blog/tags/javascript-react" data-astro-cid-4eu74nwj="">javascript, </a><a href="/blog/tags/javascript-react" data-astro-cid-4eu74nwj="">react</a> <time datetime="2020-11-20" data-astro-cid-4eu74nwj="">2020-11-20</time> </header> <hr data-astro-cid-4eu74nwj=""> <section data-astro-cid-4eu74nwj=""> 많은 분들이 소프트웨어에서 아키텍처와 디자인은 늘 중요하다고는 말하지만 잘 간과하곤 합니다.
사실 그렇게 간과하더라도 추상적으로, 그리고 말로만 알고 있는 그 중요성을 새로운 기능 추가 및 수정을 비롯한 다양한 요구사항을 겪으며 여러 프로젝트를 거치다보면 결국에는 알게 됩니다.
거의 모든 것을 아키텍처와 디자인이 좌우한다라는 것을 말입니다.
<h2 id="왜-중요할까">왜 중요할까?</h2>
<blockquote>
빨리가는 유일한 방법은 제대로 가는 것이다.
- 로버트 C 마틴
</blockquote>
이는 결국 효율성, 그리고 생산성의 이야기입니다. 제대로 된 아키텍처와 디자인일수록 소프트웨어의 복잡도는 줄어들고 변경이나 추가되는 기능들의 개발을 더욱더 수월하게 만듭니다.
뿐만아니라 협업을 하는 당사자들간의 의사소통을 원활하게 해줍니다. 그리고 위험요소를 최소화할 수 있으며 미래의 불확실성 또한 줄일 수 있습니다.
이런 이유로 이번 주제는 Front-end에서 UI 컴포넌트의 시스템 구축에 쓰이는 디자인 방법론을 얘기하고자 합니다.
<h2 id="atomic-design">Atomic Design</h2>
<img alt="Atomic" loading="lazy" decoding="async" fetchpriority="auto" width="1479" height="255" src="https://lannex.github.io/_astro/atomic-design.CxLosu-t_Z133wPM.svg">
Atomic Design이란 브래드 프로스트라는 디자이너가 2013년에 제시한 개념이자 방법론입니다. 딱히 소프트웨어를 염두하고 만든 것은 아니나 컴포넌트 단위로 개발되는 Front-end의 UI 계층을 디자인하는데는 안성맞춤이라 널리 퍼지게 되었습니다.
Atomic Design은 Atoms(원자), Molecules(분자), Organisms(유기체), Templates(템플릿), Pages(페이지)로 구성됩니다.
<h3 id="atoms-원자">Atoms (원자)</h3>
<ul>
<li>UI의 최소 단위</li>
<li>재사용을 위한 최소 단위이니 가장 단순 역할을 담당해야함</li>
<li>Button이나 Input, Label과 같은 기초적인 컴포넌트</li>
</ul>
<img alt="Atoms" loading="lazy" decoding="async" fetchpriority="auto" width="1600" height="840" src="https://lannex.github.io/_astro/atoms.DYx8lrUH_Zhf0zC.webp">
<h3 id="molecules-분자">Molecules (분자)</h3>
<ul>
<li>2개 이상의 Atom으로 구성되어 그룹화된 컴포넌트</li>
<li>Atom의 결합으로 보다 구체적인 작은 블록 형태</li>
<li>InputGroup = Input + Label</li>
</ul>
<img alt="Molecules" loading="lazy" decoding="async" fetchpriority="auto" width="1600" height="840" src="https://lannex.github.io/_astro/molecules.DvtrcxN9_Z1q8plL.webp">
<h3 id="organisms-유기체">Organisms (유기체)</h3>
<ul>
<li>Molecule과 Atom을 조합하여 하나의 큰 블록 형태</li>
<li>큰 단위의 시작점이라 여기서부터는 재사용성이 다소 떨어짐</li>
<li>Header = InputGroup + Menu+ Button</li>
</ul>
<img alt="Organisms" loading="lazy" decoding="async" fetchpriority="auto" width="1600" height="840" src="https://lannex.github.io/_astro/organisms.2PC60LCR_1i5YUs.webp">
<h3 id="templates-템플릿">Templates (템플릿)</h3>
<ul>
<li>레이아웃으로 하나의 틀이자 설계도</li>
<li>배치되거나 포함된 컴퍼넌트가 없는 페이지의 골격 구조</li>
</ul>
<img alt="Templates" loading="lazy" decoding="async" fetchpriority="auto" width="1600" height="840" src="https://lannex.github.io/_astro/templates.CJ5u1mna_q32Nu.webp">
<h3 id="pages-페이지">Pages (페이지)</h3>
<ul>
<li>Template에 Atom, Molecule, Organism을 배치한 완성본</li>
<li>Template이라는 일종의 양식이 적용된 최종 산출물</li>
</ul>
<img alt="Pages" loading="lazy" decoding="async" fetchpriority="auto" width="1600" height="840" src="https://lannex.github.io/_astro/pages.nlnt_gyj_o1me1.webp">
<h2 id="bem">BEM</h2>
BEM (Block Element Modifier)은 CSS를 보다 쉽게 유지 관리 할 수 도와주는 CSS 디자인 방법론입니다. 네이밍 컨벤션이기도 하는 BEM은 CSS를 다루는 것이라 이미 예전부터 많은 곳에서 사용되고 있습니다.
BEM은 단어 구분을 kebab-case로 사용하며 그 이름과 같게 Block, Element, Modifier로 구성되어 있습니다.
<pre tabindex="0" data-language="html"><code>&lt;form class="form form--theme-xmas form--simple"&gt;
 &lt;input class="form__input" type="text" /&gt;
 &lt;input
 class="form__submit form__submit--disabled"
 type="submit" /&gt;
&lt;/form&gt;</code></pre>
<pre tabindex="0" data-language="css"><code>.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }</code></pre>
<h3 id="block">Block</h3>
<ul>
<li>독립적인 단위</li>
<li>클래스 첫머리에 위치</li>
</ul>
<h3 id="element">Element</h3>
<ul>
<li>Block에 일부이며 종속적</li>
<li>독립적인 의미는 없음</li>
<li>Block과 Element 사이는 Underscore를 사용</li>
</ul>
<h3 id="modifier">Modifier</h3>
<ul>
<li>Block 또는 Element에 대한 플래그, 동작 또는 상태를 변경하는데 사용</li>
<li>속성이라고 할 수 있음</li>
<li>Element와 Modifier 사이는 두개의 Hyphen을 사용</li>
<li>클래스 끝머리에 위치</li>
</ul>
<h2 id="abem">ABEM</h2>
ABEM은 Atomic Design과 BEM의 조합입니다. BEM의 단점인 긴 Modifier를 축약형으로 바꾸고 클래스 첫머리를 Atomic일 경우 <code>a-</code>, Molecule일 경우 <code>b-</code> 와 같이 각각의 단위 첫글자를 따서 사용합니다.
그리고 단어 구분을 kebab-case를 사용하는대신 camelCase를 사용합니다.
<pre tabindex="0" data-language="html"><code>&lt;!-- BEM --&gt;
&lt;button class="block-name__element-name block-name__element-name--small block-name__element-name--green block-name__element-name--active"&gt;
 Submit
&lt;/button&gt;

&lt;!-- ABEM --&gt;
&lt;button class="a-blockName__elementName -small -green -active"&gt;
 Submit
&lt;/button&gt;</code></pre>
<h2 id="정리">정리</h2>
빠르게 변화하는 개발 환경 속에 더 나은 방법론이 대두될 수도 혹은 직접 만들 수도 있습니다.
직접 원칙을 정한 설계가 물론 더 좋을 순 있지만 Atomic Design + BEM을 도입함으로써 그 고민의 과정을 좀 더 줄일 수 있습니다.
어떻게 구조를 설계해야 할 지 고민하고 있다면 Atomic Design + BEM을 한번 도입해보는 게 어떨런지요?
<h2 id="참고-자료">참고 자료</h2>
<ul>
<li><a href="https://bradfrost.com/blog/post/atomic-web-design/" rel="noopener noreferrer" target="_blank">https://bradfrost.com/blog/post/atomic-web-design/</a></li>
<li><a href="http://getbem.com/" rel="noopener noreferrer" target="_blank">http://getbem.com/</a></li>
</ul> </section> </article> <hr data-astro-cid-4eu74nwj=""> <nav data-astro-cid-4eu74nwj=""> </nav> </div></div>

Atomic Design과 BEM (ABEM)

댓글