안녕하세요. 휴먼스케이프 Hugh입니다.
프론트엔드 개발에 있어서 컴포넌트 설계는 매우 중요합니다. 설계를 위한 방법론이 있고, 대부분 그 방법론을 그대로 적용하기보다는 아마 입맛에 맞게 적용할 것으로 예상이 되는데요.
레어노트 앱도 Atomic Design을 기본으로 하고 있는데요. 컴포넌트 설계에 앞서 Atomic Design을 간단하게 알아보도록 하겠습니다.
Atomic Design이란 디자인 시스템을 위한 방법론입니다. 이 방법론에서는 디자인 시스템을 만들기 위해 함께 작동하는 5가지 단계로 구성합니다.
Atoms: 컴포넌트를 구성하는 가장 기본 블록 역할을 합니다. 예를 들면 Label, Input Item 등이 있고, 더 분해할 수 없는 성질을 가지고 있고 혼자서는 의미가 없습니다.
Molecules: 원자의 결합으로 구성되고, 혼자서는 의미가 없는 원자가 결합함으로써 작은 의미가 있습니다. 예를 들어 검색 Label과 Input Item의 결합은 작은 검색 form이 될 수 있습니다. 여기서 Label은 입력 원자를 정의하고 버튼 원자를 클릭하면 form을 제출합니다. 이제 검색이 위치한 다양한 곳에서 재사용 될 수 있게 되었습니다. 분자는 한 가지 일만 잘할 수 있도록 단순하게 구성되어야 합니다.
Organisms: 분자 및 원자로 구성된 비교적 복잡한 UI를 구성하는 요소로 인터페이스의 별개 섹션을 형성합니다. 위에서 원자로 구성한 검색 폼은 페이지 상단에 존재하는 헤더의 구성으로 사용되게 됩니다.
비슷한 기능을 하지만 서로 다른 분자 및 원자로 구성된 헤더 Organisms는 아래와 같이 다양할 수 있습니다.
하지만 아래와 같은 상품 목록을 보여주는 Organisms는 상품 리스트, 상품 검색 결과, 장바구니 등에서도 사용될 수 있습니다.
Templates: 템플릿은 페이지를 구성하는데 필요한 모든 필수 요소들의 구조를 표시합니다. 설명만 보면 페이지와 비슷하게 느껴질 수 있는데 아래 그림을 보면 바로 이해가 갑니다.
Pages: 페이지는 실제 콘텐츠를 템플릿에 부어 표시하는 인터페이스입니다.
여기까지 Atomic Design을 구성하는 5단계에 대해 간략하게 살펴보았습니다. 웹을 중심으로 방법론이 태어났지만, 모든 사용자 인터페이스에 적용할 수 있다고 합니다.
저자는 인스타그램 앱을 타깃으로 Atomic 적 관점으로 분석을 이어나가는데요. 저희는 레어노트 앱을 Atomic 관점으로 분석해보겠습니다.
Atoms: Label, Text, Icon, Image 정도가 보입니다.
Molecules: Label과 Icon으로 구성된 탭 내비게이션의 버튼, Icon과 숫자 Label로 구성된 좋아요, 상단 검색바 등이 보입니다.
Organisms: 다양한 Label과 Image 원자, 좋아요 Molecules 등이 조합된 하나의 소식 카드, 탭 내비게이션 정도가 보입니다.
그리고 위 요소들로 채워진 페이지가 있습니다. 막상 UI를 Atomic 관점으로 뜯어보는 건 어렵지 않습니다.
여기까지 Atomic Design이 무엇인지 간략하게 알아보았는데요.
방법론을 익히고 나서 실제로 리액트 컴포넌트를 작성하다 보면 조금은 다른 고민이 생기는 것 같습니다. 그건 리액트의 관점으로 또 풀어내야 할 것 같습니다.
읽어주셔서 감사합니다.
참고자료: https://atomicdesign.bradfrost.com/chapter-2/
Walk with us!
기술이 세상을 더 아름답게 할 수 있다고 믿으신다면, 휴먼스케이프와 함께 소중한 뜻을 펼칠 수 있습니다.
함께 걸어가며 성장하실 분, 언제든지 연락해주세요 :)
