소개

N번 달인이지만, Atomic Design에서 개발하고 있어 Atoms의 취급이 곤란했으므로, 재고찰해 가려고 생각합니다.

Atoms에서 곤란한 점

Button 컴퍼넌트는 다른 컴퍼넌트가 아이 요소로서 들어오는데, Atoms에 넣어도 좋을까? 라는 점에서 곤란했습니다.

이 문제에 관해서, 「Atomic Design은 디자이너에게는 어렵지 않다! ? 라는 이야기 」안에서 고찰되고 있으므로, 이것으로 좋지 않을까? 라고 생각하는 사람도 있을지도 모릅니다만, 실제로 실장해 나가면 능숙하지 않은 부분이 나오므로, 재고찰해 갑니다.

앞의 기사에서 다루고 있는 Button 컴퍼넌트의 구현은 이와 같이 되어 있습니다.

button.tsx

import React from 'react';

const Button = ({ onClick, children }) => (
  <button onClick={event => onClick(event)}>{children｝</button>
);

export default Button;

그렇다면 children에 빈 div와 같은 구성 요소가 들어왔을 때 기능으로 완결되었다고 말할 수 있습니까? 또, 이 Button 컴퍼넌트를 사용해 구현한 단순한 직사각형의 버튼을, Molecule로 하는 것은 위화감이 있는 것은 아닐까요?

이 핵심 기능을 가진 Button 클래스는 로직 부분을 담당하기 때문에 UI 구성 요소의 Atoms에 넣는 것은 위화감이있었습니다.

거기서 조사한 바, 서적 「Atomic Design」의 저자 Brad Frost씨의 생각에 대한 번역 기사 「원자 디자인 확장 - Extending Atomic Design

Extending Atomic Design

design tokens는 다음과 같이 설명합니다.

예를 들어, "color-brand-blue(청색이 섞인 색)"라는 디자인 토큰은 UI의 중요한 요소이지만, 그것만으로는 작동하지 않습니다. 이 기능을 사용하려면 버튼의 배경색과 같은 것을 정의하는 "Atom"에 적용해야합니다.

Atom에 적응하지 않으면 작동하지 않지만 재사용성이 높은 것을 알 수 있습니다. Color에 관해서는 Atoms에 넣는 것 같은 (UI 디자인적인 면에서 생각해) 기사도 본 적이 있습니다만, Atoms보다 작은 Ions와 같은 계층에서 관리하거나 CSS의 프레임워크로 관리하는 것이 직관적인 느낌. 덧붙여서 Ions는 design tokens 계층의 컴퍼넌트로 Ions, Quarks등과 같이 이름을 붙일 수 있는 것 같습니다.

이번에는 색을 두어 두고, 방금전의 로직만을 가지고 디자인 확장성을 유지하고 싶은 컴퍼넌트 클래스에 관해서는 Atoms에 넣지 않고, Ions에 넣는 것으로, 본래 Atoms에 넣고 싶은 「사각형의 외형을 가졌다 버튼의 구성 요소를 Atoms에 넣을 수 있습니까?

요약

문제점
로직만을 가지고 디자인 확장성을 유지하고 싶은 컴퍼넌트 클래스를 Atoms에 넣으면, 본래의 Atoms가 Molecules에 들어가게 되어 버려, 팀내에서 혼란을 낳는다.

해결 방법
Ions 계층을 도입하고 로직 담당의 클래스는 Ions에 넣는다.

Atomic Design은 여러 사람이 사용하는 경우 어떤 층에 넣을지가 개인에 따라 다르기 때문에 그 문제를 해결하기 위해 Alt Atomic Design과 같은 것을 여러 사람이 고안하고 있습니다. 올레올레가 너무 되는 것은 좋지는 않지만, 프로젝트에 맞추어 확장 등을 해서 사용하는 것이, Atomic Design과의 능숙한 교제 방법이 아닐까 생각합니다.