아토믹 디자인
아토믹 디자인은 디자인 시스템을 만드는 하나의 방법론이다. 아토믹 디자인은 총 5개의 단계가 있으며, 이 단계가 서로 연결되어 사이트를 완성한다.
원자 (Atoms)
분자 (Molecules)
유기체 (Organisms)
탬플릿 (Templates)
페이지 (Pages)
원자(Atoms)
원자는 물질의 기본 빌딩 블록이다. 웹 인터페이스에서 적용되는 원자는 폼의 텍스트 레이블, 인풋 필드, 버튼과 같은 HTML 태그다.
원자에는 컬러 팔레트, 폰트 그리고 애니메이션과 같은 인터페이스에서 보이지 않는 추상적인 요소가 포함되기도 합니다.
분자(Molecules)
분자는 원자들로 구성된 집합이다. 분자는 자신의 특성을 가지고 디자인 시스템의 중추 역할을 한다.
예를 들어, 텍스트, 인풋 필드, 버튼은 그 원자 자체로는 유용하지 않지만, 폼(Form)으로 결합되면 실제로 무언가의 역할을 수행할 수 있다.
유기체(Organisms)
유기체는 원자들과 분자들로 구성된 집합이다. 유기체는 뚜렷한 인터페이스를 형성한다.
사용자는 디자인 시스템에서 원자나 분자에 크게 관심이 없겠지만, 유기체부터 최종 인터페이스가 형성되기 시작하는 것에 많은 관심이 있을 것이다.
분자에서 유기체로 구축하기위해선 컴포넌트가 독립적(standalone)이며 가독성이 있고(portable), 재사용(reusable) 가능하게 만들어야한다.
템플릿(Templates)
템플릿에서는 데이터를 연결하기 이전의 레이아웃을 생성한다. 템플릿은 원자, 분자, 유기체 모두가 하나로 합쳐진 것이며, 우리는 레이아웃이 실제로 어떻게 보이는지 확인할 수 있다.
탬플릿을 통해 반복적인 작업을 자동화하고 프로젝트나 고객의 요구에 따라 템플릿을 유용하게 사용할 수 있다.
파워 포인트나 영상 탬플릿처럼 이미 만들어진 형식이라고 생각하면 된다. 이제 사용자는 다음 단계에서 데이터만 넣으면 된다.
페이지(Pages)
페이지는 템플릿의 특정 인스턴스이다. 여기서는 플레이스 홀더 콘텐츠가 실제 콘텐츠로 대체되어 표현된다.
탬플릿이 붕어빵 틀이라고 하면 페이지는 붕어빵이라고 생각하면 된다. 탬플릿로 구성된 레이아웃에 데이터를 삽입하여 페이지가 만들어진다.
또한 이 단계는 우리가 설계 시스템의 효율성을 테스트하는 곳이다. 우리가 만든 분자, 유기체, 그리고 템플릿을 다시 수정하여 원하는 디자인으로 완성한다. 예를 들어 40자를 포함하는 헤드라인 글자가 340자의 글자가 되면 어떻게 보일까?등의 질문들을 테스트해보고 디자인 시스템이 어떻게 구성되어 있고 어떤 부분이 수정되어야 하는지, 또 변경후에도 어떤 부분이 부족한지 물어보고 수정하는 단계이다.
아토믹 디자인의 장점
구성 요소를 혼합하여 일관성 있는 디자인을 만들 수 있다.
스타일 가이드를 간단하게 만들 수 있다.
레이아웃을 이해하기 쉬워진다.
보다 일관성 있는 코드를 작성할 수 있다.
신속한 프로토 타이핑을 할 수 있다.
디자인을 쉽게 추가, 수정, 제거할 수 있다.
Last updated
