[TIL] Atomic Design
14554 단어 atomic designatomic 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
Author And Source
이 문제에 관하여([TIL] Atomic Design), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@go286/TIL-Atomic-Design저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)