Atomic Design

Component 를 분리하고 설계하는 것은 개발자, 디자이너분들이 늘 고민하는 고민거리입니다.

필자는 Component 설계에 있어서 Atomic Design 을 알아보고 적용하려고 노력하고 있지만 늘 어느 단계로 분리할지 고민에 빠집니다..

예시는 각종 Project 를 경험하며 적용한 방식으로 채워 넣겠습니다.

Atomic Design Pattern 는 하나의 Interface System 을 5단계의 작은 단위로 Component 나누어 관리하는 Pattern 입니다. 5단계에 대해서 학습 내용을 정리 해보겠습니다.

Atomic Design

Atom(원자)

UI Interface 에서 더이상 쪼갤 수 없는 단위입니다.

보통 특정 HTML 태그 단위로 이루어져 있습니다. (ex. Input, label, button ...)

이러한 원자에는 Color, Animation, Font Style 등 요소를 포함하고 있습니다.

보통 원자 단위의 Component 는 그 자체로 유용하게 사용 되지 않습니다.

Molecule(분자)

Molecule 는 뜻 그대로 원자단위의 Component 의 집합입니다.

하나의 특정 기능을 위한 원자들의 집합으로 brad frost Post 에 작성된 예시처럼 하나의 Form 단위가 분자 단위와 가장 적합하다고 생각합니다.

위와 같이 "SEARCH THE SITE" 의 Label 원자, "ENTER KEYWORD" 의 input 원자, "SEARCH" 의 submit button 원자가 합쳐진 분자가로 검색 Form 이 만들어 집니다.

추가로 필자가 생각하는 분자에 대해서 Github Web Site 를 예를 들어 보겠습니다.

위 사진은 Github Header 에서 + 를 누르게 되면 생성되는 Drop Down List 입니다.

• + Button 과 아래 방향의 화살표 icon 은 하나의 button, i 가 합쳐진 분자로 생각할 수 있습니다.
• + Button 을 눌러서 생성되는 Drop down List 역시 List 내부의 A tag 원자가 합쳐진 하나의 분자라고 생각합니다.

Organism(유기체)

하나의 유기체는 예상대로 원자, 분자의 집합입니다.

실질적으로 화면의 한 구성을 이루어지는 단위입니다. brad frost 가 작성한 예시 처럼 header, footer 가 대표적인 유기체 단위로 분리할 수 있습니다.

Route 를 이동하는 A tag(사이트의 구성 요소에 따라서 원자가 될수도 분자가 될수도 있다고 생각합니다.), 앞서 설명한 검색 분자가 합쳐진 Header 유기체가 만들어 집니다.

유기체 역시 필자가 생각하는 Github Site 의 예를 서술해보겠습니다.

위 사진은 Github Site 왼쪽에 위치하는 Profile 정보를 Css Debug Tool 를 사용한 구분선을 표시했습니다.

• User 의 Profile 사진을 표시하는 Place holder, 사진 변경, Change Status 의 분자
• Profile 을 표시 및 수정하는 기능인 Edit Profile 을 포함한 하단의 정보들이 하나의 분자

이러한 두개의 분자를 이용하여 유저 정보를 표시하는 하나의 유기체라고 생각합니다.

Template

유기물이 모인 하나의 집합으로 Page 의 Layout 을 실제로 구성합니다. 처음에는 HTML Wire Frame 에서 점차 최종 산출물과 유사하게 발전할 것입니다.

Page

Page 는 Template 의 하나의 Instance 라고 표현되어 있습니다.

쉽게 말해 Template 에서 Place holder 로 표시된 내용을 실제 Content 로 대체합니다. 실제 산출물을 만들어가는 단계로 효율성 테스트를 포함하여 각종 테스트를 진행하고 분자, 유기체, 템플릿을 수정해가는 단계입니다.

 

필자는 위에도 말했듯이 Atomic Design에 대해서 이해하고 적용하려고 노력을 하고 있습니다. 하지만 아직 각 단계에 대해서 나누는 것에서 매일 머리를 뜯으며 고민하고 있지만 제대로 이루어지지 않고 있습니다. 개념에 대한 이해와 경험이 쌓인다면 해당 Post 를 계속 Update 할 예정입니다.