UI/UX & Component System

도전 과제: 팀원 변동 속에서의 UI 일관성 및 개발 효율성 확보

프로젝트의 팀원 변동과 초기 기획의 불확실성은 UI/UX의 일관성을 해치고 개발 속도를 저해하는 주요 원인이었습니다. 여러 개발자가 각자의 스타일로 컴포넌트를 만들 경우 발생할 수 있는 디자인 파편화를 방지하고, 새로운 팀원이 빠르게 프로젝트에 적응할 수 있도록 체계적인 디자인 시스템과 컴포넌트 개발 환경을 구축하는 것이 시급한 과제였습니다.

해결 전략: Storybook과 TailwindCSS를 활용한 컴포넌트 주도 개발

이 문제를 해결하기 위해 컴포넌트를 독립적인 환경에서 개발하고 문서화하는 `Storybook`을 도입했습니다. 이를 통해 UI 컴포넌트를 재사용 가능한 부품처럼 만들고, 모든 팀원이 이를 기준으로 작업하도록 하여 일관성을 확보했습니다. 또한, `TailwindCSS`를 활용하여 디자인 토큰(색상, 폰트, 간격 등)을 사전에 정의하고, 유틸리티 기반의 스타일링을 통해 빠르고 일관된 UI 개발이 가능하도록 했습니다.

[그림 13] Storybook을 활용한 컴포넌트 주도 개발(CDD) 워크플로우

디자이너가 Figma에서 정의한 디자인 시스템을 TailwindCSS 설정 파일에 코드로 변환하여 반영했습니다. 개발자는 이 설정을 기반으로 독립적인 Storybook 환경에서 컴포넌트를 개발하고 다양한 상태를 테스트합니다. 완성된 컴포넌트는 애플리케이션의 어느 곳에서나 일관된 스타일과 동작을 보장합니다.

// 예시: 재사용 가능한 Button 컴포넌트의 Storybook 스토리
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from 'packages/ui'; // 모노레포의 공용 UI 패키지에서 가져오기

const meta = {
  title: 'Components/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    variant: { control: 'select', options: ['primary', 'secondary'] },
    children: { control: 'text' },
  },
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

// 기본 버튼 스토리
export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'Primary Button',
  },
};

// 보조 버튼 스토리
export const Secondary: Story = {
  args: {
    variant: 'secondary',
    children: 'Secondary Button',
  },
};

결과 및 성과

Storybook을 도입하여 컴포넌트의 재사용성을 높이고, UI 관련 개발 시간을 약 30% 단축했습니다. 또한, 컴포넌트가 살아있는 문서(Living Documentation) 역할을 하여 새로운 팀원의 온보딩 과정을 크게 단축시키고, 디자이너와 개발자 간의 소통을 원활하게 만들었습니다. 이를 통해 불안정한 프로젝트 환경 속에서도 높은 품질의 UI 일관성을 유지할 수 있었습니다.