일상이 개발

디자이너와 협업하기 좋은 React 컴포넌트 작성법 – 일관성과 재사용성을 높이는 실전 설계 전략

아빠고미 2025. 5. 2. 03:30

디자이너와 협업하기 좋은 React 컴포넌트 작성법 – UI 일관성과 재사용성을 높이는 실전 설계 전략

디자이너는 UI를, 개발자는 컴포넌트를 설계합니다. 하지만 그 둘이 '협업'이라는 이름 아래 엇갈리는 순간, React 앱의 UI는 일관성을 잃고 복잡해지기 시작하죠 😵‍💫

디자이너와 협업하기 좋은 React 컴포넌트 작성법 – 일관성과 재사용성을 높이는 실전 설계 전략

이번 글에서는 디자이너와 협업할 때 **컴포넌트를 어떻게 쪼개고**, **어떻게 재사용성을 높이며**, **디자인 시스템을 코드로 구현**할 수 있는지, 실무 중심의 노하우를 정리해보겠습니다.

1. 🎨 디자이너와의 협업, 왜 중요할까?

UI를 구성하는 컴포넌트는 디자이너가 만든 디자인을 코드로 번역한 결과물이에요. 그렇기 때문에 협업이 어긋나면 다음과 같은 일이 벌어집니다:

❌ 흔한 문제들

Button 스타일이 페이지마다 다름
디자이너는 분명 같은 컴포넌트라고 했는데, 개발자는 새로 만듦
정렬, 여백, 컬러 등 눈에 안 보이는 불일치 다수 발생

➡️ 이를 해결하려면 디자인을 코드로 해석하는 능력이 필요합니다.

2. 📐 UI를 컴포넌트로 분리하는 기준

React 앱을 처음 설계할 때 가장 먼저 해야 할 일은 **컴포넌트 분리 기준을 정하는 것**이에요.

✅ 어떤 기준으로 나눠야 할까?

재사용 가능성: 같은 UI가 반복되나요?
역할 독립성: 단일 책임을 갖고 있나요?
스타일 일관성: 디자인 시스템 내 토큰을 활용하나요?

🔍 Figma를 보고 컴포넌트 추출하기

예: 로그인 페이지 디자인을 받았다면?

<Input /> 컴포넌트
<Button /> 컴포넌트
<LoginForm /> 컨테이너

Figma의 컴포넌트와 Variants 기능을 활용하면 개발자도 재사용 범위를 쉽게 파악할 수 있어요 👀

3. 🧱 디자인 시스템을 컴포넌트에 반영하는 방법

디자인 시스템은 UI 구성의 언어예요. 이 언어를 제대로 이해하고 컴포넌트에 녹여내야 일관된 UI가 만들어집니다.

🎯 디자인 시스템 핵심 구성

Color palette
Spacing (margin, padding)
Typography (폰트, 크기, 줄간격 등)
Radius, Shadow 등 효과값
UI 패턴 (버튼, 입력, 카드 등)

✅ 토큰 기반 스타일 정의

// styles/tokens/colors.js
export const COLORS = {
  primary: '#4A90E2',
  secondary: '#50E3C2',
  error: '#FF3B30',
};

// styles/tokens/spacing.js
export const SPACING = {
  xs: '4px',
  sm: '8px',
  md: '16px',
  lg: '24px',
};

컴포넌트를 만들 때, 직접 색상이나 여백 값을 넣지 말고 위와 같은 토큰을 활용하세요. 👉 유지보수성과 디자이너와의 소통 효율이 확 높아집니다!

4. 🧩 컴포넌트 스타일 구성 전략

React에서 스타일링을 할 땐 다양한 방식이 존재하죠. 하지만 디자이너 협업에 최적화된 스타일 구조가 따로 있습니다.

🎨 추천 구조: 컴포넌트 단위 분리 + Token 기반

components/
├── Button/
│   ├── index.jsx
│   ├── style.module.css
│   └── theme.js (컬러/사이즈 map)
├── Input/
│   ├── index.jsx
│   └── style.module.css

💡 CSS 방식 선택 팁

CSS Module: 클래스 이름 충돌 방지 + 파일 분리
Tailwind CSS: 디자인 시스템 반영이 빠름 + 빠른 개발
Emotion / Styled Components: props 기반 스타일링이 필요한 경우

👉 중요한 건 팀이 협의한 하나의 스타일 가이드를 모두가 따라가는 거예요!

5. 📚 Storybook으로 UI 컴포넌트 문서화

디자이너와 개발자가 협업할 때 가장 강력한 도구는 바로 Storybook이에요 💪

📌 Storybook이란?

각 컴포넌트를 독립적으로 테스트하고, 다양한 상태/변형을 문서화할 수 있는 도구입니다.

✅ 설치

npx storybook@latest init

✅ 예시: Button.stories.jsx

import Button from './index';

export default {
  title: 'Components/Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  label: '확인',
  variant: 'primary',
};

✅ 장점

💬 디자이너와 UI 상태를 실시간 공유 가능
🧪 테스트와 문서화를 동시에
🧠 컴포넌트의 책임과 역할이 명확해짐

6. 🤝 디자이너와 소통하는 커뮤니케이션 팁

훌륭한 UI는 디자인만으로 완성되지 않습니다. **디자인 의도를 이해하고, 정확히 구현하는 개발자의 커뮤니케이션 능력**이 함께 필요해요.

✅ UI 설계 시 물어봐야 할 질문들

🧐 이 버튼은 어디서 또 사용되나요?
🔄 어떤 상태 변화(hover, focus, disabled 등)를 고려해야 하나요?
📐 여백, 정렬 기준은 공통인가요, 예외인가요?
🔤 텍스트 길이에 따른 대응은 어떻게 하나요?

🛠️ 커뮤니케이션 도구

📄 Notion: 컴포넌트 문서화 및 개발 가이드 공유
🎨 Figma: UI 의도 파악 및 토큰 확인
🧪 Storybook: 실시간 상태 공유 및 확인

7. 💡 실전 사례 – 로그인 폼 컴포넌트 설계

디자이너로부터 로그인 화면을 전달받았다고 가정해볼게요. 어떻게 컴포넌트를 나누고 스타일을 관리할 수 있을까요?

📁 구조 설계 예시

features/
├── auth/
│   ├── LoginPage.jsx
│   ├── LoginForm.jsx
│   └── hooks/useLoginForm.js
components/
├── Input/
├── Button/
└── FormLabel/

✅ 설계 원칙

LoginForm은 Input, Button, Label 컴포넌트를 조합
버튼 스타일은 디자인 시스템의 토큰 기반
form validation은 useForm + yup 조합

🧩 결과

컴포넌트 단위로 테스트 가능
다른 페이지에서도 동일한 Input/Button 재사용
디자인 변경에도 유지보수 간편

8. 🧠 마무리 – 협업을 위한 컴포넌트 설계란?

컴포넌트를 잘 만든다는 건 단순히 코드가 예쁜 게 아니라, **팀 전체가 빠르게 이해하고, 안정적으로 유지하고, 쉽게 확장할 수 있도록 만드는 것**입니다.

✨ 핵심 요약

디자인 시스템을 코드에 반영하자
컴포넌트는 역할, 재사용성, 스타일 기준으로 분리하자
Storybook을 활용해 디자이너와 시각적으로 소통하자
공통 요소는 토큰화, 스타일은 일관되게
커뮤니케이션은 빠르게, 명확하게

이 글을 통해 디자이너와 더욱 원활하게 협업하고, 더 나은 UI를 만들 수 있게 되길 바랍니다!

긴 글을 읽어주셔서 감사합니다! 공감과 댓글은 큰 힘이 됩니다 🙌

저작자표시 비영리 변경금지 (새창열림)