atomic design system

KoEunseo·2022년 12월 15일
0

파헤쳐보자

목록 보기
19/31

참고한 영상(라인)

https://www.youtube.com/watch?v=33yj-Q5v8mQ

프로젝트를 하기 앞서, 멘토님의 추천에 의해 아토믹 디자인 시스템에 대해 공부해보았다. 공부라기보다 빠르게 훑기정도...?

원래는 5단계로 나누어진다.
원자 < 분자 < 유기체 ..
1. atoms(원자): 1차원적인 요소. 라벨, 인풋, 버튼 등
2. molecules: atoms들이 결합해 만들어진 결합체. 검색 ui 등
3. organisms: 본격적인 ui 기능을 볼 수 있는 단계. 헤더
4. templates: 페이지 레이아웃 구성. 콘텐츠 없는 page수준 스켈레톤
5. pages: 템플릿에서 완성된 레이아웃에 실제 데이터 혹은 더미데이터를 넣어 구성한 인스턴스 페이지

위 영상에서는(라인!) 3단계로 간소화해 적용했다고 말씀했는데,
1. atoms : 닉네임, 별점, 좋아요
2. modules ( molecules + organisms) : 작은 요소가 모인 카드나 리스트형태
3. template ( templates + pages ) : 하나의 페이지형태

atomic design 효율 높이기

함수형 컴포넌트 styled component 사용

컴포넌트 생성과 동시에 스타일링을 함

props 값을 스타일링할때 그대로 사용.

$(props) => props.cancel && `
  bgc: #666;
  color: #666;
`;
const WrapButton = (props) => {
  const { children } = props;
  return (
    <Button {...props}>{children}</Button>
  );
};

//이렇게 사용한다.
<WrapButton cancel>취소하기</WrapButton>

속성값을 받아 지정 가능.

이것은 내가 프로젝트할때 무드에 따른 색을 받아서 지정할때 사용했던 방법이다!

const Button = styled.button`
  bgc: ${(props) => props.bgColor ? props.BgColor : '#333'};
`;
const FormBtnBox = (props) => {
  const {BgColor, children} = props;
  return (
    <Button BgColor={BgColor}>{children}</Button>
  );
}

<FormBtnBox BgColor="#03cf5d">저장하기</FormBtnBox>

컴포넌트 별 반응형 스타일 지정!!

import breakpoint from 'styled-components-breakpoint';
const Modal = styled.p`
  display: block;
  text-align: center;
  ${breakpoint('tablet')`
    font-size: 15px;
    line-height: 26px;
  `}
`;

(+)

카카오페이지 기술블로그

https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/

1단계부터 5단계가 있으니 스텝별로 나아가는 개념인 줄 알았는데, ui패턴을 카테고리화하는 것이라고 한다. 쪼개기라기보다 분류하기라는 의미인듯.

사실 프로젝트에 적용하면서 서로 이해도가 다르기도 하고, 이해에 따라 기술로 적용할 수 있는 것도 다르기에 아쉬운점이 많았다.
예를 들면 나는 atom을 다수 만들었지만 다른 팀원들은 atom을 한개도 만들지 않았다는것... 그리고 module이 너무 많고 기준이 다소 모호했다.
template이 거의 없고 module에 컴포넌트를 두어서 나중에 메뉴에 적용할때 팀원에게 뭐가 제일 상위 컴포넌트인지 일일히 물어봐야했다.. 우리는 모달을 페이지로 쓰니까 하나의 모달을 template로 해야한다 생각했는데 팀원들은 단순히 페이지가 아니니까 module에 위치시킨 것 같다. 이건 더 공부하고 얘기를 해봐야겠지만.. 일단 시간이 없어서 파일구조에 대해서는 언급하지 않았었다. 리팩토링을 하기로 했으니 월요일 회의때 언급을 해야겠다!

molecule과 organism을 합쳐서 2단계로 했기 때문에 발생한 문제같기도 한데, 거의 모든 컴포넌트들이 module에 있으니 내가 만든 컴포넌트인데도 뭐가 하위 컴포넌트고 상위컴포넌트인지 상당히 헷갈렸다. 네이밍의 문제일까...ㅠ0ㅠ 더 세분화하면 덜 헷깔릴 것 같다.


이 부분에 대해 굉장히 공감을 했는데, 모달 컴포넌트가 예시의 A과 같은 형태로 되어있어서 재사용이 불가능하고 모달.js에 복붙해서 일일히 수정을 거쳐야했다. 그리고 컴포넌트에 오버라이딩이 안돼서 스타일링도 따로 주어야했다... 이게 너무너무 불편했고 시간이 없는데도 불구하고 내가 때려고치고싶었음...^^ 나 헛발질도 잘하지만 컴포넌트 분리도 잘하는데...

compound components 합성 컴포넌트

https://kentcdodds.com/blog/compound-components-with-react-hooks

https://im-developer.tistory.com/238
리덕스는 배웠는데, contextAPI는 안써봄. 뭐가 다른걸까? 공부를 먼저 해보고 다시 읽어봐야할 것 같다. 비슷한 기능을 하는 것 같은데...

컴포넌트를 제어하는 것들은 아토믹 컴포넌트 외부에서 주입한다.

컴포넌트를 제어할 수 있는 ui 상태나 동작에 대한 이벤트핸들러를 외부에서 처리할수있도록 props로 다룬다!! 이것도 생각지도 못했지만 필요성은 느꼈던 문제.

아토믹 컴포넌트의 원천은 디자이너가 작성한 피그마 컴포넌트

이건 우리가 하려면 할 수 있었겠지만... 취직하면 하기로 하자.

레이아웃과 관련된 스타일은 외부에서 주입

마진, 패딩등은 아토믹 컴포넌트가 아닌 외부에서 주입하도록 한다! 이거 정말로 필요로 했던 해결방안이다...!!
인터페이스를 내가 작성해본적은 없는데 공부해보고싶은 의지가 불끈불끈 생기는구만... 그리고 타입스크립트를 썼구나...
기업의 기술블로그를 이렇게 뜯어본적은 없는데 정말 유익한 것 같다!! 카카오페이지는 내가 수시로 쓰는 어플이기도 하고 재미있다.

// organism/Comment.tsx
interface CommentProps extends HTMLAttributes<HTMLDivElement> {
  name: string;
}

function Comment({ name, children, ...props }: CommentProps) {
  return (
    <div {...props}>
    	<Text>{name}</Text>
      <Text>{children}</Text>
    </div>
  )
}

// pages/Product.tsx
function ProductPage ({
  commentList,
  ...
}) {
  return (
    <div>
      ...
      {
        commentList.map(comment => <Comment style={{margin: '20px 40px', flex: 1}}/>)
      }
    </div>
  )
}

// pages/Comment.tsx
function CommentPage({
  ...
}) {
  return (
    <div>
      ...
      <Comment style={{ width: '80%', margin: '0 auto'}}>
    </div>
  )
}

Atomic Workflow

https://atomicdesign.bradfrost.com/chapter-4/#step-2-prepare-for-screenshotting

0개의 댓글