이번 포스트는 atomic-web-design을 번역한 글임을 밝힙니다.
원문을 있는 그대로 옮겨오기보다는 자의적 판단에 의해 필요해 보이는 부분들을 가져왔습니다.
다소 의역이나 오류가 있을 수 있습니다. 댓글로 알려주시면 수정하도록 할게요.
개요
우리는 페이지가 아니라 시스템 컴포넌트를 디자인 해야 한다. — Stephen Hay
웹 디자인의 기술이 계속 발전함에 따라, 우리는 단순한 웹 페이지 모음을 만드는 것이 아니라 사려 깊은 디자인 시스템을 개발해야 할 필요성을 인식하고 있습니다.
디자인 시스템을 만드는 것에는 다양한 논의가 있어왔는데, 보통은 color, typography, grids, texture 같은 것들을 위한 것이 대부분이었습니다. 물론 이런 것들도 중요하겠지만, 제 생각에는 이것은 지나치게 주관적입니다.
(중략)
모든 물질은 원자(atoms)로 구성되어있습니다. 그 원자의 단위들은 서로 결합되어 분자(molecules)를 형성하고 결국 더 복잡한 유기체로 결합되어 물질을 만들어냅니다.
마찬가지로 인터페이스는 더 작은 컴포넌트로 구성됩니다. 즉, 전체 인터페이스를 기본 구성 요소로 세분하여 작업할 수 있다는 것이며, 이것이 Atomic design의 골자입니다.
무엇이 Atomic design인가
Atomic design은 디자인 시스템을 만드는 방법론입니다. Atomic design에는 5개의 뚜렷한 단계가 있습니다.
- Atoms
- Molecules
- Organisms
- Templates
- Pages
각각의 단계에 대해서 조금 더 깊게 알아봅시다.
Atoms
원자(Atoms)는 물질의 기본 구성 요소입니다. 웹 인터페이스에 적용되는 원자란, form, input, button 등의 HTML 태그를 의미합니다.
원자는 또한 색상 팔레트, 폰트와 같은 조금 추상적인 요소들과, 애니메이션을 포함하기도 합니다.
자연에 존재하는 원자와 마찬가지로 이것들은 상당히 추상적이고, 이것만 놓고 봤을 때는 그다지 쓸모가 있어보이진 않네요. 그렇지만 모든 Global styles을 한 눈에 볼 수 있다는 점 때문에 패턴 라이브러리의 맥락에서 좋은 레퍼런스가 됩니다.
Molecules
우리가 원자들을 서로 결합하기 시작할 때 모든 것들은 점점 더 흥미롭고 구체화되기 시작합니다. 분자(Molecules)는 서로 결합된 원자의 집단이자 구성물의 가장 작은 기본 단위입니다. 이러한 분자들은 그들 스스로의 특성을 가지고 우리 디자인 시스템의 중추 역할을 합니다.
가령, form, iuput, button 등은 그 자체만으로는 별로 유용해 보이지 않지만, 이것을 하나의 형태로 결합했을 때 실제로 뭔가 동작합니다.
원자(Atoms)로부터 분자(Molecules)로 빌드업되면 "하나의 역할을 맡아서 제대로 수행하는" 형태로 변합니다. 분자는 복잡할 수도 있지만, 재사용을 위해서 만들어진 원자의 비교적 단순한 집합입니다.
Organisms
분자는 우리에게 함께 일할 수 있는 블록을 제공해 주고, 우리는 그것들을 합쳐서 유기체(Organisms)를 만들 수 있습니다. 유기체는 인터페이스의 비교적 복잡하고 확실한 부분을 형성하기 위해 결합된 분자의 그룹입니다.
우리는 점점 더 실제에 가까워지기 시작했습니다. 클라이언트는 디자인 시스템의 분자나 원자에는 별로 관심이 없겠지만, 유기체를 통해서라면 최종 인터페이스가 형체를 갖는 걸 볼 수 있습니다. 여러 프로젝트에서 함께 일하고 있는 Dan Mall은, 전체 구성요소를 구성하지 않고도 클라이언트와 유연하게 대화하면서 시각적인 방향을 보여주기 위해 몇 가지 주요 유기체(key organisms)에 대한 아이디어를 설명하는 꼴라주를 사용합니다.
유기체는 유사한, 혹은 다른 분자 유형으로 구성될 수 있습니다. 가령, 마스트헤드(masthead; 역주 - 웹사이트의 발행인란) 유기체는 로고, 내비게이션 바, 서치 폼, SNS 채널 목록 등의 다양한 구성 요소로 구성될 수 있습니다. 그러나 "제품 그리드" 유기체는 동일한 분자(비슷한 형식의 제품 이미지, 제목, 가격 등)들로 반복 구성될 수 있겠죠.
분자로부터 유기체까지 빌드업되면 독립적이고 재사용 가능한 컴포넌트를 만들 수 있습니다.
Templates
템플릿 단계가 되면, 우리는 애매한 추정에서 벗어나서 클라이언트와 최종 아웃풋에 더 알맞은 언어로 전환합니다. 템플릿은 대개 페이지를 형성하기 위해 결합된 유기체들로 구성됩니다. 이 단계부터 우리는 디자인과 레이아웃의 실제 동작을 볼 수 있게 됩니다.
템플릿은 매우 구체적이면서도, 상대적으로 추상적인 분자들과 유기체들에 컨텍스트를 제공합니다. 템플릿은 클라이언트가 최종 디자인을 보기 시작하는 곳이기도 하죠. 제 경험상, 템플릿은 HTML wireframes에서 시작되지만 점차 정확도가 높아지면서 최종 제품이 됩니다. 피츠버그의 Bearded Studio도 비슷한 프로세스를 따르고 있습니다. 이 프로세스에서는 grayscale과 layout-less한 디자인에서 서서히 정확도를 높여 최종 디자인으로 발전시킵니다.
Pages
페이지는 템플릿의 특정 인스턴스입니다. 이 단계에서 placeholder는 실제 컨텐츠로 대체되어 유저가 실제로 보게 될 내용을 정확히 묘사합니다.
페이지는 가장 높은 단계의 정확도를 가지고, 이것이 가장 실질적인 것이기에 일반적으로 모든 프로세스가 리뷰 중심으로 돌아갑니다.
페이지 단계는 디자인 시스템의 효과성을 테스트하는 부분이기 때문에 가장 중요합니다. 전체를 loop back하면서 컨텍스트에 맞도록 분자, 유기체 및 템플릿을 개선할 수 있습니다.
페이지는 템플릿의 다양성을 테스트하는 장소이기도 합니다. 가령 40자짜리 헤드라인이 구체적으로 어떻게 보이는지 알고 싶을 수도 있지만, 340자는 어떻게 보이는지도 알고 싶을 수 있습니다. 유저가 장바구니에 하나의 항목만 가지고 있을 때와 할인 코드가 적용된 10개 아이템을 가지고 있을 때는 어떻게 다르게 보일까요? 다시 말하지만, 이러한 특정 인스턴스는 우리가 디자인 시스템을 어떻게 구성하고 개선해야 하는지에 영향을 미칩니다.
왜 Atomic design인가
우리가 이런 과정들을 의식적으로 생각해 본 적이 없겠지만, 사실 이것은 우리가 줄곧 해오던 방식입니다.
Atomic design은 디자인 시스템을 제작하기 위한 명확한 방법론을 제공합니다. 클라이언트와 팀 멤버는 이러한 단계들을 통해 디자인 시스템의 개념을 더욱 잘 이해할 수 있습니다.
Atomic design은 추상적인 것에서 구체적인 것으로 넘어갈 수 있는 능력을 줍니다. 이로 인해 일관성 및 확장성을 높이는 동시에 최종 컨텍스트를 보여주는 디자인 시스템을 만들 수 있습니다. 분해하지 않고 조립함으로써, 체리픽킹(cherry-picking; 역주 - 유리한 부분만 취사 선택하는 행위)만을 강조하는 이전 방식을 대체할 수 있습니다.
후기
이것을 읽고 나서, 이러한 디자인 시스템이 있다면 확실히 효율적이고, 비의존적이며, 이해하기 쉬운 레이아웃을 짤 수 있겠다는 생각이 들었습니다. 그와 동시에 지루한 설계 단계가 굉장히 오래 걸릴 거라는 점은 단점으로 생각이 되네요. 하지만 설계를 주먹구구식으로 건너뛰었을 때, 향후 개발 단계에서 아예 처음부터 뒤집어 엎어야 하는 경우가 왕왕 발생하는 것을 생각해본다면 이는 단점이 아니라 장점에 포함시켜야 할 부분인 것 같다는 생각도 듭니다. 다만 팀원들 모두가 이러한 철학을 내재하고 개발 및 디자인에 임해야 하는 부분에서 러닝커브가 상당히 높은 방법론이 아닌가 하는 생각도 듭니다.
