[TIL] Atomic Design

1. 아토믹 디자인이란?

아토믹 디자인은 디자인 시스템을 만드는 하나의 방법론으로서 5개의 구분된 단계가 있다.

Atoms(원자)

• 원자는 물질의 기본 빌딩 블록이다. 웹 인터페이스에 적용되며 원자는 폼의 텍스트 레이블, 인풋필드 혹은 버튼과 같은 HTML의 태그이다.

Molecules(분자)

• 원자들을 서로 결합하여 그룹을 만들면 분자들은 그 자체의 특성을 가지고 있으며 우리의 디자인 시스템의 중추 역활을 한다.

Organisms(유기체)

• 분자는 우리가 작업할 수 있는 빌딩 블록을 제공하고 있어서 분자들을 결합하여 유기체를 형성할 수 있다. 유기체는 비교적 복잡하며 인터페이스에서 구분된 영역을 형성하는 서로 결합되어 있는 분자 그룹이다.

Templates

• 템플릿은 주로 페이지를 구성하기 위해 서로 꿰매어진 유기체 그룹으로 구성되며 이 부분에서 디자인을 확인하고 레이아웃이 실제로 구동하는지 볼 수 있다.

Pages

• 페이지는 가장 실체가 있기 때문에 구현 완성도가 높은 레벨에 있고 디자인 시스템의 효율성을 테스트하는 곳이기 때문에 필수요소이기도 한데 사용자 맥락에서 모든 것들을 살펴봄으로써 분자, 유기체 및 템플릿을 수정하여 실제 디자인의 맥락보다 더 나은 방법으로 개선할 수 있다.

2. 아토믹 디자인 적용(StoryBook)

✅Atoms

• 제일 작은 단위인 Atom을 만든다

MemberBtn.tsx

import React from 'react';
import styled from 'styled-components';

export const MemberBtn = ({ title = '회원정보 변경' }) => {
  return <InfoChangeBtn title={title}>{title}</InfoChangeBtn>;
};

const InfoChangeBtn = styled.button`
  width: ${props => (props.title === '회원탈퇴' ? '70px' : '108px')};
  height: 32px;
  margin: 10px;
  color: #4186f5;
  font-family: normal normal medium 14px/20px Source Han Sans KR;
  background: #ffffff;
  border: 1px solid #5287ed;
`;

MemberBtn.stories.tsx

import React from 'react';
import { Story, Meta } from '@storybook/react/types-6-0';
import { MemberBtn } from './MemberBtn';

export default {
  title: 'practice/Atoms/MemberBtn',
  component: MemberBtn,
  argType: {
    title: { control: 'title' },
  },
} as Meta;

const Template: Story = args => <MemberBtn {...args} />;

export const Default = Template.bind({});

export const PwChangeBtn = Template.bind({});
PwChangeBtn.args = {
  title: '비밀번호 변경',
};

export const MemberOutBtn = Template.bind({});
MemberOutBtn.args = {
  title: '회원탈퇴',
};

✅Molecules

• Atoms들을 모아 Molecules을 만든다

AllBtn.tsx

import React from 'react';
import styled from 'styled-components';
import { mixin } from '~/styles';
import { MemberBtn } from '../BjAtoms/MemberBtn';

export const AllBtn = () => {
  return (
    <BtnSpace>
      {BTN.map((title, idx) => {
        return <MemberBtn key={idx} title={title} />;
      })}
    </BtnSpace>
  );
};

const BTN = ['회원정보 변경', '비밀번호 변경', '회원탈퇴'];

const BtnSpace = styled.div`
  margin: 30px 30px;
  ${mixin.flexSet()};
`;

AllBtn.stories.tsx

import React from 'react';
import { Story, Meta } from '@storybook/react/types-6-0';
import { AllBtn } from './AllBtn';

export default {
  title: 'practice/Molecules/AllBtn',
  component: AllBtn,
} as Meta;

const Template: Story = args => <AllBtn {...args} />;

export const Default = Template.bind({});

3. 참조

https://brunch.co.kr/@ultra0034/63