[Frontend] 요구사항에 따른 디자인 시스템 설계하기

저는 팀프로젝트시 디자이너, 기획자 또는 다른 프론트 팀원으로 부터 무언가 구현 요구를 받으면 디자인 시스템을 설계하여 청사진을 만든 후에 작업을 시작합니다.

디자인 시스템이란?

디자인 시스템은 디자인 원칙, 색상 팔레트, 타이포그래피, 컴포넌트, 패턴 등과 같은 디자인 요소들을 표준화하고 일관성 있게 관리하는 시스템을 말합니다.

 

제가 생각했을 때 디자인 시스템을 설계할 때 중요하게 생각하는 요소는 아래와 같습니다.

재사용성 / 일관성 / 유지 및 보수 / 협업

 

이번 글에서는 제가 실제로 요구를 받은 것을 어떤식으로 구현(react)하는지를 예로 들어 디자인 시스템을 구축해보려합니다

 

1. 요구사항 분석

우선 어떤 요구를 받게되면 가장 먼저하는 것은 이것을 구현해야될 위치(역할)를 정합니다.

저는 React로 구현할 때 크게 2파트로 나눕니다.

A. components

-> 몇가지 작은 요소를 표시하는 재사용 가능한 컴포넌트들

B. pages

-> 큰 요소를 표시하는 재사용 불가능한(안하는) 컴포넌트들

 

예를들어 만약 "드롭다운을 구현해주세요"라는 요청이 온다면, 저는 이를 components로 구분해 작업할것입니다.

반면 "로그인 / 회원가입을 구현해주세요" 라는 요청이 온다면, 저는 Auth 페이지로 구분해 작업할것입니다.

 

이번 글 예시로는 "FAQ 페이지에 들어갈 제일 많이 질문 3개와 그것에 대한 답변을 Accordion으로 구현해주세요" 라는 요청을 받았다고 가정하겠습니다.

이는 page 보다는 component이므로 재사용성을 생각하면 구축하는 것이 좋습니다.

 

2. state와 event handler 파악하기

이제 무엇을 구현해야할지 알았으므로, 그것을 구현하기 위한 state와 event handler로는 무엇이 있는지 파악합니다.

{ state -> 유저가 화면에 변화를 봐야되는 것들

  event handler -> 유저가 어떠한 행동을 할수있는 것들 }

이를 위해 아래와 같은 단계를 따릅니다.

 

1. 사용자 앱을 사용할 때, 하게될 예상 행동과 그 행동에 따른 변화를 파악하여 나열합니다
2. 1번에서 나열한 리스트를 각각 state 또는 event handler로 구분합니다
3. 중복되는 작업을 하나로 묶어 최대한 그룹화합니다.

아래는 위에서 제공한 예시 요구사항을 처리해본것입니다.

 

• 질문 1번 드롭다운 버튼 클릭 -> event handler
• 1번 질문에 대한 답변 보여짐 -> state
• 열러있는 드롭다운 버튼(또는 닫기 버튼) 클릭 -> event handler
• 1번 답변 사라짐 -> state
• 1번 답변이 열러있는 상태에서 2번 질문 드롭다운 버튼 클릭 -> event handler
• 1번 답변 사라짐 & 2번 답변 보여짐 -> state

중복제거 및 그룹화

• 드롭다운 버튼을 누름 -> event handler
• 하나의 답변이 보여지면 다른 모든 답변이 사라짐 -> state

여기까지하면 대략적으로 어떤식으로 코드를 작성해야할지 감이 오게됩니다.

이 예시로 보면.. 닫혀있던 질문 드롭다운 버튼을 클릭하면 이벤트 헨들링 함수가 동작하여 해당 질문의 답변의 state가 변경되어 보여지도록 하고, 다른 열려있던 질문의 state가 변경되어 닫히게되도록 구현하면됩니다

 

이제 이렇게 대략적인 구현 방식을 조금 더 디테일화하기 위해 아래와 같은 단계를 따릅니다

1. state가 실제로 어떤 것을 뜻하는지 이해하고, 그것이 어떤 타입인지 파악합니다

예를들어 state는 실제로 배열의 index 번호일것입니다.

왜냐하면 질문들이 아마 배열로 데이터를 제공할 것이고, 각 질문들에 대한 index를 통해 열고, 닫는 것을 컨트롤해야하기때문입니다.

 

3. 정리하기

최종적으로 아래와 같은 그림과 코드로 정리가 가능합니다

const Accordion = ({ items }) => {
  const [expendedIndex, setExpendedIndex] = useState(0);

  const clickHandler = (nextIdx) => {
    setExpendedIndex(nextIdx);
  };

  const renderedItems = items.map((item, idx) => {
    const isExpended = idx === expendedIndex;

    return (
      <div key={item.id}>
        <div onClick={() => clickHandler(idx)}>{item.label}</div>
        {isExpended && <div>{item.content}</div>}
      </div>
    );
  });

  return <div>{renderedItems}</div>;
};

 

예시같은 작은 것을 구현할때 이러한 과정을 차례차례 다 따라하는 것은 오바지만,

저는 어떠한 요구사항이 주어지면 최대한 해당 단계를 따라 구현하려고 노력합니다.

이러면 앞서 언급한 디자인 시스템의 장점인 "재사용성"과 "협업"에 큰 도움이 되기때문입니다.