Atomic design 정리 - n2

이종호·2021년 8월 9일
0

정리

목록 보기
4/7

이 글은 Line Entry의 Atomic Design 적용기를 보고 정리해보았습니다.
아직 글의 정리가 많이 미숙합니다.

정리하면서 느낀 점

짧게 인턴생활을 하면서, Atomic디자인 패턴을 알게되고 적용하게 되었다.
그 이후로 취업 준비를 하면서 많은 면접관님들에게 Atomic을 설명해달라는 부탁을 받았는데, 잘 정리하지 못했다는 생각이 들어 이번 영상을 통해 같이 정리해보았습니다.

결론부터 말하자면, Line에서 한 것 처럼 5단계 보단 3단계로 나누는 것이 좋아보이고, 도입하기까지 설계가 너무 어렵고, 꼭 도입해야되기 보다, Atom개념만 잘 차용해도 좋을 것 같다는 생각입니다.

3단계를 적용해보진 않았지만, Atom단계 외에는 그렇게 재사용하기가 쉽지 않았기 때문입니다.
실제로 요즘에 Atomic을 쓴다는 블로그글을 잘 못본 것 같습니다.(다른 획기적인 디자인 패턴을 소개하는 글도 못본 것 같지만..)

실제로 한 면접관님께선 요즘은 Atomic을 거의 쓰지 않는다고 하시고, 본인은 Page별로 나눈 고전적인 방법을 보통 사용하신다고 하셨습니다.
저도 지금으로선 Page로 컴포넌트를 나누며, Atom에 해당되는 컴포넌트만 따로 뺴는 방식으로 작업할 것 같은데, 잘 모르겠습니다.


목차

Atomic Design을 도입한 이유

Atomic Design의 5단계

Atomic Design 적용하기

Atomic Design의 효율을 높이기 위한 작업

작업 후기

Atomic Design을 도입한 이유

기존 방법은 페이지 전체를
예전 UI개발은 페이지 전체를 통으로 하나의HTML파일에서 설계를 하는 방식
기능별 재사용성의 고민 및 페이지 상태 관리에 따른
클래스분기나 CSS상속등 많은 것들을 고려하면서 작업을 했다.

최근에는 많은 서비스들이 리액트 혹은 Vue기반의 환경으로 개발해 가면서
각 요소들을 하나의 기능으로 보고
독립적인 UIO(User Interface Object)를 만들어 냅니다.

독립적인 UIO들은 다시 그룹화 하여 다양한 컴포넌트들로 구성하여 배치하게되면
하나의 페이지를 만들어내는 방식으로 바뀌게 되었습니다.

웹 페이지를 만드는 방식이 하나의 html파일을 만드는 것에서
여러 Component를 합치는 것으로 변화했다.


실제 라인 엔트리 디자인인데

이 디자인을 보고
어떤 기준으로 컴포넌트를 분리해야 할까?
먼저 고민하게되었습니다.

그런 고민중, (그 당시)컴포넌트화를 최적으로 할 수 있는 방법론인 Atomic을 선택

Atomic 디자인 패턴은 원자, 분자, 혼합물을 웹 UI개념에 대입하여 인터페이스를 세분화한 시스템입니다.

여러 컴포넌트를 합치는 방식과 잘 어울리는 디자인 패턴으로 Atomic이 있어서 했다.


Atomic Design의 5단계

웹 디자이너 브로드 프로스트의 말 인용

Atom

  • 기본적인 구성요소
  • 라벨, 인풋, 버튼 등
  • 이것들로 나중에 UI를 깔끔하게 핸들링 할 수 있음

Molculus

  • 자체로 의미(X)
  • 의미가 흐린 atom끼리 결합한 재사용성이 가능한 원자 결합체

Organism

  • 분자들의 그룹을 모은, 같은 성질들을 가지고 있는 올가닉까지 포함한 개념
  • 본격적이 UIO기능을 볼수있는 단계
  • 화면처럼 GMB기능을 볼 수 있다.

Templates

  • Organism에 기능적인UIO를 배치하는 페이지의 레이아웃을 구성

Pages

  • Template에서 완성된 레이아웃에 실제 데이터 혹은 더미 데이터를 넣어
    특정 인스턴스 페이지 완성

Atomic Design 적용하기

  • 아톰은 그대로
  • MoleculesOrganisms을 합쳐서 Modules로 바꿈
  • TemplatePage를 더해 Template으로 바꿈


아톰

  • 닉네임
  • 별점
  • 좋아요
  • 공개여부등의 구성요소

모듈

  • 다양한 아톰들과
  • 부서적인 타이틀 썸네일
  • 을 한 카드형태 또는 리스트 형태

template

  • 하나의 페이지를 구성한것

Atomic Design의 효율을 높이기 위한 작업

Styled-Component

  • 컴포넌트를 생성과 동시에 돔 엘리먼트에 CSS스타일을 적용
  • 기존의 방식처럼, 외부 스타일 파일에서 불러오는 필요가 없어졌음
  • 이를 통해 컴포넌트의 응집성 증가
  • CSS class중첩 사용으로 복잡함을 덜어줌
  • css충돌 도 적고 ES6문법을 적용하기 때문에, 내부에서 스크립트를 이용해 제어가 가능

props를 통한 스타일 제어

일부 서비스에서 props값을 개발에만 사용하고 스타일링에는 사용되지 않는 곳도 있는데
하지만 우리는 props값에 대한 UI를 조정할 수 있게 상속을 받아
클래스 분기대신 사용할 수 있게 가능

이렇게 props를 활용하면, class보더 훨 덜 복잡하고 직관적인 제어가 가능


breakpoint api, themeProvider


css나 sass는 스타일을 선언한 뎁스를 고려하여
기존 스타일과 따로 분리되는 미디어 쿼리만을 작성하였지만,

스타일드 컴포넌트에서는 스타일 작성 블럭 내에 간단하게 작성 가능

라인 엔트리에서는 스타일드 컴포넌트 breakpoint api를 채택하여
미디어쿼리문을 작성하였고,

모바일 기준으로 작성하고, breakpoint로 태블릿 이상 사이즈를 대응하였다.

라인 엔트리에서는 컬러값 저장 및 미디어 쿼리 적용을 위해 테마 기능도 같이 사용
테마 기능을 위해
스타일드 컴포넌트 고급 기능인 테마 프로바이더를 이용해야합니다.

이 컴포넌트는 Context API를 통해
자체 아래 모든 리액트 컴포넌트에 테마를 제공하며
공통으로 사용할 수 있는 상태값에 미리 설정도 가능하며 필요할 떄 꺼내서 사용할 수 있는 장점도 있다.

먼저 공통으로 사용할 컬러값과 미디어 쿼리를 설정하고
thema.js파일에 저장

그리고 withGlobalStyle.js에 완성된 테마.js를 임포트 하고 테마 프로바이더를 적용하고 설정을 한다.

DIV root라는 id요소 밑에 스토리북이 로드되는 것을 볼 수 가 있다.

예시화면 있음


Storybook 적용

스토리북 전체에 적용될 수 있도록
.storybook/config.js를 만들어서
js파일인 jsx파일에 대한 파일 네임을 불러올 수 있도록 하고
글로벌 스타일을 addDecorator를 해주면, 테마를 적용하기 위한 모드 세팅이 완료된다.


테마 세팅이 완료가 되면
이 스토리 북은 외부 환경에 의존하지 않고 독립된 환경에서
뷰에만 집중하여 UI컴포넌트 별로 분리한 개발 환경을 제공하는 툴

리액트뿐만 아니라 vue나 Angual에서도 지원

storybook의 장점

기존에는 다양한 경우의 유스케이스에 UI를 확인하기 위해 모두 뿌려주거나, 상황별로 케이스를 뿌려줬는데,

storybook은 story추가를 통해서 다양한 유스케이스를 작성하여 보여줄 수 있다.

지금 보는것처럼 atomic과 module과 template으로 나눠진 상태
이 안에는 컴포넌트별 폴더를 만들고
해당 UIO를 보여줄 수 있다.

config파일을 통해
Story Source나
Prop Types를정의할 수 있고


props type을 미리 하단에 정의하게 되면,
개발자님들이 이걸 통해 분기처리를 하거나 상태를 받아 넘기거나,
개발에서 데이터 api를 받을 때 대응하기 쉽게하기 아래처럼
property나 porps를 정의


storysOf라고 해서이렇게 작성한다음에
어떤 상태에 대한 문구를 작성하면
아래처럼 리스트화 시켜서 전에 화면처럼 확인을 할 수 있다.


전부 다 로드된 상태라면 이런 상태


다음으로 storybook공식 페이지를 가면 Official Addons이라는 기능을 제공하는데
action, note추가, 배경 변경등 개발에 유용하게 쓸 다양한 기능을 제공하며,

필요한 옵션만 적용하고, 사용할 수 있다.

라인 엔트리에서는 Info Addon을 사용하여
코드와 property에 관련된 내용을 확인할 수 있었습니다.


마크업이 완려된 후,
페이지 개발을 넘길 때,
혹은 디자인기획 검수가 필요할 때는
정적인 페이지를 전달하여 검사하게되는데,

스크립트 세팅 후 yarn build storybook이라는 명령어를 통해
간편하게 static 페이지로 넘길 수 있습니다.

자체 서버를 돌리기 때문에 외부에서 접근이 안된다
그렇기 때문에 build storybook을 돌려서 이것들을 바깥으로 내보내야한다.

그다음에 디자이너, 기획자, 개발자님들이 확인할 수 있는 븃서버라든지 깃에 올리고 검수할 수 있다.

작업 후기

장점

  • 재사용성이 많은 UI를 잘 만들어두면 사용하기 매우 편리합니다.
  • props를 이용한 다양한 UI 스토리를 제공할 수 있고 분기작업을 할 필요가 없는 직관적인 구조로 편리
  • 사용자가 지정한 네이밍 컴포넌트로 짜여진 구조로 만들었기 때문에, 한눈에 알아보기 쉬웠습니다.

단점(어려웠던 점)

  • ES6기초 문법, 스트립트에 대한 어느정도 지식이 필요하며
  • 사전 학습이 필요
  • 만약에 사전학습이 따라오지 않는 경우, 프로젝트를 진행할 순 있지만, 효율적이고 직관적인 코드를 만들지 못할꺼라 생각
  • 컴포넌트를 어느정도까지 분리하고 정의하는데 시간이 많이 소요되기 때문에 초반 작업속도가 더디다
  • 아무래도 자잘하게 나누어야 하기 떄문에, 파일 네이밍에 대한 고민을 할수밖에 없고,
    어느정도 규칙을 정하고 하는것이 도움이 된다.

스타일 특성에 따라 엘리먼트를 하기 때문에
기존 개발처럼 CSS상속, 또는 분기가 굉장히 제한적이다.

억지로 자식에 적용하는것을 가능하지만 위험


https://www.youtube.com/watch?v=33yj-Q5v8mQ
https://ui.toast.com/weekly-pick/ko_20200213

profile
코딩은 해봐야 아는 것

0개의 댓글