Atomic Design
Feat. Component(컴포넌트)
※본 글은 'bradfrost'에서 발행한 글을 토대로 정리하였다.
We’re not designing pages, we’re designing systems of components.—Stephen Hay
우리는 페이지를 디자인하는 것이 아니라 컴포넌트 시스템을 디자인하고 있습니다.
디자인을 하다 보면 개발자와 의사소통 속에서 'Component'를 많이 접하게 된다.
Component 만드는데 기존에 있던 걸로 가져왔어요.
Search input 디자인 조금 바뀌었는데 확인 한번 해주세요.
Bottom navigation 확정되었나요?
Slider 디자인 이런 건 어때요?
Search input, Bottom navigation, Slider 모두 Component 범주 안에 있는 요소들이다.
웹 디자인 기술이 계속 발전함에 따라 우리는 단순한 웹 페이지들을 만드는 것이 아니라 배려 깊은 디자인 시스템을 개발해야 할 필요성을 인식하고 있다.
최근 우리의 인터페이스가 무엇으로 구성되어 있고 어떻게 더 체계적인 방식으로 디자인 시스템을 구성할 수 있는지에 대해 관심이 생겼다.
모든 물질(고체, 액체, 기체, 단, 복합 등)은 원자로 구성되어 있다. 이러한 원자 단위는 서로 결합하여 분자를 형성하고 차례로 더 복잡한 우기체로 결합하여 궁극적으로 우리 우주의 모든 물질을 생성한다.
마찬가지로 인터페이스는 더 작은 구성요소로 구성된다. 이것은 우리가 모든 인터페이스를 기본적인 구성 요소로 분해하고 거기서부터 작업할 수 있다는 것을 의미한다. 그것이 원자 설계의 기본 요지다.
01
Atomic Design 그리고 컴포넌트(Component)
Atomic Design은 디자인 시스템을 만드는 방법론이다. Atomic Design에는 다섯 가지 뚜렷한 단계가 있다.
원자
분자
유기체
템플릿
페이지
02
원자(Atoms)
원자는 물질의 기본 구성 요소다. 웹 인터페이스에 적용되는 원자는 form label, input 또는 button과 같은 HTML tag이다.
원자에는 색상, 글꼴, 애니메이션과 같은 인터페이스의 보이지 않는 측면과 같은 추상적인 요소도 포함될 수 있다.
자연 속의 원자처럼 그것들은 상당히 추상적이고 종종 그 자체로는 별로 유용하지 않을 수 있다. 하지만, 그것들은 패턴 라이브러리의 맥락에서 참고자료로 유용하다. 왜냐하면 당신은 당신의 모든 글로벌 스타일을 한눈에 볼 수 있기 때문이다.
03
분자(Molecules)
원자가 결합되기 시작하면 상황은 점점 흥미롭고 유영화, 실체화되기 시작한다. 분자는 서로 결합된 원자의 집단이며 화합물의 가장 작은 기본 단위이다. 이러한 분자는 자체 특성을 취하고 설계 시스템의 백본(중추) 역할을 한다.
*백본(backbone) 또는 백본망(backbone network, 중추 망)은 다양한 네트워크를 상호 연결하는 컴퓨터 네트워크의 일부로 각기 다른 LAN이나 부분 망 간에 정보를 교환하기 위한 경로를 제공한다. 백본은 같은 건물 안에 다른 건물 안에 또 캠퍼스 환경 안에 아니면 넓은 지역에 걸쳐 다양한 네트워크를 묶을 수 있다.
원자부터 분자까지 쌓는 것은 "한 가지 일을 하고 그것을 잘한다"는 사고방식을 조장한다. 분자는 복잡할 수 있지만, 경험에 비추어 볼 때 재사용을 위해 만들어진 원자의 비교적 단순한 조합니다.
04
유기체(Organisms)
분자는 우리에게 작업할 수 있는 몇 가지 기본 요소를 제공하며, 우리는 분자들을 결합하여 유기체를 형성할 수 있다. 유기체는 비교적 복잡하고 뚜렷한 인터페이스를 형성하기 위해 함께 결합된 분자의 그룹이다.
우리는 점점 더 구체화되기 시작하고 있다. 고객은 디자인 시스템 분자에 크게 관심이 없을 수 있지만, 유기체를 통해 최종 인터페이스가 형성되기 시작하는 것을 확인할 수 있다. Dan Mall (내가 여러 프로젝트에 참여하고 있는)은 요소 콜라주를 사용하여 몇 가지 주요 유기체에 대한 아이디어를 전달하여 고객과의 대화를 촉진하고 시각적 방향을 형성한다.
유기체는 유사하거나 다른 분자 유형으로 구성될 수 있다. 예를 들어 마스트 헤드(신문이나 뉴스 웹사이트의) 발행인란) 유기체는 로고, 기본 내비게이션, 검색 양식 및 소셜 미디어 채널 목록과 같은 다양한 구성요소로 구성되어 있다. 그러나 제품 그리드 유기체는 동일한 분자 (제품 이미지, 제품 제목 및 가격을 포함)로 구성될 수 있다.
분자에서 유기체로 구축되면 독립형, 휴대 가능, 재사용 가능한 구성 요소를 만들 수 있다.
05
템플릿(Templates)
템플릿 단계에서 우리는 고객들과 우리의 최종 산출물이 더 가치 있는 표현을 만들기 위해 유사한 궁합을 깬다. 템플릿은 대부분 페이지를 형성하기 위해 서로 연결된 유기체의 그룹으로 구성된다. 여기서 우리는 디자인이 합쳐지는 것을 보고 레이아웃과 같은 것을 실제로 보기 시작한다.
템플릿은 매우 구체적이며 상대적으로 추상적인 분자와 유기체에 대한 맥락을 제공한다. 템플릿은 고객이 최종 디자인을 보기 시작하는 곳이기도 한다. 이 방법론으로 작업 한 경험상 템플릿은 HTML, 와이어 프레임으로 시작되지만 시간이 지남에 따라 정확도를 높여 궁극적으로 최종 결과물이 된다. 피츠버그의 Bearded Studio는 비슷한 방법을 따르며, 디자인의 시작은 그레이스케일(회색 톤으로만 된) 및 레이아웃 없이 시작되지만 최종 설계가 시행될 때까지 서서히 정확도를 높인다.
06
페이지(Pages)
페이지는 템플릿의 특정 사례이다. 플레이스홀더(빠져 있는 다른 것을 대신하는 기호나 텍스트의 일부) 부분을 실제 대표 콘텐츠로 대체하여 사용자가 궁극적으로 보게 될 내용을 정확하게 묘사한다.
페이지는 가장 높은 정확도 수준이며, 가장 실질적이기 때문에 일반적으로 대부분의 사람들이 대부분의 시간을 보내고 대부분의 리뷰를 중심으로 삼는다.
페이지는 디자인 시스템의 효율성을 테스트하는 곳이기 때문에 필수 요소이며 사용자 맥락에서 모든 것들을 살펴봄으로써 분자, 유기체 및 템플릿을 수정하여 실제 디자인의 맥락(context) 보다 더 나은 방법으로 개선 할 수 있다.
페이지는 템플릿의 변화를 시험하는 장소다. 예를 들어 40자를 포함하는 헤드라인이 어떻게 생겼는지 설명하면서도 340자를 포함했을 때 어떻게 생겼는지도 보여줄 수 있다. 사용자가 장바구니에 하나의 품목을 가지고 있는 경우와 할인 코드가 적용된 10개 품목을 가지고 있는 경우 어떻게 보이는가? 이런 특정 상황들은 우리가 어떻게 시스템을 반복하고 구성하는지에 영향을 미친다.
07
why atomic design
Atomic design는 설계 시스템 제작을 위한 명확한 방법론을 제공한다. 고객들과 팀원은 그들 앞에 놓인 단계들을 실제로 확인하면서 디자인 시스템의 개념을 더 잘 이해할 수 있다.
Atomic design는 추상적인 것에서 구체적인 것으로 발전할 수 있는 능력을 부여한다. 이로 인해 일관성과 확장성을 높이는 동시에 최종적인 맥락에서 사물을 보여주는 구조를 만들 수 있다. 조각내기보다는 조립함으로써 유리한 부분만 부각하는 기존 방식 대신 현실적으로 시스템을 제작한다.
