아토믹 디자인(Atomic Design) 소개 및 실제 사용 경험

아토믹 디자인(Atomic Design)을 착안하여 실제로 프로젝트를 수행한 경험을 늦게나마 공유하겠습니다.

완벽한 아토믹 디자인이 아니지만 프로젝트 기획에 맞게 팀원들과 논의를 통해

적절히 입맛에 바꿔 사용했습니다.

 

그전에 아토믹 디자인에 대해서 간략히 알아보도록 합시다.

 

❓ Atomic Design이란?

웹 프론트 개발 프레임워크, 라이브러리인 Angular, Vue, React는 컴포넌트 단위로 개발을 진행한다.

이러한 컴포넌트를 가장 작은 단위로 설정하고 이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화하는 방법론이다. 따라서 아토믹 디자인이 컴포넌트 중심 설계 패턴에서 더욱 주목받게 되었다.

 

아토믹 디자인은 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)로  효과적인 인터페이스 시스템을 만든다.

Atoms(원자)

• 가장 작은 단위의 컴포넌트이다. (디자인과 기능의 최소 단위)
• 다양한 state 즉 상태, 색상, 폰트, 애니메이션과 같은 추상적인 요소가 포함될 수 있다.
• 대표적인 컴포넌트는 버튼(Button), 텍스트(Text), 아이콘(Icon) 등이 있다.

분자(Molecules)

• 2개 이상의 원자로 구성되어 있다. 
• 하나의 단위로 함께 동작하는 UI 컴포넌트들의 단순한 그룹이다.
• 대표적인 컴포넌트는 입력 폼(Input Form), 내비게이션(Navigation), 카드(Card) 등이 있다.

Organism(유기체)

• 분자들을 결합하여 유기체를 형성 (분자가 되지 않은 원자도 포함)
• 인터페이스가 어떻게 보이는지 시작하는 단계
• 대표적인 컴포넌트는 입력 폼과 함께 헤더를 감싸거나, 카드를 관리하는 그리드 등이 있다.

템플릿(Templetes)

• 여러 유기체의 집합
• 디자인을 확인하고 레이아웃이 실제로 구동하는지 확인하는 단계
• 대표적인 컴포넌트는 여러 카드와 그리드를 묶는 템플릿(헤더, 메인, 푸터) 등이 있다.

Page(페이지)

• 템플릿을 이용해서 배치를 통해 컴포넌트를 그려서 디스플레이한다.
• 완성된 하나의 페이지이다.

 

👍 장점

• 디자인 시스템 구성에 있어서 가이드라인으로 활용할 수 있다.
• 애플리케이션과 분리하여 컴포넌트를 개발하고 테스트할 수 있고, 스타일 가이드와 같은 도구에서 볼 수 있다.
• 컴포넌트 재사용성이 극대화된다.

👎 단점

• 의존성과 복잡도가 까다롭다
  • ex) A에서 사용하는 헤더에서 변경 사항이 필요할 때,
    1. 헤더 컴포넌트에 props를 추가해 변경 사항을 적용하게 한다.
    2. 새로운 헤더 컴포넌트를 만든다.
    1번으로 해결할 경우 어디까지 props로 지정해야 할지 모호하다.
    2번으로 해결할 경우 컴포넌트가 무한 증식될 수 있고, 재사용성이 떨어지고, 어떤 기능을 하는지 명확히 구분하기 어려워진다.

 

🎅 "금나와라 뚝딱" 프로젝트 적용 후기

❓ 도입 이유

이전 프로젝트에서 구체적으로 컴포넌트를 나누지 않고 개발을 진행했었다. 그러다 보니 중복된 코드가 많았고, 재사용 가능한 컴포넌트가 극히 드물었다. 그래서 이번 프로젝트에서는 재사용성 가능한 컴포넌트로 개발하고 싶었다.

 

팀원들과 프로젝트 회의에서 재사용성을 극대화하는 방향에 대해서 얘기를 했고, 개발 방법론에 대해 찾아보던 도중, 아토믹 디자인을 접하게 되었다. 그래서 아토믹 디자인을 기획 단계에서부터 적용하면서 개발을 진행했다.

 

우선 피그마를 통해 우리가 개발해야 할 페이지를 그렸다. 그 후, 여러 번 중복으로 사용되는 기능, 디자인을 찾기 시작했다. Checkbox, Input, Icon, Image, Input, Logo, Modal, Avatar, Button 등 수많은 최소한의 기능을 여러 번 사용되는 것을 확인했고 우리는 이를 Atoms(원자)로 분류해서 개발을 했다.

원자: 좌(폴더구조) 우(storybook Avatar 예시)

 

그리고 이 원자들을 조합해 하나의 기능 및 동작을 수행하는 분자(Molecules) & Organism(유기체)를 개발했다. 분자와 유기체를 나누지 않은 이유가 재사용성이 필요 없는 원자나 분자 같은 것들은 애매모호해서 우리는 그냥 해당 기능에 바로 작성했기로 했기 때문이다. (타이머 기능, TextArea 등)

분자&유기체 : 좌(폴더구조) 우(storybook TextArea 예시)

 

마지막으로는 원자, 분자&유기체의 조합으로 화면을 구성하는 템플릿(Templetes) & Page(페이지)을 개발했다. 이 또한 템플릿과 페이지를 나누지 않는 이유는 템플릿에서 재사용성이 우리 프로젝트에서는 필요가 없었기 때문에 바로 페이지 단계로 넘어가서 작업을 했다. (그래서 페이지 단 코드가 다소 길다)

페이지(템플릿)

 

👍 사용하면서 느낀 Atomic Design 장점

1. 확실히 분자 형태로 자주 사용하는 Button, Avatar 등 기본 컴포넌트를 만들어 놓으니 재사용이 극대화될 수 있었다. 또한 다시 작업해야 할 필요성도 없었고, 디자인도 통일성을 가질 수 있어서 매우 좋았다.

 

2. 협업 시에도 필요한 컴포넌트만 가져다 사용하면 되고, StoryBook을 활용해 UI, UX 확인 및 테스트를 할 수 있어서 매우 편리했다.

 

👎 사용하면서 느낀 Atomic Design 단점

1. 분자, 원자, 유기체, 템플릿, 페이지의 5단계를 명확하게 나누기가 힘들었다.

처음으로 디자인 시스템을 도입하여 미숙해서 그런지 이런 기능도 굳이 분자로 나눠야 하나?라는 고민도 있었고, 재사용이 필요 없고 한 번만 사용할 건데 그냥 포함 시키면 안 되나?라는 고민도 있었다.

 

2. 컴포넌트 수정 사항이 빈번했다.

이건 개발 기획에서 약간의 미흡한 점으로 인해 발생했던 것 같다.

예를 들어 button에 대한 hover 이벤트, click 이벤트를 적용했다. 이를 재사용하고 활용하는 더 높은 단계에서 버튼 비활성화 기능 (disabled 속성) 값이 필요하면 기존 button 컴포넌트를 수정하여 해당 옵션을 추가해야 하는 경우와 같은 수정 상황이 빈번히 발생했다.

 

🤞 결론

아마 프로젝트 Repository를 타고 들어가서 확인하면 "이게 무슨 아토믹 디자인이야"라고 할 만큼

100% 활용하지 못했다. 하지만 우리는 우리 프로젝트 상황에 맞게 변형 시켜서 사용했다.

나름 잘 활용했고, 성공적으로 프로젝트를 마무리할 수 있었다.

 

 

📃 참고 자료

https://ui.toast.com/weekly-pick/ko_20200213

 

https://zoomkoding.github.io/%EB%94%94%EC%9E%90%EC%9D%B8%ED%8C%A8%ED%84%B4/%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC%EC%BA%A0%ED%94%84/2020/07/09/atomic-design-pattern.html

 

https://velog.io/@moaikang/Atomic-Design%EC%9D%84-%EC%9D%91%EC%9A%A9%ED%95%B4-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B5%AC%EC%A1%B0%EB%A5%BC-%EC%84%A4%EA%B3%84%ED%95%98%EA%B3%A0-%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%83%9D%EC%9D%84-%EA%B2%B0%EC%A0%95%ED%95%9C-%EA%B2%BD%ED%97%98