Atomic Design 및 구성 요소에 대한 재고 조사
다방면의 조사를 통해 구성 요소가 아토믹 디자인(Atomic Design)을 지향하는 생각과 비슷하고 투연성이 좋은 것 같다는 것을 발견했다.
내가 조사한 거랑 지금 내가 생각하고 있는 거 다 정리하면 좋잖아.

결론: 디자인에 대한 생각

Atomic Design 답습

Atoms의 내용으로 뒷부분의 구성 요소를 고려

레이아웃의 역할은 Organisms 및 Template

이것만 가지고는 도무지 알 수 없는 것 같은데, 아토믹 디자인 이란?
구성 요소 사고는?후술

이른바 Atomic Design

디자인 시스템의 생각 중 하나.
디자인할 때 페이지 등 큰 단위에서 제작을 시작하는 것이 아니라 부품부터 고려한다.
Atoms가 가장 작고 Pages가 가장 큽니다.

Atoms

구축 UI의 최소 단위입니다.

는 HTML로 단일 태그입니다.button 등

Molecules

는 그룹 아톰이 만들었다.

form 여기 있습니다.

마방으로 읽는다.(독법도 모르고 투덜대는데...)

Organisms

는 모레큘리스와 아톰을 조합해 만든 요소다.

섹션은 여기 있어.

모레컬과 다른 점은 단일 기능이 아니라 다양한 역할을 한다는 점이다.

Templates

Organisms의 조합이른바 선틀

웹 사이트 1페이지의 전선 프레임워크

Pages

Pages가 Templates에 내용을 주입한 상태

검색 결과가 없는 상황에서 호출 등 해당 페이지의 변화도 여기에 있다

어셈블리 정보

웹 및 애플리케이션 개발 시 사용된 재활용 가능한 부품을 어셈블리라고 합니다.
아주 간단하게 버튼 같은 거.Atomic Design에서 말하는 Atoms는 Molecules와 비슷합니다.
여러 기능이 있을 수 없다.
링크, 복사등, SNS 버튼 등의 정보를 게재하는 바닥글 등은 구성 요소라고 할 수 없다.
이 경우 구성 부분인 SNS 버튼의 집합이라고 할 수 있다.
구성 요소를 구성하는 요소는 다음과 같은 네 가지가 있다.

정보 구조

스타일

상태

상호 작용

구성 요소 설계의 생각

작은 부품이지만 패턴을 고려할 필요가 있다.
어떤 값의 변화를 받아들일지, 절대적인 고정값이 되는 관리 스타일을 알아야 한다.

변화하는 스타일 보기

치수와 색상에 변화 모드가 있는지 여부

상태에 대한 변화

hover시 등 상태의 변화에 스타일의 변화가 있는지

상호작용이 어떠한가

생략되었지만, 당연히 갱신 주파수를 고려하여 상수를 상수로 바꾸어야 한다
그런 생각을 채택할 필요가 있다.

최후

설계의 생각과 분할은 상술한 것을 기초로 고려할 수 있다
원래 직업 종류의 작용(예를 들어 상호작용은 누가 했는지 등)에 따라 다른 축에서 고려하는 것이 좋다.
이전 WEB 업계와 달리 디자이너와 엔지니어의 경계는 모호해졌다.
개발할 때 사전에 직업별 인식을 통일시켜 개발을 시작할 것을 건의합니다.

참고 자료

Atomic Design 기반 어셈블리 설계 고려

설계자와 엔지니어가 고려하는 React 구성 요소 설계