디자인 시스템 개발 일지 5 ( 컴포넌트 )

  • 20/1/2026
  • 3-minute read

구현할 컴포넌트의 타입 정리

-> 대부분의 디자인 시스템은 다음과 같은 대분류를 갖는다.

Foundation Tokens

  • 컴포넌트를 구성하는 기본적인 단위이다.
    • ex) typography, radius, color, padding 등등이 있다.

Icons

  • 사용할 아이콘들을 정의한다.
    • 피그마에서 export한 png 파일들을 스크립트를 통해 변환하여 리액트에서 활용할 수 있는 svg 컴포넌트로 변환할 예정이다.

Layout Components

  • 레이아웃을 정의하는 컴포넌트이다.
    • ex) Layout, VStack, HStack 등이 있다.
  • 이후 구현할 복잡한 컴포넌트들을 구성할 기본 토대가 된다.
    • 다른 컴포넌트 구현 이전에 먼저 설계되면 작업하기 편하다.

Components

  • 주로 활용할 컴포넌트들이다.
    • ex) Chip, Button, Fab, CTAButton 등등 다양하게 구성되어 있다.
  • 디자이너분이 정리해주셔서, 해당 컴포넌트에서 맞춰서 작업할 예정이다.

Compound Component 패턴

Compound Component 패턴이란?

  • 복합 컴포넌트 패턴은 하나의 기능을 수행하기 위해 여러 컴포넌트들이 협력해서 하나의 단위로 동작하게 만드는 설계 패턴이다.
  • 대표적인 예시가 select 태그와 option 태그이다. ( html 기본 태그 )

Compound Component 패턴을 활용하는 이유

일반적인 컴포넌트는 대부분의 옵션을 props로 넘긴다.

간단한 Button, Chip, Flex와 같은 컴포넌트들은 옵션을 props로 넘기면 처리가 되지만, dialog 같은 경우는 어떨까?

dialog 컴포넌트는 다음과 같은 기능들을 제공해야 한다.

  • dialog를 트리거하는 기능
  • dialog를 닫는 기능
  • dialog가 띄워지는 overlay 화면
  • dialog의 내용을 감싸는 container
  • dialog의 내용

dialog의 내용과, 내용을 감싸는 container 정도는 단일 컴포넌트로 구현할 수는 있지만, 트리거하는 기능 & 닫는 기능 등 다양한 기능들을 모두 props로 처리하기에는 번거롭다. 그래서 다음과 같은 방식을 활용한다.

< Compound Component의 사용 예시 >

<Dialog>
      {/* asChild를 써서 디자인 시스템의 버튼 스타일을 그대로 유지할 수 있음 */}
      <Dialog.Trigger asChild>
		  프로필 수정
	  </Dialog.Trigger>

      <Dialog.Content>
        <h2 className="text-xl font-bold">프로필 편집</h2>
        <p className="mt-2 text-gray-600">이름과 이메일을 수정하세요.</p>
        
        <hr className="my-4" /> {/* 유연한 마크업 삽입 가능 */}

        <div className="flex justify-end gap-2">
          <Dialog.Close asChild>
            <button className="px-4 py-2 border rounded">취소</button>
          </Dialog.Close>
          <button className="px-4 py-2 bg-blue-600 text-white rounded">저장</button>
        </div>
      </Dialog.Content>
    </Dialog>
  • 컴포넌트를 trigger하는 기능은 Dialog.Trigger에 구현되어 있다.
  • 컴포넌트를 닫는 기능은 Dialog.Close에 구현되어 있다.
  • 컴포넌트 Trigger 결과 보여지는 Dialog 내용은 Dialog.Content에 구현되어 있다.

Compound Component 패턴의 장점

위의 코드와 같이 디자인 시스템을 구성할 때에는 Compound Component 패턴을 주로 활용하게 되는데, 장점들은 다음과 같다.

  1. 높은 자율성
    • 컴포넌트들이 들어갈 영역을 정의해주기에 높은 자율성을 갖는다.
    • 내부에 컴포넌트 위치들을 자율적으로 조정할 수 있고, 필요한 경우 className을 주입해서 세부적인 조정 또한 가능하다.
  2. 선언적인 프로그래밍
    • 선언적으로 프로그래밍이 가능하다.
    • 가령 Trigger 컴포넌트가 존재하지 않는다면 어떨까? Dialog의 Content 렌더링 여부를 결정하기 위해 컴포넌트 내부적으로 열림, 닫힘 상태를 관리해야 하고, 상태에 따른 분기처리 또한 필요하다.
    • 하지만, 모달의 상태관리를 Trigger와 묶어서 내부적으로 처리해주기 때문에, 사용자는 열림, 닫힘과 같은 상태 관리를 compound component에 전적으로 위임할 수 있다.
    • 코드를 읽는 입장에서도, 절차적으로 action이 정의된 것이 아닌 선언적으로 정의되어 있기에 가독성이 좋다.

복잡한 구조를 갖는 컴포넌트의 경우 Compound Component의 장점을 최대한 살려서 구현할 예정이다.

테스크 분배

팀장을 맡고 있었기 때문에 내가 테스크를 분배해야 하는데, 테스크 분배가 항상 어려운 것 같다.

분배 기준

보통 다음과 같은 기준으로 분배한다.

  • 다른 작업을 하기 전에 앞서서 구현할 수 있는걸 우선적으로 구현하도록 배정
  • 한 사람에게 여러 작업을 묶어서 분배하는 경우, 각 작업을 연관성있는 작업으로 묶어서 배정
    • 팀원들끼리 서로 의존성을 갖는 작업들을 하지 않도록

이 기준으로 분배하게 되면, 테스크들이 각각 균일한 볼륨을 갖진 않는데, 이럴 때에는 각 팀원들이 해왔던 경험, 작업 가능한 시간이 어느 정도인지 파악해서 분배하였다.

개발일지