이 글은 Line Entry의 Atomic Design 적용기를 보고 정리해보았습니다.
아직 글의 정리가 많이 미숙합니다.
짧게 인턴생활을 하면서, Atomic디자인 패턴을 알게되고 적용하게 되었다.
그 이후로 취업 준비를 하면서 많은 면접관님들에게 Atomic을 설명해달라는 부탁을 받았는데, 잘 정리하지 못했다는 생각이 들어 이번 영상을 통해 같이 정리해보았습니다.
결론부터 말하자면, Line에서 한 것 처럼 5단계 보단 3단계로 나누는 것이 좋아보이고, 도입하기까지 설계가 너무 어렵고, 꼭 도입해야되기 보다, Atom개념만 잘 차용해도 좋을 것 같다는 생각입니다.
3단계를 적용해보진 않았지만, Atom단계 외에는 그렇게 재사용하기가 쉽지 않았기 때문입니다.
실제로 요즘에 Atomic을 쓴다는 블로그글을 잘 못본 것 같습니다.(다른 획기적인 디자인 패턴을 소개하는 글도 못본 것 같지만..)
실제로 한 면접관님께선 요즘은 Atomic을 거의 쓰지 않는다고 하시고, 본인은 Page별로 나눈 고전적인 방법을 보통 사용하신다고 하셨습니다.
저도 지금으로선 Page로 컴포넌트를 나누며, Atom에 해당되는 컴포넌트만 따로 뺴는 방식으로 작업할 것 같은데, 잘 모르겠습니다.
기존 방법은 페이지 전체를
예전 UI개발은 페이지 전체를 통으로 하나의HTML파일에서 설계를 하는 방식
기능별 재사용성의 고민 및 페이지 상태 관리에 따른
클래스분기나 CSS상속등 많은 것들을 고려하면서 작업을 했다.
최근에는 많은 서비스들이 리액트 혹은 Vue기반의 환경으로 개발해 가면서
각 요소들을 하나의 기능으로 보고
독립적인 UIO(User Interface Object)를 만들어 냅니다.
독립적인 UIO들은 다시 그룹화 하여 다양한 컴포넌트들로 구성하여 배치하게되면
하나의 페이지를 만들어내는 방식으로 바뀌게 되었습니다.
웹 페이지를 만드는 방식이 하나의 html파일을 만드는 것에서
여러 Component를 합치는 것으로 변화했다.
실제 라인 엔트리 디자인인데
이 디자인을 보고
어떤 기준으로 컴포넌트를 분리해야 할까?
먼저 고민하게되었습니다.
그런 고민중, (그 당시)컴포넌트화를 최적으로 할 수 있는 방법론인 Atomic을 선택
Atomic 디자인 패턴
은 원자, 분자, 혼합물을 웹 UI개념에 대입하여 인터페이스를 세분화한 시스템입니다.
여러 컴포넌트를 합치는 방식과 잘 어울리는 디자인 패턴으로 Atomic이 있어서 했다.
웹 디자이너 브로드 프로스트의 말 인용
Organism
에 기능적인UIO를 배치하는 페이지의 레이아웃을 구성Template
에서 완성된 레이아웃에 실제 데이터 혹은 더미 데이터를 넣어Molecules
와 Organisms
을 합쳐서 Modules
로 바꿈Template
와 Page
를 더해 Template
으로 바꿈아톰
모듈
template
일부 서비스에서 props값을 개발에만 사용하고 스타일링에는 사용되지 않는 곳도 있는데
하지만 우리는 props값에 대한 UI를 조정할 수 있게 상속을 받아
클래스 분기대신 사용할 수 있게 가능
이렇게 props를 활용하면, class보더 훨 덜 복잡하고 직관적인 제어가 가능
css나 sass는 스타일을 선언한 뎁스를 고려하여
기존 스타일과 따로 분리되는 미디어 쿼리만을 작성하였지만,
스타일드 컴포넌트에서는 스타일 작성 블럭 내에 간단하게 작성 가능
라인 엔트리에서는 스타일드 컴포넌트 breakpoint api를 채택하여
미디어쿼리문을 작성하였고,
모바일 기준으로 작성하고, breakpoint로 태블릿 이상 사이즈를 대응하였다.
라인 엔트리에서는 컬러값 저장 및 미디어 쿼리 적용을 위해 테마 기능도 같이 사용
테마 기능을 위해
스타일드 컴포넌트 고급 기능인 테마 프로바이더를 이용해야합니다.
이 컴포넌트는 Context API를 통해
자체 아래 모든 리액트 컴포넌트에 테마를 제공하며
공통으로 사용할 수 있는 상태값에 미리 설정도 가능하며 필요할 떄 꺼내서 사용할 수 있는 장점도 있다.
먼저 공통으로 사용할 컬러값과 미디어 쿼리를 설정하고
thema.js파일에 저장
그리고 withGlobalStyle.js에 완성된 테마.js를 임포트 하고 테마 프로바이더를 적용하고 설정을 한다.
DIV root라는 id요소 밑에 스토리북이 로드되는 것을 볼 수 가 있다.
예시화면 있음
스토리북 전체에 적용될 수 있도록
.storybook/config.js
를 만들어서
js파일인 jsx파일에 대한 파일 네임을 불러올 수 있도록 하고
글로벌 스타일을 addDecorator를 해주면, 테마를 적용하기 위한 모드 세팅이 완료된다.
테마 세팅이 완료가 되면
이 스토리 북은 외부 환경에 의존하지 않고 독립된 환경에서
뷰에만 집중하여 UI컴포넌트 별로 분리한 개발 환경을 제공하는 툴
리액트뿐만 아니라 vue나 Angual에서도 지원
기존에는 다양한 경우의 유스케이스에 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을 돌려서 이것들을 바깥으로 내보내야한다.
그다음에 디자이너, 기획자, 개발자님들이 확인할 수 있는 븃서버라든지 깃에 올리고 검수할 수 있다.
스타일 특성에 따라 엘리먼트를 하기 때문에
기존 개발처럼 CSS상속, 또는 분기가 굉장히 제한적이다.
억지로 자식에 적용하는것을 가능하지만 위험
https://www.youtube.com/watch?v=33yj-Q5v8mQ
https://ui.toast.com/weekly-pick/ko_20200213